React Data Display Components for Next.js
Display structured data in React — tables, cards, badges, avatars, skeletons. Drivn ships pure React + Tailwind with zero runtime dependencies.
Rendering data is where most application code actually lives. A dashboard needs a table for lists, a card for summaries, a badge for statuses, an avatar to put a face on a user, a skeleton while a request is in flight, and a kbd element to spell out a shortcut. Together those form the data-display family in Drivn, and every one is pure React plus Tailwind with no runtime UI dependencies to install alongside them.
This hub links each data-display component with a short description and the shared install path so you can pick the exact set your views need. The difference from a library that wraps tables and cards in a primitives package is ownership: after npx drivn add, the source sits in your repo, the styles are yours to edit, and no version bump ships a breaking change into your UI without your say-so. That model matters most on data views, where spacing, typography, and empty-state copy almost always need product-specific tuning rather than generic defaults. Install one component or all of them — each is a standalone file, so a badge never drags in a table, and pulling in only what a screen renders keeps the surface small.
Tables, cards, and grids
When the data is a flat list of records, table gives you dot notation — Table.Header, Table.Row, Table.Cell — with striped and bordered variants for readability. Step up to data-table when a view needs sorting, row selection, pagination, and a loading skeleton in one component; it composes Table together with Checkbox and Pagination internally, so you configure columns rather than wire the plumbing. When each row is really a document rather than a cell of data, reach for card and its Card.Preview and Card.Info sub-components to keep every item the same shape.
Cards compose the way you would expect: drop them into a CSS grid for a product listing, line them up in a flex row for a dashboard summary, or pair each with a badge to surface status at a glance. Because the markup is yours after install, adjusting a grid gap or a card's padding is a direct edit, not a config override.
Status, identity, and shortcuts
Use badge for short status labels (counts, states, tags), avatar for user identity with fallback initials, and kbd to render keyboard shortcuts like ⌘K. Each is a single tiny file — badges and kbds weigh under 1 kB each — so pulling them in selectively has no bundle cost.
Badges accept variant and size props; avatars accept src, alt, initials, and a size variant. Every data-display component uses the same const styles object pattern so types are autocompleted from a single source of truth.
Loading and empty states
A data view without loading and empty states is incomplete. Drivn ships skeleton as a single primitive — size and shape are entirely className-driven, so you compose the exact placeholder shape your data view needs. For empty states, the DataTable component has a built-in emptyState prop; for custom layouts, render a card with a short message and a primary action.
Keep loading skeletons static (pulse animation only). Avoid shimmer effects that draw attention from incoming content — the goal is reassurance, not entertainment.
Install any data-display component
Use the Drivn CLI to install components one at a time. Each install copies the source into your src/components/ui/ folder, so from that moment forward the component is yours to customize. Installation is idempotent: re-running npx drivn add table shows a prompt before overwriting, so you never lose local edits to an already-installed component. Pair any of these with your existing forms and overlays in the same project.
1 npx drivn add table 2 npx drivn add data-table 3 npx drivn add card 4 npx drivn add badge 5 npx drivn add avatar 6 npx drivn add skeleton
Install Drivn in one command
Copy the source into your project and own every line. Zero runtime dependencies, pure React + Tailwind.
npx drivn@latest createRequires Node 18+. Works with npm, pnpm, and yarn.