ScrollArea
Native scrolling with Seed's thin scrollbars.
import { ScrollArea } from "@flinbu/seed";A changelog
import { ScrollArea } from "@flinbu/seed";
<ScrollArea aria-label="Changelog" className="h-48 w-full max-w-sm rounded-xl border border-secondary bg-primary">
<ol className="m-0 flex list-none flex-col gap-sm p-base">
{Array.from({ length: 12 }, (_, i) => <li key={i} className="text-secondary body-body-3-regular"><span className="font-mono text-primary">v2.{12 - i}.0</span>: tokens and components updated.</li>)}
</ol>
</ScrollArea>Use it for
- Panels and lists with a fixed height.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
orientation | 'vertical''horizontal''both' | 'vertical' | Scrollbars to show. |
aria-label | string | – | Names the region. |
viewportClassName | string | – | Classes for the viewport. |
Accessibility
- The viewport is focusable so it scrolls with the keyboard; aria-label names it as a region.