add-shadcn-component

name	add-shadcn-component
description	Add a new shadcn/ui component to the project following the New York style variant

When adding a new shadcn/ui component to this Next.js 15 dashboard:

1. Use the shadcn CLI to add components:

   npx shadcn@latest add [component-name]
   

   This ensures proper configuration with the "New York" style variant.

2. Component will be created in src/components/ui/[component-name].tsx automatically.

3. Import the component using the path alias:

   import { ComponentName } from "@/components/ui/component-name";
   

4. Apply theme-aware styling when customizing:

   • Use CSS custom properties: hsl(var(--background)), hsl(var(--foreground))
   • Follow the existing color system in globals.css
   • Ensure components work in both light and dark modes

5. Use the cn() utility for conditional classes:

   import { cn } from "@/lib/utils";
   
   <div className={cn(
     "base-classes",
     isActive && "active-classes"
   )}>