Docs
scroll area
scroll area
Augments native scroll functionality for custom, cross-browser styling.
Installation
npx dukc-ui@latest add scroll-area
npx dukc-ui@latest add scroll-area
Usage
import { ScrollArea } from "@/components/ui/scroll-area"import { ScrollArea } from "@/components/ui/scroll-area"<ScrollArea className="h-[200px] w-[350px] rounded-md border p-4">
Jokester began sneaking into the castle in the middle of the night and leaving
jokes all over the place: under the king's pillow, in his soup, even in the
royal toilet. The king was furious, but he couldn't seem to stop Jokester. And
then, one day, the people of the kingdom discovered that the jokes left by
Jokester were so funny that they couldn't help but laugh. And once they
started laughing, they couldn't stop.
</ScrollArea><ScrollArea className="h-[200px] w-[350px] rounded-md border p-4">
Jokester began sneaking into the castle in the middle of the night and leaving
jokes all over the place: under the king's pillow, in his soup, even in the
royal toilet. The king was furious, but he couldn't seem to stop Jokester. And
then, one day, the people of the kingdom discovered that the jokes left by
Jokester were so funny that they couldn't help but laugh. And once they
started laughing, they couldn't stop.
</ScrollArea>Examples
Horizontal Scrolling
API Reference
ScrollArea
alwaysVisible(boolean, optional, default:false`): Whether the scrollbars should always be visible or only appear when scrolling.viewportClassName(string, optional): Additional CSS classes to apply to the scroll viewport container.orientation('vertical' | 'horizontal' | 'both', optional, default:'vertical'): Controls which scrollbars are shown and tracked: vertical, horizontal, or both....props(React.HTMLAttributes<HTMLDivElement>): Other native props forwarded to the outer container<div>.
Behavior
- Custom scroll area wrapper with fully controlled scrollbars.
- Supports vertical, horizontal, or both directions.
- Scrollbar thumbs update dynamically on scroll and resize.
- Supports dragging the scrollbar thumbs to scroll content.
- Scrollbar tracks respond to clicks to jump to a scroll position.
- Scrollbars fade in on hover or stay always visible if
alwaysVisibleis set. - Uses internal refs to manage DOM nodes and positioning logic.
- Handles accessibility by forwarding native
divprops.