Skip to content
IntelliHelper logo

Intelli UI

SurfacesLiquid Glass

Tabs

Glass capsule tabs with sliding chrome indicator. Preview live, copy the source, or install with the CLI into your Next.js project.
More surfaces
npx @intellihelper/cli@latest add tabs

Capsule tabs

About this component

Tabs is part of Surfaces. Glass capsule tabs with sliding chrome indicator.

Install with npx @intellihelper/cli@latest add tabs. 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 Tabs

Use when

  • Use Tabs when glass capsule tabs with sliding chrome indicator.
  • 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 →