Scroll Area

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

Jokester began sneaking into the castle in the middle of the night and leaving jokes all over the place: under the king's pillow, in his soup, even in the royal toilet. The king was furious, but he couldn't seem to stop Jokester. And then, one day, the people of the kingdom discovered that the jokes left by Jokester were so funny that they couldn't help but laugh. And once they started laughing, they couldn't stop.

Installation

pnpm dlx shadcn@latest add https://neobrutalism.dev/r/scroll-area.json

Usage

import { ScrollArea } from '@/components/ui/scroll-area'

<ScrollArea className="rounded-base h-[200px] w-[350px] text-main-foreground border-2 border-border bg-main p-4 shadow-shadow">
  Jokester began sneaking into the castle in the middle of the night and
  leaving jokes all over the place: under the king&apos;s pillow, in his
  soup, even in the royal toilet. The king was furious, but he couldn&apos;t
  seem to stop Jokester. And then, one day, the people of the kingdom
  discovered that the jokes left by Jokester were so funny that they
  couldn&apos;t help but laugh. And once they started laughing, they
  couldn&apos;t stop.
</ScrollArea>

Examples

Default

Horizontal

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