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.
Most applications spend more code rendering data than collecting it. You need a table for lists, a card for summaries, a badge for statuses, an avatar for users, a skeleton for loading, and a kbd element for shortcuts. That is the data-display family in Drivn, and every component is pure React plus Tailwind with no runtime UI dependencies.
This hub links to each data-display component in the Drivn library, with short descriptions and the shared install path. Unlike libraries that wrap tables and cards in a primitives package, Drivn components live in your repo after npx drivn add — you own the source, you edit the styles, and there is no version upgrade that ships breaking changes into your UI without your consent. That ownership model matters most on data views, where spacing, typography, and empty-state copy usually need product-specific tuning rather than generic library defaults out of the box.
Tables, cards, and grids
For a static grid of data, table gives you dot notation (Table.Header, Table.Row, Table.Cell) with striped and bordered variants. For sorting, row selection, pagination, and loading skeletons in one component, use data-table — it composes Table plus Checkbox and Pagination internally. When rows are documents rather than flat records, use card with its Card.Preview and Card.Info sub-components for a consistent content shape.
Cards are composable: stack them in a CSS grid for product listings, line them up in a flex row for dashboards, or pair them with badges to call out status.
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.