# Layout primitives

Use this page when the UI mainly needs structure, grouping, spacing, or low-level composition rather than a specialized product interaction.

## Quick Decision Rules

- Use [Card](https://vega-ui.dev/components/card/) for a neutral grouping surface.
- Use [Fieldset](https://vega-ui.dev/components/fieldset/) for semantic grouping of related form controls.
- Use [Separator](https://vega-ui.dev/components/separator/) for visual division between adjacent areas.
- Use [Slot](https://vega-ui.dev/components/slot/) when composition should pass props into one child element through `asChild`.
- Use [VisuallyHidden](https://vega-ui.dev/components/visually-hidden/) for content that should stay available to assistive technology but not visual layout.

## By Role

- Neutral content surface: [Card](https://vega-ui.dev/components/card/)
- Semantic form group: [Fieldset](https://vega-ui.dev/components/fieldset/)
- Visual divider: [Separator](https://vega-ui.dev/components/separator/)
- Polymorphic composition helper: [Slot](https://vega-ui.dev/components/slot/)
- Hidden-but-accessible content: [VisuallyHidden](https://vega-ui.dev/components/visually-hidden/)

## Common Misclassifications

- Do not use [Card](https://vega-ui.dev/components/card/) when the grouping must be native form structure; use [Fieldset](https://vega-ui.dev/components/fieldset/).
- Do not use [Separator](https://vega-ui.dev/components/separator/) as the only thing creating semantic section meaning.
- Do not use [Slot](https://vega-ui.dev/components/slot/) as a styled wrapper; it is a composition primitive, not a surface.
- Do not use [VisuallyHidden](https://vega-ui.dev/components/visually-hidden/) to hide content that should actually be removed from assistive technology too.

## Start Here

- Dashboard blocks, settings sections, summaries: [Card](https://vega-ui.dev/components/card/)
- Grouped control areas: [Fieldset](https://vega-ui.dev/components/fieldset/)
- `asChild` and polymorphic composition: [Slot](https://vega-ui.dev/components/slot/)
- Accessible hidden labels or descriptions: [VisuallyHidden](https://vega-ui.dev/components/visually-hidden/)