How to work effectively with shadcn/ui components, always use when adding UI components
This project uses shadcn/ui with the New York style variant. Components are built on Radix UI primitives with Tailwind CSS styling.
new-yorkneutrallucide-reactresources/js/components/ui/resources/js/lib/utils.tsUse 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 calendar
Do NOT manually create shadcn components - always use the CLI to ensure correct styling and dependencies.
Components already installed in this project:
alertalert-dialogavatarbadgebreadcrumbbuttoncardcheckboxcollapsibledialogdropdown-menuinput, input-otplabelnavigation-menuselectseparatorsheetsidebarskeletonsonner (toast notifications)spinnertoggle, toggle-grouptooltipAlways import from @/components/ui/:
{/_ Sizes _/}
Use Label + Input together, with proper error styling:
{errors.email}
)}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.', });
Use cn() from @/lib/utils to merge Tailwind classes conditionally:
Use Lucide React for icons:
