dashboard

Starter

Appears as a one-click chip in the workspace.

Build an analytics or admin dashboard UI with sidebar navigation, top bar, stat cards, and a primary chart or table area. Use when the user asks for a dashboard, admin panel, analytics view, or "control panel" for any kind of data. Prefer scaffold-next; falls back to scaffold-react.

Scaffolds

react

Verified dependencies

@radix-ui/react-tabs

@radix-ui/react-dropdown-menu

lucide-react

clsx

tailwind-merge

Example prompts

Prompts this skill is written to handle. Copy one into the workspace to try it.

Build a revenue analytics dashboard for a SaaS

Make an admin panel with sidebar nav and a stats overview

Design a fitness tracker dashboard with weekly charts

Build a server-status dashboard with uptime + latency cards

Instructions

The full instruction set the agent receives when this skill is active.

Dashboard

A dashboard is a glanceable summary that lets the user drill in. Optimize for scan-ability over density.

Layout

Sidebar (left, 220-260px on desktop): logo, primary nav (4-7 items max), user chip at bottom. Collapsible to icons-only at < md.
Top bar: page title, search/command input, secondary actions, avatar dropdown. Sticky.
Main content:
- Stat cards row — 3-5 cards. Each shows a number, label, and trend (delta vs prior period). Don't over-decorate; the number is the design.
- Primary chart or table — the focal element. Give it room.
- Secondary panels — recent activity, breakdown by segment, etc.

Components

Use @radix-ui/react-dropdown-menu for the user/account menu (already installed in scaffold-next).
Use @radix-ui/react-tabs for switching between views in the same panel.
Use lucide-react for nav and stat icons. Pick one icon style and stay consistent.
For charts, prefer Recharts (npm install recharts) — declarative, plays well with Tailwind. The scaffold guard allows the install.

Sample Data

If the dashboard has no real data source yet, hardcode plausible sample data in a lib/sample-data.ts file. Use realistic numbers, not 1, 2, 3 placeholders. Example shape:

export const revenue = [
  { month: 'Jan', value: 12400 },
  { month: 'Feb', value: 14820 },
  // ...
];

This makes the dashboard render with content immediately so the user sees the design, not a "no data" empty state.

Avoid

Walls of identical cards. Vary card sizes — give the most important metric 2x width.
Dense data tables in a hero position with no filtering UI; users won't scroll.
Colorful pie charts. Stick to 1-2 accent colors + neutral scale.

Implementation Notes

scaffold-next: app/dashboard/layout.tsx for sidebar + top bar; route segments for sub-pages.
scaffold-react: Use @tanstack/react-router for the nested routing (already installed). Keep state local; no Zustand/Redux unless explicitly asked.

See also: [[frontend-design]], [[theme-kit]].