Skip to content
IntelliHelper logo

Intelli UI

SurfacesLiquid Glass

Scroll Area

Custom scrollbar with optional chrome container. Preview live, copy the source, or install with the CLI into your Next.js project.
More surfaces
npx @intellihelper/cli@latest add scroll-area

Overflow content

About this component

Scroll Area is part of Surfaces. Custom scrollbar with optional chrome container.

Install with npx @intellihelper/cli@latest add scroll-area. Files land in your project so you can customize styles, variants, and behavior without a locked package.

Prefer AI-assisted install? Use the agent plugin or the MCP server.

When to use Scroll Area

Use when

  • Use Scroll Area when custom scrollbar with optional chrome container.
  • Grouping related content into cards, tabs, or layout shells.
  • Elevating a section without full-page chrome.

Avoid when

  • Long-form docs where plain typography is clearer than nested cards.
  • Modals — use overlays instead of stacking cards.

Accessibility notes

  • Headings inside cards should follow document order for screen readers.
  • Tab panels need keyboard arrow support (built into Radix-based tabs).

Interactive primitives build on accessible patterns (including Radix where applicable). Always verify focus order and contrast on your mesh or product background.

Composition tips

  • Prefer one chrome surface level deep; avoid card-in-card glass stacks.
  • Use separators sparingly between sections inside a surface.
  • Prefer layout primitives (Stack, Cluster, Grid, Split) over nested divs for spacing and alignment.
  • Use as="section" | as="ul" | asChild so landmarks stay semantic — layout is not always a div.

FAQ

Related components

View all surfaces →