Skip to main content
ninna-ui
On this page

Stack

A layout component for stacking elements vertically or horizontally with consistent spacing.

import { Stack } from "@ninna-ui/layout";

pnpm add @ninna-ui/layout@latest
Includes @ninna-ui/core. CSS setup required.View source

Usage

Import and use the Stack component in your application.

import { Stack, HStack, VStack } from "@ninna-ui/layout";


export default function Example() {
  return (
    <Stack gap="4">
      <div>Item 1</div>
      <div>Item 2</div>
      <div>Item 3</div>
    </Stack>
  );
}

Basic

Basic stack layout with default column direction.

Live preview
Item 1
Item 2
Item 3

Direction

Stack supports row and column directions. Use HStack and VStack as shortcuts.

Live preview

Column (default)

1
2
3

Row

1
2
3

HStack (shorthand for row)

A
B
C

VStack (shorthand for column)

X
Y
Z

Gap Spacing

Control the spacing between items with the gap prop.

Live preview

gap="0"

1
2
3

gap="1"

1
2
3

gap="2"

1
2
3

gap="4"

1
2
3

gap="6"

1
2
3

gap="8"

1
2
3

Alignment

Align items on the cross axis using the align prop.

Live preview

align="start"

Short
Tall
Med

align="center"

Short
Tall
Med

align="end"

Short
Tall
Med

align="stretch"

Short
Tall
Med

align="baseline"

Short
Tall
Med

Justify

Distribute items along the main axis using the justify prop.

Live preview

justify="start"

1
2
3

justify="center"

1
2
3

justify="end"

1
2
3

justify="between"

1
2
3

justify="around"

1
2
3

justify="evenly"

1
2
3

With Divider

Stack items separated by dividers.

Live preview
Section 1
Section 2
Section 3

Responsive

Combine with responsive classes for adaptive layouts.

Live preview

Stack can be combined with responsive classes for adaptive layouts

Item 1
Item 2
Item 3

Use Cases

Common patterns using Stack for layouts.

Live preview

Card Layout

Card Title

This is a card description using Stack for layout.

Navigation Bar

Logo
HomeAboutContact

Form Layout

API Reference

Complete list of props for the Stack component.

Props

PropTypeDefaultDescription
asElementType—Semantic HTML element to render
direction'row' | 'column' | 'row-reverse' | 'column-reverse''column'Direction of the stack layout
gap'0' | '1' | '2' | '3' | '4' | '5' | '6' | '8' | '10' | '12' | '16''4'Gap between items
align'start' | 'center' | 'end' | 'stretch' | 'baseline'—Align items on cross axis
justify'start' | 'center' | 'end' | 'between' | 'around' | 'evenly'—Justify items on main axis
wrapbooleanfalseWhether items should wrap
classNamestring—Additional CSS classes
children*React.ReactNode—Stack content

Accessibility

  • Stack is a pure layout component with no semantic meaning
  • Use appropriate semantic HTML elements as children
  • For navigation, wrap in a nav element
  • For lists, consider using List component instead