Skip to main content

Stack

A layout utility that structures elements in a single column (or row) with consistent gaps.

Stack Item 1
Stack Item 2
Stack Item 3
default.tsx
1'use client';
2

3import React from 'react';
4import { Stack } from '../../layout/stack';
5

6export function Default() {
7  return (
8    <Stack
9      gap="3"
10      align="stretch"
11      className="border-border bg-card w-full max-w-md rounded-xl border p-4"
12    >
13      <div className="bg-primary/20 text-primary border-primary/30 flex h-12 items-center justify-center rounded-lg border font-medium">
14        Stack Item 1
15      </div>
16      <div className="bg-secondary/20 text-secondary-foreground border-border flex h-12 items-center justify-center rounded-lg border font-medium">
17        Stack Item 2
18      </div>
19      <div className="bg-muted text-muted-foreground border-border flex h-12 items-center justify-center rounded-lg border font-medium">
20        Stack Item 3
21      </div>
22    </Stack>
23  );
24}

Installation

pnpm dlx nachui add stack

Anatomy

1import { Stack } from '@/components/ui/stack';
1<Stack gap="3">
2  <div>Item 1</div>
3  <div>Item 2</div>
4</Stack>

API Reference

Stack

PropTypeDefaultDescription
asReact.ElementType'div'The element type to render the component as
direction'column' | 'row''column'The flex orientation flow
align'start' | 'center' | 'end' | 'baseline' | 'stretch''stretch'CSS align-items mapping
justify'start' | 'center' | 'end' | 'between' | 'around' | 'evenly''start'CSS justify-content mapping
wrap'nowrap' | 'wrap' | 'wrap-reverse''nowrap'CSS flex-wrap mapping
gap'0' | '1' | '2' | '3' | '4' | '5' | '6' | '8' | '10' | '12' | '16' | '20' | '24' | '32'-Gap spacing between elements
classNamestring-Custom CSS classes
Found something to improve?

Notice a bug, typo, or missing detail on this page? Help us make the documentation better by opening a GitHub issue.

Create an Issue
PreviousFlex
NextGrid