Build an internal dashboard
The layout every internal tool needs and nobody enjoys rebuilding. Start with the shell, fill it with the four things a dashboard is actually made of.
Take all 7 at once
npx hoverlab add dashboard-shell dashboard-page-header dashboard-stat-cards bar-chart-panel data-table-sortable data-table-pagination skeleton-listOr through the shadcn CLI, with nothing installed first:
npx shadcn@latest add https://hoverlab5.netlify.app/r/path-dashboard.jsonThis path is a published registry item — one name that pulls in all 7 blocks. Or work down the list and copy each one from its page; the order is what matters, not how the files get there.
- 1
Sidebar, top bar and a content slot. Everything else drops into it, so it comes first — and it is the piece with the drawer and focus behaviour you do not want to write twice.
- 2
Title, breadcrumb and the page’s primary action. Consistent headers are what make a multi-screen tool feel like one product.
- 3
The four numbers someone opens the dashboard to check, above everything that needs scrolling.
- 4
The trend behind the numbers. One chart, not six — a dashboard that shows everything shows nothing.
- 5
The rows the numbers summarize. Sorting is in the markup, so it works before you wire any data.
- 6
The moment the table has more than a screenful. Pair it with the toolbar for filtering.
- 7
What the table looks like before the data arrives. Skipping this is why so many internal tools flash empty on every load.
When you are done
Take the Admin Panel template if you want the routing and layout already wired together.