React dashboard components
Free React dashboard components for Tailwind: KPI cards, stat sparklines, activity feeds, goal rings, onboarding checklists and complete dashboard page blocks.
28 itemsFree, MITshadcn CLI compatibleTailwind CSS v4Light and dark
A good dashboard answers one question quickly: is everything fine, and if not, where do I look. These components put numbers first with tabular figures, honest deltas and small charts that show direction without decoration.
Start from a dashboard page block for the whole layout, or compose KPI rows, chart cards and activity feeds into your own. The SaaS dashboard guide walks through a full build in Next.js.
Components 17
Account Setup ProgressuiReact onboarding card that shows account setup as completed steps out of a total, with a labelled progress bar and a hint for the next step to finish.npx shadcn@latest add ui.minidev.pro/r/account-setup-progress.jsonActivity FeeduiReact activity feed that lists who did what and when, with initials avatars, muted action text and tabular timestamps in a single bordered card.npx shadcn@latest add ui.minidev.pro/r/activity-feed.jsonAdmin Stat StripuiResponsive Tailwind row of admin KPI tiles, each with a label, a large tabular value and an optional up or down delta. Collapses from four columns to one.npx shadcn@latest add ui.minidev.pro/r/admin-stat-strip.jsonCalendar AgendauiReact agenda list of the day's events with a fixed time column, title and optional meta line such as location or attendees, divided inside one card.npx shadcn@latest add ui.minidev.pro/r/calendar-agenda.jsonGoal RinguiA circular progress ring that shows how far along a goal is, with the percentage in the middle and a caption below. Handy for fitness, sales or weekly targets.npx shadcn@latest add ui.minidev.pro/r/goal-ring.jsonImpersonation BanneruiA top of page bar telling support staff which user account they are viewing as, with an Exit button to end the session. Common in admin and support tools.npx shadcn@latest add ui.minidev.pro/r/impersonation-banner.jsonKpi RowuiA responsive row of KPI tiles, up to four across, each with a label, a large value and an up or down delta. Drop it at the top of a SaaS analytics dashboard.npx shadcn@latest add ui.minidev.pro/r/kpi-row.jsonMetric DeltauiA tiny percentage change indicator with an up arrow in green for gains and a down arrow in red for losses. Pair it with stat cards, KPI tiles and table cells.npx shadcn@latest add ui.minidev.pro/r/metric-delta.jsonOnboarding ChecklistuiA Get started card with a list of setup tasks that toggle between done and pending on click, showing a check box and a strikethrough on completed items.npx shadcn@latest add ui.minidev.pro/r/onboarding-checklist.jsonResource Quota GriduiResponsive grid of quota cards, one per resource, each with a labelled usage bar showing used over max. Useful for infra limits like builds, storage and seats.npx shadcn@latest add ui.minidev.pro/r/resource-quota-grid.jsonSparkline SetuiResponsive grid of metric cards, each with a label, value, delta chip and a small area chart sparkline. Good for a KPI overview at the top of a React dashboard.npx shadcn@latest add ui.minidev.pro/r/sparkline-set.jsonStat CarduiReact stat card with a label, optional icon, a large tabular value and a delta chip colored by its sign, with invertDelta for metrics like churn or latency.npx shadcn@latest add ui.minidev.pro/r/stat-card.jsonStat With SparklineuiMetric card with a label, a large value, a signed delta and an edge-to-edge area sparkline that turns red when the trend is down. Built for React dashboards.npx shadcn@latest add ui.minidev.pro/r/stat-sparkline.jsonStreak CalendaruiStreak calendar showing a 28-day grid in seven columns, with active days filled in accent. Useful for habit tracking, learning apps and activity views.npx shadcn@latest add ui.minidev.pro/r/streak-calendar.jsonTimelineuiTailwind vertical timeline with a hairline rail, a dot per event, titles, optional descriptions and right-aligned timestamps for activity feeds and changelogs.npx shadcn@latest add ui.minidev.pro/r/timeline.jsonUptime BaruiStatus page uptime bar with one cell per day over 90 days, green when operational and red on degraded days, and the uptime percentage above. Built in Tailwind.npx shadcn@latest add ui.minidev.pro/r/uptime-bar.jsonEvent CalendaruiA React week and day calendar scheduler with events placed by time, side by side overlap layout, an all-day row, a live time line and click or keyboard to create events.npx shadcn@latest add ui.minidev.pro/r/event-calendar.json
Blocks and full pages 11
Admin ConsoleblockA full admin console with an impersonation banner, org switcher, KPI strip and tabs for users, SSO and IP allowlist, resource quotas and bulk user import.npx shadcn@latest add ui.minidev.pro/r/admin-console.jsonAdmin OverviewblockAn admin overview section with a heading and invite action, stat tiles with deltas for seats, MRR, NPS and churn, and a recent activity feed below.npx shadcn@latest add ui.minidev.pro/r/admin-overview.jsonAnalytics PageblockA React analytics page with a KPI strip for installs, trials, conversions and seats, plus two chart cards showing 30 day bar trends side by side.npx shadcn@latest add ui.minidev.pro/r/analytics-page.jsonCommand CenterblockA React operations dashboard with a KPI row for agents, jobs, failures and latency, plus a command palette dialog opened from the header action.npx shadcn@latest add ui.minidev.pro/r/command-center.jsonDashboard HomeblockA React dashboard home screen with a page header and new project action, a KPI row with deltas, a 30 day active users bar chart and an activity feed.npx shadcn@latest add ui.minidev.pro/r/dashboard-home.jsonInbox PageblockA Tailwind inbox panel listing messages with sender, preview line and timestamp, a New badge on unread items, and a mark all read action in the header.npx shadcn@latest add ui.minidev.pro/r/inbox-page.jsonProject DetailblockA project detail header in React with a back link, page title and description, and a description list for owner, stack, license and registry.npx shadcn@latest add ui.minidev.pro/r/project-detail.jsonProject ListblockA React projects list with a page header and new project button, and bordered rows that show each project name with an active or paused status badge.npx shadcn@latest add ui.minidev.pro/r/project-list.jsonReport BuilderblockA React report builder layout with an export action, a date range picker and a chart card for the selected metrics. A base for custom reporting screens.npx shadcn@latest add ui.minidev.pro/r/report-builder.jsonSupport InboxblockA React support ticket inbox with search and compose actions and a list of threads showing ticket ID, subject, requester, status badge and SLA time left.npx shadcn@latest add ui.minidev.pro/r/support-inbox.jsonUser DetailblockA Tailwind user detail header with a back link to users, an avatar beside the name in the title, a role and email line, and a team member row with role.npx shadcn@latest add ui.minidev.pro/r/user-detail.json
See them live
Galleries render these components with sample data in every state.
Frequently asked questions
Is there a complete dashboard template?
Yes. The dashboard home and admin overview blocks are full pages, and the Lumen and Atlas templates show dashboards inside real product stories.
Do the KPI cards show trends?
Yes. Stat cards and sparklines show the value, the change and a small trend line, with colors that can be inverted for metrics where down is good.
Does it work with Next.js App Router?
Yes. Components are client friendly and the blocks drop into a Next.js page or layout.