Scroll Area

Custom scrollable area with styled scrollbars.

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.

Horizontal Scroll

Item 1

Item 2

Item 3

Item 4

Item 5

Item 6

Item 7

Item 8

Item 9

Item 10

Item 11

Item 12

Item 13

Item 14

Item 15

Item 16

Item 17

Item 18

Item 19

Item 20

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.

This is a nested scroll area. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.