Surfaces
@rahhal/ui/aspect-ratio · @rahhal/ui/scroll-area · @rahhal/ui/separator

Layout primitives

View as Markdown

Three small but essential layout primitives shipped together: `<AspectRatio>` (lock a ratio for media), `<ScrollArea>` (themed custom scrollbar), and `<Separator>` (semantic divider). They show up everywhere — they get one shared catalog page so the sidebar stays focused on richer components.

Examples

AspectRatio — 16:9 cover

16 : 9

Separator — horizontal & vertical

Above the line
Below the line
Drafts
Published
Archived

ScrollArea — themed scrollbar

  • Riyadh
  • Jeddah
  • AlUla
  • Abha
  • Tabuk
  • Madinah
  • Makkah
  • Dammam
  • Khobar
  • Yanbu
  • Hail
  • Buraidah
  • Najran
  • Jazan