Is Admin Panel a customer-facing dashboard?

No. It is an internal admin console for operators: dense tables, filters, bulk actions and permission states. Choose SaaS Dashboard or Minimal SaaS Dashboard for a customer-facing product surface.

Which screens are included?

The bundle includes Overview (/), Users (/users), Teams (/teams), Roles & permissions (/roles), Billing (/billing), Audit log (/audit-log), Settings (/settings).

Does the Users table support filtering and bulk actions?

Yes, in the Light + Dark source. Users is the primary surface: search, filter, row selection and a bulk-action bar, plus default, filtered, selected, bulk-action and empty states.

Does it include real authorization or permission enforcement?

No. Roles & permissions shows the permission-denied UI state, but authorization logic, persistence and access control belong to the consuming application.

Does it include Stripe or a live database?

No. All screens run on deterministic local fixtures. Billing shows the internal billing-record UI only, not a Stripe integration.

Can it be used with Cursor, Claude Code and Codex?

Yes. The bundle ships skills/cursor.md, skills/claude-code.md and skills/codex.md, plus implementation and remix prompts scoped to the admin-console job — dense tables and permission states, not marketing UI.

Admin Panel DESIGN.md Template

Preview

Image$49

Open the full preview to inspect theme and responsive behavior.

Admin Panel DESIGN.md template preview showing the product workspace layout

Purchase to unlock the complete system

The preview stays visible. The runnable source, DESIGN.md context, prompts, tokens, and implementation files become available after purchase.

What's in the $49 bundle

7 dashboard pages: Overview · Users · Teams · Roles & permissions · Billing · Audit log · Settings
DESIGN.md
Tokens + CSS variables
Prompts + agent skills
18 reusable components
Personal + commercial license

Next.js TypeScript Tailwind shadcn/ui

Stack: Next.js 15 · React 18 · TypeScript · Tailwind CSS · shadcn/ui

Source-backed gallery

Pages included

Every card maps to a route in the runnable source bundle. Open the matching preview path to inspect its route context, then use the ZIP for the runnable source.

Open screen

Overview

Scan system health and recent operational changes.

source-template/components/screens/overview.tsx

Open screen

Users

Search, select and bulk-manage users.

source-template/components/screens/users.tsx

Open screen

Teams

Review teams and their membership state.

source-template/components/screens/teams.tsx

Open screen

Roles & permissions

Inspect role definitions and permission-denied states.

source-template/components/screens/roles.tsx

Open screen

Billing

Review internal billing records and access boundaries.

source-template/components/screens/billing.tsx

Open screen

Audit log

Filter and inspect administrative changes.

source-template/components/screens/audit-log.tsx

Open screen

Settings

Configure system settings with destructive confirmation.

source-template/components/screens/settings.tsx

Public design system

Dense tooling with Light + Dark theme contracts

Built for internal operators, not customers: a persistent 240px sidebar, 36px dense table rows, and a bulk-action bar that appears the moment rows are selected. Sidebar density, data-table completeness, stat hierarchy, filter and bulk-action patterns, semantic states, and keyboard focus are all specified, not left for an agent to guess.

Token roles

Primary Violet — Primary actions and active navigation
Dark Ink — Dark admin canvas and high-contrast text
Soft Surface — Light admin canvas and palette surface
Action Blue — Secondary actions, links and data emphasis
Highlight — Raised panels, table surfaces and contrast
Dark Primary — Primary actions on dark surfaces

Typography and rhythm

Display: Inter, -apple-system, BlinkMacSystemFont, sans-serif
Body: Inter, -apple-system, BlinkMacSystemFont, sans-serif
Spacing base: 4px
Scale: 4 · 8 · 12 · 16 · 20 · 24 · 32 · 40px
Responsive rules: Desktop (>1024px): persistent 240px sidebar, dense multi-column grids Tablet (768–1024px): sidebar collapses to icons; tables scroll horizontally

What is included in the download

The paid ZIP contains the runnable source, design contract and agent handoff artifacts. The public file tree is intentionally visible before purchase.

