Scroll Area

Custom scrollable region with styled scrollbars, built on Base UI with a Radix twin.

Installation

npx smoothui-cli add scroll-area

Features

• Vertical and horizontal scrollbars that appear on hover / while scrolling
• Thin→wide thumb and fade-in on hover/scroll (Fluid Functionalism cues)
• Optional scrollFade edge mask (true / "y" vertical, "x" horizontal)
• Compound parts: ScrollAreaRoot, ScrollAreaViewport, ScrollAreaContent, ScrollAreaScrollbar, ScrollAreaThumb, ScrollAreaCorner
• Convenience default export with vertical / horizontal toggles
• Touch-friendly thumb hit area
• Base UI by default; Radix twin available via style

States

Features

A fixed-height panel with a custom vertical scrollbar.

Horizontal

A row of cards that scrolls sideways.

Accessibility

Keyboard

The viewport is focusable. Arrow keys, Page Up/Down, Home, and End scroll when focused.

ARIA Attributes

Give the root an explicit height (or max-height) so overflow can be measured.

Props

ScrollAreaProps