TaylorDB/hot-colts-matter
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
26b00bcf61
hot-colts-matter/docs/SHADCN_COMPONENTS_GUIDE.md

1.7 KiB
Raw Blame History

shadcn/ui Dashboard Components Guide

This is the entry point for shadcn/ui documentation in this template. The guide is split into smaller files so agents (and humans) can jump to the topic they need.

📚 Topics

  • Installation
    See SHADCN_INSTALLATION.md for:

    • Installing individual components (core, dashboard, data display, advanced)
    • Command examples for pnpm dlx shadcn@latest add

  • Dashboard Patterns
    See SHADCN_DASHBOARD_PATTERNS.md for:

    • Stats cards layout
    • Data table with dropdown actions
    • Create/edit form in a dialog
    • Loading states with Skeleton
    • Tabs for different views
    • Status badges
    • Toast notifications (with tRPC mutations)
    • Form with validation (react-hook-form + zod)
    • Side sheet for details
    • Command palette (search, Cmd/Ctrl+K)

  • Design & Layout
    See SHADCN_DESIGN_AND_LAYOUT.md for:

    • Color schemes (semantic tokens)
    • Spacing conventions
    • Icons (lucide-react)
    • Responsive grids and hide-on-mobile
    • Performance tips (lazy dialogs, virtualization, skeletons, optimistic updates, debounce)

How Agents Should Use These Docs

  1. Need to add a component?
    Use SHADCN_INSTALLATION.md for the exact pnpm dlx shadcn@latest add commands.

  2. Building a dashboard or CRUD UI?
    Use SHADCN_DASHBOARD_PATTERNS.md for copy-paste patterns (tables, dialogs, forms, toasts, sheets, etc.).

  3. Styling and layout?
    Use SHADCN_DESIGN_AND_LAYOUT.md for tokens, spacing, responsive patterns, and performance.

Resources