Layout primitives

Quick Decision Rules

• Use Card for a neutral grouping surface.
• Use Fieldset for semantic grouping of related form controls.
• Use Separator for visual division between adjacent areas.
• Use Slot when composition should pass props into one child element through asChild.
• Use VisuallyHidden for content that should stay available to assistive technology but not visual layout.

By Role

• Neutral content surface: Card
• Semantic form group: Fieldset
• Visual divider: Separator
• Polymorphic composition helper: Slot
• Hidden-but-accessible content: VisuallyHidden

Common Misclassifications

• Do not use Card when the grouping must be native form structure; use Fieldset.
• Do not use Separator as the only thing creating semantic section meaning.
• Do not use Slot as a styled wrapper; it is a composition primitive, not a surface.
• Do not use VisuallyHidden to hide content that should actually be removed from assistive technology too.

Start Here

• Dashboard blocks, settings sections, summaries: Card
• Grouped control areas: Fieldset
• asChild and polymorphic composition: Slot
• Accessible hidden labels or descriptions: VisuallyHidden