Skip to content
IntelliHelper logo

Intelli UI

SurfacesLiquid Glass

Resizable

Drag-to-resize panel groups with glass grip handle. Preview live, copy the source, or install with the CLI into your Next.js project.
More surfaces
npx @intellihelper/cli@latest add resizable

Panel groups

About this component

Resizable is part of Surfaces. Drag-to-resize panel groups with glass grip handle.

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

Use when

  • Use Resizable when drag-to-resize panel groups with glass grip handle.
  • 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 →