source-template/

DESIGN.md

README.md

prompts/implement.md

prompts/remix.md

tokens/tokens.json

tokens/css-variables.css

tokens/tailwind.theme.ts

skills/cursor.md

skills/claude-code.md

skills/codex.md

scripts/verify-bundle.mjs

Run locally

cd source-template && pnpm install && pnpm dev

Not included: authentication, database persistence, Stripe, email, analytics providers, authorization enforcement and production API credentials.

AI-agent workflow

How to use

DESIGN.md is the context

$read DESIGN.md --agent codex

Read DESIGN.md with Codex before editing UI. Preserve local imports, responsive behavior, accessibility, and the existing shadcn/ui component context.

Install

Run pnpm install and start the local source template.

Load context

Keep DESIGN.md, components.json, and tokens in the project root.

Extend

Use the prompts and shadcn/ui component context before adding new patterns.

Minimal SaaS DashboardA calm, data-dense SaaS operating system with warm neutral surfaces, graphite navigation, electric signal accents, and a strict 4px grid.SaaS DashboardA ready-to-code SaaS dashboard starter with responsive metrics, customer operations, revenue views, and a warm operational data interface with orange and green signal colors.

Tokens

Template palette

Named roles from the template contract. Every swatch is keyboard-copyable and includes its intended use, so the palette stays meaningful outside this preview.

Token details

Brand

Surfaces

Text

Status colors

Light and dark status color tokens
Status	Light	Dark	Usage
Success			Healthy, active, completed on light surfaces
Warning			Degraded, pending review on light surfaces
Danger			Errors, destructive, offline on light surfaces
Info			Informational, links on light surfaces

More templates

Explore other ready-to-use DESIGN.md templates for your next project.

$39

Dashboard

Minimal SaaS Dashboard

A calm, data-dense SaaS operating system with warm neutral surfaces, graphite navigation, electric signal accents, and a strict 4px grid.

$39

Dashboard

SaaS Dashboard

A ready-to-code SaaS dashboard starter with responsive metrics, customer operations, revenue views, and a warm operational data interface with orange and green signal colors.

Editorial Product Landing Page template preview

Free

Marketing

Editorial Product Landing Page

A complete conversion system for product launches: warm editorial composition, signal-red action hierarchy, product evidence, section rhythm, copy limits, and mobile rules.

$29

AI App

AI App Starter

A dark-first DESIGN.md for AI apps: deep space canvas, an indigo-to-violet brand gradient reserved for generative moments, calm neutrals, and streaming-aware states.

Need to know

Frequently asked questions

Practical answers about this template, its implementation scope, and the source bundle.

Dense tooling with Light + Dark theme contracts

Token roles

Primary Violet — Primary actions and active navigation
Dark Ink — Dark admin canvas and high-contrast text
Soft Surface — Light admin canvas and palette surface
Action Blue — Secondary actions, links and data emphasis
Highlight — Raised panels, table surfaces and contrast
Dark Primary — Primary actions on dark surfaces

Typography and rhythm

Display: Inter, -apple-system, BlinkMacSystemFont, sans-serif
Body: Inter, -apple-system, BlinkMacSystemFont, sans-serif
Spacing base: 4px
Scale: 4 · 8 · 12 · 16 · 20 · 24 · 32 · 40px
Responsive rules: Desktop (>1024px): persistent 240px sidebar, dense multi-column grids Tablet (768–1024px): sidebar collapses to icons; tables scroll horizontally

Template palette

Named roles from the template contract. Every swatch is keyboard-copyable and includes its intended use, so the palette stays meaningful outside this preview.

Token details

Brand

Surfaces

Text

Status colors

Light and dark status color tokens
Status	Light	Dark	Usage
Success			Healthy, active, completed on light surfaces
Warning			Degraded, pending review on light surfaces
Danger			Errors, destructive, offline on light surfaces
Info			Informational, links on light surfaces

Preview

Purchase to unlock the complete system