Scroll Area
A native scroll container with custom scrollbars.
Scroll area wraps the Base UI Scroll Area
primitive and ships vertical and horizontal scrollbars. Fade and gutter
behaviours are opt-in through scrollFade and scrollbarGutter.
Installation
npx shadcn@latest add @kosori/scroll-areaExample
scroll-area-example.tsx
import { ScrollArea } from '@/components/ui/scroll-area';
const tags = Array.from({ length: 50 }, (_, i) => `v1.0.0-alpha.${i}`);
const ScrollAreaExample = () => (
<ScrollArea className='h-64 rounded-lg border'>
<div className='px-4 py-2'>
<h4 className='mb-2 font-medium text-sm'>Tags</h4>
<div className='flex flex-col gap-1'>
{tags.map((tag) => (
<div className='text-sm' key={tag}>
{tag}
</div>
))}
</div>
</div>
</ScrollArea>
);
export default ScrollAreaExample;
Usage
import { ScrollArea } from '@/components/ui/scroll-area';
const ScrollAreaDemo = () => (
<ScrollArea className='h-64 rounded-lg border'>
<div className='p-4'>Scrollable content</div>
</ScrollArea>
);