The ScrollArea component provides a scrollable container with customizable, accessible scrollbars.
Installation
import { ScrollArea } from "@craftdotui/baseui/components/scroll-area";
<ScrollArea className="h-72 w-48">
<div className="p-4">
{/* Long content */}
</div>
</ScrollArea>
Components
For simple usage, use the composed ScrollArea component. For advanced customization, use the individual components:
import {
ScrollAreaRoot,
ScrollAreaViewport,
ScrollAreaContent,
ScrollAreaScrollbar,
ScrollAreaThumb,
ScrollAreaCorner,
} from "@craftdotui/baseui/components/scroll-area";
ScrollArea (Composed)
Content to make scrollable.
ScrollAreaScrollbar
Scrollbar orientation. Options: vertical, horizontal
Examples
Basic Scroll Area
<ScrollArea className="h-96 w-full rounded-md border p-4">
<div className="space-y-4">
{Array.from({ length: 50 }).map((_, i) => (
<div key={i}>Item {i + 1}</div>
))}
</div>
</ScrollArea>
Horizontal Scrolling
<ScrollArea className="w-96 whitespace-nowrap rounded-md border p-4">
<div className="flex gap-4">
{Array.from({ length: 50 }).map((_, i) => (
<div key={i} className="shrink-0">
Item {i + 1}
</div>
))}
</div>
</ScrollArea>
Custom Scrollbar
import {
ScrollAreaRoot,
ScrollAreaViewport,
ScrollAreaContent,
ScrollAreaScrollbar,
ScrollAreaThumb,
} from "@craftdotui/baseui/components/scroll-area";
<ScrollAreaRoot className="h-96 w-full">
<ScrollAreaViewport>
<ScrollAreaContent>
{/* Content */}
</ScrollAreaContent>
</ScrollAreaViewport>
<ScrollAreaScrollbar>
<ScrollAreaThumb className="bg-primary" />
</ScrollAreaScrollbar>
</ScrollAreaRoot>
Chat Messages
<ScrollArea className="h-96 w-full rounded-lg border">
<div className="p-4 space-y-4">
{messages.map((message) => (
<div key={message.id} className="rounded bg-muted p-2">
{message.text}
</div>
))}
</div>
</ScrollArea>
Accessibility
- Built on @base-ui/react for accessibility
- Keyboard scrolling support
- Focus visible on viewport
- Screen reader compatible
- Auto-hiding scrollbars with hover/scroll visibility