ComponentsLayout
Stack
Vertical or horizontal stacking with consistent spacing between items
The Stack component arranges child elements vertically or horizontally with consistent spacing between them. It is a simplified flexbox wrapper optimized for the most common layout pattern: placing items in a single direction with uniform gaps.
Import
import { Stack } from '@nim-ui/components';Basic Usage
Item 1
Item 2
Item 3
Code
<Stack spacing="md">
<div>Item 1</div>
<div>Item 2</div>
<div>Item 3</div>
</Stack>Direction
The direction prop controls whether items are stacked vertically or horizontally.
Vertical 1
Vertical 2
Vertical 3
Horizontal 1
Horizontal 2
Horizontal 3
Code
<Stack direction="vertical" spacing="sm">
<div>Vertical 1</div>
<div>Vertical 2</div>
<div>Vertical 3</div>
</Stack>
<Stack direction="horizontal" spacing="sm">
<div>Horizontal 1</div>
<div>Horizontal 2</div>
<div>Horizontal 3</div>
</Stack>Spacing
The spacing prop sets the gap between items.
none
none
xs
xs
sm
sm
md
md
lg
lg
xl
xl
Code
<Stack direction="horizontal" spacing="none">No gap</Stack>
<Stack direction="horizontal" spacing="xs">Extra small (0.25rem)</Stack>
<Stack direction="horizontal" spacing="sm">Small (0.5rem)</Stack>
<Stack direction="horizontal" spacing="md">Medium (1rem) - default</Stack>
<Stack direction="horizontal" spacing="lg">Large (1.5rem)</Stack>
<Stack direction="horizontal" spacing="xl">Extra large (2rem)</Stack>Alignment
The align prop controls cross-axis alignment of items.
Short
Tall
start
Short
Tall
center
Short
Tall
end
Short
Tall
stretch
Code
<Stack direction="horizontal" align="start">Aligned to start</Stack>
<Stack direction="horizontal" align="center">Aligned to center</Stack>
<Stack direction="horizontal" align="end">Aligned to end</Stack>
<Stack direction="horizontal" align="stretch">Stretched (default)</Stack>Props
| Name | Type | Default | Description |
|---|---|---|---|
direction | 'vertical' | 'horizontal' | 'vertical' | Stack direction - vertical (column) or horizontal (row) |
spacing | 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'md' | Gap between stacked items |
align | 'start' | 'center' | 'end' | 'stretch' | 'stretch' | Cross-axis alignment of items |
className | string | - | Additional CSS classes to apply |
children* | ReactNode | - | Items to stack |
Usage Examples
Form Layout
function ContactForm() {
return (
<form>
<Stack spacing="lg">
<Input label="Name" placeholder="Your name" />
<Input label="Email" type="email" placeholder="you@example.com" />
<Textarea label="Message" rows={4} placeholder="Your message" />
<Button type="submit" fullWidth>
Send Message
</Button>
</Stack>
</form>
);
}Action Bar
function ActionBar() {
return (
<Stack direction="horizontal" spacing="sm" align="center">
<Button variant="primary">Save</Button>
<Button variant="outline">Cancel</Button>
<Button variant="ghost">Reset</Button>
</Stack>
);
}Sidebar Navigation
function Sidebar() {
return (
<nav>
<Stack spacing="xs">
<a href="/dashboard">Dashboard</a>
<a href="/settings">Settings</a>
<a href="/profile">Profile</a>
<a href="/help">Help</a>
</Stack>
</nav>
);
}Accessibility
The Stack component renders a <div> with flexbox layout. It does not add ARIA attributes by default. When using Stack for navigation or lists, add appropriate roles:
{/* Navigation list */}
<Stack spacing="sm" role="navigation" aria-label="Main navigation">
<a href="/home">Home</a>
<a href="/about">About</a>
</Stack>
{/* Item list */}
<Stack spacing="md" role="list">
<div role="listitem">First item</div>
<div role="listitem">Second item</div>
</Stack>