{"@context":"https://schema.org","@graph":[{"@type":"TechArticle","headline":"Scroll area","description":"Navigate content that exceeds the viewport with scrollbars. Provides smooth scrolling for better content accessibility.","url":"https://intentui.com/docs/components/controls/scroll-area","author":{"@type":"Person","name":"Irsyad","url":"https://x.com/irsyad"},"publisher":{"@type":"Organization","name":"Intent UI","url":"https://intentui.com","logo":{"@type":"ImageObject","url":"https://intentui.com/icon.svg"}},"mainEntityOfPage":{"@type":"WebPage","@id":"https://intentui.com/docs/components/controls/scroll-area"}},{"@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https://intentui.com"},{"@type":"ListItem","position":2,"name":"Docs","item":"https://intentui.com/docs"},{"@type":"ListItem","position":3,"name":"Components","item":"https://intentui.com/docs/components"},{"@type":"ListItem","position":4,"name":"Controls","item":"https://intentui.com/docs/components/controls"},{"@type":"ListItem","position":5,"name":"Scroll area","item":"https://intentui.com/docs/components/controls/scroll-area"}]}]}
Scroll area
Loading...
Installation
Install the component via the CLI in one command.
npm
pnpm
yarn
bun
npx shadcn@latest add @intentui/scroll-area
Manual installation
Use this approach if you prefer to install and wire up the component yourself instead of using the CLI.
npm
pnpm
yarn
bun
npm install tailwind-merge
Examples
By default, the orientation is set to both, but you can change it to horizontal or vertical.
Vertical
Loading...
Horizontal
Loading...
Fade
Add fade effects to the edges of the scroll area for visual cues.
Loading...
Component API
ScrollArea
ScrollArea extends the native <div> element.
classNamestringorientationScrollAreaOrientationDefault:
bothscrollbarGutterbooleanDefault:
falsescrollFadebooleanDefault:
false