shadcn/ui
Instructions
This project uses shadcn/ui with the New York style variant. Components are built on Radix UI primitives with Tailwind CSS styling.
Configuration
- Style:
new-york - Base color:
neutral - Icons:
lucide-react - Components location:
resources/js/components/ui/ - Utils location:
resources/js/lib/utils.ts
Adding New Components
Use the shadcn CLI to add components:
npx shadcn@latest add <component-name>Examples:
npx shadcn@latest add table
npx shadcn@latest add tabs
npx shadcn@latest add calendarDo NOT manually create shadcn components - always use the CLI to ensure correct styling and dependencies.
Available Components
Components already installed in this project:
alertalert-dialogavatarbadgebreadcrumbbuttoncardcheckboxcollapsibledialogdropdown-menuinput,input-otplabelnavigation-menuselectseparatorsheetsidebarskeletonsonner(toast notifications)spinnertoggle,toggle-grouptooltip
Using Components
Always import from @/components/ui/:
Button Variants
{/_ Sizes _/} Small Default Large
Form Patterns
Use Label + Input together, with proper error styling:
Dialog Pattern
Toast Notifications
Use Sonner for toast notifications:
// Success toast.success('Changes saved successfully');
// Error toast.error('Something went wrong');
// With description toast.success('Project created', {description: 'Your new project is ready to use.',});
The cn() Utility
Use cn() from @/lib/utils to merge Tailwind classes conditionally:
Icons
Use Lucide React for icons: