shadcn-dashboard

name

shadcn-dashboard

description

Guide for building pages, features, tables, forms, API routes, and navigation in this Next.js 16 App Router + React 19 shadcn/Base UI admin dashboard. Use this skill whenever the user wants to add a new page, wire up an API route, build a data table, add a form, configure the sidebar, add charts, or work with this dashboard's existing conventions. Also triggers when the user asks about icon usage or theming (dark/light). Even if the user doesn't say "dashboard" explicitly — if they're adding UI, pages, or features to this project, use this skill.

Shadcn Dashboard (Next.js) Development Guide

This skill encodes the exact patterns and conventions used in this Next.js App Router admin dashboard. Following these patterns keeps new code consistent with the existing codebase. See AGENTS.md for the fuller reference this skill is derived from.

Quick Reference: What Goes Where

Task	Location
New dashboard page	app/(dashboard-layout)/<area>/<page>/page.tsx
New standalone page (auth, etc.)	app/auth/<area>/page.tsx
Sidebar nav entry	app/(dashboard-layout)/layout/vertical/sidebar/sidebaritems.ts
Reusable feature component	app/components/<domain>/
shadcn-style primitive	components/ui/
API route handler	app/api/<feature>/route.ts
SWR fetchers	app/api/global-fetcher.ts
Feature state/context	app/context/<feature>-context/