- Accordion
- Action BarUpdated
- Alert Dialog
- Alert
- Announcement
- Aspect Ratio
- Autocomplete
- Avatar
- BadgeUpdated
- Bottom Navigation
- Breadcrumb
- Button Group
- Button
- CalendarUpdated
- CardUpdated
- Carousel
- Chart
- Checkbox
- Circular Progress
- Circular Slider
- Clipboard
- Collapsible
- Color Picker
- Combobox
- Command
- Context MenuUpdated
- Data List
- Date Picker
- DialogUpdated
- DrawerUpdated
- Editable
- FieldUpdated
- File Upload
- Float
- Floating Panel
- Frame
- Hint
- Hover Card
- Image Cropper
- Input Group
- Input OTP
- Input
- Item
- Kbd
- Link Overlay
- Listbox
- MarqueeUpdated
- Menu
- Native Select
- Number InputUpdated
- 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
- TableUpdated
- Tabs
- Textarea
- TimerUpdated
- ToastUpdated
- Toggle Group
- Toggle Tooltip
- Toggle
- Tooltip
- Tour
- Tree View
Tags
Installation#
pnpm dlx shadcn@latest add @shark/scroll-area
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.