Skip to content
Nim UI

Stack

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

Default Stack (Vertical)

View 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.

Stack Directions

View 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.

Spacing Variants

View 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.

Alignment Variants

View 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="[email protected]" />
        <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>
  );
}
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>
  • Flex - Full flexbox control with justify, wrap, and gap
  • Grid - CSS Grid for multi-column layouts
  • Spacer - Add flexible or fixed spacing