- Accordion
- Action Bar
- Alert Dialog
- Alert
- Announcement
- Aspect Ratio
- Autocomplete
- Avatar
- Badge
- Bottom Navigation
- Breadcrumb
- Button Group
- Button
- Calendar
- Card
- Carousel
- Chart
- Checkbox
- Circular Progress
- Circular Slider
- Clipboard
- Collapsible
- Color Picker
- Combobox
- Command
- Context Menu
- Data List
- Date Picker
- Dialog
- Drawer
- Editable
- Field
- File Upload
- Float
- Floating Panel
- Frame
- Hint
- Hover Card
- Image Cropper
- Input Group
- Input OTP
- Input
- Item
- Kbd
- Link Overlay
- Listbox
- Marquee
- Menu
- Native Select
- Number Input
- Pagination
- Popover
- Progress
- Prose
- QR Code
- Radio Group
- Rating
- Resizable
- Scroll Area
- Segment Group
- Select
- Separator
- Sheet
- Sidebar
- Signature Pad
- Skeleton
- Skip Nav
- Slider
- Spinner
- Status
- Steps
- Switch
- Table
- Tabs
- Textarea
- Timer
- Toast
- Toggle Group
- Toggle Tooltip
- Toggle
- Tooltip
- Tour
- Tree View
Tags
Installation
pnpm dlx shadcn@latest add https://shark.vini.one/r/scroll-area.json
Usage
import { ScrollArea } from "@/components/ui/scroll-area";
<ScrollArea className="h-64"> {/* Your content here */} </ScrollArea>
Examples
Scroll Fade
Use scrollFade to add a subtle fade effect to the edges of the scroll area.
Tags
Horizontal Scroll
Both Scrollbars
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ut nulla metus. Ut consequat augue et semper porttitor. Integer vel ante arcu. Nullam tincidunt dolor odio, ac tincidunt leo dictum eu. Proin auctor, nulla vel tincidunt lacinia, leo erat sagittis erat, quis porta orci sem id purus. Nam fermentum turpis vitae pretium facilisis. Mauris id iaculis augue, ut tristique purus. Pellentesque sed diam semper, porta nibh ut, sodales nunc. Aliquam accumsan a mi eget fringilla. Vestibulum varius mi vitae sem placerat, et imperdiet lorem fringilla. Curabitur sed congue mi, quis tincidunt tortor. Suspendisse pharetra sem vel risus volutpat, a auctor massa faucibus.
Etiam posuere felis et consectetur molestie. Cras sed rhoncus nisl. Aenean quis est sit amet quam facilisis lacinia at non magna. In eu orci accumsan, ultrices justo vitae, sodales nibh. Curabitur in sagittis dui. Maecenas commodo cursus magna, non fringilla nisl commodo in. Vestibulum nec fermentum dolor. Etiam euismod nisl non scelerisque faucibus. Aliquam erat volutpat. Donec quis nunc ultrices, viverra quam ut, sagittis tortor. Nullam nulla tortor, convallis nec magna ut, lacinia interdum est. Proin lobortis diam sollicitudin venenatis dictum.
Mauris a dui a nibh ullamcorper tempus. Maecenas laoreet magna venenatis leo mattis sagittis. Donec in convallis leo, quis suscipit leo. Sed a augue purus. Integer id vulputate erat. Quisque a arcu purus. Nulla feugiat ex tellus, ac elementum magna porttitor a. Sed convallis rhoncus aliquam. Praesent euismod metus a fermentum faucibus.
Nested
Scroll areas can be nested within each other for complex layouts.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
API Reference
ScrollArea
Custom-styled scrollable region. Hides native scrollbars; preserves scroll behavior.
| Prop | Type | Default |
|---|---|---|
| scrollFade | boolean | false |
| Attribute | Default |
|---|---|
--fade-size | 1.5rem |
For a complete list of props, see the Ark UI documentation.