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

# Scrollable

`scrollable` lets the user drag content in one direction. Its `style.spacing` is the gap between
direct scroll items in the scroll direction. Use padding for edge spacing so that space remains part
of the scrollable content.

## Properties

| Property            | Accepted value                 | Description                                                   |
| ------------------- | ------------------------------ | ------------------------------------------------------------- |
| `horizontal`        | `boolean`                      | Scroll horizontally when `true`; otherwise scroll vertically. |
| `snap`              | `boolean`                      | Snap children to a position while scrolling.                  |
| `snapPosition`      | `"start" \| "center" \| "end"` | Alignment used when snapping.                                 |
| `userScrollEnabled` | `boolean`                      | Enables or disables dragging. Defaults to enabled.            |
| `style`             | `StyleProperties`              | Layout and appearance values.                                 |
| `children`          | `ReactNode`                    | Scrollable content.                                           |
| `key`               | `string \| number`             | React key for dynamic scrollables.                            |
| `class`             | `string`                       | Registered style name for this node only.                     |

## Example

```tsx theme={null}
<scrollable
  horizontal
  style={{ paddingStart: 16, paddingEnd: 16, spacing: 12 }}
>
  {products.map((product) => (
    <box key={product.id} style={{ width: 160, height: 220 }}>
      <text>{product.title}</text>
    </box>
  ))}
</scrollable>
```

Prefer `paddingStart` and `paddingEnd` over margins on the scrollable itself. Margins reduce the
usable scroll area.