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 calendar

Do NOT manually create shadcn components - always use the CLI to ensure correct styling and dependencies.

Available Components

Components already installed in this project:

• alert
• alert-dialog
• avatar
• badge
• breadcrumb
• button
• card
• checkbox
• collapsible
• dialog
• dropdown-menu
• input, input-otp
• label
• navigation-menu
• select
• separator
• sheet
• sidebar
• skeleton
• sonner (toast notifications)
• spinner
• toggle, toggle-group
• tooltip

Using Components

Always import from @/components/ui/:

import { Button } from '@/components/ui/button'; import { Input } from '@/components/ui/input'; import { Label } from '@/components/ui/label'; import { Card, CardContent, CardDescription, CardHeader, CardTitle, } from '@/components/ui/card';

Button Variants

Default Secondary Destructive Outline Ghost Link

{/_ Sizes _/}
Small
Default
Large

Form Patterns

Use Label + Input together, with proper error styling:

import { Label } from '@/components/ui/label'; import { Input } from '@/components/ui/input';

Dialog Pattern

import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, DialogTrigger, } from '@/components/ui/dialog'; Open Dialog Dialog Title Description text goes here. {/* Dialog content */}

Toast Notifications

Use Sonner for toast notifications:

import { toast } from 'sonner';

// 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:

import { cn } from '@/lib/utils'; <div className={cn( 'rounded-lg border p-4', isActive && 'border-primary bg-primary/10', className )}> {children}