Layout
npx @intellihelper/cli@latest add layoutStack
Vertical (or horizontal) flex column with shared gap scale.
Cluster
Wrapping horizontal groups for badges and actions.
Grid
Responsive CSS grid with cols / smCols / mdCols / lgCols.
Split · Spacer · Center
Toolbar rows, flexible space, and axis centering.
Container
Max-width page constraint with optional horizontal padding.
About this component
Layout is part of Surfaces. Stack, Cluster, Grid, Flex, Center, Split, Container, Box, and Spacer — replace nested layout divs with named primitives.
Install with npx @intellihelper/cli@latest add layout. 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 Layout
Use when
- Use Layout when stack, Cluster, Grid, Flex, Center, Split, Container, Box, and Spacer — replace nested layout divs with named primitives.
- 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.