> ## Documentation Index
> Fetch the complete documentation index at: https://www.propeldata.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Breakpoints

> Define responsive breakpoints for your layout.

<div />

Each breakpoint matches a fixed screen width. Values are `min-width` based and apply when the screen width is equal or greater.

| **Size** | **Description**     | **Width** |
| -------- | ------------------- | --------- |
| initial  | Phones (portrait)   | `0px`     |
| xs       | Phones (landscape)  | `520px`   |
| sm       | Tablets (portrait)  | `768px`   |
| md       | Tablets (landscape) | `1024px`  |
| lg       | Laptops             | `1280px`  |
| xl       | Desktops            | `1640px`  |

## Usage

Most component size and layout props will accept an additional `Responsive` object shape for modifying the given prop across breakpoints.

Each size maps to a corresponding key, the value of each will be applied when the screen size is greater than or equal to the named breakpoint.

```jsx theme={"system"}
<Heading
  size={{
    initial: "3",
    md: "5",
    xl: "7",
  }}
/>
```