Scroll Area

Scroll Area makes a fixed-size region inside the page scroll, such as a list in a card, a horizontal tag row or a panel with a pinned footer. Let the page scroll instead when it can.

Install

bashnpx shadcn@4.18.0 add @siteplane/scroll-area

Import it from @/siteplane/components/scroll-area. The project needs Siteplane UI's one-time setup first: installation.

When to pick it

• vs Dialog: Use DialogPanel, SheetPanel or DrawerPanel inside overlays; they already wrap a scroll area.
• vs Truncate: Pick Truncate instead when the text should be cut rather than scrolled.

Rules

• Name the region with aria-label or aria-labelledby, since the viewport joins the tab order when it overflows.
• The viewport scrolls, so read or set the scroll offset through viewportRef.
• Give sideways-scrolling content its own width, such as w-max, and set scrollbarGutter so the scrollbar doesn't overlap it.
• Turn on fill for a flex-column child that must stretch to full height, such as one that pins a footer to the bottom.
• Don't nest a scroll region where the page itself could scroll.

Reference

• Scroll Area docs, with every prop, part and example (Markdown)
• Siteplane UI 1.8.1, Layout & utilities. Read the installed source under src/siteplane before relying on an API.