Scroll area

A scrollable region with a thin scrollbar in the village's colours, keyboard-focusable like native scrolling.

Installation

npx rasengan-ui add scroll-area

Or with the shadcn CLI, from the registry:

npx shadcn@latest add https://ui.rasengan.dev/r/base/scroll-area.json

Usage

import { ScrollArea } from "@/components/ui/scroll-area";
 
export function Tags({ tags }: { tags: string[] }) {
  return (
    <ScrollArea className="h-56 w-56 rounded-lg border-village">
      <ul className="p-4">
        {tags.map((tag) => (
          <li key={tag}>{tag}</li>
        ))}
      </ul>
    </ScrollArea>
  );
}

Horizontal

The area has a vertical scrollbar. Add <ScrollBar orientation="horizontal" /> inside it for wide content.

Villages

The thumb is --border coloured and follows the village's radius.

Accessibility

• The viewport is focusable, so the keyboard scrolls it with the arrows and Page Up / Page Down.
• Give the area an aria-label when its content doesn't name itself.

API reference

The parts of Base UI's Scroll Area: