Admin dashboardPro
App shell with sidebar (drawer on mobile), top bar, breadcrumbs and pages for overview, customers, team, billing and API keys.
What's inside
- Sidebar with drawer on mobile
- Overview, customers, team, billing, API keys
- Breadcrumbs and page transitions
When to use
- Starting an internal tool or SaaS admin with real screens on day one.
When not to use
- Marketing pages.
Installation
Usage
Import it from @/components/templates/admin-dashboard after installing. It ships with sample data, so it renders straight away; swap in your own data when you're ready.
example.tsx
// app/admin/page.tsx
import { AdminDashboard } from "@/components/templates/admin-dashboard";
export default function Admin() {
return <AdminDashboard />;
}API reference
AdminDashboard
A complete admin app shell with a collapsible sidebar (a drawer on mobile), top bar, breadcrumbs and pages for overview, customers, team, billing and API keys. Also the default export. No props: sample data sits at the top of the file, ready to swap for your own.
No props.
Keyboard interactions
| Keys | Action |
|---|---|
| Tab | Move through sidebar and page |
| Esc | Close the mobile drawer |
Accessibility
- The current page has aria-current="page".
- The mobile drawer is a labelled modal dialog: focus moves in, Escape closes it and focus returns to the menu button.
Motion
- The active-nav marker slides; pages crossfade.
Responsive behavior
- Sidebar becomes a drawer below 768px.
Performance
- Only the active page is mounted.
Notes for AI
- Swap each page for your routes and keep the shell.
This page as Markdown, for assistants and coding agents:
/templates/admin-dashboard/markdownThe full library index for assistants is at /llms.txt.
Lode222 doc pagesllms.txt