React Data Display and Feedback Components
34 components, 17 free · React, TypeScript and Tailwind CSS, light and dark
The Data Table handles sorting, search, row selection, bulk actions, column visibility and pagination with TanStack Table. Charts cover area, bar and donut, KPI cards and sparklines, each with a data table for screen readers.
Badges and states fill the gaps between: empty, error, success and loading screens, each with a title, a sentence and one action, plus skeletons.
How to build a React dashboard
NewFreeSortable List
A list you reorder by dragging its handles or with the keyboard, with every move undoable.
NewFreeLoaders
Seven small loaders and a hook that stops quick replies from flashing a spinner.
ProBreakdown Chart
Stacked bar chart with breakdown table.
ProCompact Breakdown
Small card splitting a total into parts.
ProChange Summary
What changed since last time, by metric.
ProExperiment Card
A/B test result card.
FreeAlert
Inline alert in five tones.
FreeProgress Bar
Progress bar.
FreeProgress Circle
Circular progress ring.
BlockProDashboard
Complete analytics dashboard screen.
FreeData Table
Data table with sorting, search and pagination.
FreeCharts
Area, bar and donut charts with KPI cards.
FreeLine Chart
Line chart for trends over time.
ProComposed Chart
Combined bar, line and area chart.
ProRadar Chart
Radar chart for comparing measures.
ProRadial Chart
Radial progress and share chart.
ProHistogram
Histogram with p50, p95 and p99 markers.
ProCohort Retention
Cohort retention table.
ProCalendar Heatmap
GitHub-style calendar heatmap.
ProInsight Cards
KPI card with trend and AI insight.
FreeFeedback Widget
Feedback widget with NPS, emoji or stars.
FreeBadge
Status badges in seven colours.
FreeEmpty States
Illustrated empty states.
FreeEmpty & Loading States
Empty, error, success and loading states.
