React Scroll Area - With ResizableHandle

Scroll Area - Advanced pattern component

Looking to implement shadcn/ui patterns?

Join our Discord community for help from other developers.

Files

Preview

File Content

Select a file from the list to view its contents here. The panel width can be adjusted by dragging the resize handle.

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.

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.

Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.

Loading preview...

Pattern created by @haydenbleasel

Installation

npx shadcn@latest add https://www.shadcn.io/registry/scroll-area-advanced-3.json

npx shadcn@latest add https://www.shadcn.io/registry/scroll-area-advanced-3.json

pnpm dlx shadcn@latest add https://www.shadcn.io/registry/scroll-area-advanced-3.json

bunx shadcn@latest add https://www.shadcn.io/registry/scroll-area-advanced-3.json

React Scroll Area - With ResizableHandle

Files

Preview

File Content

Installation

On this page

Files

Preview

File Content