Galeri Komponen

import {
    Accordion,
    AccordionContent,
    AccordionItem,
    AccordionTrigger,
} from '@/components/ui/accordion';

import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert';

import {
    AlertDialog,
    AlertDialogAction,
    AlertDialogCancel,
    AlertDialogContent,
    AlertDialogDescription,
    AlertDialogFooter,
    AlertDialogHeader,
    AlertDialogTitle,
    AlertDialogTrigger,
} from '@/components/ui/alert-dialog';

import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';

import { Badge } from '@/components/ui/badge';

import {
    Breadcrumb,
    BreadcrumbItem,
    BreadcrumbLink,
    BreadcrumbList,
    BreadcrumbPage,
    BreadcrumbSeparator,
} from '@/components/ui/breadcrumb';

import { Button } from '@/components/ui/button';

<Button variant="default" size="default">Simpan</Button>

import {
    Card,
    CardContent,
    CardDescription,
    CardFooter,
    CardHeader,
    CardTitle,
} from '@/components/ui/card';

import { AreaChartCard, BarChartCard, DonutChartCard } from '@/components/charts';

<AreaChartCard data={{ labels: [...], datasets: [{ label: 'Penjualan', data: [...] }] }} />

import { Checkbox } from '@/components/ui/checkbox';

import {
    Collapsible,
    CollapsibleContent,
    CollapsibleTrigger,
} from '@/components/ui/collapsible';

import {
    Dialog,
    DialogContent,
    DialogDescription,
    DialogFooter,
    DialogHeader,
    DialogTitle,
    DialogTrigger,
} from '@/components/ui/dialog';

import {
    DropdownMenu,
    DropdownMenuContent,
    DropdownMenuItem,
    DropdownMenuLabel,
    DropdownMenuSeparator,
    DropdownMenuTrigger,
} from '@/components/ui/dropdown-menu';

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

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

<Label htmlFor="email">Email</Label>
<Input id="email" />

import {
    Pagination,
    PaginationContent,
    PaginationEllipsis,
    PaginationItem,
    PaginationLink,
    PaginationNext,
    PaginationPrevious,
} from '@/components/ui/pagination';

import {
    Popover,
    PopoverContent,
    PopoverTrigger,
} from '@/components/ui/popover';

import {
    Select,
    SelectContent,
    SelectItem,
    SelectTrigger,
    SelectValue,
} from '@/components/ui/select';

import { Separator } from '@/components/ui/separator';

import {
    Sheet,
    SheetContent,
    SheetDescription,
    SheetHeader,
    SheetTitle,
    SheetTrigger,
} from '@/components/ui/sheet';

import { Skeleton } from '@/components/ui/skeleton';

import { toast } from 'sonner';

// Toaster sudah terpasang di layout.
toast.success('Berhasil disimpan');

import { Switch } from '@/components/ui/switch';

import {
    Table,
    TableBody,
    TableCaption,
    TableCell,
    TableHead,
    TableHeader,
    TableRow,
} from '@/components/ui/table';

import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';

import { Textarea } from '@/components/ui/textarea';

// Contoh badge notifikasi dengan ikon lonceng (pakai Badge + lucide-react).
import { Badge } from '@/components/ui/badge';
import { Bell } from 'lucide-react';

import { ErrorBoundary } from '@/components/error-boundary';

// Bungkus bagian yang rawan error; fallback tampil otomatis.
<ErrorBoundary onReset={() => setRusak(false)}>
    {rusak ? <KomponenRawan /> : <KontenAman />}
</ErrorBoundary>

import { CountdownTimer } from '@/components/countdown-timer';

// target: Date | string | number, tampil "Berakhir" bila lewat.
<CountdownTimer target={new Date(Date.now() + 14 * 3600_000)} />

import { DateRangePicker } from '@/components/date-range-picker';

// Controlled:
const [rentang, setRentang] = useState<DateRange>();
<DateRangePicker value={rentang} onChange={setRentang} />

// Uncontrolled (default "7 hari terakhir"):
<DateRangePicker />

import { PrintArea, ThermalReceipt } from '@/components/print-layout';

<PrintArea width="58">
    <ThermalReceipt
        storeName="Warung Kopi Sederhana"
        items={[{ name: 'Kopi Tubruk', qty: 2, price: 12000 }]}
        paid={50000}
    />
</PrintArea>

import { StatCounter } from '@/components/stat-counter';

// Count-up saat masuk viewport, format id-ID.
<StatCounter value={125750000} prefix="Rp" />

import { StickyMobileCta } from '@/components/sticky-mobile-cta';

// variant: 'whatsapp' | 'cart' | 'call', hanya tampil di mobile.
<StickyMobileCta
    variant="whatsapp"
    title="Butuh bantuan?"
    actionLabel="Chat WhatsApp"
    onAction={() => window.open('https://wa.me/6281234567890')}
/>

import { Timeline } from '@/components/timeline';
import { PackageCheck } from 'lucide-react';

<Timeline
    items={[
        {
            id: 1,
            title: 'Paket diterima gudang',
            description: 'Jakarta, 12 koli',
            time: '08.20',
            icon: PackageCheck,
            tone: 'success',
        },
    ]}
/>