indfn/multi-party-coordination-langraph-agent/shadcn-dashboard-free

Shadcn Dashboard Free Development Guide

This skill encodes the exact patterns and conventions used in this Vite + React 19 client-side admin dashboard SPA. 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

Adding a New Feature (6 Steps)

1. Add mock data in src/api/<name>/<name>-data.ts.
2. Add an MSW handler for it and register it in src/api/mocks/handlers/mock-handlers.ts.
3. Create a context in src/context/<name>-context/ that fetches via useSWR + the shared fetchers in src/api/global-fetcher.ts, exposing state + setters.
4. Build the view in src/views/apps/<name>/ (or the appropriate views/ subfolder), composing components from src/components/<name>/ and shadcn primitives from src/components/ui/.
5. Register the route: add a Loadable(lazy(() => import('../views/...'))) declaration and a route entry in src/routes/Router.tsx, under FullLayout for dashboard pages or BlankLayout for auth/standalone pages.
6. Add a sidebar nav item if the page should be reachable from the sidebar (src/layouts/full/vertical/sidebar/).

Data Fetching Pattern

• No real backend — everything goes through mock data + MSW handlers, consumed via swr.
• src/api/global-fetcher.ts exports getFetcher, postFetcher, putFetcher for use with useSWR/mutations.
• Don't fetch a real endpoint for a new feature unless one already exists in this repo — follow the blog/notes/ticket pattern instead.

Data Tables

Use the wrappers in src/components/tables/ (e.g. DataTable.tsx) which wrap TanStack Table (@tanstack/react-table). Don't hand-roll a new table implementation.

Forms

No form library is currently installed. See src/components/form/index.tsx for the existing reference pattern (Input/Select/Switch/Checkbox/RadioGroup/Calendar primitives from src/components/ui/); discuss with the user before adding a form library dependency.

Charts

Use recharts (see src/components/ui/chart.tsx and src/components/dashboards/modern/total-sales.tsx).

Icons

• lucide-react — most common
• @iconify/react (import { Icon } from '@iconify/react') — used in some form/table components

Match whichever icon package the file you're editing already imports.

Code Conventions

• Use cn() from src/lib/utils.ts for class merging — never concatenate className strings.
• Path aliases src/* and @/* both resolve to ./src/* — match the convention already used in the file you're editing.
• npm run build runs tsc before vite build; type errors block the build.
• npm run lint runs with --max-warnings 0 — fix warnings, don't suppress them.
• Package manager is npm (package-lock.json) — don't introduce pnpm/yarn/bun lockfiles or commands.