# useDimensions

**📖 Live documentation:** https://cds.coinbase.com/hooks/useDimensions/?platform=mobile

Measures the screen dimensions and status bar height.

## Import

```tsx
import { useDimensions } from '@coinbase/cds-mobile/hooks/useDimensions'
```

## API

### Parameters

None. The hook takes no parameters.

### Returns

Returns an object with the following properties:

```tsx
type Return = {
  screenHeight: number;
  screenWidth: number;
  statusBarHeight: number;
};
```

- `screenHeight`: The total height of the device screen in points (DIP).
- `screenWidth`: The total width of the device screen in points (DIP).
- `statusBarHeight`: The height of the device's status bar in points (DIP).

:::tip
All dimensions are in points (DIP - Density Independent Pixels), not physical pixels. Values automatically update on device orientation changes. The status bar height varies by device type, orientation, and presence of notches or dynamic islands.
:::

## Examples

### Basic usage

```tsx
function Example() {
  const { screenWidth, screenHeight, statusBarHeight } = useDimensions();

  return (
    <Box backgroundColor="bgAlternate" padding={3} borderRadius={300} width="100%">
      <VStack gap={2}>
        <Text font="headline">
          Screen dimensions: {screenWidth}x{screenHeight}
        </Text>
        <Text font="headline">Status bar height: {statusBarHeight}px</Text>
      </VStack>
    </Box>
  );
}
```

### With Safe Area Layout

```tsx
function Example() {
  const { screenHeight, statusBarHeight } = useDimensions();
  const contentHeight = screenHeight - statusBarHeight;

  return (
    <Box backgroundColor="bgAlternate" height={contentHeight} paddingTop={statusBarHeight}>
      <Text font="headline">Content below status bar</Text>
    </Box>
  );
}
```

