Scroll Area

Augments native scroll functionality for custom, cross-browser styling.

Installation

pnpm dlx cubix@latest add scroll-area --base aria

Usage

Import

import { ScrollArea, ScrollBar } from "@/components/cubix/scroll-area"

Example

<ScrollArea className="h-[200px] w-[350px] rounded-md border p-4">
  Your scrollable content here.
</ScrollArea>

Composition

Use the following composition to build a ScrollArea:

ScrollArea
└── ScrollBar

Horizontal

Use ScrollBar with orientation="horizontal" for horizontal scrolling.

Photo by Ornella Binni

Photo by Tom Byrom

Photo by Vladimir Malyavko

<ScrollArea className="w-96 rounded-md border whitespace-nowrap">
  <div className="flex w-max space-x-4 p-4">
    {works.map((artwork) => (
      <figure key={artwork.artist} className="shrink-0">
        <div className="aspect-square w-[150px] rounded-md bg-muted" />
        <figcaption className="pt-2 text-xs text-muted-foreground">
          Photo by{" "}
          <span className="font-semibold text-foreground">
            {artwork.artist}
          </span>
        </figcaption>
      </figure>
    ))}
  </div>
  <ScrollBar orientation="horizontal" />
</ScrollArea>

API Reference

See also the Base UI Scroll Area documentation for primitive props.

ScrollArea

Prop	Type	Default	Description
className	string	-	Additional Tailwind classes merged with the component styles (last one wins).
children	React.ReactNode	-	Content rendered inside the scroll viewport.

ScrollBar

Prop	Type	Default	Description
orientation	"vertical" \| "horizontal"	"vertical"	Direction of the scrollbar.
className	string	-	Additional Tailwind classes merged with the component styles (last one wins).

Tags