Components

Scroll Area

Augments native scroll with a slim, themed scrollbar that appears on interaction — keeping overflowing content contained without the browser's default chrome.

Basic usage

Give the ScrollArea a fixed height so taller content scrolls vertically inside it.

  • v2.4.0 — Added ScrollArea and ScrollBar primitives
  • v2.3.1 — Fixed focus ring offset on Viewport
  • v2.3.0 — New gold ring tokens for focus-visible states
  • v2.2.0 — Dialog now traps focus correctly
  • v2.1.4 — Tooltip arrow alignment fix
  • v2.1.3 — Button loading spinner contrast bump
  • v2.1.2 — Tabs underline animation timing
  • v2.1.1 — Accordion chevron rotation easing
  • v2.1.0 — Introduced Command palette component
  • v2.0.0 — Migrated to Tailwind v4 tokens
  • v1.9.2 — Select dropdown z-index fix
  • v1.9.1 — Avatar fallback initials sizing
  • v1.9.0 — Added Skeleton loading component
  • v1.8.0 — Breadcrumb separator slot support

Horizontal scrolling

Add a <ScrollBar orientation="horizontal" /> and a fixed width to scroll a row sideways.

DesignEngineeringProductMarketingSalesFinanceLegalOperationsSupportResearchDataSecurity

Props

ScrollArea

PropTypeDefaultDescription
classNamestring—Tailwind classes merged onto the root. Set a fixed height/width here (e.g. h-48 w-72) to enable scrolling.
childrenrequiredReact.ReactNode—Content rendered inside the scrollable viewport.
type'auto' | 'always' | 'scroll' | 'hover''hover'When the scrollbar is visible. Forwarded to the Radix Root.
scrollHideDelaynumber600Milliseconds before the scrollbar hides after the user stops scrolling.
dir'ltr' | 'rtl'—Reading direction; flips the scrollbar to the correct side.
...restScrollArea.Root props—All Radix ScrollArea Root props are forwarded.

ScrollBar

PropTypeDefaultDescription
orientation'vertical' | 'horizontal''vertical'Axis the scrollbar controls. Add an explicit horizontal ScrollBar for sideways scrolling.
classNamestring—Additional Tailwind classes merged onto the scrollbar track.
...restScrollAreaScrollbar props—All Radix ScrollAreaScrollbar props are forwarded.

Accessibility

  • The viewport is keyboard scrollable — focus it and use Arrow, Page Up/Down, and Home/End keys.
  • The viewport shows a brand gold focus-visible ring so keyboard users can see when the scroll region is focused.
  • Built on Radix ScrollArea, which preserves native scroll semantics and assistive-technology behavior rather than replacing scrolling with JavaScript.
  • Touch and trackpad gestures continue to work normally — the custom scrollbar is purely visual and never blocks pointer or wheel input.