Gridalternative
Use Grid for complex 2D layoutsStack
Flexible layout component for arranging children in rows or columns with consistent spacing. Supports responsive direction and gap.
Setup
import { Stack } from '@fragments-sdk/ui';Examples
Vertical Stack
Default column layout
Loading preview...
Horizontal Stack
Row layout
Loading preview...
Gap Sizes
Different spacing options
Loading preview...
Numeric Gap
Using number values (1-8) mapped to the spacing scale
Loading preview...
Alignment
Cross-axis and main-axis alignment
Loading preview...
Responsive
Direction changes at breakpoints
Loading preview...
With Separator
Default line separator between items
Loading preview...
Semantic Element
Using nav element for navigation
Loading preview...
Props
| Prop | Type | Default | Description |
|---|---|---|---|
childrenRequired | node | Not set | Elements to arrange |
direction | union | column | Stack direction: "row", "column", or responsive object |
gap | union | md | Spacing between items: "none"|"xs"|"sm"|"md"|"lg"|"xl", a number (1-8) for space scale, or responsive object |
align | enumstartcenterendstretchbaseline | Not set | Cross-axis alignment |
justify | enumstartcenterendbetween | Not set | Main-axis alignment |
wrap | boolean | false | Allow items to wrap |
separator | node | Not set | Render a separator between children. true = default 1px line, or pass a ReactNode for custom separators. |
as | enumdivsectionnavarticleasideheaderfootermainulol | div | HTML element to render |
className | string | Not set | — |
style | object | Not set | — |
Usage Guidelines
When to use
- Arranging elements in a row or column
- Creating consistent spacing between items
- Building responsive layouts
- Simple flexbox-based arrangements
When not to use
- Complex grid layouts (use Grid)
- Button-specific grouping (use ButtonGroup)
- Page-level layout (use AppShell)
Best practices
- Use semantic elements via the "as" prop when appropriate
- Leverage responsive props for mobile-first layouts
- Keep spacing consistent within related sections
- Consider alignment for visual balance
- Pass DOM attributes (id, role, aria-*, data-*, event handlers) directly to Stack root when needed
Accessibility
- Use semantic elements (nav, section, etc.) via "as" prop
- Maintains source order for screen readers
- No accessibility concerns with visual arrangement