Saltar al contenido principal

Grid

Un constructor de diseño de cuadrícula responsivo que utiliza propiedades de CSS Grid y utilidades de Tailwind.

Revenue

$12,480

+8.2%

Active users

3,214

+12%

Churn

1.9%

-0.4%

Weekly traffic

Last 12 weeks

1'use client';
2

3import { Grid } from '@/components/ui/grid';
4

5const stats = [
6  { label: 'Revenue', value: '$12,480', delta: '+8.2%', up: true },
7  { label: 'Active users', value: '3,214', delta: '+12%', up: true },
8  { label: 'Churn', value: '1.9%', delta: '-0.4%', up: true },
9];
10

11const sparkline = [35, 55, 40, 70, 50, 85, 60, 95, 75, 100, 80, 90];
12

13export function Default() {
14  return (
15    <Grid columns="3" gap="4" className="w-full max-w-lg">
16      {stats.map((stat) => (
17        <div key={stat.label} className="border-border bg-card rounded-xl border p-4">
18          <p className="text-muted-foreground text-xs">{stat.label}</p>
19          <p className="mt-1 text-xl font-semibold tracking-tight">{stat.value}</p>
20          <p className={`mt-1 text-xs ${stat.up ? 'text-success-text' : 'text-destructive-text'}`}>
21            {stat.delta}
22          </p>
23        </div>
24      ))}
25      <div className="border-border bg-card col-span-3 rounded-xl border p-4">
26        <div className="flex items-baseline justify-between">
27          <p className="text-muted-foreground text-xs">Weekly traffic</p>
28          <p className="text-muted-foreground text-xs">Last 12 weeks</p>
29        </div>
30        <div className="mt-3 flex h-16 items-end gap-1.5">
31          {sparkline.map((height, index) => (
32            <div
33              key={index}
34              className="bg-primary/70 hover:bg-primary min-w-0 flex-1 rounded-sm transition-colors"
35              style={{ height: `${height}%` }}
36            />
37          ))}
38        </div>
39      </div>
40    </Grid>
41  );
42}

Instalación

pnpm dlx nachui add grid

Anatomía

1import { Grid } from '@/components/ui/grid';
1<Grid columns="3" gap="4">
2  <div>Columna 1</div>
3  <div>Columna 2</div>
4  <div>Columna 3</div>
5</Grid>

Referencia de API

Grid

PropTipoPor defectoDescripción
asReact.ElementType'div'El tipo de elemento HTML para renderizar el componente
columns'1' | '2' | ... | '12' | 'none' | 'subgrid''1'Número de columnas en la cuadrícula
rows'1' | '2' | ... | '6' | 'none' | 'subgrid'-Número de filas en la cuadrícula
flow'row' | 'col' | 'dense' | 'row-dense' | 'col-dense'-Flujos de cuadrícula (grid-flow)
align'start' | 'center' | 'end' | 'baseline' | 'stretch'-Alinea los hijos a lo largo del eje del bloque
justify'start' | 'center' | 'end' | 'stretch'-Justifica los hijos a lo largo del eje en línea
gap'0' | '1' | ... | '32'-Espaciado entre elementos en ambos ejes
gapX'0' | '1' | ... | '32'-Espaciado horizontal entre columnas
gapY'0' | '1' | ... | '32'-Espaciado vertical entre filas
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
AnteriorStack
SiguienteContainer
Ctrl+I