Skip to main content

Grid

A responsive grid layout builder using CSS Grid properties and Tailwind utilities.

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}

Installation

pnpm dlx nachui add grid

Anatomy

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

API Reference

Grid

PropTypeDefaultDescription
asReact.ElementType'div'The element type to render the component as
columns'1' | '2' | ... | '12' | 'none' | 'subgrid''1'Number of columns in the grid
rows'1' | '2' | ... | '6' | 'none' | 'subgrid'-Number of rows in the grid
flow'row' | 'col' | 'dense' | 'row-dense' | 'col-dense'-Grid layout flows
align'start' | 'center' | 'end' | 'baseline' | 'stretch'-Align children along block axis
justify'start' | 'center' | 'end' | 'stretch'-Justify children along inline axis
gap'0' | '1' | ... | '32'-Spacing between items on both axes
gapX'0' | '1' | ... | '32'-Spacing between columns
gapY'0' | '1' | ... | '32'-Spacing between rows
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
PreviousStack
NextContainer
Ctrl+I