Saltar al contenido principal

Stack

Una utilidad de diseño que organiza elementos en una sola columna (o fila) con espaciados consistentes.

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}

Instalación

pnpm dlx nachui add stack

Anatomía

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

Referencia de API

Stack

PropTipoPor defectoDescripción
asReact.ElementType'div'El tipo de elemento HTML para renderizar el componente
direction'column' | 'row''column'La orientación del flujo flex
align'start' | 'center' | 'end' | 'baseline' | 'stretch''stretch'Alineación de elementos (align-items)
justify'start' | 'center' | 'end' | 'between' | 'around' | 'evenly''start'Distribución del contenido (justify-content)
wrap'nowrap' | 'wrap' | 'wrap-reverse''nowrap'Comportamiento de envoltura (flex-wrap)
gap'0' | '1' | '2' | '3' | '4' | '5' | '6' | '8' | '10' | '12' | '16' | '20' | '24' | '32'-Espacio entre elementos
classNamestring-Clases CSS personalizadas
¿Encontraste algo que mejorar?

¿Notaste un error, tipografía o detalle faltante en esta página? Ayúdanos a mejorar la documentación abriendo un issue en GitHub.

Crear un Issue
AnteriorFlex
SiguienteGrid
Ctrl+I