UI Components

import { Button } from '@/components/ui/button'
 
// Variants
<Button variant="default">Primary</Button>
<Button variant="secondary">Secondary</Button>
<Button variant="outline">Outline</Button>
<Button variant="ghost">Ghost</Button>
<Button variant="destructive">Delete</Button>
 
// Sizes
<Button size="sm">Small</Button>
<Button size="default">Default</Button>
<Button size="lg">Large</Button>
 
// With icon
<Button>
  <Plus className="mr-2 h-4 w-4" />
  Add Item
</Button>

import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from '@/components/ui/dialog'
 
<Dialog>
  <DialogTrigger asChild>
    <Button>Open Dialog</Button>
  </DialogTrigger>
  <DialogContent>
    <DialogHeader>
      <DialogTitle>Edit Task</DialogTitle>
      <DialogDescription>
        Make changes to the task.
      </DialogDescription>
    </DialogHeader>
    {/* Form content */}
  </DialogContent>
</Dialog>

import { Input } from '@/components/ui/input'
 
<Input placeholder="Enter text..." />
<Input type="email" placeholder="Email" />
<Input type="password" placeholder="Password" />
<Input disabled placeholder="Disabled" />

import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from '@/components/ui/select'
 
<Select value={status} onValueChange={setStatus}>
  <SelectTrigger>
    <SelectValue placeholder="Select status" />
  </SelectTrigger>
  <SelectContent>
    <SelectItem value="pending">Pending</SelectItem>
    <SelectItem value="working">Working</SelectItem>
    <SelectItem value="done">Done</SelectItem>
  </SelectContent>
</Select>

import {
  Popover,
  PopoverContent,
  PopoverTrigger,
} from '@/components/ui/popover'
 
<Popover>
  <PopoverTrigger asChild>
    <Button variant="outline">Open</Button>
  </PopoverTrigger>
  <PopoverContent>
    Popover content here
  </PopoverContent>
</Popover>

import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuTrigger,
} from '@/components/ui/dropdown-menu'
 
<DropdownMenu>
  <DropdownMenuTrigger asChild>
    <Button variant="ghost" size="icon">
      <MoreHorizontal className="h-4 w-4" />
    </Button>
  </DropdownMenuTrigger>
  <DropdownMenuContent>
    <DropdownMenuItem onClick={handleEdit}>
      Edit
    </DropdownMenuItem>
    <DropdownMenuItem onClick={handleDelete}>
      Delete
    </DropdownMenuItem>
  </DropdownMenuContent>
</DropdownMenu>

import { Checkbox } from '@/components/ui/checkbox'
 
<Checkbox 
  checked={checked}
  onCheckedChange={setChecked}
/>
 
<div className="flex items-center gap-2">
  <Checkbox id="terms" />
  <label htmlFor="terms">Accept terms</label>
</div>

import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'
 
<Avatar>
  <AvatarImage src={user.avatar} />
  <AvatarFallback>JD</AvatarFallback>
</Avatar>

import { Badge } from '@/components/ui/badge'
 
<Badge>Default</Badge>
<Badge variant="secondary">Secondary</Badge>
<Badge variant="destructive">Error</Badge>
<Badge variant="outline">Outline</Badge>

import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'
 
<Tabs defaultValue="details">
  <TabsList>
    <TabsTrigger value="details">Details</TabsTrigger>
    <TabsTrigger value="comments">Comments</TabsTrigger>
    <TabsTrigger value="activity">Activity</TabsTrigger>
  </TabsList>
  <TabsContent value="details">
    Detail content
  </TabsContent>
  <TabsContent value="comments">
    Comments list
  </TabsContent>
</Tabs>

import { Calendar } from '@/components/ui/calendar'
 
<Calendar
  mode="single"
  selected={date}
  onSelect={setDate}
/>

import { toast } from 'sonner'
 
// Success
toast.success('Task created!')
 
// Error
toast.error('Something went wrong')
 
// With description
toast('Event created', {
  description: 'Your event has been scheduled'
})

import {
  Tooltip,
  TooltipContent,
  TooltipProvider,
  TooltipTrigger,
} from '@/components/ui/tooltip'
 
<TooltipProvider>
  <Tooltip>
    <TooltipTrigger asChild>
      <Button variant="ghost" size="icon">
        <HelpCircle className="h-4 w-4" />
      </Button>
    </TooltipTrigger>
    <TooltipContent>
      <p>Help text here</p>
    </TooltipContent>
  </Tooltip>
</TooltipProvider>

import { ScrollArea } from '@/components/ui/scroll-area'
 
<ScrollArea className="h-72">
  {/* Long content */}
</ScrollArea>