Build a Dashboard with React and Tailwind CSS v4
Assemble a production-ready analytics dashboard with responsive sidebar, stat cards, data tables, and accessible navigation — using Ninna UI components and Tailwind v4.
Why Ninna UI for dashboards
Dashboards demand a lot from a component library: responsive layouts, data tables, cards, navigation, and consistent theming across dozens of widgets. Ninna UI ships all of these as tree-shakeable npm packages with zero-runtime CSS theming, so your dashboard stays fast and maintainable.
The layout primitives (Stack, Flex, Grid, SimpleGrid, Container) handle responsive structure, while data-display components (Card, Stat, Table) give you accessible data presentation out of the box.
1. Set up the page shell
Use a CSS grid for the sidebar + main content split. Tailwind v4 utilities handle the responsive breakpoint behaviour:
import { Container } from "@ninna-ui/layout";
export default function DashboardLayout() { return ( <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"> {/* Navigation */} </aside> <main className="p-6"> <Container>{/* Dashboard content */}</Container> </main> </div> );}2. Add stat cards
Use SimpleGrid for a responsive row of metric cards. The Stat component from @ninna-ui/data-display gives you accessible label/value semantics:
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" trend="+12%" /></Card> <Card><Stat label="Users" value="1,204" trend="+8%" /></Card> <Card><Stat label="Churn" value="2.1%" trend="-0.3%" /></Card> <Card><Stat label="MRR" value="$12.4k" trend="+15%" /></Card></SimpleGrid>3. Build a data table
The Table component from @ninna-ui/data-display provides accessible table semantics. For sortable/filterable tables, start from the data-table-filters block:
import { Table } from "@ninna-ui/data-display";
<Table> <Table.Head> <Table.Row> <Table.Header>Name</Table.Header> <Table.Header>Status</Table.Header> <Table.Header>Plan</Table.Header> </Table.Row> </Table.Head> <Table.Body> <Table.Row> <Table.Cell>Alice</Table.Cell> <Table.Cell>Active</Table.Cell> <Table.Cell>Pro</Table.Cell> </Table.Row> </Table.Body></Table>4. Mobile sidebar with Drawer
On mobile, the sidebar should collapse into a drawer. The Drawer from @ninna-ui/overlays handles focus trapping and keyboard navigation automatically:
import { Drawer } from "@ninna-ui/overlays";import { Button } from "@ninna-ui/primitives";
<Drawer> <Drawer.Trigger asChild> <Button variant="ghost">Menu</Button> </Drawer.Trigger> <Drawer.Content> {/* Navigation links */} </Drawer.Content></Drawer>