React data display components for Tailwind CSS
Data display components present records, people and history in a form people can scan. The small ones appear on every screen: Avatar with an initials fallback and status dots, Badge, Tag, Kbd for keyboard keys, Countdown, and Description List, the key-value grid of every detail page. For history and structure there are Timeline, Tree View, Approval Flow and Comment Thread. Developer tools get Code Block, JSON Viewer, Diff Viewer, Log Viewer for streaming logs, and Markdown with highlighted code. For planning there are Calendar View with month, week, day and agenda views, Scheduler for booking rooms, cars and people on a resource timeline, and Gantt for project timelines with dependencies.
All Data Display[23]
BadgeFree
Status chips, removable filters and animated counts in three variants and six tones, plus an anchor that pins a count or dot to any corner.
File manager
The documents of a company or a record: folders and files in a grid or a list, with a folder tree, uploads, moves, renames and bulk actions.
Countdown
Time left until a moment, as rolling digit blocks, inline in a sentence or in words, with a finish callback and done content.
Approval Flow
A request's sign-off chain: who approved, who is next and who can still reject, with comments, reminders, history and a compact summary.
AvatarFree
A person or organization as a photo that falls back to colored initials, with a status dot, five sizes, any shape and a stacking group.
Calendar View
A scheduler for appointments and meetings: month, week, day and agenda views with a now line, event details and drag to reschedule.
Code BlockFree
A syntax-highlighted code block that builds its entire theme from a single accent color.
Comment Thread
Discussions on a record: comments with replies, reactions, edit and delete, @mentions and a composer that sends optimistically with retry.
Contact card
A person or a company at a glance: avatar, role, status, call / email / WhatsApp buttons, tags, owner and last activity, in three layouts.
Description List
The key-value grid of every detail page: client details, invoice summaries and profiles, with copy buttons, skeletons and iOS rows.
Diff Viewer
Shows what changed between two texts: split or unified, word highlights, collapsed context, syntax colors and jumps between changes.
File List
Attachments and documents as rows, preview tiles or chips, with type icons, photo thumbnails, upload progress, selection and file actions.
FolderFree
An animated folder whose cards fan out on hover and lift open on click, behind a 3D-tilted glass flap.
Gantt
A project timeline: tasks as bars you drag and resize, progress, dependency arrows, milestones, folding groups and a phone task list.
JSON Viewer
A collapsible JSON tree with type colors, search that opens the matching branches, copy value or path, and virtualization for huge payloads.
Log Viewer
A streaming log console for 100.000 lines: level colors, level and text or regex filters, follow the tail, ANSI colors and JSON details.
Markdown
Markdown in the library's look: tables that scroll in their own box, highlighted code, task lists, and a streaming mode that never flickers.
Presence
Who is here right now: an avatar stack with status rings and a who-is-here list, a typing indicator, live cursors and last seen.
Scheduler
Book rooms, cars and people on a resource timeline: drag to book, move and stretch bookings, conflicts refused, an agenda on phones.
Tag
Interactive chips: toggling filter chips, removable tags, chips with a dot, icon, avatar or count, and groups that wrap, scroll or fold.
Timeline
Things that happened, in order: activity feeds, audit trails, changelogs and order tracking, with icons, relative times and day groups.
Guides
Tutorials and guides from the blog that use these components.
Component guides
React Command Palette: Cmd+K, Nested Pages and Mobile
Build a React command palette that binds Cmd+K on a Mac and Ctrl+K elsewhere, with nested pages, async results, recents and a full-height sheet on phones.
9 min read
Mobile UI in React
Responsive Table Mobile Layout: Rows to Cards in React
A responsive table mobile guide: when rows should become cards below 768px, which columns survive, and how sorting and bulk actions work without headers.
11 min read
Next.js and Tailwind CSS
Tailwind v4 Design Tokens: Colors, Dark Mode and Contrast
Tailwind v4 design tokens from a production React library: @theme inline, semantic surfaces, status colors, dark mode and a contrast check you can run in CI.
19 min read
About Data Display
File List, File Manager, Contact Card, Presence and Folder round out the category. On a phone the diff viewer shows one unified column, the scheduler becomes an agenda and the Gantt chart a task list, menus and emoji rows open as bottom sheets, and description lists put each label above its value. 5 of the 23 data display components are free: the source is open to everyone through the CLI, shadcn and the docs page (the MCP server needs a free account key). The other 18 are part of Pro.