Scroll Area

A container with custom-styled scrollbars for managing overflow content in both directions.

Preview

Destination List

All Zostel Destinations

Manali
Rishikesh
Jaipur
Varanasi
Goa
Kochi
Pondicherry
Coorg
Darjeeling
Gangtok
Shillong
Udaipur
Jodhpur
Pushkar
Mcleodganj
Bir Billing
Kasol
Spiti Valley
Leh Ladakh
Hampi

Usage

tsx
import { ScrollArea, ScrollBar } from "zostel-ui";

{/* Vertical scrolling */}
<ScrollArea className="h-64 w-56 rounded-md border">
  <div className="p-4">
    {items.map((item) => (
      <div key={item}>{item}</div>
    ))}
  </div>
</ScrollArea>

{/* Horizontal scrolling */}
<ScrollArea className="w-full whitespace-nowrap rounded-md border">
  <div className="flex gap-4 p-4">
    {items.map((item) => (
      <div key={item} className="w-32 shrink-0">{item}</div>
    ))}
  </div>
  <ScrollBar orientation="horizontal" />
</ScrollArea>

Props

className
Type: string
Default: —

CSS classes for the scroll area container

children
Type: ReactNode
Default: —

Scrollable content

orientation
Type: "vertical" | "horizontal"
Default: "vertical"

ScrollBar orientation (on ScrollBar)
Previous Skeleton Next Aspect Ratio