Stack

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

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}

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

Prop	Tipo	Por defecto	Descripción
`as`	`React.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
`className`	`string`	-	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