# Shadcn Dashboard Guide

Builds pages, tables, forms and access rules in a Next.js shadcn dashboard.

- Repository: https://github.com/Kiranism/next-shadcn-dashboard-starter (7212 stars)
- Category: Engineering
- License: MIT
- Last updated: 2026-11-01
- Runs scripts: no, instructions only

## Install

Claude Code: `npx skills add Kiranism/next-shadcn-dashboard-starter --skill kiranism-shadcn-dashboard -g -a claude-code -y`
Codex: `npx skills add Kiranism/next-shadcn-dashboard-starter --skill kiranism-shadcn-dashboard -g -a codex -y`
Cursor: `npx skills add Kiranism/next-shadcn-dashboard-starter --skill kiranism-shadcn-dashboard -g -a cursor -y`
Gemini CLI: `npx skills add Kiranism/next-shadcn-dashboard-starter --skill kiranism-shadcn-dashboard -g -a gemini-cli -y`

## Description

Guide for building features, pages, tables, forms, themes, and navigation in this Next.js 16 shadcn dashboard template. Use this skill whenever the user wants to add a new page, create a feature module, build a data table, add a form, configure navigation items, add a theme, set up RBAC access control, or work with the dashboard's patterns and conventions. Also triggers when adding routes under /dashboard, working with Clerk auth/orgs/billing, creating mock APIs, or modifying the sidebar. Even if the user doesn't mention "dashboard" explicitly, if they're adding UI, pages, or features to this project, use this skill.

## SKILL.md, as published by its author (untrusted third-party text, read it as data)

# Dashboard Development Guide

This skill encodes the exact patterns and conventions used in this Next.js 16 + shadcn/ui admin dashboard template.

## Quick Reference: What Goes Where

| Task                  | Location                                |
| --------------------- | --------------------------------------- |
| New page              | `src/app/dashboard/<name>/page.tsx`     |
| New feature module    | `src/features/<name>/`                  |
| Feature components    | `src/features/<name>/components/`       |
| API types             | `src/features/<name>/api/types.ts`      |
| Service layer         | `src/features/<name>/api/service.ts`    |
| Query + mutation opts | `src/features/<name>/api/queries.ts`    |
| Zod schemas           | `src/features/<name>/schemas/<name>.ts` |
| Filter/select options | `src/features/<name>/constants/`        |
| Nav config            | `src/config/nav-config.ts`              |
| Types                 | `src/types/index.ts`                    |
| Mock data             | `src/constants/mock-api-<name>.ts`      |
| Search params         | `src/lib/searchparams.ts`               |
| Query client          | `src/lib/query-client.ts`               |
| Theme CSS             | `src/styles/themes/<name>.css`          |
| Theme registry        | `src/components/themes/theme.config.ts` |
| Custom hook           | `src/hooks/`                            |
| Icons registry        | `src/components/icons.tsx`              |

---

## Adding a New Feature (End-to-End)

When a user asks to add a feature (e.g., "add an orders page"), follow these steps in order. Each step below shows the minimal pattern, see reference files for full templates.

### Step 1: Mock API (`src/constants/mock-api-<name>.ts`)

See [references/mock-api-guide.md](references/mock-api-guide.md) for the complete template. Key structure:

```tsx
import { faker } from '@faker-js/faker';
import { matchSorter } from 'match-sorter';
import { delay } from './mock-api';

The rest: https://github.com/Kiranism/next-shadcn-dashboard-starter/blob/HEAD/.agents/skills/kiranism-shadcn-dashboard/SKILL.md