# Admin dashboard

> App shell with sidebar (drawer on mobile), top bar, breadcrumbs and pages for overview, customers, team, billing and API keys.

Template · Pro · https://lodeui.com/templates/admin-dashboard

## When to use

- Starting an internal tool or SaaS admin with real screens on day one.

## When not to use

- Marketing pages.

## Installation

```bash
npx shadcn@latest add @lode/admin-dashboard
```

Pro: needs a Lode API key and the `@lode` registry in components.json. See https://lodeui.com/docs/cli.

npm dependencies: motion, lucide-react

## Usage

```tsx title="example.tsx"
// app/admin/page.tsx
import { AdminDashboard } from "@/components/templates/admin-dashboard";

export default function Admin() {
  return <AdminDashboard />;
}
```

Built from: Avatar group, Breadcrumb, SaaS revenue analytics, CRM contacts, Team members, Billing settings, API keys manager

## 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.

## Related

- [SaaS revenue analytics](https://lodeui.com/blocks/revenue-analytics) — Revenue trend, MRR, ARR, customers and conversion, source mix and a live transactions feed.
- [CRM contacts](https://lodeui.com/blocks/crm-contacts) — Contacts on the data table with filters, expandable details, bulk email, tag and delete.
- [Team members](https://lodeui.com/blocks/team-members) — Seat usage, invite by email with role, change roles, resend or remove.
- [Billing settings](https://lodeui.com/blocks/billing-settings) — Plan, payment method, usage meters, invoices and a prorated plan change.
- [API keys manager](https://lodeui.com/blocks/api-keys-manager) — Create scoped live/test keys, reveal once, copy, and revoke with confirmation.