Tutorial March 9, 2026 9 min read

How to Build a Dashboard with React and Tailwind CSS v4

Assemble a clean, accessible analytics dashboard layout — sidebar, stat cards, and a data table — using Ninna UI components and Tailwind v4 utilities.

By Ninna UI Team

Dashboards are where component libraries earn their keep — lots of layout, lots of small accessible widgets, and a need for visual consistency. Let's assemble a clean dashboard shell with Ninna UI and Tailwind CSS v4: a responsive sidebar, a row of stat cards, and a data section.

Prefer to skip ahead? There's a ready-made Dashboard block you can copy at /blocks/dashboard. This tutorial shows how the pieces fit together.

1. The page shell

Use a CSS grid for the sidebar + main split. Tailwind v4 utilities handle the responsive behaviour:

<div className="grid min-h-screen grid-cols-1 md:grid-cols-[240px_1fr]">
  <aside className="border-r border-base-200 bg-base-100 p-4">{/* nav */}</aside>
  <main className="p-6">{/* content */}</main>
</div>

2. Stat cards

Use the layout primitives to lay out a responsive row of metric cards:

import { SimpleGrid } from "@ninna-ui/layout";
import { Card, Stat } from "@ninna-ui/data-display";

<SimpleGrid columns={{ base: 1, sm: 2, lg: 4 }} gap="4">
  <Card><Stat label="Revenue" value="$48.2k" /></Card>
  <Card><Stat label="Users" value="1,204" /></Card>
</SimpleGrid>

Layout gotcha: gap and columns props take strings/objects, not numbers — gap="4", not gap={4}.

3. A data table

For tabular data, the Table component from @ninna-ui/data-display gives you accessible semantics out of the box. For sorting and filtering UI, the data-table-filters block is a good starting point.

import { Table } from "@ninna-ui/data-display";

<Table>
  <Table.Head>
    <Table.Row><Table.Header>Name</Table.Header><Table.Header>Status</Table.Header></Table.Row>
  </Table.Head>
  <Table.Body>{/* rows */}</Table.Body>
</Table>

4. Make the sidebar accessible

On mobile, the sidebar should become a drawer. Use the Drawer from @ninna-ui/overlays so focus trapping and keyboard handling are correct without extra work:

import { Drawer } from "@ninna-ui/overlays";

<Drawer>
  <Drawer.Trigger>Menu</Drawer.Trigger>
  <Drawer.Content>{/* nav links */}</Drawer.Content>
</Drawer>

Wrapping up

That's a complete, accessible dashboard shell: responsive layout, metric cards, a data table, and a mobile drawer — with theming handled by one CSS import. From here, drop in charts and real data and you have a production starting point.