create-app-ui 1.0.0

package/templates/admin-portal/src/pages/components.tsx

@@ -0,0 +1,1368 @@
+import { AlertCircle, AlignCenter, AlignLeft, AlignRight, Bold, CalendarIcon, Inbox, Italic, Search, Terminal, Underline } from "lucide-react";
+import { useState } from "react";
+import { Link } from "react-router-dom";
+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,
+  BreadcrumbEllipsis,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+} from "@/components/ui/breadcrumb";
+import { Button } from "@/components/ui/button";
+import { Checkbox } from "@/components/ui/checkbox";
+import { DatePicker } from "@/components/ui/date-picker";
+import {
+  Drawer,
+  DrawerClose,
+  DrawerContent,
+  DrawerDescription,
+  DrawerFooter,
+  DrawerHeader,
+  DrawerTitle,
+  DrawerTrigger,
+} from "@/components/ui/drawer";
+import {
+  Field,
+  FieldContent,
+  FieldDescription,
+  FieldError,
+  FieldGroup,
+  FieldLabel,
+  FieldLegend,
+  FieldSeparator,
+  FieldSet,
+} from "@/components/ui/field";
+import { HoverCard, HoverCardContent, HoverCardTrigger } from "@/components/ui/hover-card";
+import {
+  InputGroup,
+  InputGroupAddon,
+  InputGroupButton,
+  InputGroupInput,
+  InputGroupText,
+} from "@/components/ui/input-group";
+import { InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot } from "@/components/ui/input-otp";
+import {
+  Item,
+  ItemActions,
+  ItemContent,
+  ItemDescription,
+  ItemGroup,
+  ItemMedia,
+  ItemTitle,
+} from "@/components/ui/item";
+import { Kbd, KbdGroup } from "@/components/ui/kbd";
+import { Progress } from "@/components/ui/progress";
+import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
+import { ScrollArea } from "@/components/ui/scroll-area";
+import {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectLabel,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { Skeleton } from "@/components/ui/skeleton";
+import { Slider } from "@/components/ui/slider";
+import { Spinner } from "@/components/ui/spinner";
+import { Switch } from "@/components/ui/switch";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import { Textarea } from "@/components/ui/textarea";
+import { Toggle } from "@/components/ui/toggle";
+import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group";
+import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
+import {
+  TypographyBlockquote,
+  TypographyH1,
+  TypographyH2,
+  TypographyH3,
+  TypographyH4,
+  TypographyInlineCode,
+  TypographyLarge,
+  TypographyLead,
+  TypographyList,
+  TypographyMuted,
+  TypographyP,
+  TypographySmall,
+} from "@/components/ui/typography";
+import { toast } from "sonner";
+import {
+  Menubar,
+  MenubarContent,
+  MenubarItem,
+  MenubarMenu,
+  MenubarSeparator,
+  MenubarShortcut,
+  MenubarTrigger,
+} from "@/components/ui/menubar";
+import {
+  NavigationMenu,
+  NavigationMenuContent,
+  NavigationMenuItem,
+  NavigationMenuLink,
+  NavigationMenuList,
+  NavigationMenuTrigger,
+  navigationMenuTriggerStyle,
+} from "@/components/ui/navigation-menu";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/components/ui/dialog";
+import {
+  ContextMenu,
+  ContextMenuCheckboxItem,
+  ContextMenuContent,
+  ContextMenuItem,
+  ContextMenuLabel,
+  ContextMenuRadioGroup,
+  ContextMenuRadioItem,
+  ContextMenuSeparator,
+  ContextMenuShortcut,
+  ContextMenuSub,
+  ContextMenuSubContent,
+  ContextMenuSubTrigger,
+  ContextMenuTrigger,
+} from "@/components/ui/context-menu";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Separator } from "@/components/ui/separator";
+import { Sheet, SheetContent, SheetTrigger } from "@/components/ui/sheet";
+import { DemoUsersDataTable } from "@/pages/components/demo-columns";
+import { BarChart } from "@/components/ui/bar-chart";
+import { LineChart } from "@/components/ui/line-chart";
+import { MultiSelectDropdown } from "@/components/ui/multi-select-dropdown";
+import { PieChart } from "@/components/ui/pie-chart";
+import { SearchableDropdown } from "@/components/ui/searchable-dropdown";
+import {
+  deviceUsageData,
+  monthlyRevenueData,
+  userRoleDistribution,
+  weeklyActiveUsersData,
+} from "@/config/chart-data";
+import {
+  activeUsersChartConfig,
+  deviceChartConfig,
+  revenueChartConfig,
+  roleChartConfig,
+} from "@/config/theme";
+
+const navComponents: { title: string; href: string; description: string }[] = [
+  {
+    title: "Alert Dialog",
+    href: "/components",
+    description: "A modal dialog that interrupts the user with important content.",
+  },
+  {
+    title: "Data Table",
+    href: "/components",
+    description: "Powerful table with sorting, pagination, and row actions.",
+  },
+  {
+    title: "Date Picker",
+    href: "/components",
+    description: "Calendar popover for selecting dates in forms.",
+  },
+];
+
+export function ComponentsPage() {
+  const [open, setOpen] = useState(false);
+  const [date, setDate] = useState<Date>();
+  const [otp, setOtp] = useState("");
+  const [progress, setProgress] = useState(66);
+  const [plan, setPlan] = useState("comfortable");
+  const [role, setRole] = useState("admin");
+  const [framework, setFramework] = useState("");
+  const [skills, setSkills] = useState<string[]>(["react", "typescript"]);
+  const [volume, setVolume] = useState([50]);
+
+  const frameworkOptions = [
+    { value: "react", label: "React", description: "UI library for the web" },
+    { value: "vue", label: "Vue", description: "Progressive JavaScript framework" },
+    { value: "angular", label: "Angular", description: "Platform for building mobile & desktop apps" },
+    { value: "svelte", label: "Svelte", description: "Cybernetically enhanced web apps" },
+    { value: "next", label: "Next.js", description: "React framework for production" },
+    { value: "nuxt", label: "Nuxt", description: "Intuitive Vue framework" },
+    { value: "remix", label: "Remix", description: "Full stack web framework" },
+    { value: "astro", label: "Astro", description: "Content-focused web framework" },
+  ];
+
+  const skillOptions = [
+    { value: "react", label: "React" },
+    { value: "typescript", label: "TypeScript" },
+    { value: "tailwind", label: "Tailwind CSS" },
+    { value: "node", label: "Node.js" },
+    { value: "graphql", label: "GraphQL" },
+    { value: "postgres", label: "PostgreSQL" },
+    { value: "docker", label: "Docker" },
+    { value: "aws", label: "AWS" },
+    { value: "figma", label: "Figma" },
+    { value: "testing", label: "Testing", description: "Vitest, Playwright, RTL" },
+  ];
+
+  const scrollTags = Array.from({ length: 24 }, (_, index) => `Tag ${index + 1}`);
+
+  return (
+    <div className="space-y-6">
+      <div>
+        <h1 className="text-2xl font-semibold">Components</h1>
+        <p className="text-sm text-muted-foreground">shadcn-compatible component showcase.</p>
+      </div>
+
+      <Card>
+        <CardHeader>
+          <CardTitle>Breadcrumb</CardTitle>
+          <CardDescription>Navigation hierarchy for nested pages and settings.</CardDescription>
+        </CardHeader>
+        <CardContent className="space-y-6">
+          <Breadcrumb>
+            <BreadcrumbList>
+              <BreadcrumbItem>
+                <BreadcrumbLink asChild>
+                  <Link to="/dashboard">Home</Link>
+                </BreadcrumbLink>
+              </BreadcrumbItem>
+              <BreadcrumbSeparator />
+              <BreadcrumbItem>
+                <BreadcrumbLink asChild>
+                  <Link to="/components">Components</Link>
+                </BreadcrumbLink>
+              </BreadcrumbItem>
+              <BreadcrumbSeparator />
+              <BreadcrumbItem>
+                <BreadcrumbPage>Breadcrumb</BreadcrumbPage>
+              </BreadcrumbItem>
+            </BreadcrumbList>
+          </Breadcrumb>
+
+          <Breadcrumb>
+            <BreadcrumbList>
+              <BreadcrumbItem>
+                <BreadcrumbLink asChild>
+                  <Link to="/dashboard">Home</Link>
+                </BreadcrumbLink>
+              </BreadcrumbItem>
+              <BreadcrumbSeparator />
+              <BreadcrumbItem>
+                <BreadcrumbEllipsis />
+              </BreadcrumbItem>
+              <BreadcrumbSeparator />
+              <BreadcrumbItem>
+                <BreadcrumbLink asChild>
+                  <Link to="/settings/profile">Settings</Link>
+                </BreadcrumbLink>
+              </BreadcrumbItem>
+              <BreadcrumbSeparator />
+              <BreadcrumbItem>
+                <BreadcrumbPage>Profile</BreadcrumbPage>
+              </BreadcrumbItem>
+            </BreadcrumbList>
+          </Breadcrumb>
+        </CardContent>
+      </Card>
+
+      <Card>
+        <CardHeader>
+          <CardTitle>Data Table</CardTitle>
+          <CardDescription>
+            Modern toolbar with filters, sort, export, and column visibility. Row selection, sorting, and pagination.
+          </CardDescription>
+        </CardHeader>
+        <CardContent>
+          <DemoUsersDataTable />
+        </CardContent>
+      </Card>
+
+      <Card>
+        <CardHeader>
+          <CardTitle>Accordion</CardTitle>
+          <CardDescription>Collapsible sections for FAQs, settings groups, and details.</CardDescription>
+        </CardHeader>
+        <CardContent>
+          <Accordion type="single" collapsible className="w-full max-w-xl">
+            <AccordionItem value="item-1">
+              <AccordionTrigger>Is this template production ready?</AccordionTrigger>
+              <AccordionContent>
+                Yes. It ships with routing, layout, sidebar navigation, and a growing shadcn-compatible UI kit.
+              </AccordionContent>
+            </AccordionItem>
+            <AccordionItem value="item-2">
+              <AccordionTrigger>Can I customize the theme?</AccordionTrigger>
+              <AccordionContent>
+                Update CSS variables in globals.css and Tailwind tokens to match your brand colors.
+              </AccordionContent>
+            </AccordionItem>
+            <AccordionItem value="item-3">
+              <AccordionTrigger>How do I add new pages?</AccordionTrigger>
+              <AccordionContent>
+                Register routes in App.tsx, add nav items in navigation.ts, and breadcrumbs update automatically.
+              </AccordionContent>
+            </AccordionItem>
+          </Accordion>
+        </CardContent>
+      </Card>
+
+      <Card>
+        <CardHeader>
+          <CardTitle>Alert</CardTitle>
+          <CardDescription>Inline feedback for success, info, and error states.</CardDescription>
+        </CardHeader>
+        <CardContent className="space-y-4">
+          <Alert>
+            <Terminal className="h-4 w-4" />
+            <AlertTitle>Heads up</AlertTitle>
+            <AlertDescription>
+              You can add new components to the showcase page as your design system grows.
+            </AlertDescription>
+          </Alert>
+          <Alert variant="destructive">
+            <AlertCircle className="h-4 w-4" />
+            <AlertTitle>Error</AlertTitle>
+            <AlertDescription>Your session has expired. Please sign in again to continue.</AlertDescription>
+          </Alert>
+        </CardContent>
+      </Card>
+
+      <Card>
+        <CardHeader>
+          <CardTitle>Alert Dialog</CardTitle>
+          <CardDescription>Modal confirmation for destructive or important actions.</CardDescription>
+        </CardHeader>
+        <CardContent>
+          <AlertDialog>
+            <AlertDialogTrigger asChild>
+              <Button variant="outline">Delete project</Button>
+            </AlertDialogTrigger>
+            <AlertDialogContent>
+              <AlertDialogHeader>
+                <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
+                <AlertDialogDescription>
+                  This action cannot be undone. This will permanently delete the project and remove all
+                  associated data from our servers.
+                </AlertDialogDescription>
+              </AlertDialogHeader>
+              <AlertDialogFooter>
+                <AlertDialogCancel>Cancel</AlertDialogCancel>
+                <AlertDialogAction>Continue</AlertDialogAction>
+              </AlertDialogFooter>
+            </AlertDialogContent>
+          </AlertDialog>
+        </CardContent>
+      </Card>
+
+      <Card>
+        <CardHeader>
+          <CardTitle>Avatar</CardTitle>
+          <CardDescription>User profile image with automatic fallback initials.</CardDescription>
+        </CardHeader>
+        <CardContent className="flex flex-wrap items-end gap-6">
+          <div className="flex flex-col items-center gap-2">
+            <Avatar className="h-8 w-8">
+              <AvatarImage src="https://github.com/shadcn.png" alt="Shadcn" />
+              <AvatarFallback>CN</AvatarFallback>
+            </Avatar>
+            <span className="text-xs text-muted-foreground">Small</span>
+          </div>
+          <div className="flex flex-col items-center gap-2">
+            <Avatar>
+              <AvatarImage src="https://github.com/shadcn.png" alt="Shadcn" />
+              <AvatarFallback>CN</AvatarFallback>
+            </Avatar>
+            <span className="text-xs text-muted-foreground">Default</span>
+          </div>
+          <div className="flex flex-col items-center gap-2">
+            <Avatar className="h-14 w-14">
+              <AvatarImage src="https://github.com/shadcn.png" alt="Shadcn" />
+              <AvatarFallback>CN</AvatarFallback>
+            </Avatar>
+            <span className="text-xs text-muted-foreground">Large</span>
+          </div>
+          <div className="flex flex-col items-center gap-2">
+            <Avatar>
+              <AvatarFallback>AD</AvatarFallback>
+            </Avatar>
+            <span className="text-xs text-muted-foreground">Fallback only</span>
+          </div>
+          <div className="flex flex-col items-center gap-2">
+            <div className="flex -space-x-2">
+              <Avatar className="border-2 border-background">
+                <AvatarFallback>A</AvatarFallback>
+              </Avatar>
+              <Avatar className="border-2 border-background">
+                <AvatarFallback>B</AvatarFallback>
+              </Avatar>
+              <Avatar className="border-2 border-background">
+                <AvatarFallback>C</AvatarFallback>
+              </Avatar>
+            </div>
+            <span className="text-xs text-muted-foreground">Group</span>
+          </div>
+        </CardContent>
+      </Card>
+
+      <Card>
+        <CardHeader>
+          <CardTitle>Badge</CardTitle>
+          <CardDescription>Compact labels for status, tags, and counts.</CardDescription>
+        </CardHeader>
+        <CardContent className="flex flex-wrap items-center gap-3">
+          <Badge>Default</Badge>
+          <Badge variant="secondary">Secondary</Badge>
+          <Badge variant="destructive">Destructive</Badge>
+          <Badge variant="outline">Outline</Badge>
+        </CardContent>
+      </Card>
+
+      <Card>
+        <CardHeader>
+          <CardTitle>Buttons</CardTitle>
+          <CardDescription>Primary actions and secondary controls.</CardDescription>
+        </CardHeader>
+        <CardContent className="flex flex-wrap items-center gap-3">
+          <Button>Primary</Button>
+          <Button variant="outline">Outline</Button>
+        </CardContent>
+      </Card>
+
+      <Card>
+        <CardHeader>
+          <CardTitle>Checkbox</CardTitle>
+          <CardDescription>Boolean inputs for forms, tables, and settings.</CardDescription>
+        </CardHeader>
+        <CardContent className="space-y-6">
+          <div className="space-y-3">
+            <p className="text-sm font-medium">Rounded (default)</p>
+            <div className="flex items-center space-x-2">
+              <Checkbox id="terms" defaultChecked />
+              <Label htmlFor="terms">Accept terms and conditions</Label>
+            </div>
+            <div className="flex items-center space-x-2">
+              <Checkbox id="notifications" />
+              <Label htmlFor="notifications">Email me about product updates</Label>
+            </div>
+          </div>
+          <div className="space-y-3">
+            <p className="text-sm font-medium">Square (tables &amp; dense UIs)</p>
+            <div className="flex items-center space-x-2">
+              <Checkbox id="terms-square" shape="square" defaultChecked />
+              <Label htmlFor="terms-square">Square checkbox</Label>
+            </div>
+            <div className="flex items-center space-x-2">
+              <Checkbox id="notifications-square" shape="square" />
+              <Label htmlFor="notifications-square">Used in the data table row selection</Label>
+            </div>
+          </div>
+          <div className="flex items-center space-x-2">
+            <Checkbox id="disabled" disabled />
+            <Label htmlFor="disabled" className="text-muted-foreground">
+              Disabled option
+            </Label>
+          </div>
+        </CardContent>
+      </Card>
+
+      <Card>
+        <CardHeader>
+          <CardTitle>Context Menu</CardTitle>
+          <CardDescription>Right-click menu for contextual actions on any surface.</CardDescription>
+        </CardHeader>
+        <CardContent>
+          <ContextMenu>
+            <ContextMenuTrigger className="flex h-32 w-full max-w-md items-center justify-center rounded-md border border-dashed text-sm text-muted-foreground">
+              Right click here
+            </ContextMenuTrigger>
+            <ContextMenuContent className="w-56">
+              <ContextMenuItem inset>
+                Back
+                <ContextMenuShortcut>⌘[</ContextMenuShortcut>
+              </ContextMenuItem>
+              <ContextMenuItem inset disabled>
+                Forward
+                <ContextMenuShortcut>⌘]</ContextMenuShortcut>
+              </ContextMenuItem>
+              <ContextMenuItem inset>
+                Reload
+                <ContextMenuShortcut>⌘R</ContextMenuShortcut>
+              </ContextMenuItem>
+              <ContextMenuSub>
+                <ContextMenuSubTrigger inset>More Tools</ContextMenuSubTrigger>
+                <ContextMenuSubContent className="w-48">
+                  <ContextMenuItem inset>Save Page As…</ContextMenuItem>
+                  <ContextMenuItem inset>Create Shortcut…</ContextMenuItem>
+                  <ContextMenuItem inset>Name Window…</ContextMenuItem>
+                  <ContextMenuSeparator />
+                  <ContextMenuItem inset>Developer Tools</ContextMenuItem>
+                </ContextMenuSubContent>
+              </ContextMenuSub>
+              <ContextMenuSeparator />
+              <ContextMenuCheckboxItem checked>Show Bookmarks Bar</ContextMenuCheckboxItem>
+              <ContextMenuCheckboxItem>Show Full URLs</ContextMenuCheckboxItem>
+              <ContextMenuSeparator />
+              <ContextMenuLabel inset>People</ContextMenuLabel>
+              <ContextMenuRadioGroup value="ava">
+                <ContextMenuRadioItem value="ava">Ava Johnson</ContextMenuRadioItem>
+                <ContextMenuRadioItem value="noah">Noah Patel</ContextMenuRadioItem>
+              </ContextMenuRadioGroup>
+            </ContextMenuContent>
+          </ContextMenu>
+        </CardContent>
+      </Card>
+
+      <Card>
+        <CardHeader>
+          <CardTitle>Dialog</CardTitle>
+          <CardDescription>Modal overlay for forms, confirmations, and focused tasks.</CardDescription>
+        </CardHeader>
+        <CardContent>
+          <Dialog>
+            <DialogTrigger asChild>
+              <Button variant="outline">Edit profile</Button>
+            </DialogTrigger>
+            <DialogContent className="sm:max-w-[425px]">
+              <DialogHeader>
+                <DialogTitle>Edit profile</DialogTitle>
+                <DialogDescription>
+                  Make changes to your profile here. Click save when you are done.
+                </DialogDescription>
+              </DialogHeader>
+              <div className="grid gap-4 py-4">
+                <div className="grid grid-cols-4 items-center gap-4">
+                  <Label htmlFor="dialog-name" className="text-right">
+                    Name
+                  </Label>
+                  <Input id="dialog-name" defaultValue="Admin User" className="col-span-3" />
+                </div>
+                <div className="grid grid-cols-4 items-center gap-4">
+                  <Label htmlFor="dialog-email" className="text-right">
+                    Email
+                  </Label>
+                  <Input id="dialog-email" defaultValue="admin@company.com" className="col-span-3" />
+                </div>
+              </div>
+              <DialogFooter>
+                <Button type="submit">Save changes</Button>
+              </DialogFooter>
+            </DialogContent>
+          </Dialog>
+        </CardContent>
+      </Card>
+
+      <Card>
+        <CardHeader>
+          <CardTitle>Date Picker</CardTitle>
+          <CardDescription>Calendar popover for selecting dates in forms and filters.</CardDescription>
+        </CardHeader>
+        <CardContent className="flex flex-wrap items-center gap-4">
+          <DatePicker date={date} onDateChange={setDate} />
+          <DatePicker placeholder="Disabled" disabled />
+        </CardContent>
+      </Card>
+
+      <Card>
+        <CardHeader>
+          <CardTitle>Drawer</CardTitle>
+          <CardDescription>Slide-up panel for mobile-friendly forms and actions.</CardDescription>
+        </CardHeader>
+        <CardContent>
+          <Drawer>
+            <DrawerTrigger asChild>
+              <Button variant="outline">Open drawer</Button>
+            </DrawerTrigger>
+            <DrawerContent>
+              <DrawerHeader>
+                <DrawerTitle>Create project</DrawerTitle>
+                <DrawerDescription>Add a new project to your workspace.</DrawerDescription>
+              </DrawerHeader>
+              <div className="space-y-4 px-4 pb-4">
+                <div className="space-y-2">
+                  <Label htmlFor="drawer-name">Project name</Label>
+                  <Input id="drawer-name" placeholder="My project" />
+                </div>
+                <div className="space-y-2">
+                  <Label htmlFor="drawer-desc">Description</Label>
+                  <Input id="drawer-desc" placeholder="Optional description" />
+                </div>
+              </div>
+              <DrawerFooter>
+                <Button>Save project</Button>
+                <DrawerClose asChild>
+                  <Button variant="outline">Cancel</Button>
+                </DrawerClose>
+              </DrawerFooter>
+            </DrawerContent>
+          </Drawer>
+        </CardContent>
+      </Card>
+
+      <Card>
+        <CardHeader>
+          <CardTitle>Field</CardTitle>
+          <CardDescription>Structured form fields with labels, descriptions, and validation messages.</CardDescription>
+        </CardHeader>
+        <CardContent>
+          <FieldSet className="max-w-xl">
+            <FieldLegend>Account details</FieldLegend>
+            <FieldGroup>
+              <Field>
+                <FieldLabel htmlFor="field-name">Full name</FieldLabel>
+                <FieldContent>
+                  <Input id="field-name" placeholder="Jane Admin" />
+                  <FieldDescription>Your name as it appears across the app.</FieldDescription>
+                </FieldContent>
+              </Field>
+              <Field>
+                <FieldLabel htmlFor="field-email">Email</FieldLabel>
+                <FieldContent>
+                  <Input id="field-email" type="email" placeholder="admin@company.com" aria-invalid />
+                  <FieldError>Enter a valid company email address.</FieldError>
+                </FieldContent>
+              </Field>
+              <FieldSeparator>Or continue with</FieldSeparator>
+              <Field orientation="horizontal">
+                <Checkbox id="field-marketing" />
+                <FieldContent>
+                  <FieldLabel htmlFor="field-marketing">Marketing emails</FieldLabel>
+                  <FieldDescription>Receive product updates and release notes.</FieldDescription>
+                </FieldContent>
+              </Field>
+            </FieldGroup>
+          </FieldSet>
+        </CardContent>
+      </Card>
+
+      <Card>
+        <CardHeader>
+          <CardTitle>Hover Card</CardTitle>
+          <CardDescription>Preview content on hover for profiles, links, and rich tooltips.</CardDescription>
+        </CardHeader>
+        <CardContent>
+          <HoverCard>
+            <HoverCardTrigger asChild>
+              <Button variant="outline">@omobio</Button>
+            </HoverCardTrigger>
+            <HoverCardContent className="w-80">
+              <div className="flex justify-between gap-4">
+                <Avatar>
+                  <AvatarImage src="https://github.com/shadcn.png" alt="Omobio" />
+                  <AvatarFallback>OB</AvatarFallback>
+                </Avatar>
+                <div className="space-y-1">
+                  <h4 className="text-sm font-semibold">Omobio Platform</h4>
+                  <p className="text-sm text-muted-foreground">
+                    Shared UI components and templates for internal admin applications.
+                  </p>
+                  <div className="flex items-center pt-2">
+                    <CalendarIcon className="mr-2 h-4 w-4 text-muted-foreground" />
+                    <span className="text-xs text-muted-foreground">Updated June 2026</span>
+                  </div>
+                </div>
+              </div>
+            </HoverCardContent>
+          </HoverCard>
+        </CardContent>
+      </Card>
+
+      <Card>
+        <CardHeader>
+          <CardTitle>Input Group</CardTitle>
+          <CardDescription>Combine inputs with icons, text addons, and action buttons.</CardDescription>
+        </CardHeader>
+        <CardContent className="mx-auto flex w-full max-w-md flex-col gap-4">
+          <InputGroup>
+            <InputGroupAddon>
+              <InputGroupText>https://</InputGroupText>
+            </InputGroupAddon>
+            <InputGroupInput placeholder="example.com" />
+          </InputGroup>
+          <InputGroup>
+            <InputGroupAddon>
+              <Search className="h-4 w-4" />
+            </InputGroupAddon>
+            <InputGroupInput placeholder="Search users..." />
+            <InputGroupAddon align="inline-end">
+              <InputGroupButton aria-label="Search">
+                <Search className="h-4 w-4" />
+              </InputGroupButton>
+            </InputGroupAddon>
+          </InputGroup>
+          <InputGroup>
+            <InputGroupInput type="email" placeholder="username" />
+            <InputGroupAddon align="inline-end">
+              <InputGroupText>@company.com</InputGroupText>
+            </InputGroupAddon>
+          </InputGroup>
+        </CardContent>
+      </Card>
+
+      <Card>
+        <CardHeader>
+          <CardTitle>Input OTP</CardTitle>
+          <CardDescription>One-time password input with grouped slots.</CardDescription>
+        </CardHeader>
+        <CardContent>
+          <InputOTP maxLength={6} value={otp} onChange={setOtp}>
+            <InputOTPGroup>
+              <InputOTPSlot index={0} />
+              <InputOTPSlot index={1} />
+              <InputOTPSlot index={2} />
+            </InputOTPGroup>
+            <InputOTPSeparator />
+            <InputOTPGroup>
+              <InputOTPSlot index={3} />
+              <InputOTPSlot index={4} />
+              <InputOTPSlot index={5} />
+            </InputOTPGroup>
+          </InputOTP>
+          {otp && <p className="mt-3 text-sm text-muted-foreground">Entered code: {otp}</p>}
+        </CardContent>
+      </Card>
+
+      <Card>
+        <CardHeader>
+          <CardTitle>Item</CardTitle>
+          <CardDescription>List rows with media, content, and actions.</CardDescription>
+        </CardHeader>
+        <CardContent>
+          <ItemGroup className="max-w-lg">
+            <Item variant="outline">
+              <ItemMedia variant="icon">
+                <Inbox className="h-4 w-4" />
+              </ItemMedia>
+              <ItemContent>
+                <ItemTitle>Messages</ItemTitle>
+                <ItemDescription>12 unread messages in your inbox.</ItemDescription>
+              </ItemContent>
+              <ItemActions>
+                <Button size="sm" variant="outline">
+                  View
+                </Button>
+              </ItemActions>
+            </Item>
+            <Item variant="muted">
+              <ItemMedia variant="icon">
+                <Terminal className="h-4 w-4" />
+              </ItemMedia>
+              <ItemContent>
+                <ItemTitle>API Keys</ItemTitle>
+                <ItemDescription>Rotate keys and manage access tokens.</ItemDescription>
+              </ItemContent>
+              <ItemActions>
+                <Button size="sm">Manage</Button>
+              </ItemActions>
+            </Item>
+          </ItemGroup>
+        </CardContent>
+      </Card>
+
+      <Card>
+        <CardHeader>
+          <CardTitle>Kbd</CardTitle>
+          <CardDescription>Keyboard shortcut hints for menus and tooltips.</CardDescription>
+        </CardHeader>
+        <CardContent className="flex flex-wrap items-center gap-4">
+          <p className="text-sm text-muted-foreground">
+            Press <KbdGroup><Kbd>⌘</Kbd><Kbd>K</Kbd></KbdGroup> to open the command palette.
+          </p>
+          <p className="text-sm text-muted-foreground">
+            Save with <Kbd>Ctrl</Kbd> + <Kbd>S</Kbd>
+          </p>
+        </CardContent>
+      </Card>
+
+      <Card>
+        <CardHeader>
+          <CardTitle>Navigation Menu</CardTitle>
+          <CardDescription>Top navigation with dropdown panels.</CardDescription>
+        </CardHeader>
+        <CardContent>
+          <NavigationMenu>
+            <NavigationMenuList>
+              <NavigationMenuItem>
+                <NavigationMenuTrigger>Components</NavigationMenuTrigger>
+                <NavigationMenuContent>
+                  <ul className="grid w-[400px] gap-3 p-4 md:grid-cols-2">
+                    {navComponents.map((component) => (
+                      <li key={component.title}>
+                        <NavigationMenuLink asChild>
+                          <a
+                            href={component.href}
+                            className="block select-none space-y-1 rounded-md p-3 leading-none no-underline outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground"
+                          >
+                            <div className="text-sm font-medium leading-none">{component.title}</div>
+                            <p className="line-clamp-2 text-sm leading-snug text-muted-foreground">
+                              {component.description}
+                            </p>
+                          </a>
+                        </NavigationMenuLink>
+                      </li>
+                    ))}
+                  </ul>
+                </NavigationMenuContent>
+              </NavigationMenuItem>
+              <NavigationMenuItem>
+                <NavigationMenuLink className={navigationMenuTriggerStyle()} href="/dashboard">
+                  Dashboard
+                </NavigationMenuLink>
+              </NavigationMenuItem>
+            </NavigationMenuList>
+          </NavigationMenu>
+        </CardContent>
+      </Card>
+
+      <Card>
+        <CardHeader>
+          <CardTitle>Menubar</CardTitle>
+          <CardDescription>Application menu bar with keyboard shortcuts.</CardDescription>
+        </CardHeader>
+        <CardContent>
+          <Menubar>
+            <MenubarMenu>
+              <MenubarTrigger>File</MenubarTrigger>
+              <MenubarContent>
+                <MenubarItem>
+                  New Tab
+                  <MenubarShortcut>⌘T</MenubarShortcut>
+                </MenubarItem>
+                <MenubarItem>
+                  New Window
+                  <MenubarShortcut>⌘N</MenubarShortcut>
+                </MenubarItem>
+                <MenubarSeparator />
+                <MenubarItem>Share</MenubarItem>
+                <MenubarSeparator />
+                <MenubarItem>
+                  Print
+                  <MenubarShortcut>⌘P</MenubarShortcut>
+                </MenubarItem>
+              </MenubarContent>
+            </MenubarMenu>
+            <MenubarMenu>
+              <MenubarTrigger>Edit</MenubarTrigger>
+              <MenubarContent>
+                <MenubarItem>
+                  Undo
+                  <MenubarShortcut>⌘Z</MenubarShortcut>
+                </MenubarItem>
+                <MenubarItem>
+                  Redo
+                  <MenubarShortcut>⇧⌘Z</MenubarShortcut>
+                </MenubarItem>
+              </MenubarContent>
+            </MenubarMenu>
+            <MenubarMenu>
+              <MenubarTrigger>View</MenubarTrigger>
+              <MenubarContent>
+                <MenubarItem>Reload</MenubarItem>
+                <MenubarItem>Full Screen</MenubarItem>
+              </MenubarContent>
+            </MenubarMenu>
+          </Menubar>
+        </CardContent>
+      </Card>
+
+      <Card>
+        <CardHeader>
+          <CardTitle>Progress</CardTitle>
+          <CardDescription>Visual indicator for task completion and loading states.</CardDescription>
+        </CardHeader>
+        <CardContent className="mx-auto w-full max-w-md space-y-6">
+          <div className="space-y-2">
+            <div className="flex justify-between text-sm">
+              <span className="text-muted-foreground">Uploading files</span>
+              <span className="font-medium">{progress}%</span>
+            </div>
+            <Progress value={progress} />
+          </div>
+          <div className="flex gap-2">
+            <Button variant="outline" size="sm" onClick={() => setProgress((value) => Math.max(0, value - 10))}>
+              -10%
+            </Button>
+            <Button variant="outline" size="sm" onClick={() => setProgress((value) => Math.min(100, value + 10))}>
+              +10%
+            </Button>
+          </div>
+        </CardContent>
+      </Card>
+
+      <Card>
+        <CardHeader>
+          <CardTitle>Radio Group</CardTitle>
+          <CardDescription>Single selection from a set of mutually exclusive options.</CardDescription>
+        </CardHeader>
+        <CardContent>
+          <RadioGroup value={plan} onValueChange={setPlan} className="max-w-sm">
+            <div className="flex items-center space-x-2">
+              <RadioGroupItem value="default" id="plan-default" />
+              <Label htmlFor="plan-default">Default</Label>
+            </div>
+            <div className="flex items-center space-x-2">
+              <RadioGroupItem value="comfortable" id="plan-comfortable" />
+              <Label htmlFor="plan-comfortable">Comfortable</Label>
+            </div>
+            <div className="flex items-center space-x-2">
+              <RadioGroupItem value="compact" id="plan-compact" />
+              <Label htmlFor="plan-compact">Compact</Label>
+            </div>
+          </RadioGroup>
+          <p className="mt-4 text-sm text-muted-foreground">Selected: {plan}</p>
+        </CardContent>
+      </Card>
+
+      <Card>
+        <CardHeader>
+          <CardTitle>Scroll Area</CardTitle>
+          <CardDescription>Custom scrollbars for overflow content in panels and lists.</CardDescription>
+        </CardHeader>
+        <CardContent>
+          <ScrollArea className="h-48 w-full max-w-sm rounded-md border p-4">
+            <div className="space-y-3 pr-4">
+              {scrollTags.map((tag) => (
+                <div key={tag} className="text-sm">
+                  {tag}
+                </div>
+              ))}
+            </div>
+          </ScrollArea>
+        </CardContent>
+      </Card>
+
+      <Card>
+        <CardHeader>
+          <CardTitle>Select</CardTitle>
+          <CardDescription>Dropdown for choosing one option from a list.</CardDescription>
+        </CardHeader>
+        <CardContent className="mx-auto w-full max-w-sm space-y-4">
+          <Select value={role} onValueChange={setRole}>
+            <SelectTrigger>
+              <SelectValue placeholder="Select a role" />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectGroup>
+                <SelectLabel>Roles</SelectLabel>
+                <SelectItem value="admin">Admin</SelectItem>
+                <SelectItem value="editor">Editor</SelectItem>
+                <SelectItem value="viewer">Viewer</SelectItem>
+              </SelectGroup>
+            </SelectContent>
+          </Select>
+          <p className="text-sm text-muted-foreground">Selected role: {role}</p>
+        </CardContent>
+      </Card>
+
+      <Card>
+        <CardHeader>
+          <CardTitle>Searchable Dropdown</CardTitle>
+          <CardDescription>Single-select combobox with inline search and filtering.</CardDescription>
+        </CardHeader>
+        <CardContent className="mx-auto w-full max-w-sm space-y-4">
+          <SearchableDropdown
+            options={frameworkOptions}
+            value={framework}
+            onValueChange={setFramework}
+            placeholder="Select framework..."
+            searchPlaceholder="Search frameworks..."
+          />
+          <p className="text-sm text-muted-foreground">
+            Selected: {frameworkOptions.find((option) => option.value === framework)?.label ?? "None"}
+          </p>
+        </CardContent>
+      </Card>
+
+      <Card>
+        <CardHeader>
+          <CardTitle>Multi Select Dropdown</CardTitle>
+          <CardDescription>Select multiple values with search, badges, and bulk actions.</CardDescription>
+        </CardHeader>
+        <CardContent className="mx-auto w-full max-w-sm space-y-4">
+          <MultiSelectDropdown
+            options={skillOptions}
+            value={skills}
+            onValueChange={setSkills}
+            placeholder="Select skills..."
+            searchPlaceholder="Search skills..."
+            maxDisplay={3}
+          />
+          <p className="text-sm text-muted-foreground">
+            Selected ({skills.length}): {skills.length ? skills.join(", ") : "None"}
+          </p>
+        </CardContent>
+      </Card>
+
+      <Card>
+        <CardHeader>
+          <CardTitle>Skeleton</CardTitle>
+          <CardDescription>Loading placeholders while content is being fetched.</CardDescription>
+        </CardHeader>
+        <CardContent>
+          <div className="flex w-full max-w-sm items-center space-x-4">
+            <Skeleton className="h-12 w-12 rounded-full" />
+            <div className="flex-1 space-y-2">
+              <Skeleton className="h-4 w-full" />
+              <Skeleton className="h-4 w-4/5" />
+            </div>
+          </div>
+          <div className="mt-6 space-y-2">
+            <Skeleton className="h-4 w-full" />
+            <Skeleton className="h-4 w-full" />
+            <Skeleton className="h-4 w-3/5" />
+          </div>
+        </CardContent>
+      </Card>
+
+      <Card>
+        <CardHeader>
+          <CardTitle>Slider</CardTitle>
+          <CardDescription>Drag control for numeric values like volume, brightness, or price range.</CardDescription>
+        </CardHeader>
+        <CardContent className="mx-auto w-full max-w-sm space-y-4">
+          <div className="space-y-3">
+            <div className="flex justify-between text-sm">
+              <Label>Volume</Label>
+              <span className="text-muted-foreground">{volume[0]}%</span>
+            </div>
+            <Slider value={volume} onValueChange={setVolume} max={100} step={1} />
+          </div>
+          <div className="space-y-3">
+            <Label>Price range</Label>
+            <Slider defaultValue={[25, 75]} max={100} step={1} />
+          </div>
+        </CardContent>
+      </Card>
+
+      <Card>
+        <CardHeader>
+          <CardTitle>Sonner</CardTitle>
+          <CardDescription>Toast notifications for success, errors, and async feedback.</CardDescription>
+        </CardHeader>
+        <CardContent className="flex flex-wrap gap-3">
+          <Button
+            variant="outline"
+            onClick={() => toast("Event has been created", { description: "Monday, January 3rd at 6:00pm" })}
+          >
+            Show toast
+          </Button>
+          <Button variant="outline" onClick={() => toast.success("Profile saved successfully")}>
+            Success
+          </Button>
+          <Button variant="outline" onClick={() => toast.error("Something went wrong")}>
+            Error
+          </Button>
+          <Button
+            variant="outline"
+            onClick={() =>
+              toast.promise(new Promise((resolve) => setTimeout(resolve, 1500)), {
+                loading: "Saving changes...",
+                success: "Changes saved",
+                error: "Failed to save",
+              })
+            }
+          >
+            Promise
+          </Button>
+        </CardContent>
+      </Card>
+
+      <Card>
+        <CardHeader>
+          <CardTitle>Spinner</CardTitle>
+          <CardDescription>Loading indicator for buttons, pages, and inline states.</CardDescription>
+        </CardHeader>
+        <CardContent className="flex flex-wrap items-center gap-6">
+          <Spinner className="size-4" />
+          <Spinner className="size-6" />
+          <Spinner className="size-8 text-primary" />
+          <Button variant="outline" disabled>
+            <Spinner className="mr-2" />
+            Loading
+          </Button>
+        </CardContent>
+      </Card>
+
+      <Card>
+        <CardHeader>
+          <CardTitle>Switch</CardTitle>
+          <CardDescription>Toggle control for settings and binary on/off states.</CardDescription>
+        </CardHeader>
+        <CardContent className="space-y-4">
+          <div className="flex items-center space-x-2">
+            <Switch id="airplane-mode" />
+            <Label htmlFor="airplane-mode">Airplane mode</Label>
+          </div>
+          <div className="flex items-center space-x-2">
+            <Switch id="marketing-emails" defaultChecked />
+            <Label htmlFor="marketing-emails">Marketing emails</Label>
+          </div>
+          <div className="flex items-center space-x-2">
+            <Switch id="disabled-switch" disabled />
+            <Label htmlFor="disabled-switch" className="text-muted-foreground">
+              Disabled
+            </Label>
+          </div>
+        </CardContent>
+      </Card>
+
+      <Card>
+        <CardHeader>
+          <CardTitle>Tabs</CardTitle>
+          <CardDescription>Organize related content into switchable panels.</CardDescription>
+        </CardHeader>
+        <CardContent>
+          <Tabs defaultValue="account" className="w-full max-w-md">
+            <TabsList className="grid w-full grid-cols-2">
+              <TabsTrigger value="account">Account</TabsTrigger>
+              <TabsTrigger value="password">Password</TabsTrigger>
+            </TabsList>
+            <TabsContent value="account" className="space-y-2 text-sm text-muted-foreground">
+              <p>Make changes to your account settings here.</p>
+            </TabsContent>
+            <TabsContent value="password" className="space-y-2 text-sm text-muted-foreground">
+              <p>Change your password here. After saving, you will be logged out.</p>
+            </TabsContent>
+          </Tabs>
+        </CardContent>
+      </Card>
+
+      <Card>
+        <CardHeader>
+          <CardTitle>Textarea</CardTitle>
+          <CardDescription>Multi-line text input for descriptions and messages.</CardDescription>
+        </CardHeader>
+        <CardContent className="mx-auto w-full max-w-md space-y-2">
+          <Label htmlFor="message">Your message</Label>
+          <Textarea id="message" placeholder="Type your message here." />
+        </CardContent>
+      </Card>
+
+      <Card>
+        <CardHeader>
+          <CardTitle>Toggle</CardTitle>
+          <CardDescription>Pressable two-state buttons for formatting and toolbars.</CardDescription>
+        </CardHeader>
+        <CardContent className="flex flex-wrap gap-2">
+          <Toggle aria-label="Toggle bold">
+            <Bold className="h-4 w-4" />
+          </Toggle>
+          <Toggle aria-label="Toggle italic">
+            <Italic className="h-4 w-4" />
+          </Toggle>
+          <Toggle aria-label="Toggle underline" variant="outline">
+            <Underline className="h-4 w-4" />
+          </Toggle>
+        </CardContent>
+      </Card>
+
+      <Card>
+        <CardHeader>
+          <CardTitle>Toggle Group</CardTitle>
+          <CardDescription>Single or multiple selection from a grouped set of toggles.</CardDescription>
+        </CardHeader>
+        <CardContent className="space-y-4">
+          <ToggleGroup type="single" defaultValue="left" variant="outline">
+            <ToggleGroupItem value="left" aria-label="Align left">
+              <AlignLeft className="h-4 w-4" />
+            </ToggleGroupItem>
+            <ToggleGroupItem value="center" aria-label="Align center">
+              <AlignCenter className="h-4 w-4" />
+            </ToggleGroupItem>
+            <ToggleGroupItem value="right" aria-label="Align right">
+              <AlignRight className="h-4 w-4" />
+            </ToggleGroupItem>
+          </ToggleGroup>
+          <ToggleGroup type="multiple" variant="outline">
+            <ToggleGroupItem value="bold" aria-label="Bold">
+              <Bold className="h-4 w-4" />
+            </ToggleGroupItem>
+            <ToggleGroupItem value="italic" aria-label="Italic">
+              <Italic className="h-4 w-4" />
+            </ToggleGroupItem>
+            <ToggleGroupItem value="underline" aria-label="Underline">
+              <Underline className="h-4 w-4" />
+            </ToggleGroupItem>
+          </ToggleGroup>
+        </CardContent>
+      </Card>
+
+      <Card>
+        <CardHeader>
+          <CardTitle>Bar Chart</CardTitle>
+          <CardDescription>Grouped vertical bars for comparing categories and metrics.</CardDescription>
+        </CardHeader>
+        <CardContent>
+          <BarChart
+            data={monthlyRevenueData}
+            config={revenueChartConfig}
+            dataKeys={["revenue", "users"]}
+            categoryKey="month"
+          />
+        </CardContent>
+      </Card>
+
+      <Card>
+        <CardHeader>
+          <CardTitle>Line Chart</CardTitle>
+          <CardDescription>Trend lines for time-series and growth metrics.</CardDescription>
+        </CardHeader>
+        <CardContent>
+          <LineChart
+            data={weeklyActiveUsersData}
+            config={activeUsersChartConfig}
+            dataKeys={["users"]}
+            categoryKey="week"
+          />
+        </CardContent>
+      </Card>
+
+      <Card>
+        <CardHeader>
+          <CardTitle>Pie Chart</CardTitle>
+          <CardDescription>Proportional slices for distribution and share breakdowns.</CardDescription>
+        </CardHeader>
+        <CardContent className="grid gap-8 md:grid-cols-2">
+          <div className="space-y-2">
+            <p className="text-sm font-medium">User roles</p>
+            <PieChart
+              data={userRoleDistribution}
+              config={roleChartConfig}
+              dataKey="count"
+              nameKey="role"
+              innerRadius={50}
+              showCenterLabel
+              centerLabel="Users"
+            />
+          </div>
+          <div className="space-y-2">
+            <p className="text-sm font-medium">Device usage</p>
+            <PieChart
+              data={deviceUsageData}
+              config={deviceChartConfig}
+              dataKey="value"
+              nameKey="device"
+            />
+          </div>
+        </CardContent>
+      </Card>
+
+      <Card>
+        <CardHeader>
+          <CardTitle>Tooltip</CardTitle>
+          <CardDescription>Contextual hints on hover or focus for icons and controls.</CardDescription>
+        </CardHeader>
+        <CardContent className="flex flex-wrap gap-4">
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <Button variant="outline">Hover me</Button>
+            </TooltipTrigger>
+            <TooltipContent>
+              <p>Add to library</p>
+            </TooltipContent>
+          </Tooltip>
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <Button variant="outline" size="sm" className="h-9 w-9 p-0">
+                <Search className="h-4 w-4" />
+              </Button>
+            </TooltipTrigger>
+            <TooltipContent side="right">
+              <p>Search</p>
+            </TooltipContent>
+          </Tooltip>
+        </CardContent>
+      </Card>
+
+      <Card>
+        <CardHeader>
+          <CardTitle>Typography</CardTitle>
+          <CardDescription>Consistent text styles for headings, body copy, and supporting text.</CardDescription>
+        </CardHeader>
+        <CardContent className="max-w-2xl space-y-6">
+          <TypographyH1>Taxing Laughter: The Joke Tax Chronicles</TypographyH1>
+          <TypographyLead>
+            A modal dialog that interrupts the user with important content and expects a response.
+          </TypographyLead>
+          <TypographyH2>The People of the Kingdom</TypographyH2>
+          <TypographyP>
+            The king, seeing how much happier his subjects were, levied a tax on jokes and puns.
+          </TypographyP>
+          <TypographyH3>The Joke Tax</TypographyH3>
+          <TypographyP>
+            People told fewer jokes, and the kingdom fell into gloom. But there was one person who
+            refused to stop.
+          </TypographyP>
+          <TypographyH4>People stopped laughing</TypographyH4>
+          <TypographyBlockquote>&ldquo;After all,&rdquo; he said, &ldquo;everyone enjoys a good joke.&rdquo;</TypographyBlockquote>
+          <TypographyList>
+            <li>1st level of puns: 5 gold coins</li>
+            <li>2nd level of jokes: 10 gold coins</li>
+            <li>3rd level of one-liners: 20 gold coins</li>
+          </TypographyList>
+          <TypographyInlineCode>@radix-ui/react-tooltip</TypographyInlineCode>
+          <div className="flex items-center gap-4">
+            <TypographyLarge>Large text</TypographyLarge>
+            <TypographySmall>Small text</TypographySmall>
+          </div>
+          <TypographyMuted>Muted text for captions and secondary information.</TypographyMuted>
+        </CardContent>
+      </Card>
+
+      <Card>
+        <CardHeader>
+          <CardTitle>Dropdown + Sheet</CardTitle>
+        </CardHeader>
+        <CardContent className="flex gap-3">
+          <DropdownMenu>
+            <DropdownMenuTrigger asChild>
+              <Button variant="outline">Open Menu</Button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent>
+              <DropdownMenuItem>Profile</DropdownMenuItem>
+              <DropdownMenuItem>Notifications</DropdownMenuItem>
+            </DropdownMenuContent>
+          </DropdownMenu>
+
+          <Sheet open={open} onOpenChange={setOpen}>
+            <SheetTrigger asChild>
+              <Button>Open Sheet</Button>
+            </SheetTrigger>
+            <SheetContent>
+              <div className="space-y-2">
+                <h2 className="text-lg font-semibold">Sheet Panel</h2>
+                <p className="text-sm text-muted-foreground">
+                  Use this for mobile nav, details, or quick actions.
+                </p>
+              </div>
+            </SheetContent>
+          </Sheet>
+        </CardContent>
+      </Card>
+    </div>
+  );
+}