Sections

Components

Utilities

Forms

Hooks

useIsMobile

Scroll Area

Copy Markdown

Custom scrollable area with styled scrollbars.

Docs API

PreviewCode

Installation#

CLIManual

pnpmbunnpmyarn

pnpm dlx shadcn@latest add @shark/scroll-area

Usage#

import { ScrollArea } from "@/components/ui/scroll-area";

<ScrollArea className="h-64">
</ScrollArea>

Examples#

Scroll Fade#

Use scrollFade to add a subtle fade effect to the edges of the scroll area.

PreviewCode

Horizontal Scroll#

PreviewCode

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.

PreviewCode

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.

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.

[

Resizable ](/docs/components/resizable)[

Segment Group ](/docs/components/segment-group)

On This Page

Installation Usage Examples Scroll Fade Horizontal Scroll Both Scrollbars Nested API Reference ScrollArea

Scroll Area

Scroll Area

Tags

Installation#

Usage#

Examples#

Scroll Fade#

Tags

Horizontal Scroll#

Both Scrollbars#

Nested#

API Reference#

ScrollArea#