# Layout primitives

`<AspectRatio>` (lock a media ratio), `<ScrollArea>` (themed custom scrollbar), and `<Separator>` (semantic divider). Three small but essential primitives shipped in one catalog page.

[View examples](https://marsam.rahhal.app/components/primitives) · [Agent index](https://marsam.rahhal.app/llms.txt)

**Import:** `@rahhal/ui/aspect-ratio · @rahhal/ui/scroll-area · @rahhal/ui/separator`

**Category:** `surfaces`

## Components

| component | purpose |
| --- | --- |
| AspectRatio | wrap a child to lock its aspect ratio (`16/9`, `4/3`, `1`) |
| ScrollArea | themed custom scrollbar — the same chrome the sidebar uses |
| Separator | semantic divider, horizontal or vertical; pass `decorative={false}` when the gap carries meaning |

## Notes

- `<AspectRatio>` and `<ScrollArea>` come from Radix; `<Separator>` does too. Re-exporting them keeps consumers on a single `@rahhal/ui` import surface.
- Vertical `<ScrollArea>` uses a logical `border-s` so the scrollbar sits on the **end** edge in LTR (right) and **start** edge in RTL (left) — matching the reading direction.