A dashboard is not a component, it is four of them stacked: a shell that holds navigation and a content area, a row of metric cards, one or two charts, and a table. Almost none of the difficulty is in the styling of those parts, which is why taking them from a catalogue and spending the time on the data layer is usually the right trade.
There are 36 public components on 21st with "dashboard" in the name. That is a fraction of what "hero" returns, and the reason is structural: a hero is one screen you can lift whole, while a dashboard is a layout wrapped around numbers only you have. So treat the catalogue as a source of parts and of one good shell, not of a finished admin panel.
The shell: sidebar, header, and one thing that scrolls
Dashboard with Collapsible Sidebar by Sonu is the most bookmarked of the set at 836, and it is the whole frame: collapsible navigation, a header, and a content region to fill. Dashboard Sidebar by Arun Dass (654) is the narrower version, navigation only, which drops into a layout you already have. Efferd Dashboard 2 by Efferd (778) is the fuller composition, shell and panels together, worth reading for its spacing even if you replace every panel in it.
The decision that actually matters here is which element scrolls. If the document scrolls, the sidebar leaves with it and a long table pushes your navigation off screen. If the shell is fixed and only the main region scrolls, you get the behaviour people expect from an admin tool, at the cost of managing overflow on every panel inside it. Pick one deliberately, and persist the collapsed state somewhere the server can read, so a server-rendered page does not flash the wrong width on every navigation.
Metric cards: a number, a label, and a comparison
Progress Metric Card by Mak VieSAinte (513) is the version that pairs a value with progress towards a target, which is the right shape when the number has a goal attached: quota, budget, uptime. Stats Card by Ravi Katiyar (224) is the plain grid of figures, and Animated Dashboard Card by Isaiah (364) is the same idea with motion on hover.
Three things stat cards get wrong, in roughly the order they cause trouble:
- A delta with no window. "+12%" is not a fact until you say against what. Put the comparison period in the card, not in a tooltip.
- Proportional digits. A number that changes on refresh will jitter as the glyph widths shift.
font-variant-numeric: tabular-numscosts one line and fixes it permanently. - A height that depends on the data. If the card is shorter while loading, every panel below it moves when the request lands. Reserve the final height in the skeleton.
Charts and analytics panels
Analytics Bento by Jatin Yadav (462) is a bento grid of analytics panels, which is a reasonable answer to the awkward middle of a dashboard where you have four charts of unequal importance. Real time Analytics by Kousthubha Yadiyala (242) is the live-updating take on the same region. Globe Analytics by shuding (240) is a spinning globe with points on it, and it is worth being honest about what that is: geography at a glance, not a value anyone can read off the screen.
Before you take any chart, look at what it imports. A charting library is usually the heaviest dependency on an admin route, and the failure mode is ending up with two of them because a card you copied brought its own. Decide on one library first, then only take charts built on it.
The table, which the catalogue will not hand you
Dashboard by Ravi Katiyar (386) and Project Management Dashboard by scott clayton (259) both include list views, and they are fine as a starting composition. But a real data table, with sorting, filtering, pagination, row selection and a sticky header, is the piece you should plan to build. shadcn/ui documents one on top of TanStack Table, which is the sane place to start: the sorting and filtering logic is headless, so the markup and the styling stay yours.
What makes a dashboard good rather than pretty
The visual layer is the easy half. These are the decisions that separate a dashboard people use from one they screenshot.
- Give the layout a hierarchy. One headline number, then its trend, then the breakdown. A reader should be able to answer "is it fine?" without moving their eyes, and only then start asking why. A grid of eight equally sized cards has no answer in it, because every number is claiming to be the most important one.
- Empty and loading states are most of the work. Every panel needs at least three: loading, empty, error. And "empty" is two different states that need different copy. A new account has never had data, and it wants a next step. An account with data but nothing in the selected range wants the range widened. Showing "no results" to both is how a working dashboard gets reported as broken.
- A chart needs a table equivalent. An SVG chart is a shape with no values in it for anyone using a screen reader, and
aria-labelon the container only gives them the title. Render the underlying rows as a real<table>, either visually hidden or behind a "view as table" toggle. The same markup makes the numbers copyable, which sighted users will use more than you expect. - Do not colour by series when the series is a status. Categorical palettes assign colours by position, so a status chart can end up drawing "failed" in green and "succeeded" in amber. Status colours are semantic and fixed: reserve red, amber and green for meaning, and use a neutral ramp for series that are merely different from each other.
- Past a certain row count, a dense table beats cards. Cards work up to about a dozen items, while the reader is still browsing. Beyond that they are scanning for one row, and scanning wants aligned columns, right-aligned numbers and one record per line. A card grid at 200 items is a table with the alignment removed.
Where else to look
Being honest about the alternatives, because the answer is not always us:
| Source | Best for | Trade-off |
|---|---|---|
| shadcn/ui | Dashboard blocks plus a charts layer built on Recharts | You own the copied code, so upstream fixes are yours to merge by hand |
| Tremor | Dashboard-first React components: KPI cards, charts, tables | You adopt its whole vocabulary and its look, which is recognisable |
| TanStack Table | The table logic: sorting, filtering, pagination, virtualisation | Headless by design, so every piece of markup and styling is still yours |
| 21st | Community shells, metric cards and analytics panels | Quality varies by author, so preview before you take it |
The practical split: one charting library, one table library, and take the shell and the card compositions from wherever they already exist.
Taking one
Every component page has a live preview and the code. Installing goes through the shadcn CLI against our registry:
The key comes from your 21st account and installs need a membership, so set API_KEY_21ST once in your shell and the command works for anything in the catalogue. If you would rather not leave your editor, the 21st MCP does the same thing from Claude, Cursor or Codex: ask for a dashboard, get previews inline, and have the agent write the file.
Frequently asked
- What components does an admin dashboard need?
- Four parts, in practice: a shell that holds navigation and a scrolling content area, a row of metric cards, one or two charts, and a data table. The styling of those parts is the easy half. The decision that makes a dashboard usable is hierarchy: one headline number, then its trend, then the breakdown, so a reader can answer whether things are fine before asking why.
- How do you make a dashboard chart accessible?
- Give every chart a table equivalent. An SVG chart carries no values for anyone using a screen reader, and an aria-label on the container only announces the title, not the data. Render the same rows as a real HTML table, either visually hidden or behind a view-as-table toggle, which has the side benefit of making the numbers selectable and copyable.
- Should dashboard data go in cards or a table?
- Cards work up to roughly a dozen items, while the reader is still browsing. Past that they are scanning for one specific row, and scanning wants aligned columns, right-aligned numbers and one record per line, which is what a dense table gives you. A card grid at 200 items is a table with the alignment taken out.
- Where can I find React dashboard components, and how do I install one?
- 36 public components on 21st have dashboard in the name as of August 2026, covering shells with collapsible sidebars, metric and stats cards, and analytics panels, browsable at 21st.dev/community/components/s/dashboard. Installing goes through the shadcn CLI against the 21st registry: run npx shadcn@latest add with the quoted URL https://21st.dev/r/<username>/<slug>?api_key=$API_KEY_21ST. The key comes from your 21st account and installs require a membership.