Skip to main content

Stack

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

Deploy completed

2m ago

Production build finished in 42s.

New comment

1h ago

Marcos replied to your review on checkout-flow.

Storage almost full

3h ago

You have used 92% of your workspace quota.

1'use client';
2

3import { Flex } from '@/components/ui/flex';
4import { Stack } from '@/components/ui/stack';
5

6const notifications = [
7  {
8    tone: 'bg-success-text',
9    title: 'Deploy completed',
10    detail: 'Production build finished in 42s.',
11    time: '2m ago',
12  },
13  {
14    tone: 'bg-info-text',
15    title: 'New comment',
16    detail: 'Marcos replied to your review on checkout-flow.',
17    time: '1h ago',
18  },
19  {
20    tone: 'bg-warning-text',
21    title: 'Storage almost full',
22    detail: 'You have used 92% of your workspace quota.',
23    time: '3h ago',
24  },
25];
26

27export function Default() {
28  return (
29    <Stack gap="5" className="border-border bg-card w-full max-w-md rounded-xl border p-5">
30      {notifications.map((notification) => (
31        <Flex key={notification.title} gap="3" align="start">
32          <span
33            className={`mt-1.5 h-2 w-2 shrink-0 rounded-full ${notification.tone}`}
34            aria-hidden="true"
35          />
36          <Stack gap="1" className="min-w-0 flex-1">
37            <Flex align="baseline" justify="between" gap="3">
38              <p className="text-sm font-medium">{notification.title}</p>
39              <span className="text-muted-foreground shrink-0 text-xs">{notification.time}</span>
40            </Flex>
41            <p className="text-muted-foreground text-xs">{notification.detail}</p>
42          </Stack>
43        </Flex>
44      ))}
45    </Stack>
46  );
47}

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
Ctrl+I