# Shark UI Component Usage Examples

Usage examples for all components in the Shark UI design system. Import paths use `@/components/ui` (install via CLI or manual setup first).

# Accordion - Examples and Patterns

Examples for Accordion component.

## Example: controlled

```tsx
"use client";

import React from "react";
import {
  Accordion,
  AccordionContent,
  AccordionItem,
  AccordionTrigger,
} from "@/components/ui/accordion";

const Example = () => {
  const [value, setValue] = React.useState<string[]>([]);

  const isSecondItemOpen = value.includes("item-2");

  return (
    <div className="flex w-full max-w-lg flex-col gap-4">
      <p className="text-muted-foreground text-sm">Open the 2nd item</p>

      <Accordion
        className="w-full"
        onValueChange={(e) => setValue(e.value)}
        value={value}
      >
        <AccordionItem value="item-1">
          <AccordionTrigger>Product Information</AccordionTrigger>
          <AccordionContent className="text-muted-foreground">
            <p>
              Our flagship product combines cutting-edge technology with sleek
              design. Built with premium materials, it offers unparalleled
              performance and reliability.
            </p>
          </AccordionContent>
        </AccordionItem>

        <AccordionItem value="item-2">
          <AccordionTrigger>Shipping Details</AccordionTrigger>
          <AccordionContent className="text-muted-foreground">
            <p>
              We offer worldwide shipping through trusted courier partners.
              Standard delivery takes 3-5 business days.
            </p>
          </AccordionContent>
        </AccordionItem>

        <AccordionItem value="item-3">
          <AccordionTrigger>Return Policy</AccordionTrigger>
          <AccordionContent className="text-muted-foreground">
            <p>
              We stand behind our products with a comprehensive 30-day return
              policy. If you&apos;re not completely satisfied, simply return the
              item in its original condition.
            </p>
          </AccordionContent>
        </AccordionItem>
      </Accordion>

      <div className="text-center text-muted-foreground text-sm">
        {isSecondItemOpen ? "✅" : "❌"}
      </div>
    </div>
  );
};

export default Example;

```

## Example: default

```tsx
import {
  Accordion,
  AccordionContent,
  AccordionItem,
  AccordionTrigger,
} from "@/components/ui/accordion";

const AccordionDemo = () => (
  <Accordion className="w-full max-w-lg" defaultValue={["item-1"]}>
    <AccordionItem value="item-1">
      <AccordionTrigger>Product Information</AccordionTrigger>
      <AccordionContent className="flex flex-col gap-4 text-muted-foreground">
        <p>
          Our flagship product combines cutting-edge technology with sleek
          design. Built with premium materials, it offers unparalleled
          performance and reliability.
        </p>

        <p>
          Key features include advanced processing capabilities, and an
          intuitive user interface designed for both beginners and experts.
        </p>
      </AccordionContent>
    </AccordionItem>

    <AccordionItem value="item-2">
      <AccordionTrigger>Shipping Details</AccordionTrigger>
      <AccordionContent className="flex flex-col gap-4 text-muted-foreground">
        <p>
          We offer worldwide shipping through trusted courier partners. Standard
          delivery takes 3-5 business days, while express shipping ensures
          delivery within 1-2 business days.
        </p>

        <p>
          All orders are carefully packaged and fully insured. Track your
          shipment in real-time through our dedicated tracking portal.
        </p>
      </AccordionContent>
    </AccordionItem>

    <AccordionItem value="item-3">
      <AccordionTrigger>Return Policy</AccordionTrigger>
      <AccordionContent className="flex flex-col gap-4 text-muted-foreground">
        <p>
          We stand behind our products with a comprehensive 30-day return
          policy. If you&apos;re not completely satisfied, simply return the
          item in its original condition.
        </p>

        <p>
          Our hassle-free return process includes free return shipping and full
          refunds processed within 48 hours of receiving the returned item.
        </p>
      </AccordionContent>
    </AccordionItem>
  </Accordion>
);

export default AccordionDemo;

```

## Example: disabled

```tsx
import {
  Accordion,
  AccordionContent,
  AccordionItem,
  AccordionTrigger,
} from "@/components/ui/accordion";

const Example = () => (
  <Accordion className="w-full max-w-lg" defaultValue={["item-1"]}>
    <AccordionItem value="item-1">
      <AccordionTrigger>Product Information</AccordionTrigger>
      <AccordionContent className="text-muted-foreground">
        <p>
          Our flagship product combines cutting-edge technology with sleek
          design. Built with premium materials, it offers unparalleled
          performance and reliability.
        </p>
      </AccordionContent>
    </AccordionItem>

    <AccordionItem disabled value="item-2">
      <AccordionTrigger>Shipping Details</AccordionTrigger>
      <AccordionContent className="text-muted-foreground">
        <p>
          We offer worldwide shipping through trusted courier partners. Standard
          delivery takes 3-5 business days.
        </p>
      </AccordionContent>
    </AccordionItem>

    <AccordionItem value="item-3">
      <AccordionTrigger>Return Policy</AccordionTrigger>
      <AccordionContent className="text-muted-foreground">
        <p>
          We stand behind our products with a comprehensive 30-day return
          policy. If you&apos;re not completely satisfied, simply return the
          item in its original condition.
        </p>
      </AccordionContent>
    </AccordionItem>
  </Accordion>
);

export default Example;

```

## Example: multiple

```tsx
import {
  Accordion,
  AccordionContent,
  AccordionItem,
  AccordionTrigger,
} from "@/components/ui/accordion";

const Example = () => (
  <Accordion className="w-full max-w-lg" multiple>
    <AccordionItem value="item-1">
      <AccordionTrigger>Product Information</AccordionTrigger>
      <AccordionContent className="text-muted-foreground">
        <p>
          Our flagship product combines cutting-edge technology with sleek
          design. Built with premium materials, it offers unparalleled
          performance and reliability.
        </p>
      </AccordionContent>
    </AccordionItem>

    <AccordionItem value="item-2">
      <AccordionTrigger>Shipping Details</AccordionTrigger>
      <AccordionContent className="text-muted-foreground">
        <p>
          We offer worldwide shipping through trusted courier partners. Standard
          delivery takes 3-5 business days.
        </p>
      </AccordionContent>
    </AccordionItem>

    <AccordionItem value="item-3">
      <AccordionTrigger>Return Policy</AccordionTrigger>
      <AccordionContent className="text-muted-foreground">
        <p>
          We stand behind our products with a comprehensive 30-day return
          policy. If you&apos;re not completely satisfied, simply return the
          item in its original condition.
        </p>
      </AccordionContent>
    </AccordionItem>
  </Accordion>
);

export default Example;

```

## Example: non-collapsible

```tsx
import {
  Accordion,
  AccordionContent,
  AccordionItem,
  AccordionTrigger,
} from "@/components/ui/accordion";

const Example = () => (
  <Accordion
    className="w-full max-w-lg"
    collapsible={false}
    defaultValue={["item-1"]}
  >
    <AccordionItem value="item-1">
      <AccordionTrigger>Product Information</AccordionTrigger>
      <AccordionContent className="text-muted-foreground">
        <p>
          Our flagship product combines cutting-edge technology with sleek
          design. Built with premium materials, it offers unparalleled
          performance and reliability.
        </p>
      </AccordionContent>
    </AccordionItem>

    <AccordionItem value="item-2">
      <AccordionTrigger>Shipping Details</AccordionTrigger>
      <AccordionContent className="text-muted-foreground">
        <p>
          We offer worldwide shipping through trusted courier partners. Standard
          delivery takes 3-5 business days.
        </p>
      </AccordionContent>
    </AccordionItem>

    <AccordionItem value="item-3">
      <AccordionTrigger>Return Policy</AccordionTrigger>
      <AccordionContent className="text-muted-foreground">
        <p>
          We stand behind our products with a comprehensive 30-day return
          policy. If you&apos;re not completely satisfied, simply return the
          item in its original condition.
        </p>
      </AccordionContent>
    </AccordionItem>
  </Accordion>
);

export default Example;

```

# Action Bar - Examples and Patterns

Examples for Action Bar component.

## Example: close-trigger

```tsx
"use client";

import { XIcon } from "lucide-react";
import React from "react";
import {
  ActionBar,
  ActionBarClose,
  ActionBarContent,
  ActionBarSelectionTrigger,
  ActionBarTrigger,
} from "@/components/ui/action-bar";
import { Button } from "@/components/ui/button";

const Example = () => {
  const [isOpen, setIsOpen] = React.useState(false);

  return (
    <ActionBar onOpenChange={setIsOpen} open={isOpen}>
      <ActionBarTrigger asChild>
        <Button variant="outline">Open</Button>
      </ActionBarTrigger>
      <ActionBarContent className="w-full max-w-sm">
        <ActionBarClose asChild>
          <Button size="icon-sm" variant="ghost">
            <XIcon />
          </Button>
        </ActionBarClose>
        <ActionBarSelectionTrigger count={3} />
      </ActionBarContent>
    </ActionBar>
  );
};

export default Example;

```

## Example: controlled

```tsx
"use client";

import { XIcon } from "lucide-react";
import React from "react";
import {
  ActionBar,
  ActionBarClose,
  ActionBarContent,
  ActionBarSelectionTrigger,
} from "@/components/ui/action-bar";
import { Button } from "@/components/ui/button";

const Example = () => {
  const [isOpen, setIsOpen] = React.useState(false);

  return (
    <ActionBar onOpenChange={setIsOpen} open={isOpen}>
      <Button onClick={() => setIsOpen((prev) => !prev)} variant="outline">
        Toggle
      </Button>
      <ActionBarContent className="w-full max-w-xs">
        <ActionBarClose asChild>
          <Button size="icon-sm" variant="ghost">
            <XIcon />
          </Button>
        </ActionBarClose>
        <ActionBarSelectionTrigger count={2} />
      </ActionBarContent>
    </ActionBar>
  );
};

export default Example;

```

## Example: custom-spacing

```tsx
"use client";

import { PencilIcon, Trash2Icon, XIcon } from "lucide-react";
import React from "react";
import {
  ActionBar,
  ActionBarBody,
  ActionBarClose,
  ActionBarContent,
  ActionBarSelectionTrigger,
  ActionBarTrigger,
} from "@/components/ui/action-bar";
import { Button } from "@/components/ui/button";

const Example = () => {
  const [isOpen, setIsOpen] = React.useState(false);

  return (
    <ActionBar onOpenChange={setIsOpen} open={isOpen}>
      <ActionBarTrigger asChild>
        <Button variant="outline">Open</Button>
      </ActionBarTrigger>
      <ActionBarContent className="w-full max-w-md [--space:--spacing(2)]">
        <ActionBarClose asChild>
          <Button size="icon-sm" variant="ghost">
            <XIcon />
          </Button>
        </ActionBarClose>
        <ActionBarSelectionTrigger count={2} />
        <ActionBarBody>
          <Button size="sm" variant="secondary">
            <PencilIcon />
            Edit
          </Button>
          <Button size="sm" variant="destructive">
            <Trash2Icon />
            Delete
          </Button>
        </ActionBarBody>
      </ActionBarContent>
    </ActionBar>
  );
};

export default Example;

```

## Example: default

```tsx
import {
  EllipsisIcon,
  PencilIcon,
  SendIcon,
  Trash2Icon,
  XIcon,
} from "lucide-react";
import {
  ActionBar,
  ActionBarBody,
  ActionBarClose,
  ActionBarContent,
  ActionBarSelectionTrigger,
  ActionBarTrigger,
} from "@/components/ui/action-bar";
import { Button } from "@/components/ui/button";

const ActionBarDemo = () => {
  return (
    <ActionBar>
      <ActionBarTrigger asChild>
        <Button variant="outline">Open</Button>
      </ActionBarTrigger>
      <ActionBarContent className="w-full max-w-xl">
        <ActionBarClose asChild>
          <Button size="icon-sm" variant="ghost">
            <XIcon />
          </Button>
        </ActionBarClose>
        <ActionBarSelectionTrigger count={3} />
        <ActionBarBody>
          <Button asChild size="sm" variant="secondary">
            <SendIcon />
            Send
          </Button>{" "}
          <Button size="sm" variant="secondary">
            <PencilIcon />
            Edit
          </Button>
          <Button size="sm" variant="secondary">
            <EllipsisIcon />
          </Button>
          <Button size="sm" variant="destructive">
            <Trash2Icon />
            Delete
          </Button>
        </ActionBarBody>
      </ActionBarContent>
    </ActionBar>
  );
};

export default ActionBarDemo;

```

## Example: dialog

```tsx
import { Trash2Icon, XIcon } from "lucide-react";
import {
  ActionBar,
  ActionBarBody,
  ActionBarClose,
  ActionBarContent,
  ActionBarSelectionTrigger,
  ActionBarTrigger,
} from "@/components/ui/action-bar";
import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogTrigger,
} from "@/components/ui/alert-dialog";
import { Button } from "@/components/ui/button";

const Example = () => {
  return (
    <ActionBar>
      <ActionBarTrigger asChild>
        <Button variant="outline">Open</Button>
      </ActionBarTrigger>
      <ActionBarContent className="w-full max-w-xl">
        <ActionBarClose asChild>
          <Button size="icon-sm" variant="ghost">
            <XIcon />
          </Button>
        </ActionBarClose>
        <ActionBarSelectionTrigger count={3} />
        <ActionBarBody>
          <AlertDialog>
            <AlertDialogTrigger asChild>
              <Button size="sm" variant="destructive">
                <Trash2Icon />
                Delete
              </Button>
            </AlertDialogTrigger>
            <AlertDialogContent>
              <AlertDialogHeader
                description="This action cannot be undone."
                title="Delete selected orders?"
              />

              <AlertDialogFooter>
                <AlertDialogCancel>Cancel</AlertDialogCancel>
                <AlertDialogAction variant="destructive">
                  Delete
                </AlertDialogAction>
              </AlertDialogFooter>
            </AlertDialogContent>
          </AlertDialog>
        </ActionBarBody>
      </ActionBarContent>
    </ActionBar>
  );
};

export default Example;

```

## Example: menu

```tsx
import {
  ArchiveIcon,
  CopyIcon,
  EllipsisIcon,
  Trash2Icon,
  XIcon,
} from "lucide-react";
import {
  ActionBar,
  ActionBarBody,
  ActionBarClose,
  ActionBarContent,
  ActionBarSelectionTrigger,
  ActionBarTrigger,
} from "@/components/ui/action-bar";
import { Button } from "@/components/ui/button";
import {
  Menu,
  MenuContent,
  MenuItem,
  MenuTrigger,
} from "@/components/ui/menu";

const Example = () => {
  return (
    <ActionBar>
      <ActionBarTrigger asChild>
        <Button variant="outline">Open</Button>
      </ActionBarTrigger>
      <ActionBarContent className="w-full max-w-xl">
        <ActionBarClose asChild>
          <Button size="icon-sm" variant="ghost">
            <XIcon />
          </Button>
        </ActionBarClose>
        <ActionBarSelectionTrigger count={3} />
        <ActionBarBody>
          <Menu positioning={{ placement: "top" }}>
            <MenuTrigger asChild>
              <Button size="sm" variant="secondary">
                <EllipsisIcon />
              </Button>
            </MenuTrigger>
            <MenuContent>
              <MenuItem value="archive">
                <ArchiveIcon />
                Archive
              </MenuItem>
              <MenuItem value="duplicate">
                <CopyIcon />
                Duplicate
              </MenuItem>
              <MenuItem value="delete" variant="destructive">
                <Trash2Icon />
                Delete
              </MenuItem>
            </MenuContent>
          </Menu>
        </ActionBarBody>
      </ActionBarContent>
    </ActionBar>
  );
};

export default Example;

```

## Example: offset

```tsx
"use client";

import { XIcon } from "lucide-react";
import React from "react";
import {
  ActionBar,
  ActionBarClose,
  ActionBarContent,
  ActionBarSelectionTrigger,
} from "@/components/ui/action-bar";
import { Button } from "@/components/ui/button";

const offsets = ["24px", "32px"] as const;

const Example = () => {
  const [isOpen, setIsOpen] = React.useState(false);
  const [offset, setOffset] = React.useState<(typeof offsets)[number]>("24px");

  return (
    <>
      <div className="flex flex-wrap gap-2">
        {offsets.map((value) => (
          <Button
            key={value}
            onClick={() => {
              setIsOpen(true);
              setOffset(value);
            }}
            variant={offset === value && isOpen ? "secondary" : "outline"}
          >
            {`Offset ${value}`}
          </Button>
        ))}
      </div>

      <ActionBar
        onOpenChange={setIsOpen}
        open={isOpen}
        positioning={{ offset, placement: "bottom" }}
      >
        <ActionBarContent className="w-full max-w-md">
          <ActionBarClose asChild>
            <Button size="icon-sm" variant="ghost">
              <XIcon />
            </Button>
          </ActionBarClose>
          <ActionBarSelectionTrigger count={3} />
        </ActionBarContent>
      </ActionBar>
    </>
  );
};

export default Example;

```

## Example: positioning

```tsx
"use client";

import { XIcon } from "lucide-react";
import React from "react";
import {
  ActionBar,
  ActionBarClose,
  ActionBarContent,
  ActionBarSelectionTrigger,
} from "@/components/ui/action-bar";
import { Button } from "@/components/ui/button";

type Placement = "bottom" | "bottom-start" | "bottom-end";

const Example = () => {
  const [isOpen, setIsOpen] = React.useState(false);
  const [placement, setPlacement] = React.useState<Placement>("bottom");

  const handleOpenChange = (nextPlacement: Placement) => {
    setIsOpen(true);
    setPlacement(nextPlacement);
  };

  return (
    <ActionBar
      onOpenChange={setIsOpen}
      open={isOpen}
      positioning={{ placement }}
    >
      <div className="flex flex-wrap gap-4">
        <Button
          onClick={() => handleOpenChange("bottom-start")}
          variant="outline"
        >
          Bottom Start
        </Button>
        <Button onClick={() => handleOpenChange("bottom")} variant="outline">
          Bottom
        </Button>
        <Button
          onClick={() => handleOpenChange("bottom-end")}
          variant="outline"
        >
          Bottom End
        </Button>
      </div>
      <ActionBarContent className="w-full max-w-xs">
        <ActionBarClose asChild>
          <Button size="icon-sm" variant="ghost">
            <XIcon />
          </Button>
        </ActionBarClose>
        <ActionBarSelectionTrigger count={5} />
      </ActionBarContent>
    </ActionBar>
  );
};

export default Example;

```

## Example: table

```tsx
"use client";

import {
  ArchiveIcon,
  CopyIcon,
  EllipsisIcon,
  PencilIcon,
  SendIcon,
  Trash2Icon,
} from "lucide-react";
import React from "react";
import {
  ActionBar,
  ActionBarContent,
  ActionBarSelectionTrigger,
} from "@/components/ui/action-bar";
import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogBody,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogTrigger,
} from "@/components/ui/alert-dialog";
import { Badge, type BadgeVariant } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { Checkbox } from "@/components/ui/checkbox";
import {
  Menu,
  MenuContent,
  MenuItem,
  MenuTrigger,
} from "@/components/ui/menu";
import {
  Table,
  TableBody,
  TableCaption,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@/components/ui/table";

const Example = () => {
  const [selectedIds, setSelectedIds] = React.useState<string[]>([]);

  const isOpen = selectedIds.length > 0;
  const allSelected =
    selectedIds.length > 0 && selectedIds.length === orders.length;

  const handleSelectAll = (checked: boolean | "indeterminate") => {
    if (checked) {
      setSelectedIds(orders.map((order) => order.id));
    } else {
      setSelectedIds([]);
    }
  };

  const handleSelectRow = (id: string, checked: boolean | "indeterminate") => {
    if (checked) {
      setSelectedIds((prev) => [...prev, id]);
    } else {
      setSelectedIds((prev) => prev.filter((item) => item !== id));
    }
  };

  const handleClose = () => {
    setSelectedIds([]);
  };

  return (
    <div className="w-full max-w-2xl rounded-lg border">
      <ActionBar onOpenChange={(open) => !open && handleClose()} open={isOpen}>
        <Table>
          <TableCaption className="sr-only">
            Orders with checkbox selection and action bar.
          </TableCaption>
          <TableHeader>
            <TableRow>
              <TableHead className="w-12">
                <Checkbox
                  aria-label="Select all orders"
                  checked={allSelected}
                  onCheckedChange={({ checked }) => handleSelectAll(checked)}
                />
              </TableHead>
              <TableHead>ID</TableHead>
              <TableHead>Name</TableHead>
              <TableHead>Status</TableHead>
              <TableHead>Amount</TableHead>
            </TableRow>
          </TableHeader>
          <TableBody>
            {orders.map((order) => {
              const isSelected = selectedIds.includes(order.id);

              return (
                <TableRow
                  data-state={isSelected ? "selected" : undefined}
                  key={order.id}
                >
                  <TableCell className="w-12">
                    <Checkbox
                      aria-label={`Select order ${order.id}`}
                      checked={isSelected}
                      onCheckedChange={({ checked }) =>
                        handleSelectRow(order.id, checked)
                      }
                    />
                  </TableCell>
                  <TableCell className="font-medium">{order.id}</TableCell>
                  <TableCell>{order.name}</TableCell>
                  <TableCell>
                    <Badge
                      className="capitalize"
                      variant={statusVariants[order.status]}
                    >
                      {order.status}
                    </Badge>
                  </TableCell>
                  <TableCell>{order.amount}</TableCell>
                </TableRow>
              );
            })}
          </TableBody>
        </Table>

        <ActionBarContent className="w-full max-w-xl">
          <ActionBarSelectionTrigger count={selectedIds.length} />
          <div className="ml-auto flex gap-2">
            <Button size="sm" variant="secondary">
              <SendIcon />
              Send
            </Button>
            <Button size="sm" variant="secondary">
              <PencilIcon />
              Edit
            </Button>
            <Menu positioning={{ placement: "top" }}>
              <MenuTrigger asChild>
                <Button size="sm" variant="secondary">
                  <EllipsisIcon />
                </Button>
              </MenuTrigger>
              <MenuContent>
                <MenuItem value="archive">
                  <ArchiveIcon />
                  Archive
                </MenuItem>
                <MenuItem value="duplicate">
                  <CopyIcon />
                  Duplicate
                </MenuItem>
              </MenuContent>
            </Menu>
            <AlertDialog>
              <AlertDialogTrigger asChild>
                <Button size="sm" variant="destructive">
                  <Trash2Icon />
                  Delete
                </Button>
              </AlertDialogTrigger>
              <AlertDialogContent>
                <AlertDialogHeader
                  description="This action cannot be undone."
                  title="Delete selected orders?"
                />
                <AlertDialogBody>
                  <ul>
                    {selectedIds.map((id) => {
                      const order = orders.find((order) => order.id === id);

                      if (!order) {
                        return null;
                      }

                      return (
                        <li className="py-1 text-sm" key={id}>
                          {order.id} - {order.name}
                        </li>
                      );
                    })}
                  </ul>
                </AlertDialogBody>
                <AlertDialogFooter>
                  <AlertDialogCancel>Cancel</AlertDialogCancel>
                  <AlertDialogAction variant="destructive">
                    Delete
                  </AlertDialogAction>
                </AlertDialogFooter>
              </AlertDialogContent>
            </AlertDialog>
          </div>
        </ActionBarContent>
      </ActionBar>
    </div>
  );
};

export default Example;

const orders = [
  {
    id: "SO-01",
    name: "Macbook Pro 16",
    status: "progress",
    amount: "245,12 $",
  },
  {
    id: "SO-02",
    name: "Apple Watch Series 9",
    status: "transit",
    amount: "122,18 $",
  },
  {
    id: "SO-03",
    name: "AirPods Max",
    status: "pending",
    amount: "89,50 $",
  },
  {
    id: "SO-04",
    name: "iPad Pro 13",
    status: "pending",
    amount: "310,00 $",
  },
  {
    id: "SO-05",
    name: "iPhone 15 Pro Max",
    status: "transit",
    amount: "156,75 $",
  },
];

const statusVariants: Record<string, BadgeVariant> = {
  transit: "success",
  pending: "warning",
  progress: "info",
};

```

# Alert - Examples and Patterns

Examples for Alert component.

## Example: custom-color

```tsx
import { WandSparklesIcon } from "lucide-react";
import {
  Alert,
  AlertDescription,
  AlertTitle,
} from "@/components/ui/alert";

const Example = () => (
  <Alert className="max-w-md border-purple-500/32 bg-purple-500/5 [&_svg]:text-purple-500">
    <WandSparklesIcon />
    <AlertTitle>Fancy alert, huh?</AlertTitle>
    <AlertDescription>
      This is a fancy alert with a custom color.
    </AlertDescription>
  </Alert>
);

export default Example;

```

## Example: default

```tsx
import {
  Alert,
  AlertDescription,
  AlertTitle,
} from "@/components/ui/alert";

const AlertDemo = () => (
  <Alert className="max-w-md">
    <AlertTitle>Heads up!</AlertTitle>
    <AlertDescription>
      You can add icons to alerts to provide visual context and improve user
      experience.
    </AlertDescription>
  </Alert>
);

export default AlertDemo;

```

## Example: variant-default

```tsx
import { CheckCheckIcon } from "lucide-react";
import {
  Alert,
  AlertDescription,
  AlertTitle,
} from "@/components/ui/alert";

const Example = () => (
  <Alert className="max-w-md">
    <CheckCheckIcon />
    <AlertTitle>Deployment successful</AlertTitle>
    <AlertDescription>
      You can now start building your next great project.
    </AlertDescription>
  </Alert>
);

export default Example;

```

## Example: variant-destructive

```tsx
import { TriangleAlertIcon } from "lucide-react";
import {
  Alert,
  AlertDescription,
  AlertTitle,
} from "@/components/ui/alert";

const Example = () => (
  <Alert className="max-w-md" variant="destructive">
    <TriangleAlertIcon />
    <AlertTitle>Session expired</AlertTitle>
    <AlertDescription>
      Your session has expired. Please log in again.
    </AlertDescription>
  </Alert>
);

export default Example;

```

## Example: variant-info

```tsx
import { HistoryIcon } from "lucide-react";
import {
  Alert,
  AlertDescription,
  AlertTitle,
} from "@/components/ui/alert";

const Example = () => (
  <Alert className="max-w-md" variant="info">
    <HistoryIcon />
    <AlertTitle>New update available</AlertTitle>
    <AlertDescription>
      A new update is available. Check it out now.
    </AlertDescription>
  </Alert>
);

export default Example;

```

## Example: variant-success

```tsx
import { CheckCircleIcon } from "lucide-react";
import {
  Alert,
  AlertDescription,
  AlertTitle,
} from "@/components/ui/alert";

const Example = () => (
  <Alert className="max-w-md" variant="success">
    <CheckCircleIcon />
    <AlertTitle>Payment successful</AlertTitle>
    <AlertDescription>
      Your payment has been processed successfully. You will receive a receipt
      in your email.
    </AlertDescription>
  </Alert>
);

export default Example;

```

## Example: variant-warning

```tsx
import { AlertTriangleIcon } from "lucide-react";
import {
  Alert,
  AlertDescription,
  AlertTitle,
} from "@/components/ui/alert";

const Example = () => (
  <Alert className="max-w-md" variant="warning">
    <AlertTriangleIcon />
    <AlertTitle>Storage almost full</AlertTitle>
    <AlertDescription>
      Your storage is almost full. Consider upgrading your plan to avoid losing
      data.
    </AlertDescription>
  </Alert>
);

export default Example;

```

## Example: with-action

```tsx
import { HistoryIcon } from "lucide-react";
import {
  Alert,
  AlertAction,
  AlertDescription,
  AlertTitle,
} from "@/components/ui/alert";
import { Button } from "@/components/ui/button";

const Example = () => (
  <Alert className="max-w-md">
    <HistoryIcon />
    <AlertTitle>New update available</AlertTitle>
    <AlertDescription>Check it out now.</AlertDescription>
    <AlertAction>
      <Button size="xs" variant="ghost">
        Ignore
      </Button>
      <Button size="xs">Update</Button>
    </AlertAction>
  </Alert>
);

export default Example;

```

## Example: with-icon

```tsx
import { SparklesIcon } from "lucide-react";
import {
  Alert,
  AlertDescription,
  AlertTitle,
} from "@/components/ui/alert";

const Example = () => (
  <Alert className="max-w-md">
    <SparklesIcon />
    <AlertTitle>New Feature Available</AlertTitle>
    <AlertDescription>
      Icons can be added to alerts to provide visual context and improve user
      experience.
    </AlertDescription>
  </Alert>
);

export default Example;

```

# Alert Dialog - Examples and Patterns

Examples for Alert Dialog component.

## Example: default

```tsx
import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogTrigger,
} from "@/components/ui/alert-dialog";
import { Button } from "@/components/ui/button";

const AlertDialogDemo = () => (
  <AlertDialog>
    <AlertDialogTrigger asChild>
      <Button variant="outline">Open</Button>
    </AlertDialogTrigger>
    <AlertDialogContent>
      <AlertDialogHeader
        description="Do you want to allow the USB accessory to connect to this device?"
        title="Allow accessory to connect?"
      />
      <AlertDialogFooter>
        <AlertDialogCancel>Don't allow</AlertDialogCancel>
        <AlertDialogAction>Allow</AlertDialogAction>
      </AlertDialogFooter>
    </AlertDialogContent>
  </AlertDialog>
);

export default AlertDialogDemo;

```

## Example: variant-destructive

```tsx
import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogTrigger,
} from "@/components/ui/alert-dialog";
import { Button } from "@/components/ui/button";

const Example = () => (
  <AlertDialog>
    <AlertDialogTrigger asChild>
      <Button variant="outline">Open</Button>
    </AlertDialogTrigger>
    <AlertDialogContent>
      <AlertDialogHeader
        description="This action cannot be undone. This will permanently delete the project and remove all data."
        title="Delete Project"
      />
      <AlertDialogFooter>
        <AlertDialogCancel>Cancel</AlertDialogCancel>
        <AlertDialogAction variant="destructive">
          Delete project
        </AlertDialogAction>
      </AlertDialogFooter>
    </AlertDialogContent>
  </AlertDialog>
);

export default Example;

```

# Announcement - Examples and Patterns

Examples for Announcement component.

## Example: default

```tsx
import {
  Announcement,
  AnnouncementBadge,
  AnnouncementTitle,
} from "@/components/ui/announcement";

const Example = () => (
  <Announcement>
    <AnnouncementBadge>Release</AnnouncementBadge>
    <AnnouncementTitle>
      v2.1.0 — Dark mode, faster builds, and 12 new components
    </AnnouncementTitle>
  </Announcement>
);

export default Example;

```

## Example: variant-default

```tsx
import {
  Announcement,
  AnnouncementBadge,
  AnnouncementTitle,
} from "@/components/ui/announcement";

const Example = () => (
  <Announcement>
    <AnnouncementBadge variant="default">Release</AnnouncementBadge>
    <AnnouncementTitle>
      v2.1.0 — Dark mode, faster builds, and 12 new components
    </AnnouncementTitle>
  </Announcement>
);

export default Example;

```

## Example: variant-destructive

```tsx
import { TriangleAlertIcon } from "lucide-react";
import {
  Announcement,
  AnnouncementBadge,
  AnnouncementTitle,
} from "@/components/ui/announcement";

const Example = () => (
  <Announcement>
    <AnnouncementBadge variant="destructive">
      <TriangleAlertIcon /> Payment failed
    </AnnouncementBadge>
    <AnnouncementTitle>
      Your last invoice couldn&apos;t be processed. Update your billing info.
    </AnnouncementTitle>
  </Announcement>
);

export default Example;

```

## Example: variant-info

```tsx
import {
  Announcement,
  AnnouncementBadge,
  AnnouncementTitle,
} from "@/components/ui/announcement";

const Example = () => (
  <Announcement>
    <AnnouncementBadge variant="info">Maintenance</AnnouncementBadge>
    <AnnouncementTitle>
      Scheduled downtime tonight 2–4 AM UTC. No action needed.
    </AnnouncementTitle>
  </Announcement>
);

export default Example;

```

## Example: variant-success

```tsx
import { ArrowUpRightIcon, CheckCircleIcon } from "lucide-react";
import Link from "next/link";
import {
  Announcement,
  AnnouncementBadge,
  AnnouncementTitle,
} from "@/components/ui/announcement";

const Example = () => (
  <Announcement asChild>
    <Link href="#">
      <AnnouncementBadge variant="success">
        <CheckCircleIcon /> Deployed
      </AnnouncementBadge>
      <AnnouncementTitle>
        Production build completed in 2m 34s <ArrowUpRightIcon />
      </AnnouncementTitle>
    </Link>
  </Announcement>
);

export default Example;

```

## Example: variant-warning

```tsx
import { TriangleAlertIcon } from "lucide-react";
import {
  Announcement,
  AnnouncementBadge,
  AnnouncementTitle,
} from "@/components/ui/announcement";

const Example = () => (
  <Announcement>
    <AnnouncementBadge variant="warning">
      <TriangleAlertIcon /> Trial ending
    </AnnouncementBadge>
    <AnnouncementTitle>
      Your free trial expires in 3 days. Upgrade to keep access.
    </AnnouncementTitle>
  </Announcement>
);

export default Example;

```

## Example: with-icon

```tsx
import { ArrowUpRight, SparklesIcon } from "lucide-react";
import {
  Announcement,
  AnnouncementBadge,
  AnnouncementTitle,
} from "@/components/ui/announcement";

const Example = () => (
  <Announcement>
    <AnnouncementBadge variant="info">
      <SparklesIcon aria-hidden />
      New features
    </AnnouncementBadge>
    <AnnouncementTitle>
      Dark mode and 12 new components available
      <ArrowUpRight aria-hidden />
    </AnnouncementTitle>
  </Announcement>
);

export default Example;

```

## Example: with-link

```tsx
import { ArrowUpRight } from "lucide-react";
import Link from "next/link";
import {
  Announcement,
  AnnouncementBadge,
  AnnouncementTitle,
} from "@/components/ui/announcement";

const Example = () => (
  <Announcement asChild>
    <Link href="/">
      <AnnouncementBadge>Latest update</AnnouncementBadge>
      <AnnouncementTitle>
        New feature added
        <ArrowUpRight aria-hidden />
      </AnnouncementTitle>
    </Link>
  </Announcement>
);

export default Example;

```

## Example: without-badge

```tsx
import { ArrowUpRightIcon } from "lucide-react";
import {
  Announcement,
  AnnouncementTitle,
} from "@/components/ui/announcement";

const Example = () => (
  <Announcement>
    <AnnouncementTitle>
      New features added, check the logs for more details.
      <ArrowUpRightIcon />
    </AnnouncementTitle>
  </Announcement>
);

export default Example;

```

# Aspect Ratio - Examples and Patterns

Examples for Aspect Ratio component.

## Example: default

```tsx
import { AspectRatio } from "@/components/ui/aspect-ratio";

const AspectRatioDemo = () => (
  <AspectRatio className="w-full max-w-64 rounded-xl bg-muted">
    <div className="flex size-full items-center justify-center">
      <span className="select-none text-muted-foreground text-xs">1:1</span>
    </div>
  </AspectRatio>
);

export default AspectRatioDemo;

```

## Example: portrait

```tsx
import { AspectRatio } from "@/components/ui/aspect-ratio";

const Example = () => (
  <AspectRatio className="w-full max-w-40 rounded-xl bg-muted [--ratio:9/16]">
    <div className="flex size-full items-center justify-center">
      <span className="select-none text-muted-foreground text-xs">9:16</span>
    </div>
  </AspectRatio>
);

export default Example;

```

## Example: responsive

```tsx
import { AspectRatio } from "@/components/ui/aspect-ratio";

const Example = () => (
  <AspectRatio className="w-full max-w-40 rounded-xl border bg-muted sm:[--ratio:4/3] md:[--ratio:16/9] lg:[--ratio:1/1]">
    <div className="flex size-full items-center justify-center">
      <span className="select-none text-muted-foreground text-xs">
        4:3 → 16:9 → 1:1
      </span>
    </div>
  </AspectRatio>
);

export default Example;

```

## Example: square

```tsx
import { AspectRatio } from "@/components/ui/aspect-ratio";

const Example = () => (
  <AspectRatio className="w-full max-w-64 rounded-xl bg-muted [--ratio:1/1]">
    <div className="flex size-full items-center justify-center">
      <span className="select-none text-muted-foreground text-xs">1:1</span>
    </div>
  </AspectRatio>
);

export default Example;

```

## Example: video

```tsx
import { AspectRatio } from "@/components/ui/aspect-ratio";

const Example = () => (
  <AspectRatio className="w-full max-w-64 rounded-xl bg-muted [--ratio:16/9]">
    <div className="flex size-full items-center justify-center">
      <span className="select-none text-muted-foreground text-xs">16:9</span>
    </div>
  </AspectRatio>
);

export default Example;

```

# Autocomplete - Examples and Patterns

Examples for Autocomplete component.

## Example: controlled

```tsx
"use client";

import { useFilter, useListCollection } from "@ark-ui/react";
import React from "react";
import {
  Autocomplete,
  AutocompleteContent,
  AutocompleteEmpty,
  AutocompleteInput,
  AutocompleteItem,
} from "@/components/ui/autocomplete";
import { ComboboxList } from "@/components/ui/combobox";

const Example = () => {
  const [value, setValue] = React.useState<string | undefined>("banana");

  const { contains } = useFilter({ sensitivity: "base" });

  const { collection, filter } = useListCollection({
    filter: contains,
    initialItems,
  });

  return (
    <div className="flex w-full max-w-64 flex-col gap-4">
      <Autocomplete
        className="w-full"
        collection={collection}
        onInputValueChange={({ inputValue }) => filter(inputValue)}
        onValueChange={(e) => setValue(e.value?.at(0))}
        value={value ? [value] : []}
      >
        <AutocompleteInput placeholder="Select a fruit..." />
        <AutocompleteContent>
          <AutocompleteEmpty />
          <ComboboxList>
            {collection.items.map((item) => (
              <AutocompleteItem item={item} key={item.value}>
                {item.label}
              </AutocompleteItem>
            ))}
          </ComboboxList>
        </AutocompleteContent>
      </Autocomplete>
      <p className="text-center text-muted-foreground text-sm">
        Selected: {value ?? "(none)"}
      </p>
    </div>
  );
};

const initialItems = [
  { label: "Apple", value: "apple" },
  { label: "Banana", value: "banana" },
  { label: "Cherry", value: "cherry" },
  { label: "Date", value: "date" },
];

export default Example;

```

## Example: default

```tsx
"use client";

import { useFilter, useListCollection } from "@ark-ui/react";
import {
  Autocomplete,
  AutocompleteContent,
  AutocompleteEmpty,
  AutocompleteInput,
  AutocompleteItem,
} from "@/components/ui/autocomplete";
import { ComboboxList } from "@/components/ui/combobox";

const AutocompleteDemo = () => {
  const { contains } = useFilter({ sensitivity: "base" });

  const { collection, filter } = useListCollection({
    initialItems,
    filter: contains,
  });

  return (
    <Autocomplete
      className="w-64"
      collection={collection}
      onInputValueChange={({ inputValue }) => filter(inputValue)}
    >
      <AutocompleteInput />
      <AutocompleteContent>
        <AutocompleteEmpty />
        <ComboboxList>
          {collection.items.map((item) => (
            <AutocompleteItem item={item} key={item.value}>
              {item.label}
            </AutocompleteItem>
          ))}
        </ComboboxList>
      </AutocompleteContent>
    </Autocomplete>
  );
};

const initialItems = [
  { label: "Apple", value: "apple" },
  { label: "Banana", value: "banana" },
  { label: "Cherry", value: "cherry" },
  { label: "Date", value: "date" },
];

export default AutocompleteDemo;

```

## Example: disabled

```tsx
"use client";

import { useFilter, useListCollection } from "@ark-ui/react";
import {
  Autocomplete,
  AutocompleteContent,
  AutocompleteEmpty,
  AutocompleteInput,
  AutocompleteItem,
} from "@/components/ui/autocomplete";
import { ComboboxList } from "@/components/ui/combobox";

const Example = () => {
  const { contains } = useFilter({ sensitivity: "base" });

  const { collection, filter } = useListCollection({
    filter: contains,
    initialItems,
  });

  return (
    <Autocomplete
      className="w-64"
      collection={collection}
      disabled
      onInputValueChange={({ inputValue }) => filter(inputValue)}
    >
      <AutocompleteInput placeholder="Select a fruit..." />
      <AutocompleteContent>
        <AutocompleteEmpty>No items found.</AutocompleteEmpty>
        <ComboboxList>
          {collection.items.map((item) => (
            <AutocompleteItem item={item} key={item.value}>
              {item.label}
            </AutocompleteItem>
          ))}
        </ComboboxList>
      </AutocompleteContent>
    </Autocomplete>
  );
};

const initialItems = [
  { label: "Apple", value: "apple" },
  { label: "Banana", value: "banana" },
  { label: "Cherry", value: "cherry" },
];

export default Example;

```

## Example: group

```tsx
"use client";

import { useFilter, useListCollection } from "@ark-ui/react";
import {
  Autocomplete,
  AutocompleteContent,
  AutocompleteEmpty,
  AutocompleteGroup,
  AutocompleteInput,
  AutocompleteItem,
} from "@/components/ui/autocomplete";
import { ComboboxList } from "@/components/ui/combobox";

const Example = () => {
  const { contains } = useFilter({ sensitivity: "base" });

  const { collection, filter } = useListCollection({
    filter: contains,
    groupBy: (item) => item.continent,
    initialItems,
  });

  return (
    <Autocomplete
      className="w-64"
      collection={collection}
      onInputValueChange={({ inputValue }) => filter(inputValue)}
    >
      <AutocompleteInput placeholder="Select a timezone" />
      <AutocompleteContent className="w-60">
        <AutocompleteEmpty />
        <ComboboxList>
          {collection.group().map(([continent, group]) => (
            <AutocompleteGroup heading={continent} key={continent}>
              {group.map((item) => (
                <AutocompleteItem item={item} key={item.value}>
                  {item.label}
                </AutocompleteItem>
              ))}
            </AutocompleteGroup>
          ))}
        </ComboboxList>
      </AutocompleteContent>
    </Autocomplete>
  );
};

const initialItems = [
  { label: "Canada", value: "ca", continent: "North America" },
  { label: "United States", value: "us", continent: "North America" },
  { label: "Mexico", value: "mx", continent: "North America" },
  { label: "United Kingdom", value: "uk", continent: "Europe" },
  { label: "Germany", value: "de", continent: "Europe" },
  { label: "France", value: "fr", continent: "Europe" },
  { label: "Japan", value: "jp", continent: "Asia" },
  { label: "South Korea", value: "kr", continent: "Asia" },
  { label: "China", value: "cn", continent: "Asia" },
];

export default Example;

```

## Example: inline-autocomplete

```tsx
"use client";

import { useFilter, useListCollection } from "@ark-ui/react";
import {
  Autocomplete,
  AutocompleteContent,
  AutocompleteEmpty,
  AutocompleteInput,
  AutocompleteItem,
} from "@/components/ui/autocomplete";
import { ComboboxList } from "@/components/ui/combobox";

const Example = () => {
  const { contains } = useFilter({ sensitivity: "base" });

  const { collection, filter } = useListCollection({
    filter: contains,
    initialItems,
  });

  return (
    <Autocomplete
      className="w-64"
      collection={collection}
      onInputValueChange={({ inputValue }) => filter(inputValue)}
    >
      <AutocompleteInput placeholder="Search items…" />
      <AutocompleteContent>
        <AutocompleteEmpty>No items found.</AutocompleteEmpty>
        <ComboboxList>
          {collection.items.map((item) => (
            <AutocompleteItem item={item} key={item.value}>
              {item.label}
            </AutocompleteItem>
          ))}
        </ComboboxList>
      </AutocompleteContent>
    </Autocomplete>
  );
};

const initialItems = [
  { label: "Apple", value: "apple" },
  { label: "Banana", value: "banana" },
  { label: "Cherry", value: "cherry" },
  { label: "Date", value: "date" },
];

export default Example;

```

## Example: invalid

```tsx
"use client";

import { useFilter, useListCollection } from "@ark-ui/react";
import {
  Autocomplete,
  AutocompleteContent,
  AutocompleteEmpty,
  AutocompleteInput,
  AutocompleteItem,
} from "@/components/ui/autocomplete";
import { ComboboxList } from "@/components/ui/combobox";

const Example = () => {
  const { contains } = useFilter({ sensitivity: "base" });

  const { collection, filter } = useListCollection({
    filter: contains,
    initialItems,
  });

  return (
    <Autocomplete
      className="w-64"
      collection={collection}
      invalid
      onInputValueChange={({ inputValue }) => filter(inputValue)}
    >
      <AutocompleteInput placeholder="Select a fruit..." />
      <AutocompleteContent>
        <AutocompleteEmpty />
        <ComboboxList>
          {collection.items.map((item) => (
            <AutocompleteItem item={item} key={item.value}>
              {item.label}
            </AutocompleteItem>
          ))}
        </ComboboxList>
      </AutocompleteContent>
    </Autocomplete>
  );
};

const initialItems = [
  { label: "Apple", value: "apple" },
  { label: "Banana", value: "banana" },
  { label: "Cherry", value: "cherry" },
];

export default Example;

```

## Example: size-lg

```tsx
"use client";

import { useFilter, useListCollection } from "@ark-ui/react";
import {
  Autocomplete,
  AutocompleteContent,
  AutocompleteEmpty,
  AutocompleteInput,
  AutocompleteItem,
} from "@/components/ui/autocomplete";
import { ComboboxList } from "@/components/ui/combobox";

const Example = () => {
  const { contains } = useFilter({ sensitivity: "base" });

  const { collection, filter } = useListCollection({
    filter: contains,
    initialItems,
  });

  return (
    <Autocomplete
      className="w-64"
      collection={collection}
      onInputValueChange={({ inputValue }) => filter(inputValue)}
    >
      <AutocompleteInput size="lg" />
      <AutocompleteContent>
        <AutocompleteEmpty>No items found.</AutocompleteEmpty>
        <ComboboxList>
          {collection.items.map((item) => (
            <AutocompleteItem item={item} key={item.value}>
              {item.label}
            </AutocompleteItem>
          ))}
        </ComboboxList>
      </AutocompleteContent>
    </Autocomplete>
  );
};

const initialItems = [
  { label: "Apple", value: "apple" },
  { label: "Banana", value: "banana" },
  { label: "Cherry", value: "cherry" },
  { label: "Date", value: "date" },
];

export default Example;

```

## Example: size-md

```tsx
"use client";

import { useFilter, useListCollection } from "@ark-ui/react";
import {
  Autocomplete,
  AutocompleteContent,
  AutocompleteEmpty,
  AutocompleteInput,
  AutocompleteItem,
} from "@/components/ui/autocomplete";
import { ComboboxList } from "@/components/ui/combobox";

const Example = () => {
  const { contains } = useFilter({ sensitivity: "base" });

  const { collection, filter } = useListCollection({
    filter: contains,
    initialItems,
  });

  return (
    <Autocomplete
      className="w-64"
      collection={collection}
      onInputValueChange={({ inputValue }) => filter(inputValue)}
    >
      <AutocompleteInput size="md" />
      <AutocompleteContent>
        <AutocompleteEmpty />
        <ComboboxList>
          {collection.items.map((item) => (
            <AutocompleteItem item={item} key={item.value}>
              {item.label}
            </AutocompleteItem>
          ))}
        </ComboboxList>
      </AutocompleteContent>
    </Autocomplete>
  );
};

const initialItems = [
  { label: "Apple", value: "apple" },
  { label: "Banana", value: "banana" },
  { label: "Cherry", value: "cherry" },
  { label: "Date", value: "date" },
];

export default Example;

```

## Example: size-sm

```tsx
"use client";

import { useFilter, useListCollection } from "@ark-ui/react";
import {
  Autocomplete,
  AutocompleteContent,
  AutocompleteEmpty,
  AutocompleteInput,
  AutocompleteItem,
} from "@/components/ui/autocomplete";
import { ComboboxList } from "@/components/ui/combobox";

const Example = () => {
  const { contains } = useFilter({ sensitivity: "base" });

  const { collection, filter } = useListCollection({
    filter: contains,
    initialItems,
  });

  return (
    <Autocomplete
      className="w-64"
      collection={collection}
      onInputValueChange={({ inputValue }) => filter(inputValue)}
    >
      <AutocompleteInput size="sm" />
      <AutocompleteContent>
        <AutocompleteEmpty>No items found.</AutocompleteEmpty>
        <ComboboxList>
          {collection.items.map((item) => (
            <AutocompleteItem item={item} key={item.value}>
              {item.label}
            </AutocompleteItem>
          ))}
        </ComboboxList>
      </AutocompleteContent>
    </Autocomplete>
  );
};

const initialItems = [
  { label: "Apple", value: "apple" },
  { label: "Banana", value: "banana" },
  { label: "Cherry", value: "cherry" },
  { label: "Date", value: "date" },
];

export default Example;

```

## Example: with-clear-button

```tsx
"use client";

import { useFilter, useListCollection } from "@ark-ui/react";
import {
  Autocomplete,
  AutocompleteContent,
  AutocompleteEmpty,
  AutocompleteInput,
  AutocompleteItem,
} from "@/components/ui/autocomplete";
import { ComboboxList } from "@/components/ui/combobox";

const Example = () => {
  const { contains } = useFilter({ sensitivity: "base" });

  const { collection, filter } = useListCollection({
    filter: contains,
    initialItems,
  });

  return (
    <Autocomplete
      className="w-64"
      collection={collection}
      onInputValueChange={({ inputValue }) => filter(inputValue)}
    >
      <AutocompleteInput placeholder="Select a fruit..." showClear />
      <AutocompleteContent>
        <AutocompleteEmpty>No items found.</AutocompleteEmpty>
        <ComboboxList>
          {collection.items.map((item) => (
            <AutocompleteItem item={item} key={item.value}>
              {item.label}
            </AutocompleteItem>
          ))}
        </ComboboxList>
      </AutocompleteContent>
    </Autocomplete>
  );
};

const initialItems = [
  { label: "Apple", value: "apple" },
  { label: "Banana", value: "banana" },
  { label: "Cherry", value: "cherry" },
];

export default Example;

```

## Example: with-field

```tsx
"use client";

import { useFilter, useListCollection } from "@ark-ui/react";
import {
  Autocomplete,
  AutocompleteContent,
  AutocompleteEmpty,
  AutocompleteInput,
  AutocompleteItem,
} from "@/components/ui/autocomplete";
import { ComboboxList } from "@/components/ui/combobox";
import {
  Field,
  FieldError,
  FieldHelper,
  FieldLabel,
} from "@/components/ui/field";

const Example = () => {
  const { contains } = useFilter({ sensitivity: "base" });

  const { collection, filter } = useListCollection({
    filter: contains,
    initialItems,
  });

  return (
    <Field className="w-64">
      <FieldLabel>Country</FieldLabel>
      <Autocomplete
        collection={collection}
        onInputValueChange={({ inputValue }) => filter(inputValue)}
        required
      >
        <AutocompleteInput placeholder="Select a country..." />
        <AutocompleteContent>
          <AutocompleteEmpty />
          <ComboboxList>
            {collection.items.map((item) => (
              <AutocompleteItem item={item} key={item.value}>
                {item.label}
              </AutocompleteItem>
            ))}
          </ComboboxList>
        </AutocompleteContent>
      </Autocomplete>
      <FieldHelper>We'll use this for shipping estimates</FieldHelper>
      <FieldError>Please select a valid country</FieldError>
    </Field>
  );
};

const initialItems = [
  { label: "Brazil", value: "br" },
  { label: "Mexico", value: "mx" },
  { label: "Ireland", value: "ie" },
];

export default Example;

```

## Example: with-start-icon

```tsx
"use client";

import { useFilter, useListCollection } from "@ark-ui/react";
import { AppleIcon } from "lucide-react";
import {
  Autocomplete,
  AutocompleteContent,
  AutocompleteEmpty,
  AutocompleteInput,
  AutocompleteItem,
} from "@/components/ui/autocomplete";
import { ComboboxList } from "@/components/ui/combobox";
import { InputGroupAddon } from "@/components/ui/input-group";

const Example = () => {
  const { contains } = useFilter({ sensitivity: "base" });

  const { collection, filter } = useListCollection({
    filter: contains,
    initialItems,
  });

  return (
    <Autocomplete
      className="w-64"
      collection={collection}
      onInputValueChange={({ inputValue }) => filter(inputValue)}
    >
      <AutocompleteInput placeholder="Search fruits...">
        <InputGroupAddon align="inline-start">
          <AppleIcon />
        </InputGroupAddon>
      </AutocompleteInput>
      <AutocompleteContent>
        <AutocompleteEmpty />
        <ComboboxList>
          {collection.items.map((item) => (
            <AutocompleteItem item={item} key={item.value}>
              {item.label}
            </AutocompleteItem>
          ))}
        </ComboboxList>
      </AutocompleteContent>
    </Autocomplete>
  );
};

const initialItems = [
  { label: "Apple", value: "apple" },
  { label: "Banana", value: "banana" },
  { label: "Cherry", value: "cherry" },
];

export default Example;

```

## Example: with-trigger

```tsx
"use client";

import { useFilter, useListCollection } from "@ark-ui/react";
import {
  Autocomplete,
  AutocompleteContent,
  AutocompleteEmpty,
  AutocompleteInput,
  AutocompleteItem,
} from "@/components/ui/autocomplete";
import { ComboboxList } from "@/components/ui/combobox";

const Example = () => {
  const { contains } = useFilter({ sensitivity: "base" });

  const { collection, filter } = useListCollection({
    filter: contains,
    initialItems,
  });

  return (
    <Autocomplete
      className="w-64"
      collection={collection}
      onInputValueChange={({ inputValue }) => filter(inputValue)}
    >
      <AutocompleteInput placeholder="Select a fruit..." showTrigger />
      <AutocompleteContent>
        <AutocompleteEmpty />
        <ComboboxList>
          {collection.items.map((item) => (
            <AutocompleteItem item={item} key={item.value}>
              {item.label}
            </AutocompleteItem>
          ))}
        </ComboboxList>
      </AutocompleteContent>
    </Autocomplete>
  );
};

const initialItems = [
  { label: "Apple", value: "apple" },
  { label: "Banana", value: "banana" },
  { label: "Cherry", value: "cherry" },
];

export default Example;

```

# Avatar - Examples and Patterns

Examples for Avatar component.

## Example: badge-with-icon

```tsx
import { PlusIcon } from "lucide-react";
import {
  Avatar,
  AvatarBadge,
  AvatarFallback,
  AvatarImage,
} from "@/components/ui/avatar";

const Example = () => (
  <Avatar>
    <AvatarImage alt="@vinihvc" src="https://github.com/vinihvc.png" />
    <AvatarFallback>VV</AvatarFallback>
    <AvatarBadge>
      <PlusIcon />
    </AvatarBadge>
  </Avatar>
);

export default Example;

```

## Example: custom-colors

```tsx
import {
  Avatar,
  AvatarFallback,
  AvatarGroup,
} from "@/components/ui/avatar";

const Example = () => (
  <AvatarGroup>
    <Avatar>
      <AvatarFallback className="bg-indigo-600 text-indigo-50">
        IN
      </AvatarFallback>
    </Avatar>

    <Avatar>
      <AvatarFallback className="bg-pink-600 text-pink-50">PK</AvatarFallback>
    </Avatar>

    <Avatar>
      <AvatarFallback className="bg-sky-600 text-sky-50">SK</AvatarFallback>
    </Avatar>

    <Avatar>
      <AvatarFallback className="bg-purple-600 text-purple-50">
        PR
      </AvatarFallback>
    </Avatar>

    <Avatar>
      <AvatarFallback className="bg-amber-600 text-amber-50">AM</AvatarFallback>
    </Avatar>

    <Avatar>
      <AvatarFallback className="bg-emerald-600 text-emerald-50">
        EM
      </AvatarFallback>
    </Avatar>
  </AvatarGroup>
);

export default Example;

```

## Example: custom-radius

```tsx
import {
  Avatar,
  AvatarFallback,
  AvatarImage,
} from "@/components/ui/avatar";

const Example = () => (
  <div className="flex flex-wrap gap-4">
    <Avatar className="rounded-none">
      <AvatarImage alt="@vinihvc" src="https://github.com/vinihvc.png" />
      <AvatarFallback>VV</AvatarFallback>
    </Avatar>

    <Avatar className="rounded-md">
      <AvatarImage alt="@shadcn" src="https://github.com/shadcn.png" />
      <AvatarFallback>CN</AvatarFallback>
    </Avatar>

    <Avatar className="rounded-lg">
      <AvatarImage
        alt="@segunadebayo"
        src="https://github.com/segunadebayo.png"
      />
      <AvatarFallback>SA</AvatarFallback>
    </Avatar>

    <Avatar className="rounded-xl">
      <AvatarImage
        alt="@pasqualevitiello"
        src="https://github.com/pasqualevitiello.png"
      />
      <AvatarFallback>PV</AvatarFallback>
    </Avatar>
  </div>
);

export default Example;

```

## Example: default

```tsx
import {
  Avatar,
  AvatarBadge,
  AvatarFallback,
  AvatarGroup,
  AvatarGroupCount,
  AvatarImage,
} from "@/components/ui/avatar";

const AvatarDemo = () => (
  <div className="flex flex-row flex-wrap items-center gap-6 md:gap-12">
    <Avatar>
      <AvatarImage alt="@vinihvc" src="https://github.com/vinihvc.png" />
      <AvatarFallback>VV</AvatarFallback>
    </Avatar>

    <Avatar>
      <AvatarImage alt="@shadcn" src="https://github.com/shadcn.png" />
      <AvatarFallback>CN</AvatarFallback>
      <AvatarBadge variant="success" />
    </Avatar>

    <AvatarGroup className="grayscale">
      <Avatar>
        <AvatarImage alt="@vinihvc" src="https://github.com/vinihvc.png" />
        <AvatarFallback>VV</AvatarFallback>
      </Avatar>
      <Avatar>
        <AvatarImage
          alt="@segunadebayo"
          src="https://github.com/segunadebayo.png"
        />
        <AvatarFallback>SA</AvatarFallback>
      </Avatar>
      <Avatar>
        <AvatarImage
          alt="@pasqualevitiello"
          src="https://github.com/pasqualevitiello.png"
        />
        <AvatarFallback>PV</AvatarFallback>
      </Avatar>
      <AvatarGroupCount>+2</AvatarGroupCount>
    </AvatarGroup>
  </div>
);

export default AvatarDemo;

```

## Example: fallback-icon

```tsx
import { UserIcon } from "lucide-react";
import { Avatar, AvatarFallback } from "@/components/ui/avatar";

const Example = () => (
  <Avatar size="lg">
    <AvatarFallback>
      <UserIcon />
    </AvatarFallback>
  </Avatar>
);

export default Example;

```

## Example: group-count-icon

```tsx
import { PlusIcon } from "lucide-react";
import {
  Avatar,
  AvatarFallback,
  AvatarGroup,
  AvatarGroupCount,
  AvatarImage,
} from "@/components/ui/avatar";

const Example = () => (
  <AvatarGroup>
    <Avatar>
      <AvatarImage alt="@vinihvc" src="https://github.com/vinihvc.png" />
      <AvatarFallback>VV</AvatarFallback>
    </Avatar>
    <Avatar>
      <AvatarImage
        alt="@segunadebayo"
        src="https://github.com/segunadebayo.png"
      />
      <AvatarFallback>SA</AvatarFallback>
    </Avatar>
    <Avatar>
      <AvatarImage
        alt="@pasqualevitiello"
        src="https://github.com/pasqualevitiello.png"
      />
      <AvatarFallback>PV</AvatarFallback>
    </Avatar>
    <Avatar>
      <AvatarImage alt="@shadcn" src="https://github.com/shadcn.png" />
      <AvatarFallback>IA</AvatarFallback>
    </Avatar>
    <AvatarGroupCount>
      <PlusIcon />
    </AvatarGroupCount>
  </AvatarGroup>
);

export default Example;

```

## Example: group-count

```tsx
import {
  Avatar,
  AvatarFallback,
  AvatarGroup,
  AvatarGroupCount,
  AvatarImage,
} from "@/components/ui/avatar";

const Example = () => (
  <AvatarGroup>
    <Avatar>
      <AvatarImage alt="@vinihvc" src="https://github.com/vinihvc.png" />
      <AvatarFallback>VV</AvatarFallback>
    </Avatar>
    <Avatar>
      <AvatarImage
        alt="@segunadebayo"
        src="https://github.com/segunadebayo.png"
      />
      <AvatarFallback>SA</AvatarFallback>
    </Avatar>
    <Avatar>
      <AvatarImage
        alt="@pasqualevitiello"
        src="https://github.com/pasqualevitiello.png"
      />
      <AvatarFallback>PV</AvatarFallback>
    </Avatar>
    <Avatar>
      <AvatarImage alt="@shadcn" src="https://github.com/shadcn.png" />
      <AvatarFallback>IA</AvatarFallback>
    </Avatar>
    <AvatarGroupCount>+5</AvatarGroupCount>
  </AvatarGroup>
);

export default Example;

```

## Example: group-popover

```tsx
import {
  Avatar,
  AvatarFallback,
  AvatarGroup,
  AvatarGroupCount,
  AvatarImage,
} from "@/components/ui/avatar";
import { Button } from "@/components/ui/button";
import {
  Popover,
  PopoverBody,
  PopoverContent,
  PopoverTrigger,
} from "@/components/ui/popover";

const Example = () => (
  <AvatarGroup>
    <Avatar>
      <AvatarImage alt="@vinihvc" src="https://github.com/vinihvc.png" />
      <AvatarFallback>VV</AvatarFallback>
    </Avatar>
    <Avatar>
      <AvatarImage
        alt="@segunadebayo"
        src="https://github.com/segunadebayo.png"
      />
      <AvatarFallback>SA</AvatarFallback>
    </Avatar>
    <Avatar>
      <AvatarImage
        alt="@pasqualevitiello"
        src="https://github.com/pasqualevitiello.png"
      />
      <AvatarFallback>PV</AvatarFallback>
    </Avatar>
    <Avatar>
      <AvatarImage alt="@shadcn" src="https://github.com/shadcn.png" />
      <AvatarFallback>IA</AvatarFallback>
    </Avatar>
    <Popover positioning={{ placement: "bottom-end" }}>
      <AvatarGroupCount asChild>
        <PopoverTrigger asChild>
          <Button pill size="icon-md" variant="ghost">
            +5
          </Button>
        </PopoverTrigger>
      </AvatarGroupCount>

      <PopoverContent>
        <PopoverBody>
          <AvatarGroup>
            <Avatar>
              <AvatarFallback className="bg-indigo-500">SC</AvatarFallback>
            </Avatar>
            <Avatar>
              <AvatarFallback className="bg-pink-500">VC</AvatarFallback>
            </Avatar>
            <Avatar>
              <AvatarFallback className="bg-sky-500">NJ</AvatarFallback>
            </Avatar>
            <Avatar>
              <AvatarFallback className="bg-purple-500">RT</AvatarFallback>
            </Avatar>
            <Avatar>
              <AvatarFallback className="bg-amber-500">TS</AvatarFallback>
            </Avatar>
          </AvatarGroup>
        </PopoverBody>
      </PopoverContent>
    </Popover>
  </AvatarGroup>
);

export default Example;

```

## Example: group

```tsx
import {
  Avatar,
  AvatarFallback,
  AvatarGroup,
  AvatarImage,
} from "@/components/ui/avatar";

const Example = () => {
  return (
    <AvatarGroup>
      <Avatar>
        <AvatarImage alt="@vinihvc" src="https://github.com/vinihvc.png" />
        <AvatarFallback>VV</AvatarFallback>
      </Avatar>
      <Avatar>
        <AvatarImage
          alt="@segunadebayo"
          src="https://github.com/segunadebayo.png"
        />
        <AvatarFallback>SA</AvatarFallback>
      </Avatar>
      <Avatar>
        <AvatarImage
          alt="@pasqualevitiello"
          src="https://github.com/pasqualevitiello.png"
        />
        <AvatarFallback>PV</AvatarFallback>
      </Avatar>
      <Avatar>
        <AvatarImage alt="@shadcn" src="https://github.com/shadcn.png" />
        <AvatarFallback>IA</AvatarFallback>
      </Avatar>
    </AvatarGroup>
  );
};

export default Example;

```

## Example: hover-card

```tsx
import {
  Avatar,
  AvatarFallback,
  AvatarGroup,
  AvatarImage,
} from "@/components/ui/avatar";
import { Button } from "@/components/ui/button";
import {
  HoverCard,
  HoverCardContent,
  HoverCardTrigger,
} from "@/components/ui/hover-card";

const Example = () => (
  <AvatarGroup>
    <HoverCard>
      <HoverCardTrigger asChild>
        <Button pill size="icon-lg" variant="ghost">
          <Avatar size="lg">
            <AvatarImage alt="@vinihvc" src="https://github.com/vinihvc.png" />
            <AvatarFallback>VV</AvatarFallback>
          </Avatar>
        </Button>
      </HoverCardTrigger>
      <HoverCardContent className="w-max">
        <div className="flex gap-4">
          <Avatar>
            <AvatarImage alt="@vinihvc" src="https://github.com/vinihvc.png" />
            <AvatarFallback>VV</AvatarFallback>
          </Avatar>
          <div>
            <h4 className="font-semibold text-sm">Vinicius Vicentini</h4>
            <p className="text-muted-foreground text-sm">@vinihvc</p>
          </div>
        </div>
      </HoverCardContent>
    </HoverCard>
    <HoverCard>
      <HoverCardTrigger asChild>
        <Button pill size="icon-lg" variant="ghost">
          <Avatar size="lg">
            <AvatarImage alt="@shadcn" src="https://github.com/shadcn.png" />
            <AvatarFallback>CN</AvatarFallback>
          </Avatar>
        </Button>
      </HoverCardTrigger>

      <HoverCardContent className="w-max">
        <div className="flex gap-4">
          <Avatar>
            <AvatarImage alt="@shadcn" src="https://github.com/shadcn.png" />
            <AvatarFallback>VV</AvatarFallback>
          </Avatar>
          <div>
            <h4 className="font-semibold text-sm">Shadcn</h4>
            <p className="text-muted-foreground text-sm">@shadcn</p>
          </div>
        </div>
      </HoverCardContent>
    </HoverCard>
  </AvatarGroup>
);

export default Example;

```

## Example: size-custom

```tsx
import {
  Avatar,
  AvatarFallback,
  AvatarImage,
} from "@/components/ui/avatar";

const Example = () => (
  <Avatar className="size-16">
    <AvatarImage alt="@vinihvc" src="https://github.com/vinihvc.png" />
    <AvatarFallback>VV</AvatarFallback>
  </Avatar>
);

export default Example;

```

## Example: size-lg

```tsx
import {
  Avatar,
  AvatarFallback,
  AvatarImage,
} from "@/components/ui/avatar";

const Example = () => (
  <Avatar size="lg">
    <AvatarImage src="https://github.com/vinihvc.png" />
    <AvatarFallback>VV</AvatarFallback>
  </Avatar>
);

export default Example;

```

## Example: size-md

```tsx
import {
  Avatar,
  AvatarFallback,
  AvatarImage,
} from "@/components/ui/avatar";

const Example = () => (
  <Avatar size="md">
    <AvatarImage src="https://github.com/vinihvc.png" />
    <AvatarFallback>VV</AvatarFallback>
  </Avatar>
);

export default Example;

```

## Example: size-sm

```tsx
import {
  Avatar,
  AvatarFallback,
  AvatarImage,
} from "@/components/ui/avatar";

const Example = () => (
  <Avatar size="sm">
    <AvatarImage src="https://github.com/vinihvc.png" />
    <AvatarFallback>VV</AvatarFallback>
  </Avatar>
);

export default Example;

```

## Example: with-status

```tsx
import {
  Avatar,
  AvatarBadge,
  AvatarFallback,
  AvatarImage,
} from "@/components/ui/avatar";

const Example = () => (
  <div className="flex flex-row flex-wrap items-center gap-2">
    <Avatar>
      <AvatarImage alt="@vinihvc" src="https://github.com/vinihvc.png" />
      <AvatarFallback>VV</AvatarFallback>
      <AvatarBadge variant="success" />
    </Avatar>

    <Avatar>
      <AvatarImage
        alt="@segunadebayo"
        src="https://github.com/segunadebayo.png"
      />
      <AvatarFallback>SA</AvatarFallback>
      <AvatarBadge variant="warning" />
    </Avatar>

    <Avatar>
      <AvatarImage
        alt="@pasqualevitiello"
        src="https://github.com/pasqualevitiello.png"
      />
      <AvatarFallback>PV</AvatarFallback>
      <AvatarBadge variant="destructive" />
    </Avatar>
  </div>
);

export default Example;

```

# Badge - Examples and Patterns

Examples for Badge component.

## Example: custom-color

```tsx
import { Badge } from "@/components/ui/badge";

const Example = () => (
  <div className="flex flex-wrap gap-2">
    <Badge className="border-indigo-200/20 bg-indigo-500/10 text-indigo-500">
      Indigo
    </Badge>
    <Badge className="border-pink-200/20 bg-pink-500/10 text-pink-500">
      Pink
    </Badge>
    <Badge className="border-sky-200/20 bg-sky-500/10 text-sky-500">Sky</Badge>
    <Badge className="border-purple-200/20 bg-purple-500/10 text-purple-500">
      Purple
    </Badge>
  </div>
);

export default Example;

```

## Example: default

```tsx
import { Star } from "lucide-react";
import { Badge } from "@/components/ui/badge";

const Example = () => (
  <Badge>
    <Star />
    Favorite
  </Badge>
);

export default Example;

```

## Example: pill

```tsx
import { PlusIcon } from "lucide-react";
import { Badge } from "@/components/ui/badge";

const Example = () => (
  <div className="flex flex-col gap-2">
    <div className="flex flex-wrap gap-2">
      <Badge pill size="sm">
        Badge
      </Badge>
      <Badge pill size="md">
        Badge
      </Badge>
      <Badge pill size="lg">
        Badge
      </Badge>
    </div>
    <div className="flex flex-wrap gap-2">
      <Badge pill size="sm">
        <PlusIcon />
        Badge
      </Badge>
      <Badge pill size="md">
        <PlusIcon />
        Badge
      </Badge>
      <Badge pill size="lg">
        <PlusIcon />
        Badge
      </Badge>
    </div>
  </div>
);

export default Example;

```

## Example: size-lg

```tsx
import { Badge } from "@/components/ui/badge";

const Example = () => <Badge size="lg">Badge</Badge>;

export default Example;

```

## Example: size-md

```tsx
import { Badge } from "@/components/ui/badge";

const Example = () => <Badge size="md">Badge</Badge>;

export default Example;

```

## Example: size-sm

```tsx
import { Badge } from "@/components/ui/badge";

const Example = () => <Badge size="sm">Badge</Badge>;

export default Example;

```

## Example: variant-default

```tsx
import { Badge } from "@/components/ui/badge";

const Example = () => <Badge>Badge</Badge>;

export default Example;

```

## Example: variant-destructive

```tsx
import { Badge } from "@/components/ui/badge";

const Example = () => <Badge variant="destructive">Badge</Badge>;

export default Example;

```

## Example: variant-info

```tsx
import { Badge } from "@/components/ui/badge";

const Example = () => <Badge variant="info">Badge</Badge>;

export default Example;

```

## Example: variant-outline

```tsx
import { Badge } from "@/components/ui/badge";

const Example = () => <Badge variant="outline">Badge</Badge>;

export default Example;

```

## Example: variant-secondary

```tsx
import { Badge } from "@/components/ui/badge";

const Example = () => <Badge variant="secondary">Badge</Badge>;

export default Example;

```

## Example: variant-success

```tsx
import { Badge } from "@/components/ui/badge";

const Example = () => <Badge variant="success">Badge</Badge>;

export default Example;

```

## Example: variant-warning

```tsx
import { Badge } from "@/components/ui/badge";

const Example = () => <Badge variant="warning">Badge</Badge>;

export default Example;

```

## Example: with-icon

```tsx
import { StarIcon } from "lucide-react";
import { Badge } from "@/components/ui/badge";

const Example = () => (
  <Badge>
    <StarIcon />
    Favorite
  </Badge>
);

export default Example;

```

## Example: with-link

```tsx
import { ArrowUpRightIcon, CirclePlusIcon } from "lucide-react";
import Link from "next/link";
import { Badge } from "@/components/ui/badge";

const Example = () => (
  <Badge asChild variant="info">
    <Link href="/">
      <CirclePlusIcon />
      New components <ArrowUpRightIcon />
    </Link>
  </Badge>
);

export default Example;

```

## Example: with-spinner

```tsx
import { Badge } from "@/components/ui/badge";
import { Spinner } from "@/components/ui/spinner";

const Example = () => (
  <div className="flex flex-wrap items-center gap-2">
    <Badge variant="destructive">
      <Spinner />
      Deleting
    </Badge>

    <Badge variant="outline">
      Generating <Spinner />
    </Badge>
  </div>
);

export default Example;

```

# Bottom Navigation - Examples and Patterns

Examples for Bottom Navigation component.

## Example: default

```tsx
import { BellIcon, HomeIcon, SearchIcon, UserIcon } from "lucide-react";
import {
  BottomNavigation,
  BottomNavigationItem,
  BottomNavigationItemIcon,
  BottomNavigationItemLabel,
  BottomNavigationList,
} from "@/components/ui/bottom-navigation";
import { ScrollArea } from "@/components/ui/scroll-area";

const Example = () => (
  <div className="flex h-72 w-full max-w-xs flex-col overflow-y-auto rounded-lg border bg-muted shadow-lg/5">
    <ScrollArea>
      <div className="h-96" />
      <BottomNavigation defaultValue="home">
        <BottomNavigationList className="absolute">
          <BottomNavigationItem value="home">
            <BottomNavigationItemIcon>
              <HomeIcon />
            </BottomNavigationItemIcon>
            <BottomNavigationItemLabel>Home</BottomNavigationItemLabel>
          </BottomNavigationItem>
          <BottomNavigationItem value="search">
            <BottomNavigationItemIcon>
              <SearchIcon />
            </BottomNavigationItemIcon>
            <BottomNavigationItemLabel>Search</BottomNavigationItemLabel>
          </BottomNavigationItem>
          <BottomNavigationItem value="news">
            <BottomNavigationItemIcon>
              <BellIcon />
            </BottomNavigationItemIcon>
            <BottomNavigationItemLabel>News</BottomNavigationItemLabel>
          </BottomNavigationItem>
          <BottomNavigationItem value="profile">
            <BottomNavigationItemIcon>
              <UserIcon />
            </BottomNavigationItemIcon>
            <BottomNavigationItemLabel>Profile</BottomNavigationItemLabel>
          </BottomNavigationItem>
        </BottomNavigationList>
      </BottomNavigation>
    </ScrollArea>
  </div>
);

export default Example;

```

## Example: icon-only

```tsx
import { BellIcon, HomeIcon, SearchIcon, UserIcon } from "lucide-react";
import {
  BottomNavigation,
  BottomNavigationItem,
  BottomNavigationItemIcon,
  BottomNavigationList,
} from "@/components/ui/bottom-navigation";
import { ScrollArea } from "@/components/ui/scroll-area";

const Example = () => (
  <div className="flex h-72 w-full max-w-xs flex-col overflow-y-auto rounded-lg border bg-muted shadow-lg/5">
    <ScrollArea>
      <div className="h-96" />
      <BottomNavigation defaultValue="home">
        <BottomNavigationList className="absolute">
          <BottomNavigationItem aria-label="Home" value="home">
            <BottomNavigationItemIcon>
              <HomeIcon />
            </BottomNavigationItemIcon>
          </BottomNavigationItem>
          <BottomNavigationItem aria-label="Search" value="search">
            <BottomNavigationItemIcon>
              <SearchIcon />
            </BottomNavigationItemIcon>
          </BottomNavigationItem>
          <BottomNavigationItem aria-label="News" value="news">
            <BottomNavigationItemIcon>
              <BellIcon />
            </BottomNavigationItemIcon>
          </BottomNavigationItem>
          <BottomNavigationItem aria-label="Profile" value="profile">
            <BottomNavigationItemIcon>
              <UserIcon />
            </BottomNavigationItemIcon>
          </BottomNavigationItem>
        </BottomNavigationList>
      </BottomNavigation>
    </ScrollArea>
  </div>
);

export default Example;

```

## Example: with-links

```tsx
"use client";

import { BellIcon, HomeIcon, SearchIcon, UserIcon } from "lucide-react";
import Link from "next/link";
import { usePathname } from "next/navigation";
import {
  BottomNavigation,
  BottomNavigationItem,
  BottomNavigationItemIcon,
  BottomNavigationItemLabel,
  BottomNavigationList,
} from "@/components/ui/bottom-navigation";
import { ScrollArea } from "@/components/ui/scroll-area";

const Example = () => {
  const pathname = usePathname() ?? "/";

  return (
    <div className="flex h-72 w-full max-w-xs flex-col overflow-y-auto rounded-lg border bg-muted shadow-lg/5">
      <ScrollArea>
        <div className="h-96" />
        <BottomNavigation value={pathname}>
          <BottomNavigationList className="absolute">
            <BottomNavigationItem asChild value="/">
              <Link href="#">
                <BottomNavigationItemIcon>
                  <HomeIcon />
                </BottomNavigationItemIcon>
                <BottomNavigationItemLabel>Home</BottomNavigationItemLabel>
              </Link>
            </BottomNavigationItem>
            <BottomNavigationItem asChild value="/docs">
              <Link href="#">
                <BottomNavigationItemIcon>
                  <SearchIcon />
                </BottomNavigationItemIcon>
                <BottomNavigationItemLabel>Search</BottomNavigationItemLabel>
              </Link>
            </BottomNavigationItem>
            <BottomNavigationItem asChild value="/docs/components">
              <Link href="#">
                <BottomNavigationItemIcon>
                  <BellIcon />
                </BottomNavigationItemIcon>
                <BottomNavigationItemLabel>News</BottomNavigationItemLabel>
              </Link>
            </BottomNavigationItem>
            <BottomNavigationItem asChild value="/docs/components">
              <Link href="#">
                <BottomNavigationItemIcon>
                  <UserIcon />
                </BottomNavigationItemIcon>
                <BottomNavigationItemLabel>Profile</BottomNavigationItemLabel>
              </Link>
            </BottomNavigationItem>
          </BottomNavigationList>
        </BottomNavigation>
      </ScrollArea>
    </div>
  );
};

export default Example;

```

# Breadcrumb - Examples and Patterns

Examples for Breadcrumb component.

## Example: collapsed

```tsx
import {
  Breadcrumb,
  BreadcrumbEllipsis,
  BreadcrumbItem,
  BreadcrumbLink,
  BreadcrumbList,
  BreadcrumbPage,
  BreadcrumbSeparator,
} from "@/components/ui/breadcrumb";

const Example = () => (
  <Breadcrumb>
    <BreadcrumbList>
      <BreadcrumbItem>
        <BreadcrumbLink href="#">Home</BreadcrumbLink>
      </BreadcrumbItem>
      <BreadcrumbSeparator />
      <BreadcrumbItem>
        <BreadcrumbEllipsis />
      </BreadcrumbItem>
      <BreadcrumbSeparator />
      <BreadcrumbItem>
        <BreadcrumbLink href="#">Components</BreadcrumbLink>
      </BreadcrumbItem>
      <BreadcrumbSeparator />
      <BreadcrumbItem>
        <BreadcrumbPage>Breadcrumb</BreadcrumbPage>
      </BreadcrumbItem>
    </BreadcrumbList>
  </Breadcrumb>
);

export default Example;

```

## Example: custom-separator

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

const Example = () => (
  <Breadcrumb>
    <BreadcrumbList>
      <BreadcrumbItem>
        <BreadcrumbLink href="#">Home</BreadcrumbLink>
      </BreadcrumbItem>
      <BreadcrumbSeparator>/</BreadcrumbSeparator>
      <BreadcrumbItem>
        <BreadcrumbLink href="#">Documentation</BreadcrumbLink>
      </BreadcrumbItem>
      <BreadcrumbSeparator>/</BreadcrumbSeparator>
      <BreadcrumbItem>
        <BreadcrumbPage>Introduction</BreadcrumbPage>
      </BreadcrumbItem>
    </BreadcrumbList>
  </Breadcrumb>
);

export default Example;

```

## Example: default

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

const Example = () => (
  <Breadcrumb>
    <BreadcrumbList>
      <BreadcrumbItem>
        <BreadcrumbLink href="#">Home</BreadcrumbLink>
      </BreadcrumbItem>
      <BreadcrumbSeparator />
      <BreadcrumbItem>
        <BreadcrumbLink href="#">Components</BreadcrumbLink>
      </BreadcrumbItem>
      <BreadcrumbSeparator />
      <BreadcrumbItem>
        <BreadcrumbPage>Breadcrumb</BreadcrumbPage>
      </BreadcrumbItem>
    </BreadcrumbList>
  </Breadcrumb>
);

export default Example;

```

## Example: with-link

```tsx
import Link from "next/link";
import {
  Breadcrumb,
  BreadcrumbItem,
  BreadcrumbLink,
  BreadcrumbList,
  BreadcrumbPage,
  BreadcrumbSeparator,
} from "@/components/ui/breadcrumb";

const Example = () => (
  <Breadcrumb>
    <BreadcrumbList>
      <BreadcrumbItem>
        <BreadcrumbLink asChild>
          <Link href="/docs">Docs</Link>
        </BreadcrumbLink>
      </BreadcrumbItem>
      <BreadcrumbSeparator />
      <BreadcrumbItem>
        <BreadcrumbLink asChild>
          <Link href="/docs/components">Components</Link>
        </BreadcrumbLink>
      </BreadcrumbItem>
      <BreadcrumbSeparator />
      <BreadcrumbItem>
        <BreadcrumbPage>Breadcrumb</BreadcrumbPage>
      </BreadcrumbItem>
    </BreadcrumbList>
  </Breadcrumb>
);

export default Example;

```

## Example: with-menu

```tsx
"use client";

import {
  Breadcrumb,
  BreadcrumbEllipsis,
  BreadcrumbItem,
  BreadcrumbLink,
  BreadcrumbList,
  BreadcrumbPage,
  BreadcrumbSeparator,
} from "@/components/ui/breadcrumb";
import { Button } from "@/components/ui/button";
import {
  Menu,
  MenuContent,
  MenuItem,
  MenuTrigger,
} from "@/components/ui/menu";

const Example = () => (
  <Breadcrumb>
    <BreadcrumbList>
      <BreadcrumbItem>
        <BreadcrumbLink href="#">Home</BreadcrumbLink>
      </BreadcrumbItem>
      <BreadcrumbSeparator />
      <BreadcrumbItem>
        <Menu positioning={{ placement: "bottom-start" }}>
          <MenuTrigger asChild>
            <Button
              aria-label="Open menu to view more breadcrumb items"
              size="icon-sm"
              variant="ghost"
            >
              <BreadcrumbEllipsis />
            </Button>
          </MenuTrigger>
          <MenuContent className="w-40">
            <MenuItem asChild value="docs">
              <a href="#">Documentation</a>
            </MenuItem>
            <MenuItem asChild value="components">
              <a href="#">Components</a>
            </MenuItem>
            <MenuItem asChild value="hooks">
              <a href="#">Hooks</a>
            </MenuItem>
          </MenuContent>
        </Menu>
      </BreadcrumbItem>
      <BreadcrumbSeparator />
      <BreadcrumbItem>
        <BreadcrumbLink href="#">Products</BreadcrumbLink>
      </BreadcrumbItem>
      <BreadcrumbSeparator />
      <BreadcrumbItem>
        <BreadcrumbPage>Breadcrumb</BreadcrumbPage>
      </BreadcrumbItem>
    </BreadcrumbList>
  </Breadcrumb>
);

export default Example;

```

# Button - Examples and Patterns

Examples for Button component.

## Example: custom-color

```tsx
import { Button } from "@/components/ui/button";

const Example = () => (
  <div className="flex flex-wrap gap-2">
    <Button className="bg-indigo-600 text-white shadow-indigo-600/24 hover:bg-indigo-700 focus-visible:ring-indigo-600/50">
      Indigo
    </Button>
    <Button className="bg-pink-600 text-white shadow-pink-600/24 hover:bg-pink-700 focus-visible:ring-pink-600/50">
      Pink
    </Button>
    <Button className="bg-sky-600 text-white shadow-sky-600/24 hover:bg-sky-700 focus-visible:ring-sky-600/50">
      Sky
    </Button>
    <Button className="bg-purple-600 text-white shadow-purple-600/24 hover:bg-purple-700 focus-visible:ring-purple-500/50">
      Purple
    </Button>
  </div>
);

export default Example;

```

## Example: default

```tsx
import { CirclePlusIcon } from "lucide-react";
import { Button } from "@/components/ui/button";

const ButtonDemo = () => (
  <div className="flex flex-wrap gap-2">
    <Button variant="outline">Button</Button>
    <Button size="icon-md" variant="outline">
      <CirclePlusIcon />
    </Button>
  </div>
);

export default ButtonDemo;

```

## Example: disabled

```tsx
import { SendIcon } from "lucide-react";
import { Button } from "@/components/ui/button";

const Example = () => {
  return (
    <Button disabled>
      Send <SendIcon />
    </Button>
  );
};

export default Example;

```

## Example: hitbox

```tsx
"use client";

import { Menu } from "lucide-react";
import React from "react";
import { cn } from "@/lib/utils";
import { Button } from "@/components/ui/button";
import { Field, FieldLabel } from "@/components/ui/field";
import { Switch } from "@/components/ui/switch";

const Example = () => {
  const [show, setShow] = React.useState(true);

  return (
    <div className="relative flex size-full items-center justify-center">
      <div className="absolute inset-e-2 top-2">
        <Field orientation="horizontal">
          <Switch
            checked={show}
            onCheckedChange={({ checked }) => setShow(checked)}
          />
          <FieldLabel>Show hitbox</FieldLabel>
        </Field>
      </div>

      <div className="flex flex-col items-center gap-8 sm:flex-row">
        <Button
          className={cn("hitbox-2", { "hitbox-debug": show })}
          type="button"
          variant="outline"
        >
          hitbox-6
        </Button>
        <Button
          aria-label="Menu"
          className={cn("hitbox-2", { "hitbox-debug": show })}
          size="icon-md"
          type="button"
          variant="ghost"
        >
          <Menu />
        </Button>
      </div>
    </div>
  );
};

export default Example;

```

## Example: icon

```tsx
import { StarIcon } from "lucide-react";
import { Button } from "@/components/ui/button";

const Example = () => (
  <Button size="icon-md" variant="outline">
    <StarIcon />
  </Button>
);

export default Example;

```

## Example: loading

```tsx
import { Button } from "@/components/ui/button";
import { Field, FieldLabel, FieldSet } from "@/components/ui/field";
import { Input } from "@/components/ui/input";

const Example = () => {
  return (
    <FieldSet aria-label="Login form">
      <Field>
        <FieldLabel>Enter your email</FieldLabel>
        <Input placeholder="john.doe@example.com" readOnly type="email" />
      </Field>
      <Button isLoading>Login</Button>
    </FieldSet>
  );
};

export default Example;

```

## Example: no-click-effect

```tsx
import { Button } from "@/components/ui/button";

const Example = () => <Button clickEffect={false}>Button</Button>;

export default Example;

```

## Example: pill

```tsx
import { PlusIcon } from "lucide-react";
import { Button } from "@/components/ui/button";

const Example = () => (
  <Button pill variant="outline">
    <PlusIcon />
    Add
  </Button>
);

export default Example;

```

## Example: size-lg

```tsx
import { PlusIcon } from "lucide-react";
import { Button } from "@/components/ui/button";

const Example = () => (
  <div className="flex items-center gap-2">
    <Button size="lg">Button</Button>
    <Button size="icon-lg">
      <PlusIcon />
    </Button>
  </div>
);

export default Example;

```

## Example: size-md

```tsx
import { PlusIcon } from "lucide-react";
import { Button } from "@/components/ui/button";

const Example = () => (
  <div className="flex items-center gap-2">
    <Button size="md">Button</Button>
    <Button size="icon-md">
      <PlusIcon />
    </Button>
  </div>
);

export default Example;

```

## Example: size-sm

```tsx
import { PlusIcon } from "lucide-react";
import { Button } from "@/components/ui/button";

const Example = () => (
  <div className="flex items-center gap-2">
    <Button size="sm">Button</Button>
    <Button size="icon-sm">
      <PlusIcon />
    </Button>
  </div>
);

export default Example;

```

## Example: size-xl

```tsx
import { PlusIcon } from "lucide-react";
import { Button } from "@/components/ui/button";

const Example = () => (
  <div className="flex items-center gap-2">
    <Button size="xl">Button</Button>
    <Button size="icon-xl">
      <PlusIcon />
    </Button>
  </div>
);

export default Example;

```

## Example: size-xs

```tsx
import { PlusIcon } from "lucide-react";
import { Button } from "@/components/ui/button";

const Example = () => (
  <div className="flex items-center gap-2">
    <Button size="xs">Button</Button>
    <Button size="icon-xs">
      <PlusIcon />
    </Button>
  </div>
);

export default Example;

```

## Example: state-as-child

```tsx
import Link from "next/link";
import { Button } from "@/components/ui/button";

const Example = () => (
  <Button asChild>
    <Link href="#">Login </Link>
  </Button>
);

export default Example;

```

## Example: variant-default

```tsx
import { Button } from "@/components/ui/button";

const Example = () => <Button>Default</Button>;

export default Example;

```

## Example: variant-destructive

```tsx
import { Button } from "@/components/ui/button";

const Example = () => <Button variant="destructive">Destructive</Button>;

export default Example;

```

## Example: variant-ghost

```tsx
import { Button } from "@/components/ui/button";

const Example = () => <Button variant="ghost">Ghost</Button>;

export default Example;

```

## Example: variant-link

```tsx
import { Button } from "@/components/ui/button";

const Example = () => <Button variant="link">Link</Button>;

export default Example;

```

## Example: variant-outline

```tsx
import { Button } from "@/components/ui/button";

const Example = () => <Button variant="outline">Outline</Button>;

export default Example;

```

## Example: variant-secondary

```tsx
import { Button } from "@/components/ui/button";

const Example = () => <Button variant="secondary">Secondary</Button>;

export default Example;

```

## Example: with-icon

```tsx
import {
  DownloadIcon,
  ExternalLinkIcon,
  HeartIcon,
  PlusIcon,
  SettingsIcon,
} from "lucide-react";
import { Button } from "@/components/ui/button";

const Example = () => (
  <div className="flex flex-wrap gap-2">
    <Button>
      <PlusIcon />
      Add
    </Button>
    <Button variant="outline">
      <SettingsIcon />
      Settings
    </Button>
    <Button variant="secondary">
      <HeartIcon />
      Favorite
    </Button>
    <Button variant="ghost">
      <DownloadIcon />
      Download
    </Button>
    <Button variant="link">
      Visit website
      <ExternalLinkIcon />
    </Button>
  </div>
);

export default Example;

```

# Button Group - Examples and Patterns

Examples for Button Group component.

## Example: default

```tsx
import { ArrowLeftIcon, MoreHorizontalIcon } from "lucide-react";
import { Button } from "@/components/ui/button";
import { ButtonGroup } from "@/components/ui/button-group";

const ButtonGroupDemo = () => {
  return (
    <ButtonGroup>
      <ButtonGroup className="hidden sm:flex">
        <Button aria-label="Go Back" size="icon-md" variant="outline">
          <ArrowLeftIcon />
        </Button>
      </ButtonGroup>
      <ButtonGroup>
        <Button variant="outline">Archive</Button>
        <Button variant="outline">Report</Button>
      </ButtonGroup>
      <ButtonGroup>
        <Button variant="outline">Snooze</Button>
        <Button aria-label="More Options" size="icon-md" variant="outline">
          <MoreHorizontalIcon />
        </Button>
      </ButtonGroup>
    </ButtonGroup>
  );
};

export default ButtonGroupDemo;

```

## Example: nested

```tsx
import {
  BoldIcon,
  BracesIcon,
  ImagePlusIcon,
  ItalicIcon,
  UnderlineIcon,
} from "lucide-react";
import { Button } from "@/components/ui/button";
import { ButtonGroup } from "@/components/ui/button-group";

const Example = () => (
  <ButtonGroup>
    <ButtonGroup>
      <Button clickEffect={false} size="icon-md" variant="outline">
        <ItalicIcon />
      </Button>
      <Button clickEffect={false} size="icon-md" variant="outline">
        <BoldIcon />
      </Button>
      <Button clickEffect={false} size="icon-md" variant="outline">
        <UnderlineIcon />
      </Button>
    </ButtonGroup>

    <ButtonGroup>
      <Button clickEffect={false} size="icon-md" variant="outline">
        <ImagePlusIcon />
      </Button>
      <Button clickEffect={false} size="icon-md" variant="outline">
        <BracesIcon />
      </Button>
    </ButtonGroup>
  </ButtonGroup>
);

export default Example;

```

## Example: orientation-horizontal

```tsx
import { PlayIcon, SkipBackIcon, SkipForwardIcon } from "lucide-react";
import { Button } from "@/components/ui/button";
import { ButtonGroup } from "@/components/ui/button-group";

const Example = () => (
  <ButtonGroup orientation="horizontal">
    <Button clickEffect={false} size="icon-md" variant="outline">
      <SkipBackIcon />
    </Button>
    <Button clickEffect={false} size="icon-md" variant="outline">
      <PlayIcon />
    </Button>
    <Button clickEffect={false} size="icon-md" variant="outline">
      <SkipForwardIcon />
    </Button>
  </ButtonGroup>
);

export default Example;

```

## Example: orientation-vertical

```tsx
import { MinusIcon, PlusIcon } from "lucide-react";
import { Button } from "@/components/ui/button";
import { ButtonGroup } from "@/components/ui/button-group";

const Example = () => (
  <ButtonGroup orientation="vertical">
    <Button clickEffect={false} size="icon-md" variant="outline">
      <PlusIcon />
    </Button>
    <Button clickEffect={false} size="icon-md" variant="outline">
      <MinusIcon />
    </Button>
  </ButtonGroup>
);

export default Example;

```

## Example: separator

```tsx
import { MinusIcon, PlusIcon } from "lucide-react";
import { Button } from "@/components/ui/button";
import {
  ButtonGroup,
  ButtonGroupSeparator,
} from "@/components/ui/button-group";

const Example = () => (
  <ButtonGroup>
    <Button clickEffect={false} size="icon-md" variant="secondary">
      <MinusIcon />
    </Button>
    <ButtonGroupSeparator />
    <Button clickEffect={false} size="icon-md" variant="secondary">
      <PlusIcon />
    </Button>
  </ButtonGroup>
);

export default Example;

```

## Example: with-input

```tsx
import { SearchIcon } from "lucide-react";
import { Button } from "@/components/ui/button";
import { ButtonGroup } from "@/components/ui/button-group";
import { Input } from "@/components/ui/input";

const Example = () => (
  <ButtonGroup>
    <Input className="w-64" placeholder="Search..." type="search" />
    <Button variant="outline">
      <SearchIcon />
    </Button>
  </ButtonGroup>
);

export default Example;

```

## Example: with-menu

```tsx
import {
  BanIcon,
  BookmarkIcon,
  CloudDownloadIcon,
  MoreHorizontalIcon,
  Share2Icon,
  StarIcon,
} from "lucide-react";
import { Button } from "@/components/ui/button";
import { ButtonGroup } from "@/components/ui/button-group";
import {
  Menu,
  MenuContent,
  MenuGroup,
  MenuItem,
  MenuSeparator,
  MenuTrigger,
} from "@/components/ui/menu";

const Example = () => (
  <ButtonGroup>
    <Button variant="outline">
      <StarIcon />
      Subscribe
    </Button>
    <Menu positioning={{ placement: "bottom-end" }}>
      <MenuTrigger asChild>
        <Button aria-label="More Options" size="icon-md" variant="outline">
          <MoreHorizontalIcon />
        </Button>
      </MenuTrigger>
      <MenuContent className="w-48">
        <MenuGroup>
          <MenuItem value="share">
            <Share2Icon /> Share
          </MenuItem>
          <MenuItem value="watch-later">
            <BookmarkIcon /> Watch later
          </MenuItem>
          <MenuItem value="download">
            <CloudDownloadIcon /> Download
          </MenuItem>
          <MenuSeparator />
          <MenuItem value="report" variant="destructive">
            <BanIcon />
            Report
          </MenuItem>
        </MenuGroup>
      </MenuContent>
    </Menu>
  </ButtonGroup>
);

export default Example;

```

## Example: with-popover

```tsx
import { ChevronDownIcon, GitForkIcon, PlusIcon } from "lucide-react";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { ButtonGroup } from "@/components/ui/button-group";
import {
  Popover,
  PopoverContent,
  PopoverTrigger,
} from "@/components/ui/popover";
import { Separator } from "@/components/ui/separator";

const Example = () => (
  <ButtonGroup>
    <Button variant="outline">
      <GitForkIcon /> Fork
      <Badge size="sm" variant="secondary">
        42
      </Badge>
    </Button>
    <Popover positioning={{ placement: "bottom-end" }}>
      <PopoverTrigger asChild>
        <Button aria-label="Settings" size="icon-md" variant="outline">
          <ChevronDownIcon />
        </Button>
      </PopoverTrigger>
      <PopoverContent className="w-full max-w-80">
        <h4 className="px-3 py-1.5 font-medium text-sm">Existing forks</h4>
        <Separator className="my-0" />
        <p className="px-3 py-1.5 text-muted-foreground text-xs">
          You don't have any forks of this repository.
        </p>
        <Separator className="my-0" />
        <Button className="w-full justify-start rounded-t-none" variant="ghost">
          <PlusIcon />
          Create a new fork
        </Button>
      </PopoverContent>
    </Popover>
  </ButtonGroup>
);

export default Example;

```

# Calendar - Examples and Patterns

Examples for Calendar component.

## Example: booked-dates

```tsx
"use client";

import { getDay } from "date-fns";
import {
  Calendar,
  CalendarMonthSelect,
  CalendarNextTrigger,
  CalendarPrevTrigger,
  CalendarTable,
  CalendarTableDays,
  CalendarViewControl,
  CalendarWeekDays,
  CalendarYearSelect,
} from "@/components/ui/calendar";
import { Card, CardContent } from "@/components/ui/card";

const Example = () => (
  <Card className="[--space:--spacing(2)]">
    <CardContent>
      <Calendar isDateUnavailable={isWeekend}>
        <CalendarViewControl>
          <CalendarPrevTrigger />
          <CalendarMonthSelect />
          <CalendarYearSelect />
          <CalendarNextTrigger />
        </CalendarViewControl>
        <CalendarTable>
          <CalendarWeekDays />
          <CalendarTableDays />
        </CalendarTable>
      </Calendar>
    </CardContent>
  </Card>
);

const isWeekend = (date: { year: number; month: number; day: number }) => {
  const dayOfWeek = getDay(new Date(date.year, date.month - 1, date.day));
  return dayOfWeek === 0 || dayOfWeek === 6;
};

export default Example;

```

## Example: controlled

```tsx
"use client";

import React from "react";
import {
  Calendar,
  CalendarMonthSelect,
  CalendarNextTrigger,
  CalendarPrevTrigger,
  CalendarTable,
  CalendarTableDays,
  CalendarViewControl,
  CalendarWeekDays,
  CalendarYearSelect,
  parseDate,
} from "@/components/ui/calendar";
import { Card, CardContent } from "@/components/ui/card";

const Example = () => {
  const [value, setValue] = React.useState([parseDate(new Date(Date.now()))]);

  return (
    <div className="flex flex-col gap-4">
      <Card className="[--space:--spacing(2)]">
        <CardContent>
          <Calendar
            onValueChange={({ value }) => setValue(value)}
            value={value}
          >
            <CalendarViewControl>
              <CalendarPrevTrigger />
              <CalendarMonthSelect />
              <CalendarYearSelect />
              <CalendarNextTrigger />
            </CalendarViewControl>
            <CalendarTable>
              <CalendarWeekDays />
              <CalendarTableDays />
            </CalendarTable>
          </Calendar>
        </CardContent>
      </Card>
      <p className="text-center text-muted-foreground text-sm">
        {value.map((date) => date.toString())}
      </p>
    </div>
  );
};

export default Example;

```

## Example: custom-cell-size

```tsx
import {
  Calendar,
  CalendarMonthSelect,
  CalendarNextTrigger,
  CalendarPrevTrigger,
  CalendarTable,
  CalendarTableDays,
  CalendarViewControl,
  CalendarWeekDays,
  CalendarYearSelect,
} from "@/components/ui/calendar";
import { Card, CardContent } from "@/components/ui/card";

const Example = () => (
  <Card className="[--space:--spacing(2)]">
    <CardContent>
      <Calendar className="[--cell-size:--spacing(10)]">
        <CalendarViewControl>
          <CalendarPrevTrigger />
          <CalendarMonthSelect />
          <CalendarYearSelect />
          <CalendarNextTrigger />
        </CalendarViewControl>
        <CalendarTable>
          <CalendarWeekDays />
          <CalendarTableDays />
        </CalendarTable>
      </Calendar>
    </CardContent>
  </Card>
);

export default Example;

```

## Example: default

```tsx
import {
  Calendar,
  CalendarNextTrigger,
  CalendarPrevTrigger,
  CalendarTable,
  CalendarTableDays,
  CalendarViewControl,
  CalendarViewDate,
  CalendarWeekDays,
} from "@/components/ui/calendar";
import { Card, CardContent } from "@/components/ui/card";

const CalendarDemo = () => (
  <Card className="[--space:--spacing(2)]">
    <CardContent>
      <Calendar>
        <CalendarViewControl>
          <CalendarPrevTrigger />
          <CalendarViewDate />
          <CalendarNextTrigger />
        </CalendarViewControl>
        <CalendarTable>
          <CalendarWeekDays />
          <CalendarTableDays />
        </CalendarTable>
      </Calendar>
    </CardContent>
  </Card>
);

export default CalendarDemo;

```

## Example: fixed-weeks

```tsx
import {
  Calendar,
  CalendarMonthSelect,
  CalendarNextTrigger,
  CalendarPrevTrigger,
  CalendarTable,
  CalendarTableDays,
  CalendarViewControl,
  CalendarWeekDays,
  CalendarYearSelect,
} from "@/components/ui/calendar";
import { Card, CardContent } from "@/components/ui/card";

const Example = () => (
  <Card className="[--space:--spacing(2)]">
    <CardContent>
      <Calendar fixedWeeks>
        <CalendarViewControl>
          <CalendarPrevTrigger />
          <CalendarMonthSelect />
          <CalendarYearSelect />
          <CalendarNextTrigger />
        </CalendarViewControl>
        <CalendarTable>
          <CalendarWeekDays />
          <CalendarTableDays />
        </CalendarTable>
      </Calendar>
    </CardContent>
  </Card>
);

export default Example;

```

## Example: min-max

```tsx
"use client";

import {
  Calendar,
  CalendarMonthSelect,
  CalendarNextTrigger,
  CalendarPrevTrigger,
  CalendarTable,
  CalendarTableDays,
  CalendarViewControl,
  CalendarWeekDays,
  CalendarYearSelect,
  parseDate,
} from "@/components/ui/calendar";
import { Card, CardContent } from "@/components/ui/card";

const Example = () => (
  <Card className="[--space:--spacing(2)]">
    <CardContent>
      <Calendar max={parseDate("2025-03-31")} min={parseDate("2025-03-05")}>
        <CalendarViewControl>
          <CalendarPrevTrigger />
          <CalendarMonthSelect />
          <CalendarYearSelect />
          <CalendarNextTrigger />
        </CalendarViewControl>
        <CalendarTable>
          <CalendarWeekDays />
          <CalendarTableDays />
        </CalendarTable>
      </Calendar>
    </CardContent>
  </Card>
);

export default Example;

```

## Example: month-year-selector

```tsx
import {
  Calendar,
  CalendarMonthSelect,
  CalendarNextTrigger,
  CalendarPrevTrigger,
  CalendarTable,
  CalendarTableDays,
  CalendarViewControl,
  CalendarWeekDays,
  CalendarYearSelect,
} from "@/components/ui/calendar";
import { Card, CardContent } from "@/components/ui/card";

const Example = () => (
  <Card className="[--space:--spacing(2)]">
    <CardContent>
      <Calendar>
        <CalendarViewControl>
          <CalendarPrevTrigger />
          <CalendarMonthSelect />
          <CalendarYearSelect />
          <CalendarNextTrigger />
        </CalendarViewControl>
        <CalendarTable>
          <CalendarWeekDays />
          <CalendarTableDays />
        </CalendarTable>
      </Calendar>
    </CardContent>
  </Card>
);

export default Example;

```

## Example: multiple-months

```tsx
"use client";

import React from "react";
import {
  Calendar,
  CalendarNextTrigger,
  CalendarPrevTrigger,
  CalendarTable,
  CalendarTableDays,
  CalendarTableNextMonth,
  CalendarViewControl,
  CalendarViewDate,
  CalendarWeekDays,
  parseDate,
} from "@/components/ui/calendar";
import { Card, CardContent } from "@/components/ui/card";

const Example = () => {
  const [value, setValue] = React.useState([parseDate(new Date(Date.now()))]);

  return (
    <Card className="[--space:--spacing(2)]">
      <CardContent>
        <Calendar
          numOfMonths={2}
          onValueChange={({ value }) => setValue(value)}
          selectionMode="range"
          value={value}
        >
          <CalendarViewControl>
            <CalendarPrevTrigger />
            <CalendarViewDate />
            <CalendarNextTrigger />
          </CalendarViewControl>
          <div className="flex gap-4">
            <CalendarTable>
              <CalendarWeekDays />
              <CalendarTableDays />
            </CalendarTable>
            <CalendarTable>
              <CalendarWeekDays />
              <CalendarTableNextMonth />
            </CalendarTable>
          </div>
        </Calendar>
      </CardContent>
    </Card>
  );
};

export default Example;

```

## Example: presets

```tsx
import { Button } from "@/components/ui/button";
import {
  Calendar,
  CalendarMonthSelect,
  CalendarNextTrigger,
  CalendarPresetTrigger,
  CalendarPrevTrigger,
  CalendarTable,
  CalendarTableDays,
  CalendarViewControl,
  CalendarWeekDays,
  CalendarYearSelect,
} from "@/components/ui/calendar";
import {
  Card,
  CardContent,
  CardFooter,
} from "@/components/ui/card";

const Example = () => (
  <Calendar selectionMode="range">
    <Card className="w-full max-w-xs [--space:--spacing(2)]">
      <CardContent>
        <CalendarViewControl>
          <CalendarPrevTrigger />
          <CalendarMonthSelect />
          <CalendarYearSelect />
          <CalendarNextTrigger />
        </CalendarViewControl>
        <CalendarTable>
          <CalendarWeekDays />
          <CalendarTableDays />
        </CalendarTable>
      </CardContent>
      <CardFooter className="flex flex-wrap">
        {presets.map((preset) => (
          <CalendarPresetTrigger
            asChild
            key={preset.value}
            value={preset.value}
          >
            <Button className="flex-1" size="sm" variant="outline">
              {preset.label}
            </Button>
          </CalendarPresetTrigger>
        ))}
      </CardFooter>
    </Card>
  </Calendar>
);

const presets = [
  { label: "Last 7 days", value: "last7Days" as const },
  { label: "Last 14 days", value: "last14Days" as const },
  { label: "Last 30 days", value: "last30Days" as const },
  { label: "This month", value: "thisMonth" as const },
];

export default Example;

```

## Example: range

```tsx
import {
  Calendar,
  CalendarMonthSelect,
  CalendarNextTrigger,
  CalendarPrevTrigger,
  CalendarTable,
  CalendarTableDays,
  CalendarViewControl,
  CalendarWeekDays,
  CalendarYearSelect,
} from "@/components/ui/calendar";
import { Card, CardContent } from "@/components/ui/card";

const Example = () => (
  <Card className="[--space:--spacing(2)]">
    <CardContent>
      <Calendar selectionMode="range">
        <CalendarViewControl>
          <CalendarPrevTrigger />
          <CalendarMonthSelect />
          <CalendarYearSelect />
          <CalendarNextTrigger />
        </CalendarViewControl>
        <CalendarTable>
          <CalendarWeekDays />
          <CalendarTableDays />
        </CalendarTable>
      </Calendar>
    </CardContent>
  </Card>
);

export default Example;

```

## Example: select-today

```tsx
import {
  Calendar,
  CalendarMonthSelect,
  CalendarNextTrigger,
  CalendarPrevTrigger,
  CalendarTable,
  CalendarTableDays,
  CalendarTodayTrigger,
  CalendarViewControl,
  CalendarWeekDays,
  CalendarYearSelect,
} from "@/components/ui/calendar";
import {
  Card,
  CardContent,
  CardFooter,
} from "@/components/ui/card";

const Example = () => (
  <Calendar>
    <Card className="[--space:--spacing(2)]">
      <CardContent>
        <CalendarViewControl>
          <CalendarPrevTrigger />
          <CalendarMonthSelect />
          <CalendarYearSelect />
          <CalendarNextTrigger />
        </CalendarViewControl>
        <CalendarTable>
          <CalendarWeekDays />
          <CalendarTableDays />
        </CalendarTable>
      </CardContent>
      <CardFooter>
        <CalendarTodayTrigger className="w-full" />
      </CardFooter>
    </Card>
  </Calendar>
);

export default Example;

```

# Card - Examples and Patterns

Examples for Card component.

## Example: custom-spacing

```tsx
import { GoogleIcon } from "@/components/icons/google";
import { Button } from "@/components/ui/button";
import {
  Card,
  CardAction,
  CardContent,
  CardFooter,
  CardHeader,
} from "@/components/ui/card";
import { Field, FieldLabel, FieldSet } from "@/components/ui/field";
import { Input } from "@/components/ui/input";

const Example = () => {
  return (
    <div className="w-full max-w-sm">
      <Card className="w-full [--space:--spacing(2)] md:[--space:--spacing(6)]">
        <CardHeader
          description="Enter your email and check your inbox"
          title="Login to your account"
        >
          <CardAction>
            <Button variant="link">Sign Up</Button>
          </CardAction>
        </CardHeader>

        <CardContent>
          <FieldSet>
            <Field>
              <FieldLabel>Email</FieldLabel>
              <Input placeholder="john.doe@example.com" />
            </Field>
          </FieldSet>
        </CardContent>

        <CardFooter className="flex-col">
          <Button className="w-full">Login</Button>

          <Button className="w-full" variant="outline">
            <GoogleIcon />
            Login with Google
          </Button>
        </CardFooter>
      </Card>
    </div>
  );
};

export default Example;

```

## Example: default

```tsx
import { GoogleIcon } from "@/components/icons/google";
import { Button } from "@/components/ui/button";
import {
  Card,
  CardAction,
  CardContent,
  CardFooter,
  CardHeader,
} from "@/components/ui/card";
import { Field, FieldLabel, FieldSet } from "@/components/ui/field";
import { Input } from "@/components/ui/input";

const CardDemo = () => (
  <div className="w-full max-w-sm">
    <Card className="w-full">
      <CardHeader
        description="Enter your email and check your inbox"
        title="Login to your account"
      >
        <CardAction>
          <Button variant="link">Sign Up</Button>
        </CardAction>
      </CardHeader>
      <CardContent>
        <FieldSet>
          <Field>
            <FieldLabel>Email</FieldLabel>
            <Input placeholder="john.doe@example.com" />
          </Field>
        </FieldSet>
      </CardContent>
      <CardFooter className="flex-col">
        <Button className="w-full" size="lg">
          Send one-time code
        </Button>
        <Button className="w-full" size="lg" variant="outline">
          <GoogleIcon />
          Login with Google
        </Button>
      </CardFooter>
    </Card>
  </div>
);

export default CardDemo;

```

## Example: icon

```tsx
import { DollarSignIcon } from "lucide-react";
import { Button } from "@/components/ui/button";
import {
  Card,
  CardContent,
  CardFooter,
  CardHeader,
  CardMedia,
} from "@/components/ui/card";

const Example = () => (
  <div className="w-full max-w-xs">
    <Card>
      <CardMedia variant="icon">
        <DollarSignIcon />
      </CardMedia>
      <CardHeader
        description="Minimum purchase of $100 required. Use code at checkout."
        title="Get 15% OFF"
      />
      <CardContent>
        <pre className="rounded-md bg-muted p-2 text-center font-medium text-sm">
          <code>15OFF</code>
        </pre>
      </CardContent>
      <CardFooter className="flex-row-reverse">
        <Button size="sm">Copy code</Button>
      </CardFooter>
    </Card>
  </div>
);

export default Example;

```

## Example: product

```tsx
import { Button } from "@/components/ui/button";
import {
  Card,
  CardFooter,
  CardHeader,
  CardMedia,
} from "@/components/ui/card";

const Example = () => (
  <div className="w-full max-w-xs">
    <Card className="overflow-hidden">
      <CardMedia className="aspect-video w-full bg-muted" variant="image">
        {/* Image hoes here */}
      </CardMedia>
      <CardHeader
        description="This sofa is perfect for modern tropical spaces, baroque inspired spaces."
        title="Living room Sofa"
      />

      <CardFooter className="flex-row-reverse gap-2">
        <Button className="flex-1">Buy now</Button>
        <Button className="flex-1" variant="outline">
          Add to cart
        </Button>
      </CardFooter>
    </Card>
  </div>
);

export default Example;

```

# Carousel - Examples and Patterns

Examples for Carousel component.

## Example: autoplay

```tsx
import { Card, CardContent } from "@/components/ui/card";
import {
  Carousel,
  CarouselContent,
  CarouselControl,
  CarouselItem,
  CarouselNext,
  CarouselPrevious,
} from "@/components/ui/carousel";

const Example = () => {
  const slides = Array.from({ length: 8 });

  return (
    <Carousel
      autoplay
      className="w-full max-w-48 sm:max-w-64"
      loop
      slideCount={slides.length}
    >
      <CarouselControl>
        <CarouselPrevious>Previous</CarouselPrevious>
        <CarouselNext>Next</CarouselNext>
      </CarouselControl>

      <CarouselContent>
        {slides.map((_, index) => (
          <CarouselItem index={index} key={index}>
            <Card>
              <CardContent className="flex aspect-square items-center justify-center">
                <span className="font-semibold text-4xl">{index + 1}</span>
              </CardContent>
            </Card>
          </CarouselItem>
        ))}
      </CarouselContent>
    </Carousel>
  );
};

export default Example;

```

## Example: controlled

```tsx
"use client";

import React from "react";
import { Card, CardContent } from "@/components/ui/card";
import {
  Carousel,
  CarouselContent,
  CarouselControl,
  CarouselItem,
  CarouselNext,
  CarouselPrevious,
} from "@/components/ui/carousel";

const Example = () => {
  const [page, setPage] = React.useState(0);

  const slides = Array.from({ length: 8 });

  return (
    <div className="flex flex-col gap-4">
      <Carousel
        className="w-full max-w-48 sm:max-w-64"
        onPageChange={({ page }) => setPage(page)}
        page={page}
        slideCount={slides.length}
      >
        <CarouselControl>
          <CarouselPrevious>Previous</CarouselPrevious>
          <CarouselNext>Next</CarouselNext>
        </CarouselControl>

        <CarouselContent>
          {slides.map((_, index) => (
            <CarouselItem index={index} key={index}>
              <Card>
                <CardContent className="flex aspect-square items-center justify-center">
                  <span className="font-semibold text-4xl">{index + 1}</span>
                </CardContent>
              </Card>
            </CarouselItem>
          ))}
        </CarouselContent>
      </Carousel>
      <p className="text-center text-muted-foreground text-sm">
        Current page: {page + 1} of 5
      </p>
    </div>
  );
};

export default Example;

```

## Example: default

```tsx
import { Card, CardContent } from "@/components/ui/card";
import {
  Carousel,
  CarouselContent,
  CarouselControl,
  CarouselItem,
  CarouselNext,
  CarouselPrevious,
} from "@/components/ui/carousel";

const CarouselDemo = () => {
  const slides = Array.from({ length: 8 });

  return (
    <Carousel
      className="w-full max-w-48 sm:max-w-64"
      slideCount={slides.length}
    >
      <CarouselControl>
        <CarouselPrevious>Previous</CarouselPrevious>
        <CarouselNext>Next</CarouselNext>
      </CarouselControl>

      <CarouselContent>
        {slides.map((_, index) => (
          <CarouselItem index={index} key={index}>
            <Card>
              <CardContent className="flex aspect-square items-center justify-center">
                <span className="font-semibold text-4xl">{index + 1}</span>
              </CardContent>
            </Card>
          </CarouselItem>
        ))}
      </CarouselContent>
    </Carousel>
  );
};

export default CarouselDemo;

```

## Example: loop

```tsx
import { Card, CardContent } from "@/components/ui/card";
import {
  Carousel,
  CarouselContent,
  CarouselControl,
  CarouselItem,
  CarouselNext,
  CarouselPrevious,
} from "@/components/ui/carousel";

const Example = () => {
  const slides = Array.from({ length: 4 });

  return (
    <Carousel
      autoplay
      className="w-full max-w-48 sm:max-w-64"
      loop
      slideCount={slides.length}
    >
      <CarouselControl>
        <CarouselPrevious>Previous</CarouselPrevious>
        <CarouselNext>Next</CarouselNext>
      </CarouselControl>

      <CarouselContent>
        {slides.map((_, index) => (
          <CarouselItem index={index} key={index}>
            <Card>
              <CardContent className="flex aspect-square items-center justify-center">
                <span className="font-semibold text-4xl">{index + 1}</span>
              </CardContent>
            </Card>
          </CarouselItem>
        ))}
      </CarouselContent>
    </Carousel>
  );
};

export default Example;

```

## Example: mouse-drag

```tsx
import { Card, CardContent } from "@/components/ui/card";
import {
  Carousel,
  CarouselContent,
  CarouselControl,
  CarouselItem,
  CarouselNext,
  CarouselPrevious,
} from "@/components/ui/carousel";

const Example = () => {
  const slides = Array.from({ length: 8 });

  return (
    <Carousel
      allowMouseDrag
      className="w-full max-w-48 sm:max-w-64"
      slideCount={slides.length}
    >
      <CarouselControl>
        <CarouselPrevious>Previous</CarouselPrevious>
        <CarouselNext>Next</CarouselNext>
      </CarouselControl>

      <CarouselContent>
        {slides.map((_, index) => (
          <CarouselItem index={index} key={index}>
            <Card>
              <CardContent className="flex aspect-square items-center justify-center">
                <span className="font-semibold text-4xl">{index + 1}</span>
              </CardContent>
            </Card>
          </CarouselItem>
        ))}
      </CarouselContent>
    </Carousel>
  );
};

export default Example;

```

## Example: orientation-horizontal

```tsx
import {
  Carousel,
  CarouselContent,
  CarouselControl,
  CarouselItem,
  CarouselNext,
  CarouselPrevious,
} from "@/components/ui/carousel";

const Example = () => {
  const slides = [
    { src: "https://picsum.photos/seed/1/500/300", alt: "Nature landscape" },
    { src: "https://picsum.photos/seed/2/500/300", alt: "City skyline" },
    { src: "https://picsum.photos/seed/3/500/300", alt: "Mountain view" },
    { src: "https://picsum.photos/seed/4/500/300", alt: "Ocean sunset" },
    { src: "https://picsum.photos/seed/5/500/300", alt: "Forest path" },
  ];

  return (
    <Carousel
      className="w-full max-w-48 sm:max-w-64"
      slideCount={slides.length}
    >
      <CarouselControl>
        <CarouselPrevious>Previous</CarouselPrevious>
        <CarouselNext>Next</CarouselNext>
      </CarouselControl>

      <CarouselContent>
        {slides.map((slide, index) => (
          <CarouselItem index={index} key={slide.src}>
            <img alt={slide.alt} height={300} src={slide.src} width={500} />
          </CarouselItem>
        ))}
      </CarouselContent>
    </Carousel>
  );
};

export default Example;

```

## Example: orientation-vertical

```tsx
import {
  Carousel,
  CarouselContent,
  CarouselControl,
  CarouselItem,
  CarouselNext,
  CarouselPrevious,
} from "@/components/ui/carousel";

const Example = () => {
  const slides = [
    { src: "https://picsum.photos/seed/1/500/300", alt: "Nature landscape" },
    { src: "https://picsum.photos/seed/2/500/300", alt: "City skyline" },
    { src: "https://picsum.photos/seed/3/500/300", alt: "Mountain view" },
    { src: "https://picsum.photos/seed/4/500/300", alt: "Ocean sunset" },
    { src: "https://picsum.photos/seed/5/500/300", alt: "Forest path" },
  ];

  return (
    <Carousel
      className="h-40 w-full max-w-48 sm:max-w-64"
      orientation="vertical"
      slideCount={slides.length}
    >
      <CarouselControl>
        <CarouselPrevious>Previous</CarouselPrevious>
        <CarouselNext>Next</CarouselNext>
      </CarouselControl>

      <CarouselContent>
        {slides.map((slide, index) => (
          <CarouselItem index={index} key={slide.src}>
            <img alt={slide.alt} height={300} src={slide.src} width={500} />
          </CarouselItem>
        ))}
      </CarouselContent>
    </Carousel>
  );
};

export default Example;

```

## Example: padding

```tsx
import { Card, CardContent } from "@/components/ui/card";
import {
  Carousel,
  CarouselContent,
  CarouselControl,
  CarouselItem,
  CarouselNext,
  CarouselPrevious,
} from "@/components/ui/carousel";

const Example = () => {
  const slides = Array.from({ length: 8 });

  return (
    <Carousel
      className="w-full max-w-48 sm:max-w-64"
      loop
      padding="16px"
      slideCount={slides.length}
      slidesPerPage={2}
    >
      <CarouselControl>
        <CarouselPrevious>Previous</CarouselPrevious>
        <CarouselNext>Next</CarouselNext>
      </CarouselControl>

      <CarouselContent>
        {slides.map((_, index) => (
          <CarouselItem index={index} key={index}>
            <Card>
              <CardContent className="flex aspect-square items-center justify-center">
                <span className="font-semibold text-4xl">{index + 1}</span>
              </CardContent>
            </Card>
          </CarouselItem>
        ))}
      </CarouselContent>
    </Carousel>
  );
};

export default Example;

```

## Example: slides-per-page

```tsx
import { Card, CardContent } from "@/components/ui/card";
import {
  Carousel,
  CarouselContent,
  CarouselControl,
  CarouselItem,
  CarouselNext,
  CarouselPrevious,
} from "@/components/ui/carousel";

const Example = () => {
  const slides = Array.from({ length: 16 });

  return (
    <Carousel
      className="w-full max-w-48 sm:max-w-80"
      slideCount={slides.length}
      slidesPerPage={3}
    >
      <CarouselControl>
        <CarouselPrevious>Previous</CarouselPrevious>
        <CarouselNext>Next</CarouselNext>
      </CarouselControl>

      <CarouselContent>
        {slides.map((_, index) => (
          <CarouselItem index={index} key={index}>
            <Card>
              <CardContent className="flex h-40 items-center justify-center">
                <span className="font-semibold text-2xl">{index + 1}</span>
              </CardContent>
            </Card>
          </CarouselItem>
        ))}
      </CarouselContent>
    </Carousel>
  );
};

export default Example;

```

## Example: spacing

```tsx
import { Card, CardContent } from "@/components/ui/card";
import {
  Carousel,
  CarouselContent,
  CarouselControl,
  CarouselItem,
  CarouselNext,
  CarouselPrevious,
} from "@/components/ui/carousel";

const Example = () => {
  const slides = Array.from({ length: 8 });

  return (
    <Carousel
      className="w-full max-w-48 sm:max-w-64"
      slideCount={slides.length}
      slidesPerPage={2}
      spacing="64px"
    >
      <CarouselControl>
        <CarouselPrevious>Previous</CarouselPrevious>
        <CarouselNext>Next</CarouselNext>
      </CarouselControl>

      <CarouselContent>
        {slides.map((_, index) => (
          <CarouselItem index={index} key={index}>
            <Card>
              <CardContent className="flex aspect-square items-center justify-center">
                <span className="font-semibold text-4xl">{index + 1}</span>
              </CardContent>
            </Card>
          </CarouselItem>
        ))}
      </CarouselContent>
    </Carousel>
  );
};

export default Example;

```

## Example: thumbnail-indicator-vertical

```tsx
import {
  Carousel,
  CarouselContent,
  CarouselControl,
  CarouselIndicator,
  CarouselIndicatorGroup,
  CarouselItem,
  CarouselNext,
  CarouselPrevious,
} from "@/components/ui/carousel";

const Example = () => {
  const slides = [
    { src: "https://picsum.photos/seed/1/500/300", alt: "Nature landscape" },
    { src: "https://picsum.photos/seed/2/500/300", alt: "City skyline" },
    { src: "https://picsum.photos/seed/3/500/300", alt: "Mountain view" },
    { src: "https://picsum.photos/seed/4/500/300", alt: "Ocean sunset" },
    { src: "https://picsum.photos/seed/5/500/300", alt: "Forest path" },
  ];

  return (
    <Carousel
      className="h-40 w-full max-w-48 sm:max-w-64"
      loop
      orientation="vertical"
      slideCount={slides.length}
    >
      <CarouselControl className="relative">
        <CarouselPrevious>Previous</CarouselPrevious>
        <CarouselNext>Next</CarouselNext>

        <CarouselContent>
          {slides.map((slide, index) => (
            <CarouselItem index={index} key={slide.src}>
              <img alt={slide.alt} height={300} src={slide.src} width={500} />
            </CarouselItem>
          ))}
        </CarouselContent>
      </CarouselControl>

      <CarouselIndicatorGroup className="ml-4">
        {slides.map((slide) => (
          <CarouselIndicator
            className="size-10 rounded-md"
            index={slides.indexOf(slide)}
            key={slide.src}
          >
            <img alt={slide.alt} height={40} src={slide.src} width={40} />
          </CarouselIndicator>
        ))}
      </CarouselIndicatorGroup>
    </Carousel>
  );
};

export default Example;

```

## Example: thumbnail-indicator

```tsx
import {
  Carousel,
  CarouselContent,
  CarouselControl,
  CarouselIndicator,
  CarouselIndicatorGroup,
  CarouselItem,
  CarouselNext,
  CarouselPrevious,
} from "@/components/ui/carousel";

const Example = () => {
  const slides = [
    { src: "https://picsum.photos/seed/1/500/300", alt: "Nature landscape" },
    { src: "https://picsum.photos/seed/2/500/300", alt: "City skyline" },
    { src: "https://picsum.photos/seed/3/500/300", alt: "Mountain view" },
    { src: "https://picsum.photos/seed/4/500/300", alt: "Ocean sunset" },
    { src: "https://picsum.photos/seed/5/500/300", alt: "Forest path" },
  ];

  return (
    <Carousel
      className="w-full max-w-48 sm:max-w-64"
      loop
      slideCount={slides.length}
    >
      <CarouselControl className="relative">
        <CarouselPrevious>Previous</CarouselPrevious>
        <CarouselNext>Next</CarouselNext>

        <CarouselContent>
          {slides.map((slide, index) => (
            <CarouselItem index={index} key={slide.src}>
              <img alt={slide.alt} height={300} src={slide.src} width={500} />
            </CarouselItem>
          ))}
        </CarouselContent>
      </CarouselControl>

      <CarouselIndicatorGroup className="mt-4">
        {slides.map((slide) => (
          <CarouselIndicator
            className="size-10 rounded-md"
            index={slides.indexOf(slide)}
            key={slide.src}
          >
            <img alt={slide.alt} height={40} src={slide.src} width={40} />
          </CarouselIndicator>
        ))}
      </CarouselIndicatorGroup>
    </Carousel>
  );
};

export default Example;

```

# Chart - Examples and Patterns

Examples for Chart component.

## Example: default

```tsx
"use client";

import { Bar, BarChart, CartesianGrid, XAxis } from "recharts";
import {
  type ChartConfig,
  ChartContainer,
  ChartTooltip,
  ChartTooltipContent,
} from "@/components/ui/chart";

const chartData = [
  { month: "January", desktop: 186, mobile: 80 },
  { month: "February", desktop: 305, mobile: 200 },
  { month: "March", desktop: 237, mobile: 120 },
  { month: "April", desktop: 73, mobile: 190 },
  { month: "May", desktop: 209, mobile: 130 },
  { month: "June", desktop: 214, mobile: 140 },
];

const chartConfig = {
  desktop: {
    label: "Desktop",
    color: "#2563eb",
  },
  mobile: {
    label: "Mobile",
    color: "#60a5fa",
  },
} satisfies ChartConfig;

const ChartDemo = () => {
  return (
    <ChartContainer
      className="min-h-[200px] w-full max-w-sm"
      config={chartConfig}
    >
      <BarChart accessibilityLayer data={chartData}>
        <CartesianGrid vertical={false} />
        <XAxis
          axisLine={false}
          dataKey="month"
          tickFormatter={(value) => value.slice(0, 3)}
          tickLine={false}
          tickMargin={10}
        />
        <ChartTooltip content={(props) => <ChartTooltipContent {...props} />} />
        <Bar dataKey="desktop" fill="var(--color-desktop)" radius={4} />
        <Bar dataKey="mobile" fill="var(--color-mobile)" radius={4} />
      </BarChart>
    </ChartContainer>
  );
};

export default ChartDemo;

```

# Checkbox - Examples and Patterns

Control for multiple selections in a set.

## Example: card

```tsx
import { Checkbox } from "@/components/ui/checkbox";
import {
  Field,
  FieldContent,
  FieldDescription,
  FieldLabel,
  FieldTitle,
} from "@/components/ui/field";

const Example = () => {
  return (
    <FieldLabel className="w-full max-w-sm">
      <Field orientation="horizontal">
        <Checkbox />
        <FieldContent>
          <FieldTitle>Enable notifications</FieldTitle>
          <FieldDescription>
            You can enable or disable notifications at any time.
          </FieldDescription>
        </FieldContent>
      </Field>
    </FieldLabel>
  );
};

export default Example;

```

## Example: checkbox-group

```tsx
import { Checkbox, CheckboxGroup } from "@/components/ui/checkbox";
import {
  Field,
  FieldDescription,
  FieldGroup,
  FieldLabel,
  FieldLegend,
  FieldSet,
} from "@/components/ui/field";

const Example = () => {
  return (
    <FieldSet>
      <FieldLegend variant="label">
        Show these items on the desktop:
      </FieldLegend>
      <FieldDescription>
        Select the items you want to show on the desktop.
      </FieldDescription>
      <FieldGroup>
        <CheckboxGroup
          className="gap-3"
          defaultValue={["hard-disks", "external-disks"]}
        >
          <Field orientation="horizontal">
            <Checkbox defaultChecked value="hard-disks" />
            <FieldLabel className="font-normal">Hard disks</FieldLabel>
          </Field>
          <Field orientation="horizontal">
            <Checkbox defaultChecked value="external-disks" />
            <FieldLabel className="font-normal">External disks</FieldLabel>
          </Field>
          <Field orientation="horizontal">
            <Checkbox value="cds-dvds-ipods" />
            <FieldLabel className="font-normal">
              CDs, DVDs, and iPods
            </FieldLabel>
          </Field>
          <Field orientation="horizontal">
            <Checkbox value="connected-servers" />
            <FieldLabel className="font-normal">Connected servers</FieldLabel>
          </Field>
        </CheckboxGroup>
      </FieldGroup>
    </FieldSet>
  );
};

export default Example;

```

## Example: controlled

```tsx
"use client";

import type { CheckboxCheckedState } from "@ark-ui/react";
import React from "react";
import { Checkbox } from "@/components/ui/checkbox";
import {
  Field,
  FieldGroup,
  FieldLabel,
} from "@/components/ui/field";

const Example = () => {
  const [checked, setChecked] = React.useState<CheckboxCheckedState>(false);

  return (
    <FieldGroup className="mx-auto w-56">
      <Field orientation="horizontal">
        <Checkbox
          checked={checked}
          onCheckedChange={({ checked }) => setChecked(checked)}
        />
        <FieldLabel>Accept terms and conditions</FieldLabel>
      </Field>

      <p className="text-center">{checked ? "✅" : "❌"}</p>
    </FieldGroup>
  );
};

export default Example;

```

## Example: default

```tsx
import { Checkbox } from "@/components/ui/checkbox";
import {
  Field,
  FieldContent,
  FieldDescription,
  FieldGroup,
  FieldLabel,
} from "@/components/ui/field";

const CheckboxDemo = () => {
  return (
    <FieldGroup className="max-w-sm">
      <Field orientation="horizontal">
        <Checkbox defaultChecked />

        <FieldLabel>Accept terms and conditions</FieldLabel>
      </Field>

      <Field orientation="horizontal">
        <Checkbox />
        <FieldContent>
          <FieldLabel>Receive notifications</FieldLabel>
          <FieldDescription>
            You'll receive a notification when someone posts a comment
          </FieldDescription>
        </FieldContent>
      </Field>

      <Field orientation="horizontal">
        <Checkbox disabled />
        <FieldContent>
          <FieldLabel>Receive marketing emails</FieldLabel>
        </FieldContent>
      </Field>
    </FieldGroup>
  );
};

export default CheckboxDemo;

```

## Example: disabled

```tsx
import { Checkbox } from "@/components/ui/checkbox";
import { Field, FieldLabel } from "@/components/ui/field";

const Example = () => {
  return (
    <Field className="mx-auto w-40" disabled orientation="horizontal">
      <Checkbox />
      <FieldLabel>Receive newsletter</FieldLabel>
    </Field>
  );
};

export default Example;

```

## Example: indeterminate

```tsx
import { Checkbox } from "@/components/ui/checkbox";
import {
  Field,
  FieldContent,
  FieldGroup,
  FieldLabel,
} from "@/components/ui/field";

const Example = () => {
  return (
    <FieldGroup className="mx-auto w-40">
      <Field orientation="horizontal">
        <Checkbox checked="indeterminate" />
        <FieldContent>
          <FieldLabel>Select all items</FieldLabel>
        </FieldContent>
      </Field>
    </FieldGroup>
  );
};

export default Example;

```

## Example: invalid

```tsx
import { Checkbox } from "@/components/ui/checkbox";
import {
  Field,
  FieldGroup,
  FieldLabel,
} from "@/components/ui/field";

const Example = () => {
  return (
    <FieldGroup className="mx-auto w-56">
      <Field invalid orientation="horizontal">
        <Checkbox />
        <FieldLabel>Accept terms and conditions</FieldLabel>
      </Field>
    </FieldGroup>
  );
};

export default Example;

```

## Example: with-description

```tsx
import { Checkbox } from "@/components/ui/checkbox";
import {
  Field,
  FieldContent,
  FieldDescription,
  FieldGroup,
  FieldLabel,
} from "@/components/ui/field";

const Example = () => {
  return (
    <FieldGroup className="mx-auto w-72">
      <Field orientation="horizontal">
        <Checkbox defaultChecked />
        <FieldContent>
          <FieldLabel>Receive notifications</FieldLabel>
          <FieldDescription>
            You'll receive a notification when someone posts a comment on your
            post
          </FieldDescription>
        </FieldContent>
      </Field>
    </FieldGroup>
  );
};

export default Example;

```

# Circular Progress - Examples and Patterns

Examples for Circular Progress component.

## Example: controlled

```tsx
"use client";

import { MinusIcon, PlusIcon } from "lucide-react";
import React from "react";
import { Button } from "@/components/ui/button";
import { ButtonGroup } from "@/components/ui/button-group";
import { CircularProgress } from "@/components/ui/circular-progress";
import { Field, FieldLabel } from "@/components/ui/field";

const Example = () => {
  const [value, setValue] = React.useState(55);

  return (
    <Field className="w-full max-w-xs">
      <FieldLabel className="flex items-center gap-2">
        Controlled progress
        <ButtonGroup className="ml-auto">
          <Button
            clickEffect={false}
            onClick={() => setValue(Math.max(0, value - 10))}
            size="icon-sm"
            variant="outline"
          >
            <MinusIcon />
          </Button>
          <Button
            clickEffect={false}
            onClick={() => setValue(Math.min(100, value + 10))}
            size="icon-sm"
            variant="outline"
          >
            <PlusIcon />
          </Button>
        </ButtonGroup>
      </FieldLabel>
      <CircularProgress value={value} />
    </Field>
  );
};

export default Example;

```

## Example: default

```tsx
"use client";

import React from "react";
import { CircularProgress } from "@/components/ui/circular-progress";

const Example = () => {
  const [progress, setProgress] = React.useState(24);

  React.useEffect(() => {
    const timer = setTimeout(() => setProgress(72), 500);
    return () => clearTimeout(timer);
  }, []);

  return <CircularProgress value={progress} />;
};

export default Example;

```

## Example: indeterminate

```tsx
import { CircularProgress } from "@/components/ui/circular-progress";
import { Field, FieldLabel } from "@/components/ui/field";

const Example = () => (
  <Field className="w-full max-w-xs">
    <FieldLabel className="justify-center">
      Establishing connection...
    </FieldLabel>
    <CircularProgress indeterminate />
  </Field>
);

export default Example;

```

## Example: size

```tsx
import { CircularProgress } from "@/components/ui/circular-progress";

const Example = () => (
  <div className="flex flex-wrap items-center gap-6">
    <CircularProgress size={24} value={35} />
    <CircularProgress size={32} value={62} />
    <CircularProgress size={40} value={84} />
  </div>
);

export default Example;

```

## Example: thickness

```tsx
import { CircularProgress } from "@/components/ui/circular-progress";

const Example = () => (
  <div className="flex flex-wrap items-center gap-6">
    <CircularProgress size={24} thickness={2} value={35} />
    <CircularProgress size={66} thickness={6} value={62} />
    <CircularProgress size={100} thickness={8} value={84} />
  </div>
);

export default Example;

```

## Example: with-value

```tsx
import {
  CircularProgress,
  CircularProgressValue,
} from "@/components/ui/circular-progress";

const Example = () => (
  <CircularProgress size={66} thickness={5} value={66}>
    <CircularProgressValue className="absolute" />
  </CircularProgress>
);

export default Example;

```

# Circular Slider - Examples and Patterns

Examples for Circular Slider component.

## Example: controlled

```tsx
"use client";

import React from "react";
import { CircularSlider } from "@/components/ui/circular-slider";

const Example = () => {
  const [value, setValue] = React.useState(45);

  return (
    <div className="flex flex-col gap-4">
      <div className="text-muted-foreground text-sm">More than: 180</div>
      <CircularSlider
        aria-label="Angle"
        onValueChange={(e) => setValue(e.value)}
        value={value}
      />
      <div className="text-center text-muted-foreground text-sm">
        {value > 180 ? "✅" : "❌"}
      </div>
    </div>
  );
};

export default Example;

```

## Example: custom-markers

```tsx
"use client";

import { CircularSlider } from "@/components/ui/circular-slider";

function Example() {
  return (
    <CircularSlider
      aria-label="Angle"
      defaultValue={45}
      markers={[0, 90, 180, 270]}
    />
  );
}

export default Example;

```

## Example: default

```tsx
import {
  CircularSlider,
  CircularSliderValue,
} from "@/components/ui/circular-slider";

const CircularSliderDemo = () => {
  return (
    <CircularSlider aria-label="Angle" defaultValue={45}>
      <CircularSliderValue suffix="°" />
    </CircularSlider>
  );
};

export default CircularSliderDemo;

```

## Example: disabled

```tsx
import { CircularSlider } from "@/components/ui/circular-slider";

const Example = () => (
  <CircularSlider aria-label="Angle" defaultValue={45} disabled />
);

export default Example;

```

## Example: size

```tsx
import { CircularSlider } from "@/components/ui/circular-slider";

const Example = () => (
  <CircularSlider aria-label="Angle" defaultValue={45} size={180} />
);

export default Example;

```

## Example: step

```tsx
import { CircularSlider } from "@/components/ui/circular-slider";

const Example = () => (
  <CircularSlider
    aria-label="Angle"
    defaultValue={120}
    markers
    markersAtSteps
    step={60}
  />
);

export default Example;

```

## Example: thickness

```tsx
import { CircularSlider } from "@/components/ui/circular-slider";

const Example = () => (
  <CircularSlider aria-label="Angle" defaultValue={45} thickness={14} />
);

export default Example;

```

## Example: with-markers

```tsx
import { CircularSlider } from "@/components/ui/circular-slider";

const Example = () => (
  <CircularSlider aria-label="Angle" defaultValue={45} markers />
);

export default Example;

```

## Example: with-value

```tsx
"use client";

import { Thermometer } from "lucide-react";
import {
  CircularSlider,
  CircularSliderValue,
} from "@/components/ui/circular-slider";

function Example() {
  return (
    <CircularSlider
      aria-label="Angle"
      defaultValue={90}
      size={120}
      thickness={10}
    >
      <CircularSliderValue
        prefix={<Thermometer className="size-4" />}
        suffix="°"
      />
    </CircularSlider>
  );
}

export default Example;

```

# Client Only - Examples and Patterns

Examples for Client Only component.

## Example: default

```tsx
import { ClientOnly } from "@/components/ui/client-only";

const ClientOnlyDemo = () => (
  <ClientOnly>
    <div className="rounded-xl border bg-muted px-4 py-3 text-foreground text-sm">
      This content is only rendered on the client side.
    </div>
  </ClientOnly>
);

export default ClientOnlyDemo;

```

## Example: fallback

```tsx
"use client";

import { ClientOnly } from "@/components/ui/client-only";

const Example = () => (
  <ClientOnly
    fallback={
      <div className="rounded-xl border border-dashed bg-muted/50 px-4 py-3 text-muted-foreground text-sm">
        Loading…
      </div>
    }
  >
    <CurrentTime />
  </ClientOnly>
);

const CurrentTime = () => {
  const now = new Date();

  return (
    <div className="rounded-xl border bg-muted px-4 py-3 text-foreground text-sm">
      Current time: {now.toLocaleTimeString()}
    </div>
  );
};

export default Example;

```

# Clipboard - Examples and Patterns

Examples for Clipboard component.

## Example: controlled

```tsx
"use client";

import React from "react";
import { Button } from "@/components/ui/button";
import {
  Clipboard,
  ClipboardIndicator,
  ClipboardInput,
  ClipboardTrigger,
} from "@/components/ui/clipboard";

const Example = () => {
  const [value, setValue] = React.useState("https://x.com/vinihvc");

  return (
    <div className="flex max-w-sm flex-col gap-2">
      <Clipboard value={value}>
        <ClipboardInput />

        <ClipboardTrigger asChild>
          <Button size="icon-md">
            <ClipboardIndicator />
          </Button>
        </ClipboardTrigger>
      </Clipboard>

      <Button
        onClick={() => setValue("https://x.com/shadcn")}
        variant="secondary"
      >
        Change URL
      </Button>
    </div>
  );
};

export default Example;

```

## Example: custom-timeout

```tsx
import { Button } from "@/components/ui/button";
import {
  Clipboard,
  ClipboardIndicator,
  ClipboardInput,
  ClipboardTrigger,
} from "@/components/ui/clipboard";

const Example = () => (
  <div className="max-w-sm">
    <Clipboard timeout={5000} value="https://x.com/vinihvc">
      <ClipboardInput />

      <ClipboardTrigger asChild>
        <Button size="icon-md">
          <ClipboardIndicator />
        </Button>
      </ClipboardTrigger>
    </Clipboard>
  </div>
);

export default Example;

```

## Example: default

```tsx
import { Button } from "@/components/ui/button";
import {
  Clipboard,
  ClipboardIndicator,
  ClipboardInput,
  ClipboardTrigger,
} from "@/components/ui/clipboard";

const ClipboardDemo = () => (
  <div className="max-w-sm">
    <Clipboard value="https://x.com/vinihvc">
      <ClipboardInput />

      <ClipboardTrigger asChild>
        <Button size="icon-md">
          <ClipboardIndicator />
        </Button>
      </ClipboardTrigger>
    </Clipboard>
  </div>
);

export default ClipboardDemo;

```

## Example: different-icon

```tsx
import { SparkleIcon, SparklesIcon } from "lucide-react";
import { Button } from "@/components/ui/button";
import {
  Clipboard,
  ClipboardIndicator,
  ClipboardTrigger,
} from "@/components/ui/clipboard";

const Example = () => (
  <Clipboard value="https://x.com/vinihvc">
    <ClipboardTrigger asChild>
      <Button size="icon-md">
        <ClipboardIndicator copied={<SparklesIcon />}>
          <SparkleIcon />
        </ClipboardIndicator>
      </Button>
    </ClipboardTrigger>
  </Clipboard>
);

export default Example;

```

## Example: icon-only

```tsx
import { Button } from "@/components/ui/button";
import {
  Clipboard,
  ClipboardIndicator,
  ClipboardTrigger,
} from "@/components/ui/clipboard";

const Example = () => (
  <Clipboard value="https://x.com/vinihvc">
    <ClipboardTrigger asChild>
      <Button size="icon-md">
        <ClipboardIndicator />
      </Button>
    </ClipboardTrigger>
  </Clipboard>
);

export default Example;

```

## Example: value-text

```tsx
import { Button } from "@/components/ui/button";
import {
  Clipboard,
  ClipboardIndicator,
  ClipboardTrigger,
  ClipboardValue,
} from "@/components/ui/clipboard";

const Example = () => (
  <Clipboard value="https://x.com/vinihvc">
    <ClipboardValue />
    <ClipboardTrigger asChild>
      <Button size="icon-md">
        <ClipboardIndicator />
      </Button>
    </ClipboardTrigger>
  </Clipboard>
);

export default Example;

```

# Collapsible - Examples and Patterns

Examples for Collapsible component.

## Example: controlled

```tsx
"use client";

import React from "react";
import { Button } from "@/components/ui/button";
import {
  Collapsible,
  CollapsibleContent,
  CollapsibleIndicator,
  CollapsibleTrigger,
} from "@/components/ui/collapsible";

const Example = () => {
  const [open, setOpen] = React.useState(false);

  return (
    <div className="w-64 space-y-2">
      <Collapsible onOpenChange={({ open }) => setOpen(open)} open={open}>
        <CollapsibleTrigger asChild>
          <Button className="w-full" variant="outline">
            {open ? "Collapse" : "Expand"}
            <CollapsibleIndicator />
          </Button>
        </CollapsibleTrigger>

        <CollapsibleContent className="p-2">
          <p className="text-muted-foreground text-sm">
            This collapsible is controlled. The state is managed externally.
          </p>
        </CollapsibleContent>
      </Collapsible>

      <p className="text-center text-muted-foreground text-sm">
        {open ? "✅" : "❌"}
      </p>
    </div>
  );
};

export default Example;

```

## Example: default

```tsx
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import {
  Card,
  CardAction,
  CardDescription,
  CardHeader,
} from "@/components/ui/card";
import {
  Collapsible,
  CollapsibleContent,
  CollapsibleIndicator,
  CollapsibleTrigger,
} from "@/components/ui/collapsible";

const CollapsibleDemo = () => (
  <Card className="w-96">
    <Collapsible>
      <CardHeader title="Total visits">
        <CardDescription>
          <div className="flex items-center gap-1">
            <Badge variant="success">22.3%</Badge>
            <Badge variant="info">10.1%</Badge>
            <Badge variant="warning">6.8%</Badge>
            <Badge variant="destructive">1.4%</Badge>
          </div>
        </CardDescription>

        <CardAction>
          <CollapsibleTrigger asChild>
            <Button size="sm" variant="outline">
              Details
              <CollapsibleIndicator />
            </Button>
          </CollapsibleTrigger>
        </CardAction>
      </CardHeader>

      <CollapsibleContent className="text-sm">
        <div className="mt-(--space) grid gap-3 px-(--space)">
          <div className="grid grid-cols-3 items-center gap-4">
            <div className="col-span-2 text-muted-foreground">Google</div>
            <div className="place-self-end">
              <Badge variant="success">22.3%</Badge>
            </div>
          </div>
          <div className="grid grid-cols-3 items-center gap-4">
            <div className="col-span-2 text-muted-foreground">Facebook</div>
            <div className="place-self-end">
              <Badge variant="destructive">-10.1%</Badge>
            </div>
          </div>
          <div className="grid grid-cols-3 items-center gap-4">
            <div className="col-span-2 text-muted-foreground">TikTok</div>
            <div className="place-self-end">
              <Badge variant="warning">6.8%</Badge>
            </div>
          </div>
          <div className="grid grid-cols-3 items-center gap-4">
            <div className="col-span-2 text-muted-foreground">Instagram</div>
            <div className="place-self-end">
              <Badge variant="info">1.4%</Badge>
            </div>
          </div>
        </div>
      </CollapsibleContent>
    </Collapsible>
  </Card>
);

export default CollapsibleDemo;

```

## Example: disabled

```tsx
import { Button } from "@/components/ui/button";
import {
  Collapsible,
  CollapsibleContent,
  CollapsibleIndicator,
  CollapsibleTrigger,
} from "@/components/ui/collapsible";

const Example = () => (
  <div className="w-64">
    <Collapsible disabled>
      <CollapsibleTrigger asChild>
        <Button className="w-full" variant="outline">
          Disabled Collapsible
          <CollapsibleIndicator />
        </Button>
      </CollapsibleTrigger>
      <CollapsibleContent className="pt-2">
        <p className="text-muted-foreground text-sm">
          This content cannot be accessed because the collapsible is disabled.
        </p>
      </CollapsibleContent>
    </Collapsible>
  </div>
);

export default Example;

```

## Example: nested

```tsx
import { CopyButton } from "@/components/copy-button";
import { Button } from "@/components/ui/button";
import {
  Card,
  CardContent,
  CardHeader,
} from "@/components/ui/card";
import {
  Collapsible,
  CollapsibleContent,
  CollapsibleIndicator,
  CollapsibleTrigger,
} from "@/components/ui/collapsible";

const Example = () => (
  <Card className="w-80">
    <CardHeader
      description="We'll help you get started"
      title="Getting started"
    />

    <CardContent>
      <Collapsible>
        <CollapsibleTrigger asChild>
          <Button className="w-full" variant="outline">
            View details
            <CollapsibleIndicator />
          </Button>
        </CollapsibleTrigger>

        <CollapsibleContent className="flex flex-col gap-4 p-2">
          <p className="text-muted-foreground text-sm">
            Here you can find the documentation for all the components and how
            to use them.
          </p>

          <Collapsible>
            <CollapsibleTrigger asChild>
              <Button className="w-full" size="sm" variant="outline">
                Install dependencies
                <CollapsibleIndicator />
              </Button>
            </CollapsibleTrigger>
            <CollapsibleContent className="flex flex-col gap-2 p-2">
              <p className="text-muted-foreground text-sm">
                Copy the following code:
              </p>

              <pre className="relative rounded-md bg-muted p-2 text-muted-foreground text-xs">
                <code>npm install @shark-ui</code>

                <CopyButton
                  className="absolute inset-e-1.5 top-0.5"
                  value="npm install @shark-ui/collapsible"
                />
              </pre>
            </CollapsibleContent>
          </Collapsible>
        </CollapsibleContent>
      </Collapsible>
    </CardContent>
  </Card>
);

export default Example;

```

## Example: partial-collapse

```tsx
import { Button } from "@/components/ui/button";
import {
  Collapsible,
  CollapsibleContent,
  CollapsibleIndicator,
  CollapsibleTrigger,
} from "@/components/ui/collapsible";

const Example = () => {
  return (
    <Collapsible className="w-96" collapsedHeight="50px">
      <CollapsibleTrigger asChild>
        <Button className="w-full" variant="outline">
          Read more
          <CollapsibleIndicator />
        </Button>
      </CollapsibleTrigger>

      <CollapsibleContent className="space-y-2 p-2">
        <p className="text-muted-foreground text-sm">
          This is the first paragraph of content. When collapsed, only a portion
          of this content will be visible.
        </p>
        <p className="text-muted-foreground text-sm">
          This is the second paragraph. It will be hidden when the collapsible
          is in its collapsed state.
        </p>
        <p className="text-muted-foreground text-sm">
          This is the third paragraph. Expand the collapsible to see all the
          content.
        </p>
        <p className="text-muted-foreground text-sm">
          This is the fourth paragraph. The collapsedHeight prop controls how
          much content is visible when collapsed.
        </p>

        <CollapsibleTrigger asChild>
          <Button className="w-full" variant="outline">
            Collapse (cannot be focused when collapsed)
            <CollapsibleIndicator />
          </Button>
        </CollapsibleTrigger>
      </CollapsibleContent>
    </Collapsible>
  );
};

export default Example;

```

# Color Picker - Examples and Patterns

Examples for Color Picker component.

## Example: area-channels

```tsx
import {
  ColorPicker,
  ColorPickerArea,
  ColorPickerAreaThumb,
} from "@/components/ui/color-picker";

const Example = () => (
  <ColorPicker className="w-full max-w-48" defaultValue="#182098" inline>
    <ColorPickerArea xChannel="hue" yChannel="alpha">
      <ColorPickerAreaThumb />
    </ColorPickerArea>
  </ColorPicker>
);

export default Example;

```

## Example: area-dots

```tsx
import {
  ColorPicker,
  ColorPickerArea,
  ColorPickerAreaThumb,
} from "@/components/ui/color-picker";

const Example = () => (
  <ColorPicker className="w-full max-w-48" defaultValue="#19932C" inline>
    <ColorPickerArea showDots xChannel="hue" yChannel="alpha">
      <ColorPickerAreaThumb />
    </ColorPickerArea>
  </ColorPicker>
);

export default Example;

```

## Example: custom-spacing

```tsx
import {
  ColorPicker,
  ColorPickerArea,
  ColorPickerAreaThumb,
  ColorPickerContent,
  ColorPickerEyeDropperTrigger,
  ColorPickerInput,
  ColorPickerSlider,
  ColorPickerSwatchPreview,
  ColorPickerTransparencyGrid,
  ColorPickerTrigger,
  ColorPickerView,
} from "@/components/ui/color-picker";
import {
  InputGroup,
  InputGroupAddon,
  InputGroupInput,
} from "@/components/ui/input-group";

const Example = () => (
  <ColorPicker className="w-full max-w-64" defaultValue="#eb5e41" format="hsla">
    <InputGroup>
      <ColorPickerTrigger asChild>
        <InputGroupAddon>
          <ColorPickerSwatchPreview />
        </InputGroupAddon>
      </ColorPickerTrigger>
      <ColorPickerInput asChild>
        <InputGroupInput />
      </ColorPickerInput>
    </InputGroup>

    <ColorPickerContent className="[--space:--spacing(2)] sm:[--space:--spacing(4)]">
      <ColorPickerArea>
        <ColorPickerAreaThumb />
      </ColorPickerArea>
      <ColorPickerView format="hsla">
        <div className="flex items-center gap-3">
          <ColorPickerEyeDropperTrigger />
          <div className="flex flex-1 flex-col gap-2.5">
            <ColorPickerSlider channel="hue" />
            <ColorPickerSlider channel="alpha">
              <ColorPickerTransparencyGrid />
            </ColorPickerSlider>
          </div>
        </div>
      </ColorPickerView>
    </ColorPickerContent>
  </ColorPicker>
);

export default Example;

```

## Example: default

```tsx
import {
  ColorPicker,
  ColorPickerArea,
  ColorPickerAreaThumb,
  ColorPickerContent,
  ColorPickerEyeDropperTrigger,
  ColorPickerInput,
  ColorPickerSlider,
  ColorPickerSwatchPreview,
  ColorPickerTransparencyGrid,
  ColorPickerTrigger,
  ColorPickerView,
} from "@/components/ui/color-picker";
import {
  InputGroup,
  InputGroupAddon,
  InputGroupInput,
} from "@/components/ui/input-group";

const ColorPickerDemo = () => (
  <ColorPicker className="w-full max-w-64" defaultValue="#eb5e41" format="hsla">
    <InputGroup>
      <ColorPickerTrigger asChild>
        <InputGroupAddon>
          <ColorPickerSwatchPreview />
        </InputGroupAddon>
      </ColorPickerTrigger>
      <ColorPickerInput asChild>
        <InputGroupInput />
      </ColorPickerInput>
    </InputGroup>

    <ColorPickerContent>
      <ColorPickerArea>
        <ColorPickerAreaThumb />
      </ColorPickerArea>
      <ColorPickerView format="hsla">
        <div className="flex items-center gap-3">
          <ColorPickerEyeDropperTrigger />
          <div className="flex flex-1 flex-col gap-2.5">
            <ColorPickerSlider channel="hue" />
            <ColorPickerSlider channel="alpha">
              <ColorPickerTransparencyGrid />
            </ColorPickerSlider>
          </div>
        </div>
      </ColorPickerView>
    </ColorPickerContent>
  </ColorPicker>
);

export default ColorPickerDemo;

```

## Example: input-channel

```tsx
"use client";

import {
  ColorPicker,
  ColorPickerInput,
  ColorPickerSwatchPreview,
  ColorPickerView,
  parseColor,
} from "@/components/ui/color-picker";
import { Field, FieldLabel } from "@/components/ui/field";
import { Input } from "@/components/ui/input";

const Example = () => (
  <div className="flex w-full max-w-xs flex-col gap-4">
    <ColorPicker
      className="w-full"
      defaultValue={parseColor("#0485F7").toString("rgba")}
      format="rgba"
    >
      <ColorPickerView format="rgba">
        <Field orientation="horizontal">
          <FieldLabel>RGB</FieldLabel>
          <ColorPickerInput asChild channel="red" className="w-full">
            <Input />
          </ColorPickerInput>
          <ColorPickerInput asChild channel="green" className="w-full">
            <Input />
          </ColorPickerInput>
          <ColorPickerInput asChild channel="blue" className="w-full">
            <Input />
          </ColorPickerInput>
          <ColorPickerSwatchPreview className="size-6" />
        </Field>
      </ColorPickerView>
    </ColorPicker>
    <ColorPicker
      className="w-full"
      defaultValue={parseColor("#EF4444").toString("hsba")}
      format="hsba"
    >
      <ColorPickerView format="hsba">
        <Field orientation="horizontal">
          <FieldLabel>HSB</FieldLabel>
          <ColorPickerInput asChild channel="hue" className="w-full">
            <Input />
          </ColorPickerInput>
          <ColorPickerInput asChild channel="saturation" className="w-full">
            <Input />
          </ColorPickerInput>
          <ColorPickerInput asChild channel="brightness" className="w-full">
            <Input />
          </ColorPickerInput>
          <ColorPickerSwatchPreview className="size-6" />
        </Field>
      </ColorPickerView>
    </ColorPicker>
    <ColorPicker
      className="w-full"
      defaultValue={parseColor("#F59E0B").toString("hsla")}
      format="hsla"
    >
      <ColorPickerView format="hsla">
        <Field orientation="horizontal">
          <FieldLabel>HSL</FieldLabel>
          <ColorPickerInput asChild channel="hue" className="w-full">
            <Input />
          </ColorPickerInput>
          <ColorPickerInput asChild channel="saturation" className="w-full">
            <Input />
          </ColorPickerInput>
          <ColorPickerInput asChild channel="lightness" className="w-full">
            <Input />
          </ColorPickerInput>
          <ColorPickerSwatchPreview className="size-6" />
        </Field>
      </ColorPickerView>
    </ColorPicker>
    <ColorPicker
      className="w-full items-center"
      defaultValue={parseColor("#10B981").toString("hex")}
    >
      <FieldLabel>Hex</FieldLabel>
      <Field orientation="horizontal">
        <ColorPickerInput asChild channel="hex">
          <Input />
        </ColorPickerInput>
        <ColorPickerInput asChild channel="alpha">
          <Input />
        </ColorPickerInput>
        <ColorPickerSwatchPreview className="size-6" />
      </Field>
    </ColorPicker>
  </div>
);

export default Example;

```

## Example: input-compact

```tsx
"use client";

import { PercentIcon } from "lucide-react";
import {
  ColorPicker,
  ColorPickerArea,
  ColorPickerAreaThumb,
  ColorPickerContent,
  ColorPickerInput,
  ColorPickerSlider,
  ColorPickerSwatchPreview,
  ColorPickerTransparencyGrid,
  ColorPickerTrigger,
  ColorPickerView,
  parseColor,
} from "@/components/ui/color-picker";
import {
  InputGroup,
  InputGroupAddon,
  InputGroupInput,
} from "@/components/ui/input-group";
import { Separator } from "@/components/ui/separator";

const Example = () => (
  <ColorPicker
    className="w-full max-w-56"
    defaultValue={parseColor("#0485F7").toString("hsla")}
    format="hsla"
  >
    <InputGroup>
      <ColorPickerTrigger asChild>
        <InputGroupAddon>
          <ColorPickerSwatchPreview aria-hidden />
        </InputGroupAddon>
      </ColorPickerTrigger>
      <ColorPickerInput asChild channel="hex" className="flex-1">
        <InputGroupInput />
      </ColorPickerInput>
      <Separator orientation="vertical" />
      <ColorPickerInput asChild channel="alpha">
        <InputGroupInput
          aria-label="Opacity percentage"
          className="max-w-1/4 text-right"
        />
      </ColorPickerInput>
      <InputGroupAddon align="inline-end">
        <PercentIcon aria-hidden />
      </InputGroupAddon>
    </InputGroup>
    <ColorPickerContent>
      <ColorPickerArea showDots>
        <ColorPickerAreaThumb />
      </ColorPickerArea>
      <ColorPickerView format="hsla">
        <ColorPickerSlider channel="hue" />
        <ColorPickerSlider channel="saturation" />
        <ColorPickerSlider channel="lightness" />
        <ColorPickerSlider channel="alpha">
          <ColorPickerTransparencyGrid />
        </ColorPickerSlider>
      </ColorPickerView>
    </ColorPickerContent>
  </ColorPicker>
);

export default Example;

```

## Example: input-controlled

```tsx
"use client";

import React from "react";
import {
  ColorPicker,
  ColorPickerInput,
  parseColor,
} from "@/components/ui/color-picker";
import { Input } from "@/components/ui/input";

const Example = () => {
  const [value, setValue] = React.useState("#eb5e41");

  return (
    <div className="flex w-full max-w-64 flex-col gap-4">
      <ColorPicker
        onValueChange={({ valueAsString }) => setValue(valueAsString)}
        value={value}
      >
        <ColorPickerInput asChild>
          <Input />
        </ColorPickerInput>
      </ColorPicker>

      <p className="text-center text-muted-foreground text-sm">
        {parseColor(value).toString("hex")}
      </p>
    </div>
  );
};

export default Example;

```

## Example: input-disabled

```tsx
import {
  ColorPicker,
  ColorPickerInput,
} from "@/components/ui/color-picker";
import { Input } from "@/components/ui/input";

const Example = () => (
  <ColorPicker className="w-full max-w-64" defaultValue="#eb5e41" disabled>
    <ColorPickerInput asChild>
      <Input placeholder="#EB5E41" />
    </ColorPickerInput>
  </ColorPicker>
);

export default Example;

```

## Example: input-invalid

```tsx
import {
  ColorPicker,
  ColorPickerInput,
} from "@/components/ui/color-picker";
import {
  Field,
  FieldError,
  FieldLabel,
} from "@/components/ui/field";
import { Input } from "@/components/ui/input";

const Example = () => (
  <Field className="w-full max-w-64" invalid>
    <FieldLabel>Color</FieldLabel>
    <ColorPicker>
      <ColorPickerInput asChild>
        <Input placeholder="#EB5E41" />
      </ColorPickerInput>
    </ColorPicker>
    <FieldError>Please enter a valid hex color</FieldError>
  </Field>
);

export default Example;

```

## Example: input-with-popover

```tsx
import {
  ColorPicker,
  ColorPickerArea,
  ColorPickerAreaThumb,
  ColorPickerContent,
  ColorPickerInput,
  ColorPickerSlider,
  ColorPickerSwatchPreview,
  ColorPickerTrigger,
  ColorPickerView,
} from "@/components/ui/color-picker";
import {
  InputGroup,
  InputGroupAddon,
  InputGroupInput,
} from "@/components/ui/input-group";

const Example = () => (
  <ColorPicker className="w-full max-w-64" defaultValue="#eb5e41" format="hsla">
    <InputGroup>
      <ColorPickerTrigger asChild>
        <InputGroupAddon>
          <ColorPickerSwatchPreview />
        </InputGroupAddon>
      </ColorPickerTrigger>
      <ColorPickerInput asChild>
        <InputGroupInput />
      </ColorPickerInput>
    </InputGroup>

    <ColorPickerContent>
      <ColorPickerArea>
        <ColorPickerAreaThumb />
      </ColorPickerArea>
      <ColorPickerView format="hsla">
        <ColorPickerSlider channel="hue" />
      </ColorPickerView>
    </ColorPickerContent>
  </ColorPicker>
);

export default Example;

```

## Example: input-with-swatch-preview

```tsx
import {
  ColorPicker,
  ColorPickerInput,
  ColorPickerSwatchPreview,
} from "@/components/ui/color-picker";
import {
  InputGroup,
  InputGroupAddon,
  InputGroupInput,
} from "@/components/ui/input-group";

const Example = () => (
  <ColorPicker className="w-full max-w-64" defaultValue="#eb5e41">
    <InputGroup>
      <InputGroupAddon align="inline-start">
        <ColorPickerSwatchPreview />
      </InputGroupAddon>
      <ColorPickerInput asChild>
        <InputGroupInput />
      </ColorPickerInput>
    </InputGroup>
  </ColorPicker>
);

export default Example;

```

## Example: popover-disabled

```tsx
import { Button } from "@/components/ui/button";
import {
  ColorPicker,
  ColorPickerArea,
  ColorPickerContent,
  ColorPickerSwatchPreview,
  ColorPickerTrigger,
} from "@/components/ui/color-picker";

const Example = () => (
  <ColorPicker className="w-full max-w-64" defaultValue="#eb5e41" disabled>
    <ColorPickerTrigger asChild>
      <Button size="lg" variant="ghost">
        <ColorPickerSwatchPreview className="size-6" />
        Pick as color
      </Button>
    </ColorPickerTrigger>
    <ColorPickerContent>
      <ColorPickerArea />
    </ColorPickerContent>
  </ColorPicker>
);

export default Example;

```

## Example: popover-sliders-only

```tsx
"use client";

import { Button } from "@/components/ui/button";
import {
  ColorPicker,
  ColorPickerContent,
  ColorPickerSlider,
  ColorPickerSwatchPreview,
  ColorPickerTransparencyGrid,
  ColorPickerTrigger,
  ColorPickerView,
} from "@/components/ui/color-picker";
import { Field, FieldLabel } from "@/components/ui/field";

const Example = () => (
  <ColorPicker className="w-full max-w-64" defaultValue="#eb5e41" format="hsla">
    <ColorPickerTrigger asChild>
      <Button size="lg" variant="ghost">
        <ColorPickerSwatchPreview className="size-6" />
        Pick a color
      </Button>
    </ColorPickerTrigger>
    <ColorPickerContent>
      <ColorPickerView format="hsla">
        <div className="flex flex-col gap-4">
          <Field>
            <FieldLabel>Hue</FieldLabel>
            <ColorPickerSlider channel="hue" />
          </Field>
          <Field>
            <FieldLabel>Saturation</FieldLabel>
            <ColorPickerSlider channel="saturation" />
          </Field>
          <Field>
            <FieldLabel>Lightness</FieldLabel>
            <ColorPickerSlider channel="lightness" />
          </Field>
          <Field>
            <FieldLabel>Alpha</FieldLabel>
            <ColorPickerSlider channel="alpha">
              <ColorPickerTransparencyGrid />
            </ColorPickerSlider>
          </Field>
        </div>
      </ColorPickerView>
    </ColorPickerContent>
  </ColorPicker>
);

export default Example;

```

## Example: popover-with-channel-editing

```tsx
import { Button } from "@/components/ui/button";
import {
  ColorPicker,
  ColorPickerArea,
  ColorPickerAreaThumb,
  ColorPickerContent,
  ColorPickerInput,
  ColorPickerSlider,
  ColorPickerSwatchPreview,
  ColorPickerTrigger,
} from "@/components/ui/color-picker";
import { Input } from "@/components/ui/input";

const Example = () => {
  return (
    <ColorPicker className="w-full max-w-64" format="rgba">
      <ColorPickerTrigger asChild>
        <Button size="lg" variant="ghost">
          <ColorPickerSwatchPreview className="size-6" />
          Pick a color
        </Button>
      </ColorPickerTrigger>
      <ColorPickerContent>
        <ColorPickerArea>
          <ColorPickerAreaThumb />
        </ColorPickerArea>
        <ColorPickerSlider channel="hue" />
        <div className="grid grid-cols-3 gap-2">
          <ColorPickerInput asChild channel="red">
            <Input />
          </ColorPickerInput>
          <ColorPickerInput asChild channel="green">
            <Input />
          </ColorPickerInput>
          <ColorPickerInput asChild channel="blue">
            <Input />
          </ColorPickerInput>
        </div>
      </ColorPickerContent>
    </ColorPicker>
  );
};

export default Example;

```

## Example: popover-with-swatch-picker

```tsx
"use client";

import { Button } from "@/components/ui/button";
import {
  ColorPicker,
  ColorPickerArea,
  ColorPickerAreaThumb,
  ColorPickerContent,
  ColorPickerSlider,
  ColorPickerSwatch,
  ColorPickerSwatchGroup,
  ColorPickerSwatchPreview,
  ColorPickerSwatchTrigger,
  ColorPickerTrigger,
  ColorPickerView,
} from "@/components/ui/color-picker";

const Example = () => (
  <ColorPicker className="w-full max-w-64" defaultValue="#eb5e41" format="hsla">
    <ColorPickerTrigger asChild>
      <Button size="lg" variant="ghost">
        <ColorPickerSwatchPreview className="size-6" />
        Pick a color
      </Button>
    </ColorPickerTrigger>
    <ColorPickerContent>
      <ColorPickerArea>
        <ColorPickerAreaThumb />
      </ColorPickerArea>
      <ColorPickerView format="hsla">
        <ColorPickerSlider channel="hue" />
      </ColorPickerView>
      <ColorPickerSwatchGroup>
        {swatches.map((color) => (
          <ColorPickerSwatchTrigger
            className="size-4"
            key={color}
            value={color}
          >
            <ColorPickerSwatch value={color} />
          </ColorPickerSwatchTrigger>
        ))}
      </ColorPickerSwatchGroup>
    </ColorPickerContent>
  </ColorPicker>
);

const swatches = [
  "#ef4444",
  "#f97316",
  "#eab308",
  "#22c55e",
  "#06b6d4",
  "#3b82f6",
  "#8b5cf6",
  "#ec4899",
  "#f43f5e",
];

export default Example;

```

## Example: slider-alpha-channel

```tsx
import {
  ColorPicker,
  ColorPickerSlider,
  ColorPickerTransparencyGrid,
  ColorPickerView,
} from "@/components/ui/color-picker";

const Example = () => (
  <ColorPicker
    className="w-full max-w-64"
    defaultValue="hsla(0, 100%, 50%, 0.5)"
    format="rgba"
    inline
  >
    <ColorPickerView format="rgba">
      <ColorPickerSlider channel="alpha">
        <ColorPickerTransparencyGrid />
      </ColorPickerSlider>
    </ColorPickerView>
  </ColorPicker>
);

export default Example;

```

## Example: slider-controlled

```tsx
"use client";

import React from "react";
import {
  ColorPicker,
  ColorPickerSlider,
  ColorPickerView,
} from "@/components/ui/color-picker";

const Example = () => {
  const [color, setColor] = React.useState("rgba(82, 65, 235, 1)");

  return (
    <div className="flex w-full max-w-64 flex-col gap-4">
      <ColorPicker
        className="w-full"
        format="hsla"
        inline
        onValueChange={(e) => setColor(e.valueAsString)}
        value={color}
      >
        <ColorPickerView format="hsla">
          <ColorPickerSlider channel="hue" />
        </ColorPickerView>
      </ColorPicker>
      <p className="text-center text-muted-foreground text-sm">{color}</p>
    </div>
  );
};

export default Example;

```

## Example: slider-disabled

```tsx
import {
  ColorPicker,
  ColorPickerSlider,
  ColorPickerView,
} from "@/components/ui/color-picker";

const Example = () => (
  <ColorPicker
    className="w-full max-w-64"
    defaultValue="#EB5E41"
    disabled
    format="hsla"
    inline
  >
    <ColorPickerView format="hsla">
      <ColorPickerSlider channel="hue" />
    </ColorPickerView>
  </ColorPicker>
);

export default Example;

```

## Example: slider-hsba-channels

```tsx
import {
  ColorPicker,
  ColorPickerSlider,
  ColorPickerView,
} from "@/components/ui/color-picker";

const Example = () => (
  <ColorPicker
    className="w-full max-w-64"
    defaultValue="#0485F7"
    format="hsba"
    inline
  >
    <ColorPickerView format="hsba">
      <div className="flex w-full flex-col gap-4">
        <ColorPickerSlider channel="hue" />
        <ColorPickerSlider channel="saturation" />
        <ColorPickerSlider channel="brightness" />
      </div>
    </ColorPickerView>
  </ColorPicker>
);

export default Example;

```

## Example: slider-hsl-channels

```tsx
import {
  ColorPicker,
  ColorPickerSlider,
  ColorPickerView,
} from "@/components/ui/color-picker";

const Example = () => (
  <ColorPicker
    className="w-full max-w-64"
    defaultValue="hsla(136, 69%, 50%, 1)"
    format="hsla"
    inline
  >
    <ColorPickerView format="hsla">
      <div className="flex w-full flex-col gap-4">
        <ColorPickerSlider channel="hue" />
        <ColorPickerSlider channel="saturation" />
        <ColorPickerSlider channel="lightness" />
      </div>
    </ColorPickerView>
  </ColorPicker>
);

export default Example;

```

## Example: slider-rgb-channels

```tsx
import {
  ColorPicker,
  ColorPickerSlider,
  ColorPickerView,
} from "@/components/ui/color-picker";

const Example = () => (
  <ColorPicker
    className="w-full max-w-64"
    defaultValue="#ff6432"
    format="rgba"
    inline
  >
    <ColorPickerView format="rgba">
      <div className="flex w-full flex-col gap-4">
        <ColorPickerSlider channel="red" />
        <ColorPickerSlider channel="green" />
        <ColorPickerSlider channel="blue" />
      </div>
    </ColorPickerView>
  </ColorPicker>
);

export default Example;

```

## Example: slider-vertical

```tsx
import {
  ColorPicker,
  ColorPickerSlider,
  ColorPickerView,
} from "@/components/ui/color-picker";

const Example = () => (
  <ColorPicker
    className="h-56 justify-between"
    defaultValue="hsl(0, 100%, 50%)"
    format="hsla"
    inline
  >
    <ColorPickerView format="hsla">
      <div className="flex flex-col gap-4">
        <ColorPickerSlider channel="hue" orientation="vertical" />
      </div>
    </ColorPickerView>
  </ColorPicker>
);

export default Example;

```

## Example: swatch-picker-controlled

```tsx
"use client";

import React from "react";
import {
  ColorPicker,
  ColorPickerSwatch,
  ColorPickerSwatchGroup,
  ColorPickerSwatchIndicator,
  ColorPickerSwatchTrigger,
  parseColor,
} from "@/components/ui/color-picker";

const swatches = ["#0485F7", "#EF4444", "#F59E0B", "#10B981"];

const Example = () => {
  const [value, setValue] = React.useState("#0485F7");

  return (
    <div className="flex w-full max-w-64 flex-col items-center gap-4">
      <ColorPicker
        inline
        onValueChange={({ valueAsString }) => setValue(valueAsString)}
        value={value}
      >
        <ColorPickerSwatchGroup>
          {swatches.map((color) => (
            <ColorPickerSwatchTrigger key={color} value={color}>
              <ColorPickerSwatch value={color}>
                <ColorPickerSwatchIndicator />
              </ColorPickerSwatch>
            </ColorPickerSwatchTrigger>
          ))}
        </ColorPickerSwatchGroup>
      </ColorPicker>

      <p className="text-center text-muted-foreground text-sm">
        {parseColor(value).toString("hex")}
      </p>
    </div>
  );
};

export default Example;

```

## Example: swatch-picker-custom-indicator

```tsx
"use client";

import { SparkleIcon } from "lucide-react";
import {
  ColorPicker,
  ColorPickerSwatch,
  ColorPickerSwatchGroup,
  ColorPickerSwatchIndicator,
  ColorPickerSwatchTrigger,
} from "@/components/ui/color-picker";

const swatches = ["#0485F7", "#EF4444", "#F59E0B", "#10B981"];

const Example = () => (
  <ColorPicker className="w-full max-w-64" inline>
    <ColorPickerSwatchGroup>
      {swatches.map((color) => (
        <ColorPickerSwatchTrigger key={color} value={color}>
          <ColorPickerSwatch value={color}>
            <ColorPickerSwatchIndicator>
              <SparkleIcon />
            </ColorPickerSwatchIndicator>
          </ColorPickerSwatch>
        </ColorPickerSwatchTrigger>
      ))}
    </ColorPickerSwatchGroup>
  </ColorPicker>
);

export default Example;

```

## Example: swatch-picker-custom-radius

```tsx
import {
  ColorPicker,
  ColorPickerSwatch,
  ColorPickerSwatchGroup,
  ColorPickerSwatchIndicator,
  ColorPickerSwatchTrigger,
} from "@/components/ui/color-picker";

const Example = () => (
  <ColorPicker className="w-full max-w-64" inline>
    <ColorPickerSwatchGroup>
      <ColorPickerSwatchTrigger className="rounded-sm" value="#0485F7">
        <ColorPickerSwatch value="#0485F7">
          <ColorPickerSwatchIndicator />
        </ColorPickerSwatch>
      </ColorPickerSwatchTrigger>
    </ColorPickerSwatchGroup>
    <ColorPickerSwatchGroup>
      <ColorPickerSwatchTrigger className="rounded-md" value="#EF4444">
        <ColorPickerSwatch value="#EF4444">
          <ColorPickerSwatchIndicator />
        </ColorPickerSwatch>
      </ColorPickerSwatchTrigger>
    </ColorPickerSwatchGroup>
    <ColorPickerSwatchGroup>
      <ColorPickerSwatchTrigger className="rounded-lg" value="#F59E0B">
        <ColorPickerSwatch value="#F59E0B">
          <ColorPickerSwatchIndicator />
        </ColorPickerSwatch>
      </ColorPickerSwatchTrigger>
    </ColorPickerSwatchGroup>
    <ColorPickerSwatchGroup>
      <ColorPickerSwatchTrigger className="rounded-xl" value="#10B981">
        <ColorPickerSwatch value="#10B981">
          <ColorPickerSwatchIndicator />
        </ColorPickerSwatch>
      </ColorPickerSwatchTrigger>
    </ColorPickerSwatchGroup>
  </ColorPicker>
);

export default Example;

```

## Example: swatch-picker-custom-size

```tsx
import {
  ColorPicker,
  ColorPickerSwatch,
  ColorPickerSwatchGroup,
  ColorPickerSwatchIndicator,
  ColorPickerSwatchTrigger,
} from "@/components/ui/color-picker";

const Example = () => (
  <ColorPicker className="w-full flex-wrap justify-center gap-4" inline>
    <ColorPickerSwatchGroup>
      <ColorPickerSwatchTrigger className="size-4" value="#0485F7">
        <ColorPickerSwatch value="#0485F7" />
      </ColorPickerSwatchTrigger>
      <ColorPickerSwatchTrigger className="size-6" value="#EF4444">
        <ColorPickerSwatch value="#EF4444">
          <ColorPickerSwatchIndicator />
        </ColorPickerSwatch>
      </ColorPickerSwatchTrigger>
      <ColorPickerSwatchTrigger className="size-8" value="#F59E0B">
        <ColorPickerSwatch value="#F59E0B">
          <ColorPickerSwatchIndicator />
        </ColorPickerSwatch>
      </ColorPickerSwatchTrigger>
      <ColorPickerSwatchTrigger className="size-10" value="#10B981">
        <ColorPickerSwatch value="#10B981">
          <ColorPickerSwatchIndicator />
        </ColorPickerSwatch>
      </ColorPickerSwatchTrigger>
    </ColorPickerSwatchGroup>
  </ColorPicker>
);

export default Example;

```

## Example: swatch-picker-disabled

```tsx
import {
  ColorPicker,
  ColorPickerSwatch,
  ColorPickerSwatchGroup,
  ColorPickerSwatchIndicator,
  ColorPickerSwatchTrigger,
} from "@/components/ui/color-picker";

const swatches = ["#0485F7", "#EF4444", "#F59E0B", "#10B981"];

const Example = () => (
  <ColorPicker className="w-full max-w-64" disabled>
    <ColorPickerSwatchGroup>
      {swatches.map((color) => (
        <ColorPickerSwatchTrigger key={color} value={color}>
          <ColorPickerSwatch value={color}>
            <ColorPickerSwatchIndicator />
          </ColorPickerSwatch>
        </ColorPickerSwatchTrigger>
      ))}
    </ColorPickerSwatchGroup>
  </ColorPicker>
);

export default Example;

```

## Example: swatch-picker

```tsx
import {
  ColorPicker,
  ColorPickerSwatch,
  ColorPickerSwatchGroup,
  ColorPickerSwatchIndicator,
  ColorPickerSwatchTrigger,
} from "@/components/ui/color-picker";

const swatches = ["#0485F7", "#EF4444", "#F59E0B", "#10B981"];

const Example = () => (
  <ColorPicker className="w-full max-w-64" inline>
    <ColorPickerSwatchGroup>
      {swatches.map((color) => (
        <ColorPickerSwatchTrigger key={color} value={color}>
          <ColorPickerSwatch value={color}>
            <ColorPickerSwatchIndicator />
          </ColorPickerSwatch>
        </ColorPickerSwatchTrigger>
      ))}
    </ColorPickerSwatchGroup>
  </ColorPicker>
);

export default Example;

```

## Example: with-field

```tsx
import {
  ColorPicker,
  ColorPickerInput,
} from "@/components/ui/color-picker";
import {
  Field,
  FieldHelper,
  FieldLabel,
} from "@/components/ui/field";
import { Input } from "@/components/ui/input";

const Example = () => (
  <ColorPicker className="w-full max-w-64" defaultValue="#eb5e41">
    <Field>
      <FieldLabel>Color</FieldLabel>
      <ColorPickerInput asChild>
        <Input />
      </ColorPickerInput>
      <FieldHelper>Enter your brand's primary color</FieldHelper>
    </Field>
  </ColorPicker>
);

export default Example;

```

# Combobox - Examples and Patterns

Examples for Combobox component.

## Example: autohighlight

```tsx
"use client";

import { useFilter, useListCollection } from "@ark-ui/react";
import {
  Combobox,
  ComboboxContent,
  ComboboxInput,
  ComboboxItem,
  ComboboxList,
} from "@/components/ui/combobox";

const Example = () => {
  const { contains } = useFilter({ sensitivity: "base" });

  const { collection, filter } = useListCollection({
    initialItems,
    filter: contains,
  });

  return (
    <Combobox
      className="w-64"
      collection={collection}
      inputBehavior="autohighlight"
      onInputValueChange={({ inputValue }) => filter(inputValue)}
    >
      <ComboboxInput placeholder="Type to highlight..." />
      <ComboboxContent>
        <ComboboxList>
          {collection.items.map((item) => (
            <ComboboxItem item={item} key={item.value}>
              {item.label}
            </ComboboxItem>
          ))}
        </ComboboxList>
      </ComboboxContent>
    </Combobox>
  );
};

const initialItems = [
  { label: "Apple", value: "apple" },
  { label: "Banana", value: "banana" },
  { label: "Cherry", value: "cherry" },
  { label: "Date", value: "date" },
  { label: "Elderberry", value: "elderberry" },
];

export default Example;

```

## Example: controlled

```tsx
"use client";

import { useFilter, useListCollection } from "@ark-ui/react";
import React from "react";
import {
  Combobox,
  ComboboxContent,
  ComboboxInput,
  ComboboxItem,
  ComboboxList,
} from "@/components/ui/combobox";

const Example = () => {
  const [value, setValue] = React.useState<string | undefined>("banana");

  const { contains } = useFilter({ sensitivity: "base" });

  const { collection, filter } = useListCollection({
    initialItems,
    filter: contains,
  });

  return (
    <div className="flex w-full max-w-64 flex-col gap-4">
      <Combobox
        className="w-full"
        collection={collection}
        inputValue={value}
        onInputValueChange={({ inputValue }) => filter(inputValue)}
        onValueChange={({ value }) => setValue(value[0])}
      >
        <ComboboxInput placeholder="Select a fruit..." />
        <ComboboxContent>
          <ComboboxList>
            {collection.items.map((item) => (
              <ComboboxItem item={item} key={item.value}>
                {item.label}
              </ComboboxItem>
            ))}
          </ComboboxList>
        </ComboboxContent>
      </Combobox>
      <p className="text-center text-muted-foreground text-sm">
        Selected: {value ?? "(none)"}
      </p>
    </div>
  );
};

const initialItems = [
  { label: "Apple", value: "apple" },
  { label: "Banana", value: "banana" },
  { label: "Cherry", value: "cherry" },
  { label: "Date", value: "date" },
];

export default Example;

```

## Example: default

```tsx
"use client";

import { useFilter, useListCollection } from "@ark-ui/react";
import {
  Combobox,
  ComboboxContent,
  ComboboxInput,
  ComboboxItem,
  ComboboxList,
} from "@/components/ui/combobox";

const ComboboxDemo = () => {
  const { contains } = useFilter({ sensitivity: "base" });

  const { collection, filter } = useListCollection({
    initialItems,
    filter: contains,
  });

  return (
    <Combobox
      className="max-w-xs"
      collection={collection}
      onInputValueChange={({ inputValue }) => filter(inputValue)}
    >
      <ComboboxInput placeholder="Select an option" />
      <ComboboxContent>
        <ComboboxList>
          {collection.items.map((item) => (
            <ComboboxItem item={item} key={item.value}>
              {item.label}
            </ComboboxItem>
          ))}
        </ComboboxList>
      </ComboboxContent>
    </Combobox>
  );
};

const initialItems = [
  { label: "Apple", value: "apple" },
  { label: "Banana", value: "banana" },
  { label: "Cherry", value: "cherry" },
  { label: "Date", value: "date" },
];

export default ComboboxDemo;

```

## Example: disabled

```tsx
"use client";

import { useFilter, useListCollection } from "@ark-ui/react";
import {
  Combobox,
  ComboboxContent,
  ComboboxInput,
  ComboboxItem,
  ComboboxList,
} from "@/components/ui/combobox";

const Example = () => {
  const { contains } = useFilter({ sensitivity: "base" });

  const { collection, filter } = useListCollection({
    initialItems,
    filter: contains,
  });

  return (
    <Combobox
      className="w-64"
      collection={collection}
      disabled
      onInputValueChange={({ inputValue }) => filter(inputValue)}
    >
      <ComboboxInput placeholder="Select a fruit..." />
      <ComboboxContent>
        <ComboboxList>
          {collection.items.map((item) => (
            <ComboboxItem item={item} key={item.value}>
              {item.label}
            </ComboboxItem>
          ))}
        </ComboboxList>
      </ComboboxContent>
    </Combobox>
  );
};

const initialItems = [
  { label: "Apple", value: "apple" },
  { label: "Banana", value: "banana" },
  { label: "Cherry", value: "cherry" },
];

export default Example;

```

## Example: group

```tsx
"use client";

import { useFilter, useListCollection } from "@ark-ui/react";
import {
  Combobox,
  ComboboxContent,
  ComboboxGroup,
  ComboboxInput,
  ComboboxItem,
  ComboboxList,
} from "@/components/ui/combobox";

const Example = () => {
  const { contains } = useFilter({ sensitivity: "base" });

  const { collection, filter } = useListCollection({
    filter: contains,
    groupBy: (item) => item.continent,
    initialItems,
  });

  return (
    <Combobox
      className="w-64"
      collection={collection}
      onInputValueChange={({ inputValue }) => filter(inputValue)}
    >
      <ComboboxInput placeholder="Select a timezone" />
      <ComboboxContent className="w-60">
        <ComboboxList>
          {collection.group().map(([continent, group]) => (
            <ComboboxGroup heading={continent} key={continent}>
              {group.map((item) => (
                <ComboboxItem item={item} key={item.value}>
                  {item.label}
                </ComboboxItem>
              ))}
            </ComboboxGroup>
          ))}
        </ComboboxList>
      </ComboboxContent>
    </Combobox>
  );
};

const initialItems = [
  { label: "Canada", value: "ca", continent: "North America" },
  { label: "United States", value: "us", continent: "North America" },
  { label: "Mexico", value: "mx", continent: "North America" },
  { label: "United Kingdom", value: "uk", continent: "Europe" },
  { label: "Germany", value: "de", continent: "Europe" },
  { label: "France", value: "fr", continent: "Europe" },
  { label: "Japan", value: "jp", continent: "Asia" },
  { label: "South Korea", value: "kr", continent: "Asia" },
  { label: "China", value: "cn", continent: "Asia" },
];

export default Example;

```

## Example: invalid

```tsx
"use client";

import { useFilter, useListCollection } from "@ark-ui/react";
import {
  Combobox,
  ComboboxContent,
  ComboboxInput,
  ComboboxItem,
  ComboboxList,
} from "@/components/ui/combobox";

const Example = () => {
  const { contains } = useFilter({ sensitivity: "base" });

  const { collection, filter } = useListCollection({
    initialItems,
    filter: contains,
  });

  return (
    <Combobox
      className="w-64"
      collection={collection}
      invalid
      onInputValueChange={({ inputValue }) => filter(inputValue)}
    >
      <ComboboxInput placeholder="Select a fruit..." />
      <ComboboxContent>
        <ComboboxList>
          {collection.items.map((item) => (
            <ComboboxItem item={item} key={item.value}>
              {item.label}
            </ComboboxItem>
          ))}
        </ComboboxList>
      </ComboboxContent>
    </Combobox>
  );
};

const initialItems = [
  { label: "Apple", value: "apple" },
  { label: "Banana", value: "banana" },
  { label: "Cherry", value: "cherry" },
];

export default Example;

```

## Example: multiple

```tsx
"use client";

import { useFilter, useListCollection } from "@ark-ui/react";
import {
  Combobox,
  ComboboxContent,
  ComboboxInput,
  ComboboxItem,
  ComboboxList,
} from "@/components/ui/combobox";

const Example = () => {
  const { contains } = useFilter({ sensitivity: "base" });

  const { collection, filter } = useListCollection({
    initialItems,
    filter: contains,
  });

  return (
    <Combobox
      className="w-64"
      collection={collection}
      multiple
      onInputValueChange={({ inputValue }) => filter(inputValue)}
    >
      <ComboboxInput placeholder="Select frameworks..." />
      <ComboboxContent>
        <ComboboxList>
          {collection.items.map((item) => (
            <ComboboxItem item={item} key={item.value}>
              {item.label}
            </ComboboxItem>
          ))}
        </ComboboxList>
      </ComboboxContent>
    </Combobox>
  );
};

const initialItems = [
  { label: "React", value: "react" },
  { label: "Vue", value: "vue" },
  { label: "Svelte", value: "svelte" },
  { label: "Solid", value: "solid" },
];

export default Example;

```

## Example: size-lg

```tsx
"use client";

import { useFilter, useListCollection } from "@ark-ui/react";
import {
  Combobox,
  ComboboxContent,
  ComboboxInput,
  ComboboxItem,
  ComboboxList,
} from "@/components/ui/combobox";

const Example = () => {
  const { contains } = useFilter({ sensitivity: "base" });

  const { collection, filter } = useListCollection({
    initialItems,
    filter: contains,
  });

  return (
    <Combobox
      className="w-64"
      collection={collection}
      onInputValueChange={({ inputValue }) => filter(inputValue)}
    >
      <ComboboxInput size="lg" />
      <ComboboxContent>
        <ComboboxList>
          {collection.items.map((item) => (
            <ComboboxItem item={item} key={item.value}>
              {item.label}
            </ComboboxItem>
          ))}
        </ComboboxList>
      </ComboboxContent>
    </Combobox>
  );
};

const initialItems = [
  { label: "Apple", value: "apple" },
  { label: "Banana", value: "banana" },
  { label: "Cherry", value: "cherry" },
  { label: "Date", value: "date" },
];

export default Example;

```

## Example: size-md

```tsx
"use client";

import { useFilter, useListCollection } from "@ark-ui/react";
import {
  Combobox,
  ComboboxContent,
  ComboboxInput,
  ComboboxItem,
  ComboboxList,
} from "@/components/ui/combobox";

const Example = () => {
  const { contains } = useFilter({ sensitivity: "base" });

  const { collection, filter } = useListCollection({
    initialItems,
    filter: contains,
  });

  return (
    <Combobox
      className="w-64"
      collection={collection}
      onInputValueChange={({ inputValue }) => filter(inputValue)}
    >
      <ComboboxInput size="md" />
      <ComboboxContent>
        <ComboboxList>
          {collection.items.map((item) => (
            <ComboboxItem item={item} key={item.value}>
              {item.label}
            </ComboboxItem>
          ))}
        </ComboboxList>
      </ComboboxContent>
    </Combobox>
  );
};

const initialItems = [
  { label: "Apple", value: "apple" },
  { label: "Banana", value: "banana" },
  { label: "Cherry", value: "cherry" },
  { label: "Date", value: "date" },
];

export default Example;

```

## Example: size-sm

```tsx
"use client";

import { useFilter, useListCollection } from "@ark-ui/react";
import {
  Combobox,
  ComboboxContent,
  ComboboxInput,
  ComboboxItem,
  ComboboxList,
} from "@/components/ui/combobox";

const Example = () => {
  const { contains } = useFilter({ sensitivity: "base" });

  const { collection, filter } = useListCollection({
    initialItems,
    filter: contains,
  });

  return (
    <Combobox
      className="w-64"
      collection={collection}
      onInputValueChange={({ inputValue }) => filter(inputValue)}
    >
      <ComboboxInput size="sm" />
      <ComboboxContent>
        <ComboboxList>
          {collection.items.map((item) => (
            <ComboboxItem item={item} key={item.value}>
              {item.label}
            </ComboboxItem>
          ))}
        </ComboboxList>
      </ComboboxContent>
    </Combobox>
  );
};

const initialItems = [
  { label: "Apple", value: "apple" },
  { label: "Banana", value: "banana" },
  { label: "Cherry", value: "cherry" },
  { label: "Date", value: "date" },
];

export default Example;

```

## Example: with-clear-button

```tsx
"use client";

import { useFilter, useListCollection } from "@ark-ui/react";
import {
  Combobox,
  ComboboxContent,
  ComboboxInput,
  ComboboxItem,
  ComboboxList,
} from "@/components/ui/combobox";

const Example = () => {
  const { contains } = useFilter({ sensitivity: "base" });

  const { collection, filter } = useListCollection({
    initialItems,
    filter: contains,
  });

  return (
    <Combobox
      className="w-64"
      collection={collection}
      onInputValueChange={({ inputValue }) => filter(inputValue)}
    >
      <ComboboxInput placeholder="Select a fruit..." showClear />
      <ComboboxContent>
        <ComboboxList>
          {collection.items.map((item) => (
            <ComboboxItem item={item} key={item.value}>
              {item.label}
            </ComboboxItem>
          ))}
        </ComboboxList>
      </ComboboxContent>
    </Combobox>
  );
};

const initialItems = [
  { label: "Apple", value: "apple" },
  { label: "Banana", value: "banana" },
  { label: "Cherry", value: "cherry" },
];

export default Example;

```

## Example: with-field

```tsx
"use client";

import { useFilter, useListCollection } from "@ark-ui/react";
import {
  Combobox,
  ComboboxContent,
  ComboboxInput,
  ComboboxItem,
  ComboboxList,
} from "@/components/ui/combobox";
import {
  Field,
  FieldError,
  FieldHelper,
  FieldLabel,
} from "@/components/ui/field";

const Example = () => {
  const { contains } = useFilter({ sensitivity: "base" });

  const { collection, filter } = useListCollection({
    initialItems,
    filter: contains,
  });

  return (
    <Field className="w-64">
      <FieldLabel>Country</FieldLabel>
      <Combobox
        collection={collection}
        onInputValueChange={({ inputValue }) => filter(inputValue)}
        required
      >
        <ComboboxInput placeholder="Select a country..." />
        <ComboboxContent>
          <ComboboxList>
            {collection.items.map((item) => (
              <ComboboxItem item={item} key={item.value}>
                {item.label}
              </ComboboxItem>
            ))}
          </ComboboxList>
        </ComboboxContent>
      </Combobox>
      <FieldHelper>We'll use this for shipping estimates</FieldHelper>
      <FieldError>Please select a valid country</FieldError>
    </Field>
  );
};

const initialItems = [
  { label: "Brazil", value: "br" },
  { label: "Mexico", value: "mx" },
  { label: "Ireland", value: "ie" },
];

export default Example;

```

## Example: with-scroll

```tsx
"use client";

import { useFilter, useListCollection } from "@ark-ui/react";
import {
  Combobox,
  ComboboxContent,
  ComboboxInput,
  ComboboxItem,
  ComboboxList,
} from "@/components/ui/combobox";

const Example = () => {
  const { contains } = useFilter({ sensitivity: "base" });

  const { collection, filter } = useListCollection({
    filter: contains,
    initialItems,
  });

  return (
    <Combobox
      className="w-64"
      collection={collection}
      onInputValueChange={({ inputValue }) => filter(inputValue)}
    >
      <ComboboxInput placeholder="Search..." />
      <ComboboxContent className="max-h-60">
        <ComboboxList>
          {collection.items.map((item) => (
            <ComboboxItem item={item} key={item.value}>
              {item.label}
            </ComboboxItem>
          ))}
        </ComboboxList>
      </ComboboxContent>
    </Combobox>
  );
};

const initialItems = Array.from({ length: 30 }, (_, i) => ({
  label: `Option ${i + 1}`,
  value: `option-${i + 1}`,
}));

export default Example;

```

## Example: with-start-icon

```tsx
"use client";

import { useFilter, useListCollection } from "@ark-ui/react";
import { AppleIcon } from "lucide-react";
import {
  Combobox,
  ComboboxContent,
  ComboboxInput,
  ComboboxItem,
  ComboboxList,
} from "@/components/ui/combobox";
import { InputGroupAddon } from "@/components/ui/input-group";

const Example = () => {
  const { contains } = useFilter({ sensitivity: "base" });

  const { collection, filter } = useListCollection({
    filter: contains,
    initialItems,
  });

  return (
    <Combobox
      className="w-64"
      collection={collection}
      onInputValueChange={({ inputValue }) => filter(inputValue)}
    >
      <ComboboxInput placeholder="Search fruits...">
        <InputGroupAddon align="inline-start">
          <AppleIcon />
        </InputGroupAddon>
      </ComboboxInput>
      <ComboboxContent>
        <ComboboxList>
          {collection.items.map((item) => (
            <ComboboxItem item={item} key={item.value}>
              {item.label}
            </ComboboxItem>
          ))}
        </ComboboxList>
      </ComboboxContent>
    </Combobox>
  );
};

const initialItems = [
  { label: "Apple", value: "apple" },
  { label: "Banana", value: "banana" },
  { label: "Cherry", value: "cherry" },
];

export default Example;

```

# Command - Examples and Patterns

Examples for Command component.

## Example: default

```tsx
"use client";

import { useFilter, useListCollection } from "@ark-ui/react";
import {
  Command,
  CommandContent,
  CommandEmpty,
  CommandGroup,
  CommandInput,
  CommandItem,
  CommandList,
  CommandSeparator,
  CommandShortcut,
} from "@/components/ui/command";

const CommandExample = () => {
  const { contains } = useFilter({ sensitivity: "base" });

  const { collection, filter } = useListCollection({
    initialItems,
    filter: contains,
    groupBy: (item) => item.group,
  });

  return (
    <Command
      className="w-full max-w-md"
      collection={collection}
      onInputValueChange={({ inputValue }) => filter(inputValue)}
    >
      <CommandInput />
      <CommandContent>
        <CommandEmpty />
        <CommandList>
          {collection.group().map(([group, items], index) => (
            <CommandGroup heading={group} key={group}>
              {items.map((item) => (
                <CommandItem item={item} key={item.value}>
                  {item.label}
                  <CommandShortcut>{item.shortcut}</CommandShortcut>
                </CommandItem>
              ))}
              {index < collection.group().length - 1 && <CommandSeparator />}
            </CommandGroup>
          ))}
        </CommandList>
      </CommandContent>
    </Command>
  );
};

const initialItems = [
  { label: "Linear", shortcut: "⌘L", value: "linear", group: "Suggestions" },
  { label: "Figma", shortcut: "⌘F", value: "figma", group: "Suggestions" },
  { label: "Slack", shortcut: "⌘S", value: "slack", group: "Suggestions" },
  { label: "YouTube", shortcut: "⌘Y", value: "youtube", group: "Suggestions" },
  { label: "Raycast", shortcut: "⌘R", value: "raycast", group: "Suggestions" },
  { label: "Settings", shortcut: "⌘,", value: "settings", group: "Settings" },
  { label: "Help", shortcut: "⌘?", value: "help", group: "Settings" },
  { label: "About", shortcut: "⌘I", value: "about", group: "Settings" },
  { label: "Feedback", shortcut: "⌘F", value: "feedback", group: "Settings" },
  { label: "Support", shortcut: "⌘S", value: "support", group: "Settings" },
  { label: "Updates", shortcut: "⌘U", value: "updates", group: "Settings" },
  { label: "Logout", shortcut: "⌘L", value: "logout", group: "Settings" },
  { label: "Sign out", shortcut: "⌘O", value: "sign out", group: "Settings" },
  { label: "Sign in", shortcut: "⌘I", value: "sign in", group: "Settings" },
];

export default CommandExample;

```

## Example: dialog

```tsx
"use client";

import { useFilter, useListCollection } from "@ark-ui/react";
import { CornerDownLeftIcon } from "lucide-react";
import React from "react";
import { Button } from "@/components/ui/button";
import {
  Command,
  CommandContent,
  CommandDialog,
  CommandDialogContent,
  CommandDialogTrigger,
  CommandEmpty,
  CommandFooter,
  CommandGroup,
  CommandInput,
  CommandItem,
  CommandList,
  CommandShortcut,
} from "@/components/ui/command";
import { Kbd } from "@/components/ui/kbd";

const initialItems = [
  { label: "New File", shortcut: "⌘N", value: "new", group: "File" },
  { label: "Save", shortcut: "⌘S", value: "save", group: "File" },
  { label: "Open", shortcut: "⌘O", value: "open", group: "File" },
  { label: "Undo", shortcut: "⌘Z", value: "undo", group: "Edit" },
  { label: "Redo", shortcut: "⌘⇧Z", value: "redo", group: "Edit" },
  { label: "Cut", shortcut: "⌘X", value: "cut", group: "Edit" },
  { label: "Copy", shortcut: "⌘C", value: "copy", group: "Edit" },
];

const Example = () => {
  const [open, setOpen] = React.useState(false);
  const { contains } = useFilter({ sensitivity: "base" });

  const { collection, filter } = useListCollection({
    filter: contains,
    groupBy: (item) => item.group,
    initialItems,
  });

  return (
    <CommandDialog onOpenChange={({ open: o }) => setOpen(o)} open={open}>
      <CommandDialogTrigger asChild>
        <Button variant="outline">Open Command Palette</Button>
      </CommandDialogTrigger>
      <CommandDialogContent>
        <Command
          collection={collection}
          onInputValueChange={({ inputValue }) => filter(inputValue)}
          onValueChange={() => setOpen(false)}
        >
          <CommandInput placeholder="Search commands..." />
          <CommandContent>
            <CommandEmpty>No results found.</CommandEmpty>
            <CommandList>
              {collection.group().map(([group, items]) => (
                <CommandGroup heading={group} key={group}>
                  {items.map((item) => (
                    <CommandItem item={item} key={item.value}>
                      {item.label}
                      <CommandShortcut>{item.shortcut}</CommandShortcut>
                    </CommandItem>
                  ))}
                </CommandGroup>
              ))}
            </CommandList>
          </CommandContent>
          <CommandFooter>
            <div className="flex items-center gap-2">
              <Kbd variant="outline">
                <CornerDownLeftIcon className="size-3" />
              </Kbd>
              <span className="text-muted-foreground">To select</span>
            </div>
          </CommandFooter>
        </Command>
      </CommandDialogContent>
    </CommandDialog>
  );
};

export default Example;

```

## Example: groups

```tsx
"use client";

import { useFilter, useListCollection } from "@ark-ui/react";
import {
  Command,
  CommandContent,
  CommandEmpty,
  CommandGroup,
  CommandInput,
  CommandItem,
  CommandList,
} from "@/components/ui/command";

const initialItems = [
  { label: "Apple", value: "apple", group: "Fruit" },
  { label: "Banana", value: "banana", group: "Fruit" },
  { label: "Cherry", value: "cherry", group: "Fruit" },
  { label: "United States", value: "us", group: "Countries" },
  { label: "United Kingdom", value: "uk", group: "Countries" },
  { label: "Germany", value: "de", group: "Countries" },
];

const Example = () => {
  const { contains } = useFilter({ sensitivity: "base" });

  const { collection, filter } = useListCollection({
    filter: contains,
    groupBy: (item) => item.group,
    initialItems,
  });

  return (
    <Command
      className="w-full max-w-md"
      collection={collection}
      onInputValueChange={({ inputValue }) => filter(inputValue)}
    >
      <CommandInput placeholder="Search..." />
      <CommandContent>
        <CommandEmpty />
        <CommandList>
          {collection.group().map(([group, items]) => (
            <CommandGroup heading={group} key={group}>
              {items.map((item) => (
                <CommandItem item={item} key={item.value}>
                  {item.label}
                </CommandItem>
              ))}
            </CommandGroup>
          ))}
        </CommandList>
      </CommandContent>
    </Command>
  );
};

export default Example;

```

## Example: shortcuts

```tsx
"use client";

import { useFilter, useListCollection } from "@ark-ui/react";
import {
  Command,
  CommandContent,
  CommandEmpty,
  CommandInput,
  CommandItem,
  CommandList,
  CommandShortcut,
} from "@/components/ui/command";

const initialItems = [
  { label: "New File", shortcut: "⌘N", value: "new" },
  { label: "Save", shortcut: "⌘S", value: "save" },
  { label: "Copy", shortcut: "⌘C", value: "copy" },
  { label: "Paste", shortcut: "⌘V", value: "paste" },
  { label: "Undo", shortcut: "⌘Z", value: "undo" },
  { label: "Find", shortcut: "⌘F", value: "find" },
];

const Example = () => {
  const { contains } = useFilter({ sensitivity: "base" });

  const { collection, filter } = useListCollection({
    filter: contains,
    initialItems,
  });

  return (
    <Command
      className="w-full max-w-md"
      collection={collection}
      onInputValueChange={({ inputValue }) => filter(inputValue)}
    >
      <CommandInput placeholder="Search..." />
      <CommandContent>
        <CommandEmpty />
        <CommandList>
          {collection.items.map((item) => (
            <CommandItem item={item} key={item.value}>
              {item.label}
              <CommandShortcut>{item.shortcut}</CommandShortcut>
            </CommandItem>
          ))}
        </CommandList>
      </CommandContent>
    </Command>
  );
};

export default Example;

```

## Example: with-footer

```tsx
"use client";

import { useFilter, useListCollection } from "@ark-ui/react";
import { ArrowDownIcon, ArrowUpIcon, CornerDownLeftIcon } from "lucide-react";
import {
  Command,
  CommandContent,
  CommandEmpty,
  CommandFooter,
  CommandGroup,
  CommandInput,
  CommandItem,
  CommandList,
  CommandShortcut,
} from "@/components/ui/command";
import { Kbd } from "@/components/ui/kbd";

const initialItems = [
  { label: "Settings", shortcut: "⌘,", value: "settings", group: "App" },
  {
    label: "Keyboard Shortcuts",
    shortcut: "⌘K",
    value: "shortcuts",
    group: "App",
  },
  { label: "Help", shortcut: "⌘?", value: "help", group: "App" },
];

const Example = () => {
  const { contains } = useFilter({ sensitivity: "base" });

  const { collection, filter } = useListCollection({
    filter: contains,
    groupBy: (item) => item.group,
    initialItems,
  });

  return (
    <Command
      className="w-full max-w-md"
      collection={collection}
      onInputValueChange={({ inputValue }) => filter(inputValue)}
    >
      <CommandInput placeholder="Search..." />
      <CommandContent>
        <CommandEmpty />
        <CommandList>
          {collection.group().map(([group, items]) => (
            <CommandGroup heading={group} key={group}>
              {items.map((item) => (
                <CommandItem item={item} key={item.value}>
                  {item.label}
                  <CommandShortcut>{item.shortcut}</CommandShortcut>
                </CommandItem>
              ))}
            </CommandGroup>
          ))}
        </CommandList>
      </CommandContent>
      <CommandFooter>
        <div className="flex items-center gap-2">
          <Kbd variant="outline">
            <CornerDownLeftIcon className="size-3" />
          </Kbd>
          <span>Select</span>
        </div>
        <div className="flex items-center gap-2">
          <Kbd variant="outline">
            <ArrowUpIcon className="size-3" />
          </Kbd>
          <Kbd variant="outline">
            <ArrowDownIcon className="size-3" />
          </Kbd>
          <span>Navigate</span>
        </div>
      </CommandFooter>
    </Command>
  );
};

export default Example;

```

# Context Menu - Examples and Patterns

Examples for Context Menu component.

## Example: default

```tsx
import {
  Archive,
  ArchiveX,
  Bell,
  CirclePlus,
  FolderInput,
  MailX,
  Reply,
  ReplyAll,
  Send,
  SquarePen,
  Trash,
  Trash2,
} from "lucide-react";
import {
  ContextMenu,
  ContextMenuContent,
  ContextMenuGroup,
  ContextMenuItem,
  ContextMenuSeparator,
  ContextMenuShortcut,
  ContextMenuSub,
  ContextMenuSubContent,
  ContextMenuSubTrigger,
  ContextMenuTrigger,
} from "@/components/ui/context-menu";

const ContextMenuDemo = () => (
  <ContextMenu>
    <ContextMenuTrigger className="flex aspect-video items-center justify-center rounded-2xl border border-dashed p-20 text-sm">
      <span className="pointer-fine:inline-block hidden">Right click here</span>
      <span className="pointer-coarse:inline-block hidden">
        Long press here
      </span>
    </ContextMenuTrigger>
    <ContextMenuContent className="w-40">
      <ContextMenuGroup>
        <ContextMenuItem value="forward">
          <Send /> Forward
          <ContextMenuShortcut>⇧⌘F</ContextMenuShortcut>
        </ContextMenuItem>

        <ContextMenuItem value="reply">
          <Reply /> Reply
          <ContextMenuShortcut>⇧⌘R</ContextMenuShortcut>
        </ContextMenuItem>

        <ContextMenuItem value="reply-all">
          <ReplyAll /> Reply all
          <ContextMenuShortcut>⇧⌘A</ContextMenuShortcut>
        </ContextMenuItem>

        <ContextMenuItem value="archive">
          <Archive /> Archive
          <ContextMenuShortcut>⇧⌘Z</ContextMenuShortcut>
        </ContextMenuItem>

        <ContextMenuSub>
          <ContextMenuSubTrigger>
            <FolderInput /> Move to
          </ContextMenuSubTrigger>

          <ContextMenuSubContent>
            <ContextMenuItem value="move-to-folder-1">
              <ArchiveX /> Junk
            </ContextMenuItem>

            <ContextMenuItem value="move-to-folder-2">
              <Trash /> Trash
            </ContextMenuItem>

            <ContextMenuItem value="move-to-folder-3">
              <Bell /> Reminders
            </ContextMenuItem>

            <ContextMenuSub>
              <ContextMenuSubTrigger>
                <CirclePlus />
                More
              </ContextMenuSubTrigger>

              <ContextMenuSubContent>
                <ContextMenuItem value="move-to-folder-4">
                  <SquarePen />
                  Drafts
                </ContextMenuItem>
                <ContextMenuItem value="move-to-folder-6">
                  <MailX />
                  Spam
                </ContextMenuItem>
              </ContextMenuSubContent>
            </ContextMenuSub>
          </ContextMenuSubContent>
        </ContextMenuSub>

        <ContextMenuSeparator />
        <ContextMenuItem value="delete" variant="destructive">
          <Trash2 /> Delete
          <ContextMenuShortcut>⌫</ContextMenuShortcut>
        </ContextMenuItem>
      </ContextMenuGroup>
    </ContextMenuContent>
  </ContextMenu>
);

export default ContextMenuDemo;

```

# Data List - Examples and Patterns

Examples for Data List component.

## Example: default

```tsx
import {
  DataList,
  DataListItem,
  DataListItemLabel,
  DataListItemValue,
} from "@/components/ui/data-list";

const data = [
  { label: "New Users", value: "234" },
  { label: "Sales", value: "£12,340" },
  { label: "Revenue", value: "3,450" },
];

const DataListDemo = () => (
  <DataList>
    {data.map((item) => (
      <DataListItem key={item.label}>
        <DataListItemLabel>{item.label}</DataListItemLabel>
        <DataListItemValue>{item.value}</DataListItemValue>
      </DataListItem>
    ))}
  </DataList>
);

export default DataListDemo;

```

## Example: info-tip

```tsx
import { InfoIcon } from "lucide-react";
import { Button } from "@/components/ui/button";
import {
  DataList,
  DataListItem,
  DataListItemLabel,
  DataListItemValue,
} from "@/components/ui/data-list";
import {
  ToggleTooltip,
  ToggleTooltipContent,
  ToggleTooltipTrigger,
} from "@/components/ui/toggle-tooltip";

const data = [
  {
    label: "New Users",
    value: "234",
    info: "Total new user signups this month",
  },
  { label: "Sales", value: "£12,340", info: "Revenue from product sales" },
  {
    label: "Revenue",
    value: "3,450",
    info: "Total revenue in the last quarter",
  },
];

const Example = () => (
  <DataList>
    {data.map((item) => (
      <DataListItem key={item.label}>
        <DataListItemLabel className="inline-flex items-center gap-1.5">
          {item.label}
          <ToggleTooltip positioning={{ placement: "top" }}>
            <ToggleTooltipTrigger asChild>
              <Button
                aria-label={`Info about ${item.label}`}
                size="icon-sm"
                variant="ghost"
              >
                <InfoIcon />
              </Button>
            </ToggleTooltipTrigger>
            <ToggleTooltipContent>{item.info}</ToggleTooltipContent>
          </ToggleTooltip>
        </DataListItemLabel>
        <DataListItemValue>{item.value}</DataListItemValue>
      </DataListItem>
    ))}
  </DataList>
);

export default Example;

```

## Example: orientation-horizontal

```tsx
import {
  DataList,
  DataListItem,
  DataListItemLabel,
  DataListItemValue,
} from "@/components/ui/data-list";

const Example = () => (
  <DataList orientation="horizontal">
    <DataListItem>
      <DataListItemLabel>First Name</DataListItemLabel>
      <DataListItemValue>Jassie</DataListItemValue>
    </DataListItem>
    <DataListItem>
      <DataListItemLabel>Last Name</DataListItemLabel>
      <DataListItemValue>Bhatia</DataListItemValue>
    </DataListItem>
    <DataListItem>
      <DataListItemLabel>Email</DataListItemLabel>
      <DataListItemValue>jassie@example.com</DataListItemValue>
    </DataListItem>
  </DataList>
);

export default Example;

```

## Example: orientation-vertical

```tsx
import {
  DataList,
  DataListItem,
  DataListItemLabel,
  DataListItemValue,
} from "@/components/ui/data-list";

const Example = () => (
  <DataList orientation="vertical">
    <DataListItem>
      <DataListItemLabel>First Name</DataListItemLabel>
      <DataListItemValue>Jassie</DataListItemValue>
    </DataListItem>
    <DataListItem>
      <DataListItemLabel>Last Name</DataListItemLabel>
      <DataListItemValue>Bhatia</DataListItemValue>
    </DataListItem>
    <DataListItem>
      <DataListItemLabel>Email</DataListItemLabel>
      <DataListItemValue>jassie@example.com</DataListItemValue>
    </DataListItem>
  </DataList>
);

export default Example;

```

## Example: separator

```tsx
import {
  DataList,
  DataListItem,
  DataListItemLabel,
  DataListItemValue,
} from "@/components/ui/data-list";

const data = [
  { label: "First Name", value: "Jassie" },
  { label: "Last Name", value: "Bhatia" },
  { label: "Email", value: "jassie@example.com" },
  { label: "Phone", value: "1234567890" },
  { label: "Address", value: "1234 Main St, Anytown, USA" },
];

const Example = () => (
  <DataList className="divide-y">
    {data.map((item) => (
      <DataListItem key={item.label}>
        <DataListItemLabel>{item.label}</DataListItemLabel>
        <DataListItemValue>{item.value}</DataListItemValue>
      </DataListItem>
    ))}
  </DataList>
);

export default Example;

```

# Date Picker - Examples and Patterns

Examples for Date Picker component.

## Example: custom-format

```tsx
"use client";

import { format } from "date-fns";
import { CalendarIcon } from "lucide-react";
import React from "react";
import { Button } from "@/components/ui/button";
import {
  CalendarMonthSelect,
  CalendarNextTrigger,
  CalendarPrevTrigger,
  CalendarTable,
  CalendarTableDays,
  CalendarViewControl,
  CalendarWeekDays,
  CalendarYearSelect,
  parseDate,
} from "@/components/ui/calendar";
import {
  DatePicker,
  DatePickerContent,
  DatePickerTrigger,
} from "@/components/ui/date-picker";

const Example = () => {
  const [value, setValue] = React.useState([parseDate("2025-01-15")]);

  const formattedDate = format(value[0].toString(), "PPP");

  return (
    <DatePicker onValueChange={({ value }) => setValue(value)} value={value}>
      <DatePickerTrigger asChild>
        <Button className="min-w-48" variant="outline">
          <CalendarIcon aria-hidden="true" />
          {formattedDate}
        </Button>
      </DatePickerTrigger>
      <DatePickerContent>
        <CalendarViewControl>
          <CalendarPrevTrigger />
          <CalendarMonthSelect />
          <CalendarYearSelect />
          <CalendarNextTrigger />
        </CalendarViewControl>
        <CalendarTable>
          <CalendarWeekDays />
          <CalendarTableDays />
        </CalendarTable>
      </DatePickerContent>
    </DatePicker>
  );
};

export default Example;

```

## Example: default

```tsx
"use client";

import { CalendarIcon } from "lucide-react";
import { Button } from "@/components/ui/button";
import {
  CalendarMonthSelect,
  CalendarNextTrigger,
  CalendarPrevTrigger,
  CalendarTable,
  CalendarTableDays,
  CalendarViewControl,
  CalendarWeekDays,
  CalendarYearSelect,
} from "@/components/ui/calendar";
import {
  DatePicker,
  DatePickerContent,
  DatePickerTrigger,
  DatePickerValue,
} from "@/components/ui/date-picker";

const Example = () => (
  <DatePicker>
    <DatePickerTrigger asChild>
      <Button className="min-w-56" variant="outline">
        <CalendarIcon aria-hidden="true" />
        <DatePickerValue placeholder="Pick a date" />
      </Button>
    </DatePickerTrigger>
    <DatePickerContent>
      <CalendarViewControl>
        <CalendarPrevTrigger />
        <CalendarMonthSelect />
        <CalendarYearSelect />
        <CalendarNextTrigger />
      </CalendarViewControl>
      <CalendarTable>
        <CalendarWeekDays />
        <CalendarTableDays />
      </CalendarTable>
    </DatePickerContent>
  </DatePicker>
);

export default Example;

```

## Example: input

```tsx
import {
  CalendarMonthSelect,
  CalendarNextTrigger,
  CalendarPrevTrigger,
  CalendarTable,
  CalendarTableDays,
  CalendarViewControl,
  CalendarWeekDays,
  CalendarYearSelect,
} from "@/components/ui/calendar";
import {
  DatePicker,
  DatePickerContent,
  DatePickerInput,
} from "@/components/ui/date-picker";

const Example = () => (
  <DatePicker>
    <DatePickerInput placeholder="Select date" />
    <DatePickerContent>
      <CalendarViewControl>
        <CalendarPrevTrigger />
        <CalendarMonthSelect />
        <CalendarYearSelect />
        <CalendarNextTrigger />
      </CalendarViewControl>
      <CalendarTable>
        <CalendarWeekDays />
        <CalendarTableDays />
      </CalendarTable>
    </DatePickerContent>
  </DatePicker>
);

export default Example;

```

## Example: range

```tsx
"use client";

import { CalendarIcon } from "lucide-react";
import { Button } from "@/components/ui/button";
import {
  CalendarMonthSelect,
  CalendarNextTrigger,
  CalendarPrevTrigger,
  CalendarTable,
  CalendarTableDays,
  CalendarViewControl,
  CalendarWeekDays,
  CalendarYearSelect,
  parseDate,
} from "@/components/ui/calendar";
import {
  DatePicker,
  DatePickerContent,
  DatePickerTrigger,
  DatePickerValue,
} from "@/components/ui/date-picker";

const Example = () => {
  return (
    <DatePicker focusedValue={parseDate(new Date())} selectionMode="range">
      <DatePickerTrigger asChild>
        <Button className="min-w-56" variant="outline">
          <CalendarIcon aria-hidden="true" />
          <DatePickerValue placeholder="Pick a date range" />
        </Button>
      </DatePickerTrigger>
      <DatePickerContent>
        <CalendarViewControl>
          <CalendarPrevTrigger />
          <CalendarMonthSelect />
          <CalendarYearSelect />
          <CalendarNextTrigger />
        </CalendarViewControl>
        <CalendarTable>
          <CalendarWeekDays />
          <CalendarTableDays />
        </CalendarTable>
      </DatePickerContent>
    </DatePicker>
  );
};

export default Example;

```

## Example: time

```tsx
import { DatePickerTimer } from "@/components/ui/date-picker";
import { Field, FieldLabel } from "@/components/ui/field";

const Example = () => (
  <Field className="w-48">
    <FieldLabel>Time</FieldLabel>
    <DatePickerTimer />
  </Field>
);

export default Example;

```

## Example: with-presets

```tsx
"use client";

import { CalendarIcon } from "lucide-react";
import { Button } from "@/components/ui/button";
import {
  CalendarMonthSelect,
  CalendarNextTrigger,
  CalendarPrevTrigger,
  CalendarTable,
  CalendarTableDays,
  CalendarViewControl,
  CalendarWeekDays,
  CalendarYearSelect,
  parseDate,
} from "@/components/ui/calendar";
import {
  DatePicker,
  DatePickerContent,
  DatePickerPresetTrigger,
  DatePickerTrigger,
  DatePickerValue,
} from "@/components/ui/date-picker";

const Example = () => {
  return (
    <DatePicker defaultValue={[parseDate(new Date())]}>
      <DatePickerTrigger asChild>
        <Button className="min-w-40" variant="outline">
          <CalendarIcon aria-hidden="true" />
          <DatePickerValue />
        </Button>
      </DatePickerTrigger>
      <DatePickerContent>
        <div className="flex max-sm:flex-col">
          <div className="relative py-1 ps-1 max-sm:order-1 max-sm:border-t">
            <div className="flex h-full flex-col sm:border-e sm:pe-3">
              {presets.map((preset) => (
                <DatePickerPresetTrigger
                  asChild
                  key={preset.label}
                  value={[
                    parseDate(
                      new Date(
                        new Date().setDate(new Date().getDate() + preset.days)
                      )
                    ),
                  ]}
                >
                  <Button
                    className="w-full justify-start"
                    size="sm"
                    variant="ghost"
                  >
                    {preset.label}
                  </Button>
                </DatePickerPresetTrigger>
              ))}
            </div>
          </div>
          <div className="max-sm:pb-3 sm:ps-2">
            <CalendarViewControl>
              <CalendarPrevTrigger />
              <CalendarMonthSelect />
              <CalendarYearSelect />
              <CalendarNextTrigger />
            </CalendarViewControl>
            <CalendarTable>
              <CalendarWeekDays />
              <CalendarTableDays />
            </CalendarTable>
          </div>
        </div>
      </DatePickerContent>
    </DatePicker>
  );
};

const presets = [
  { label: "Today", days: 0 },
  { label: "Tomorrow", days: 1 },
  { label: "In 3 days", days: 3 },
  { label: "In a week", days: 7 },
] as const;

export default Example;

```

# Dialog - Examples and Patterns

Examples for Dialog component.

## Example: close-behavior

```tsx
import { Button } from "@/components/ui/button";
import {
  Dialog,
  DialogContent,
  DialogHeader,
  DialogTrigger,
} from "@/components/ui/dialog";

const Example = () => (
  <div className="flex flex-wrap justify-center gap-4">
    <Dialog closeOnInteractOutside={false}>
      <DialogTrigger asChild>
        <Button variant="outline">No close on outside click</Button>
      </DialogTrigger>
      <DialogContent size="sm">
        <DialogHeader
          description="Clicking outside does not close this dialog. Press ESC or use the button to close."
          title="Stays on outside click"
        />
      </DialogContent>
    </Dialog>
    <Dialog closeOnEscape={false}>
      <DialogTrigger asChild>
        <Button variant="outline">No close on Escape</Button>
      </DialogTrigger>
      <DialogContent size="sm">
        <DialogHeader
          description="Pressing Escape does not close this dialog. Click outside or use the close button."
          title="Escape disabled"
        />
      </DialogContent>
    </Dialog>
  </div>
);

export default Example;

```

## Example: custom-spacing

```tsx
import { Button } from "@/components/ui/button";
import {
  Dialog,
  DialogBody,
  DialogClose,
  DialogContent,
  DialogFooter,
  DialogHeader,
  DialogTrigger,
} from "@/components/ui/dialog";
import {
  Field,
  FieldGroup,
  FieldLabel,
  FieldSet,
} from "@/components/ui/field";
import { Input } from "@/components/ui/input";
import {
  NativeSelect,
  NativeSelectOption,
} from "@/components/ui/native-select";

const Example = () => (
  <Dialog>
    <DialogTrigger asChild>
      <Button variant="outline">Open</Button>
    </DialogTrigger>

    <DialogContent className="[--space:--spacing(4)] sm:[--space:--spacing(8)]">
      <DialogHeader
        description="Make changes to your project settings."
        title="Edit project"
      />
      <DialogBody>
        <FieldSet>
          <FieldGroup>
            <Field>
              <FieldLabel>Name</FieldLabel>
              <Input placeholder="My Project" />
            </Field>

            <Field>
              <FieldLabel>Main branch</FieldLabel>
              <NativeSelect>
                <NativeSelectOption value="main">main</NativeSelectOption>
                <NativeSelectOption value="develop">develop</NativeSelectOption>
              </NativeSelect>
            </Field>
          </FieldGroup>
        </FieldSet>
      </DialogBody>
      <DialogFooter>
        <DialogClose asChild>
          <Button variant="outline">Cancel</Button>
        </DialogClose>

        <DialogClose asChild>
          <Button>Save</Button>
        </DialogClose>
      </DialogFooter>
    </DialogContent>
  </Dialog>
);

export default Example;

```

## Example: default

```tsx
import { Button } from "@/components/ui/button";
import {
  Dialog,
  DialogBody,
  DialogClose,
  DialogContent,
  DialogFooter,
  DialogHeader,
  DialogTrigger,
} from "@/components/ui/dialog";
import {
  Field,
  FieldGroup,
  FieldLabel,
  FieldSet,
} from "@/components/ui/field";
import { Input } from "@/components/ui/input";
import {
  NativeSelect,
  NativeSelectOption,
} from "@/components/ui/native-select";

const DialogDemo = () => (
  <Dialog>
    <DialogTrigger asChild>
      <Button variant="outline">Open</Button>
    </DialogTrigger>

    <DialogContent>
      <DialogHeader
        description="Make changes to your project settings."
        title="Edit project"
      />
      <DialogBody>
        <FieldSet>
          <FieldGroup>
            <Field>
              <FieldLabel>Name</FieldLabel>
              <Input placeholder="My Project" />
            </Field>

            <Field>
              <FieldLabel>Main branch</FieldLabel>
              <NativeSelect>
                <NativeSelectOption value="main">main</NativeSelectOption>
                <NativeSelectOption value="develop">develop</NativeSelectOption>
                <NativeSelectOption value="feature/123">
                  feature/123
                </NativeSelectOption>
                <NativeSelectOption value="release/1.0.0">
                  release/1.0.0
                </NativeSelectOption>
              </NativeSelect>
            </Field>
          </FieldGroup>
        </FieldSet>
      </DialogBody>
      <DialogFooter>
        <DialogClose asChild>
          <Button variant="outline">Cancel</Button>
        </DialogClose>

        <DialogClose asChild>
          <Button>Save</Button>
        </DialogClose>
      </DialogFooter>
    </DialogContent>
  </Dialog>
);

export default DialogDemo;

```

## Example: initial-focus

```tsx
"use client";

import React from "react";
import { Button } from "@/components/ui/button";
import {
  Dialog,
  DialogBody,
  DialogClose,
  DialogContent,
  DialogFooter,
  DialogHeader,
  DialogTrigger,
} from "@/components/ui/dialog";
import {
  Field,
  FieldGroup,
  FieldLabel,
} from "@/components/ui/field";
import { Input } from "@/components/ui/input";

const Example = () => {
  const inputRef = React.useRef<HTMLInputElement>(null);

  return (
    <Dialog initialFocusEl={() => inputRef.current}>
      <DialogTrigger asChild>
        <Button variant="outline">Open</Button>
      </DialogTrigger>
      <DialogContent>
        <DialogHeader
          description="The first input will be focused when the dialog opens."
          title="Edit Profile"
        />
        <DialogBody>
          <FieldGroup>
            <Field>
              <FieldLabel>Name</FieldLabel>
              <Input placeholder="John Doe" ref={inputRef} />
            </Field>

            <Field>
              <FieldLabel>Email</FieldLabel>
              <Input placeholder="john.doe@example.com" />
            </Field>
          </FieldGroup>
        </DialogBody>
        <DialogFooter>
          <DialogClose asChild>
            <Button variant="outline">Cancel</Button>
          </DialogClose>
          <DialogClose asChild>
            <Button>Save</Button>
          </DialogClose>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  );
};

export default Example;

```

## Example: nested

```tsx
import { Button } from "@/components/ui/button";
import {
  Dialog,
  DialogBody,
  DialogClose,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "@/components/ui/dialog";
import {
  Field,
  FieldGroup,
  FieldLabel,
} from "@/components/ui/field";
import { Input } from "@/components/ui/input";

const Example = () => {
  return (
    <Dialog>
      <DialogTrigger asChild>
        <Button variant="outline">Open</Button>
      </DialogTrigger>

      <DialogContent>
        <DialogHeader
          description="View and manage a user in your team."
          title="Manage team member"
        />

        <DialogBody className="grid gap-4">
          <div className="grid gap-1">
            <p className="text-muted-foreground text-sm">Name</p>
            <p className="font-medium text-sm">Bora Baloglu</p>
          </div>
          <div className="grid gap-1">
            <p className="text-muted-foreground text-sm">Email</p>
            <p className="font-medium text-sm">bora@example.com</p>
          </div>
        </DialogBody>

        <DialogFooter>
          <Dialog>
            <DialogTrigger asChild>
              <Button variant="outline">Edit details</Button>
            </DialogTrigger>
            <DialogContent showCloseButton={false}>
              <DialogHeader>
                <DialogTitle>Edit details</DialogTitle>
                <DialogDescription>
                  Make changes to the member&apos;s information.
                </DialogDescription>
              </DialogHeader>
              <DialogBody>
                <FieldGroup>
                  <Field>
                    <FieldLabel>Name</FieldLabel>
                    <Input defaultValue="Bora Baloglu" type="text" />
                  </Field>
                  <Field>
                    <FieldLabel>Email</FieldLabel>
                    <Input defaultValue="bora@example.com" type="text" />
                  </Field>
                </FieldGroup>
              </DialogBody>
              <DialogFooter>
                <DialogClose asChild>
                  <Button variant="ghost">Cancel</Button>
                </DialogClose>
                <Button type="submit">Save changes</Button>
              </DialogFooter>
            </DialogContent>
          </Dialog>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  );
};

export default Example;

```

## Example: no-close-button

```tsx
import { Button } from "@/components/ui/button";
import {
  Dialog,
  DialogContent,
  DialogHeader,
  DialogTrigger,
} from "@/components/ui/dialog";

const Example = () => (
  <Dialog>
    <DialogTrigger asChild>
      <Button variant="outline">Open</Button>
    </DialogTrigger>

    <DialogContent showCloseButton={false}>
      <DialogHeader
        description="You can only close this dialog using the buttons in the footer, by pressing Escape or by clicking the backdrop."
        title="No close button"
      />
    </DialogContent>
  </Dialog>
);

export default Example;

```

## Example: non-modal

```tsx
import { Button } from "@/components/ui/button";
import {
  Dialog,
  DialogBody,
  DialogClose,
  DialogContent,
  DialogFooter,
  DialogHeader,
  DialogTrigger,
} from "@/components/ui/dialog";

const Example = () => (
  <Dialog modal={false}>
    <DialogTrigger asChild>
      <Button variant="outline">Open</Button>
    </DialogTrigger>

    <DialogContent>
      <DialogHeader
        description="This is a non-modal dialog. You can interact with elements outside the dialog."
        title="Non-Modal Dialog"
      />
      <DialogBody>
        <p className="text-muted-foreground text-sm">
          Non-modal dialogs allow interaction with elements outside the dialog.
          Focus trapping and scroll prevention are disabled.
        </p>
      </DialogBody>
      <DialogFooter>
        <DialogClose asChild>
          <Button variant="outline">Close</Button>
        </DialogClose>
      </DialogFooter>
    </DialogContent>
  </Dialog>
);

export default Example;

```

## Example: open-from-menu

```tsx
"use client";

import { InfoIcon, SettingsIcon, UserIcon } from "lucide-react";
import React from "react";
import { Button } from "@/components/ui/button";
import {
  Dialog,
  DialogBody,
  DialogClose,
  DialogContent,
  DialogFooter,
  DialogHeader,
} from "@/components/ui/dialog";
import {
  Menu,
  MenuContent,
  MenuItem,
  MenuTrigger,
} from "@/components/ui/menu";

const Example = () => {
  const [isOpen, setIsOpen] = React.useState(false);

  return (
    <>
      <Menu>
        <MenuTrigger asChild>
          <Button variant="outline">Open</Button>
        </MenuTrigger>
        <MenuContent>
          <MenuItem onClick={() => setIsOpen(true)} value="settings">
            <SettingsIcon />
            Open settings
          </MenuItem>
          <MenuItem disabled value="profile">
            <UserIcon />
            View profile
          </MenuItem>
          <MenuItem disabled value="help">
            <InfoIcon />
            Help
          </MenuItem>
        </MenuContent>
      </Menu>

      <Dialog onOpenChange={({ open }) => setIsOpen(open)} open={isOpen}>
        <DialogContent>
          <DialogHeader
            description="This dialog was opened from a menu item"
            title="Settings"
          />
          <DialogBody>
            <p className="text-muted-foreground text-sm">
              You can open dialogs imperatively from menu items using the
              onClick handler.
            </p>
          </DialogBody>
          <DialogFooter>
            <DialogClose asChild>
              <Button variant="outline">Cancel</Button>
            </DialogClose>
            <DialogClose asChild>
              <Button>Save</Button>
            </DialogClose>
          </DialogFooter>
        </DialogContent>
      </Dialog>
    </>
  );
};

export default Example;

```

## Example: scroll-area

```tsx
import { Button } from "@/components/ui/button";
import {
  Dialog,
  DialogBody,
  DialogClose,
  DialogContent,
  DialogFooter,
  DialogHeader,
  DialogTrigger,
} from "@/components/ui/dialog";

const Example = () => (
  <Dialog>
    <DialogTrigger asChild>
      <Button variant="outline">Open</Button>
    </DialogTrigger>

    <DialogContent size="lg">
      <DialogHeader title="Terms & Conditions" />
      <DialogBody scrollFade>
        <div className="space-y-2 **:[h3]:font-semibold **:[p]:text-muted-foreground **:[p]:text-sm">
          <h3>What is Lorem Ipsum?</h3>
          <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi
            imperdiet placerat nisl, ac consequat sem hendrerit in.
          </p>
          <h3>Why do we use it?</h3>
          <p>
            Pellentesque quis sapien tortor. Nulla egestas tristique justo, in
            commodo quam posuere id. Cras varius, nunc non placerat vulputate,
            dolor turpis elementum elit, non lobortis lacus nunc nec nisl.
          </p>
          <h3>Where does it come from?</h3>
          <p>
            Pellentesque turpis est, mollis eu arcu eu, tempor tincidunt urna.
            Pellentesque pellentesque est euismod accumsan ullamcorper. Quisque
            urna lorem, porttitor ac malesuada at, vehicula eget nulla. Donec
            eget consequat erat, quis pharetra ex.
          </p>
          <h3>Where can I get some?</h3>
          <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec
            egestas semper eros a maximus. Sed consequat tempus lobortis.
            Phasellus sed vulputate turpis. Nulla facilisi. Curabitur consequat
            dui tellus.
          </p>
          <h3>Who can I contact if I have questions?</h3>
          <p>
            Donec tortor lorem, finibus vel suscipit vehicula, sagittis
            efficitur erat. Proin sagittis aliquam sagittis. Nullam sed porta
            leo. Nunc sed velit felis.
          </p>
          <h3>What happens if I don't agree to these terms?</h3>
          <p>
            Aenean maximus, libero vel laoreet congue, purus leo iaculis libero,
            egestas egestas quam mi at quam. Curabitur eu tempus mauris.
            Vestibulum ante ipsum primis in faucibus orci luctus et ultrices
            posuere cubilia curae;
          </p>
          <h3>Where can I get some?</h3>
          <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec
            egestas semper eros a maximus. Sed consequat tempus lobortis.
            Phasellus sed vulputate turpis. Nulla facilisi. Curabitur consequat
            dui tellus.
          </p>
        </div>
      </DialogBody>
      <DialogFooter>
        <DialogClose asChild>
          <Button variant="ghost">Cancel</Button>
        </DialogClose>
        <DialogClose asChild>
          <Button>I Agree</Button>
        </DialogClose>
      </DialogFooter>
    </DialogContent>
  </Dialog>
);

export default Example;

```

# Download Trigger - Examples and Patterns

Examples for Download Trigger component.

## Example: default

```tsx
import { DownloadIcon, FileTextIcon } from "lucide-react";
import { Button } from "@/components/ui/button";
import { DownloadTrigger } from "@/components/ui/download-trigger";
import { Item, ItemTitle } from "@/components/ui/item";

const DownloadTriggerDemo = () => (
  <div className="flex flex-col gap-4">
    <Item variant="outline">
      <FileTextIcon />
      <ItemTitle>{content}</ItemTitle>
    </Item>
    <DownloadTrigger
      asChild
      data={content}
      fileName="hello.txt"
      mimeType="text/plain"
    >
      <Button size="lg" variant="outline">
        <DownloadIcon />
        Download
      </Button>
    </DownloadTrigger>
  </div>
);

const content = "Hello, World! This is a sample text file.";

export default DownloadTriggerDemo;

```

## Example: download-svg

```tsx
import { DownloadIcon } from "lucide-react";
import { Button } from "@/components/ui/button";
import { DownloadTrigger } from "@/components/ui/download-trigger";

const Example = () => (
  <DownloadTrigger
    asChild
    data={svgContent}
    fileName="icon.svg"
    mimeType="image/svg+xml"
  >
    <Button size="lg" variant="outline">
      <DownloadIcon />
      Download SVG
    </Button>
  </DownloadTrigger>
);

const svgContent = `<svg fill="none" height="512" viewBox="0 0 512 512" width="512" xmlns="http://www.w3.org/2000/svg"><path d="M149.978 73.374c12.889 6.02 17.7 19.947 10.746 31.105l-6.43 10.317c-57.065 91.56-54.802 202.263 5.97 292.018 7.406 10.938 3.167 25.002-9.467 31.414-12.635 6.411-28.882 2.742-36.288-8.196-70.14-103.592-72.753-231.363-6.89-337.039l6.43-10.316c6.954-11.158 23.04-15.323 35.929-9.303M294.024 73.374c12.888 6.02 17.7 19.947 10.746 31.105l-6.431 10.317c-57.065 91.56-54.801 202.263 5.97 292.018 7.406 10.938 3.168 25.002-9.467 31.414-12.634 6.411-28.881 2.742-36.287-8.196-70.142-103.592-72.754-231.363-6.891-337.039l6.43-10.316c6.955-11.158 23.041-15.323 35.93-9.303M438.069 73.374c12.889 6.02 17.7 19.947 10.746 31.105l-6.43 10.317c-57.066 91.56-54.802 202.263 5.97 292.018 7.405 10.938 3.167 25.002-9.467 31.414-12.635 6.411-28.882 2.742-36.288-8.196-70.141-103.592-72.754-231.363-6.891-337.039l6.431-10.316c6.954-11.158 23.04-15.323 35.929-9.303" fill="currentColor"/></svg>`;

export default Example;

```

## Example: promise

```tsx
"use client";

import { DownloadIcon } from "lucide-react";
import { Button } from "@/components/ui/button";
import { DownloadTrigger } from "@/components/ui/download-trigger";

const Example = () => (
  <DownloadTrigger
    asChild
    data={fetchData}
    fileName="data.json"
    mimeType="application/json"
  >
    <Button size="lg" variant="outline">
      <DownloadIcon />
      Download
    </Button>
  </DownloadTrigger>
);

const fetchData = () =>
  new Promise<Blob>((resolve) => {
    setTimeout(() => {
      resolve(
        new Blob(['{"message": "Loaded asynchronously!"}'], {
          type: "application/json",
        })
      );
    }, 500);
  });

export default Example;

```

# Drawer - Examples and Patterns

Examples for Drawer component.

## Example: custom-spacing

```tsx
import { Button } from "@/components/ui/button";
import {
  Drawer,
  DrawerBody,
  DrawerClose,
  DrawerContent,
  DrawerContentInner,
  DrawerFooter,
  DrawerHeader,
  DrawerTrigger,
} from "@/components/ui/drawer";
import {
  Field,
  FieldGroup,
  FieldLabel,
} from "@/components/ui/field";
import { Input } from "@/components/ui/input";

const Example = () => (
  <Drawer>
    <DrawerTrigger asChild>
      <Button variant="outline">Open</Button>
    </DrawerTrigger>
    <DrawerContent className="[--bleed:2rem] [--space:--spacing(6)]">
      <DrawerContentInner>
        <DrawerHeader
          description="Tighter bleed and larger internal padding than defaults."
          title="Custom spacing"
        />
        <DrawerBody>
          <FieldGroup>
            <Field>
              <FieldLabel>Name</FieldLabel>
              <Input defaultValue="Vinicius Vicentini" />
            </Field>
            <Field>
              <FieldLabel>Username</FieldLabel>
              <Input defaultValue="@vinihvc" />
            </Field>
          </FieldGroup>
        </DrawerBody>
      </DrawerContentInner>

      <DrawerFooter>
        <DrawerContentInner>
          <DrawerClose asChild>
            <Button variant="outline">Cancel</Button>
          </DrawerClose>
          <DrawerClose asChild>
            <Button>Save changes</Button>
          </DrawerClose>
        </DrawerContentInner>
      </DrawerFooter>
    </DrawerContent>
  </Drawer>
);

export default Example;

```

## Example: default

```tsx
import { Button } from "@/components/ui/button";
import {
  Drawer,
  DrawerBody,
  DrawerClose,
  DrawerContent,
  DrawerContentInner,
  DrawerFooter,
  DrawerHeader,
  DrawerTrigger,
} from "@/components/ui/drawer";
import {
  Field,
  FieldGroup,
  FieldLabel,
} from "@/components/ui/field";
import { Input } from "@/components/ui/input";

const DrawerDemo = () => (
  <Drawer>
    <DrawerTrigger asChild>
      <Button variant="outline">Open</Button>
    </DrawerTrigger>
    <DrawerContent>
      <DrawerContentInner>
        <DrawerHeader
          description="Make changes to your account here. Swipe down to close."
          title="Edit Profile"
        />
        <DrawerBody>
          <FieldGroup>
            <Field>
              <FieldLabel>Name</FieldLabel>
              <Input defaultValue="Vinicius Vicentini" />
            </Field>
            <Field>
              <FieldLabel>Username</FieldLabel>
              <Input defaultValue="@vinihvc" />
            </Field>
          </FieldGroup>
        </DrawerBody>
      </DrawerContentInner>

      <DrawerFooter>
        <DrawerContentInner>
          <DrawerClose asChild>
            <Button variant="outline">Cancel</Button>
          </DrawerClose>
          <DrawerClose asChild>
            <Button>Save changes</Button>
          </DrawerClose>
        </DrawerContentInner>
      </DrawerFooter>
    </DrawerContent>
  </Drawer>
);

export default DrawerDemo;

```

## Example: drawer-content-inner

```tsx
import { Button } from "@/components/ui/button";
import {
  Drawer,
  DrawerBody,
  DrawerClose,
  DrawerContent,
  DrawerContentInner,
  DrawerFooter,
  DrawerHeader,
  DrawerTrigger,
} from "@/components/ui/drawer";
import {
  Field,
  FieldGroup,
  FieldLabel,
} from "@/components/ui/field";
import { Input } from "@/components/ui/input";

const Example = () => (
  <Drawer swipeDirection="down">
    <DrawerTrigger asChild>
      <Button variant="outline">Open drawer</Button>
    </DrawerTrigger>
    <DrawerContent>
      <DrawerContentInner>
        <DrawerHeader
          description="Constrains width to max-w-sm and centers content. Use it to wrap the main body or footer actions."
          title="Container"
        />
        <DrawerBody>
          <FieldGroup>
            <Field>
              <FieldLabel>Name</FieldLabel>
              <Input defaultValue="Vinicius Vicentini" />
            </Field>
            <Field>
              <FieldLabel>Email</FieldLabel>
              <Input defaultValue="vinicius@example.com" />
            </Field>
          </FieldGroup>
        </DrawerBody>
      </DrawerContentInner>
      <DrawerFooter>
        <DrawerContentInner>
          <DrawerClose asChild>
            <Button variant="outline">Cancel</Button>
          </DrawerClose>
          <DrawerClose asChild>
            <Button>Save</Button>
          </DrawerClose>
        </DrawerContentInner>
      </DrawerFooter>
    </DrawerContent>
  </Drawer>
);

export default Example;

```

## Example: inset

```tsx
import { Button } from "@/components/ui/button";
import {
  Drawer,
  DrawerBody,
  DrawerClose,
  DrawerContent,
  DrawerContentInner,
  DrawerFooter,
  DrawerHeader,
  DrawerTrigger,
} from "@/components/ui/drawer";
import {
  Field,
  FieldGroup,
  FieldLabel,
} from "@/components/ui/field";
import { Input } from "@/components/ui/input";

const Example = () => (
  <Drawer>
    <DrawerTrigger asChild>
      <Button variant="outline">Open</Button>
    </DrawerTrigger>
    <DrawerContent variant="inset">
      <DrawerContentInner>
        <DrawerHeader
          description="On larger screens, the drawer appears with rounded corners and padding."
          title="Inset drawer"
        />
        <DrawerBody>
          <FieldGroup>
            <Field>
              <FieldLabel>Name</FieldLabel>
              <Input defaultValue="Vinicius Vicentini" />
            </Field>
            <Field>
              <FieldLabel>Email</FieldLabel>
              <Input defaultValue="vinicius@example.com" />
            </Field>
          </FieldGroup>
        </DrawerBody>
      </DrawerContentInner>
      <DrawerFooter>
        <DrawerContentInner>
          <DrawerClose asChild>
            <Button variant="outline">Cancel</Button>
          </DrawerClose>
          <DrawerClose asChild>
            <Button>Save</Button>
          </DrawerClose>
        </DrawerContentInner>
      </DrawerFooter>
    </DrawerContent>
  </Drawer>
);

export default Example;

```

## Example: snap-points

```tsx
import { Button } from "@/components/ui/button";
import {
  Drawer,
  DrawerBody,
  DrawerContent,
  DrawerContentInner,
  DrawerHeader,
  DrawerTrigger,
} from "@/components/ui/drawer";

const Example = () => (
  <Drawer
    defaultSnapPoint={0.5}
    snapPoints={[0.25, 0.5, 1]}
    snapToSequentialPoints
  >
    <DrawerTrigger asChild>
      <Button variant="outline">Open</Button>
    </DrawerTrigger>
    <DrawerContent>
      <DrawerContentInner>
        <DrawerHeader
          description="Drag to 25%, 50%, or 100% height. Swipe down to close."
          title="Snap Points"
        />
        <DrawerBody>
          <p className="text-muted-foreground text-sm">
            This drawer has multiple snap points. Try dragging the handle to
            quarter, half, or full height.
          </p>
        </DrawerBody>
      </DrawerContentInner>
    </DrawerContent>
  </Drawer>
);

export default Example;

```

## Example: swipe-directions

```tsx
import { Button } from "@/components/ui/button";
import {
  Drawer,
  DrawerBody,
  DrawerContent,
  DrawerHeader,
  DrawerTrigger,
} from "@/components/ui/drawer";

const Example = () => (
  <div className="flex flex-wrap justify-center gap-4">
    <Drawer>
      <DrawerTrigger asChild>
        <Button variant="outline">Bottom</Button>
      </DrawerTrigger>
      <DrawerContent>
        <DrawerHeader title="Bottom Drawer" />
        <DrawerBody>
          <p className="text-muted-foreground text-sm">
            Swipe down to close this drawer.
          </p>
        </DrawerBody>
      </DrawerContent>
    </Drawer>

    <Drawer swipeDirection="up">
      <DrawerTrigger asChild>
        <Button variant="outline">Top</Button>
      </DrawerTrigger>
      <DrawerContent>
        <DrawerHeader title="Top Drawer" />
        <DrawerBody>
          <p className="text-muted-foreground text-sm">
            Swipe up to close this drawer.
          </p>
        </DrawerBody>
      </DrawerContent>
    </Drawer>

    <Drawer swipeDirection="start">
      <DrawerTrigger asChild>
        <Button variant="outline">Left</Button>
      </DrawerTrigger>
      <DrawerContent>
        <DrawerHeader title="Start Drawer" />
        <DrawerBody>
          <p className="text-muted-foreground text-sm">
            Swipe left to close this drawer.
          </p>
        </DrawerBody>
      </DrawerContent>
    </Drawer>

    <Drawer swipeDirection="end">
      <DrawerTrigger asChild>
        <Button variant="outline">Right</Button>
      </DrawerTrigger>
      <DrawerContent>
        <DrawerHeader title="End Drawer" />
        <DrawerBody>
          <p className="text-muted-foreground text-sm">
            Swipe right to close this drawer.
          </p>
        </DrawerBody>
      </DrawerContent>
    </Drawer>
  </div>
);

export default Example;

```

# Editable - Examples and Patterns

Examples for Editable component.

## Example: activation-click

```tsx
import { CheckIcon, XIcon } from "lucide-react";
import { Button } from "@/components/ui/button";
import {
  Card,
  CardContent,
  CardHeader,
} from "@/components/ui/card";
import {
  Editable,
  EditableArea,
  EditableCancelTrigger,
  EditableControl,
  EditableInput,
  EditablePreview,
  EditableSubmitTrigger,
} from "@/components/ui/editable";
import {
  Field,
  FieldGroup,
  FieldLabel,
} from "@/components/ui/field";
import { Input } from "@/components/ui/input";

const Example = () => (
  <Card className="w-full max-w-sm">
    <CardHeader
      description="Click the text to start editing"
      title="Edit with click"
    />
    <CardContent>
      <FieldGroup>
        <Field>
          <FieldLabel>Name</FieldLabel>
          <Editable activationMode="click" defaultValue="Vinicius Vicentini">
            <EditableArea>
              <EditableInput asChild>
                <Input />
              </EditableInput>
              <EditablePreview />
            </EditableArea>
            <EditableControl>
              <EditableCancelTrigger asChild>
                <Button aria-label="Cancel" size="icon-md" variant="outline">
                  <XIcon />
                </Button>
              </EditableCancelTrigger>
              <EditableSubmitTrigger asChild>
                <Button aria-label="Save" size="icon-md" variant="outline">
                  <CheckIcon />
                </Button>
              </EditableSubmitTrigger>
            </EditableControl>
          </Editable>
        </Field>
        <Field>
          <FieldLabel>Username</FieldLabel>
          <Editable activationMode="click" defaultValue="@vinihvc">
            <EditableArea>
              <EditableInput asChild>
                <Input />
              </EditableInput>
              <EditablePreview />
            </EditableArea>
            <EditableControl>
              <EditableCancelTrigger asChild>
                <Button aria-label="Cancel" size="icon-md" variant="outline">
                  <XIcon />
                </Button>
              </EditableCancelTrigger>
              <EditableSubmitTrigger asChild>
                <Button aria-label="Save" size="icon-md" variant="outline">
                  <CheckIcon />
                </Button>
              </EditableSubmitTrigger>
            </EditableControl>
          </Editable>
        </Field>
      </FieldGroup>
    </CardContent>
  </Card>
);

export default Example;

```

## Example: activation-focus

```tsx
import { CheckIcon, XIcon } from "lucide-react";
import { Button } from "@/components/ui/button";
import {
  Card,
  CardContent,
  CardHeader,
} from "@/components/ui/card";
import {
  Editable,
  EditableArea,
  EditableCancelTrigger,
  EditableControl,
  EditableInput,
  EditablePreview,
  EditableSubmitTrigger,
} from "@/components/ui/editable";
import {
  Field,
  FieldGroup,
  FieldLabel,
} from "@/components/ui/field";
import { Input } from "@/components/ui/input";

const Example = () => (
  <Card className="w-full max-w-sm">
    <CardHeader
      description="Focus the field to start editing (default activation mode)"
      title="Edit with focus"
    />
    <CardContent>
      <FieldGroup>
        <Field>
          <FieldLabel>Name</FieldLabel>
          <Editable activationMode="focus" defaultValue="Vinicius Vicentini">
            <EditableArea>
              <EditableInput asChild>
                <Input />
              </EditableInput>
              <EditablePreview />
            </EditableArea>
            <EditableControl>
              <EditableCancelTrigger asChild>
                <Button aria-label="Cancel" size="icon-md" variant="outline">
                  <XIcon />
                </Button>
              </EditableCancelTrigger>
              <EditableSubmitTrigger asChild>
                <Button aria-label="Save" size="icon-md" variant="outline">
                  <CheckIcon />
                </Button>
              </EditableSubmitTrigger>
            </EditableControl>
          </Editable>
        </Field>
        <Field>
          <FieldLabel>Username</FieldLabel>
          <Editable activationMode="focus" defaultValue="@vinihvc">
            <EditableArea>
              <EditableInput asChild>
                <Input />
              </EditableInput>
              <EditablePreview />
            </EditableArea>
            <EditableControl>
              <EditableCancelTrigger asChild>
                <Button aria-label="Cancel" size="icon-md" variant="outline">
                  <XIcon />
                </Button>
              </EditableCancelTrigger>
              <EditableSubmitTrigger asChild>
                <Button aria-label="Save" size="icon-md" variant="outline">
                  <CheckIcon />
                </Button>
              </EditableSubmitTrigger>
            </EditableControl>
          </Editable>
        </Field>
      </FieldGroup>
    </CardContent>
  </Card>
);

export default Example;

```

## Example: activation-none

```tsx
import { CheckIcon, EditIcon, XIcon } from "lucide-react";
import { Button } from "@/components/ui/button";
import {
  Card,
  CardContent,
  CardHeader,
} from "@/components/ui/card";
import {
  Editable,
  EditableArea,
  EditableCancelTrigger,
  EditableControl,
  EditableEditTrigger,
  EditableInput,
  EditablePreview,
  EditableSubmitTrigger,
} from "@/components/ui/editable";
import {
  Field,
  FieldGroup,
  FieldLabel,
} from "@/components/ui/field";
import { Input } from "@/components/ui/input";

const Example = () => (
  <Card className="w-full max-w-sm">
    <CardHeader
      description="Use the edit button to start editing (no automatic activation)"
      title="Edit with manual trigger"
    />
    <CardContent>
      <FieldGroup>
        <Field>
          <FieldLabel>Name</FieldLabel>
          <Editable activationMode="none" defaultValue="Vinicius Vicentini">
            <EditableArea>
              <EditableInput asChild>
                <Input />
              </EditableInput>
              <EditablePreview />
            </EditableArea>
            <EditableControl>
              <EditableEditTrigger asChild>
                <Button aria-label="Edit" size="icon-md" variant="outline">
                  <EditIcon />
                </Button>
              </EditableEditTrigger>
              <EditableCancelTrigger asChild>
                <Button aria-label="Cancel" size="icon-md" variant="outline">
                  <XIcon />
                </Button>
              </EditableCancelTrigger>
              <EditableSubmitTrigger asChild>
                <Button aria-label="Save" size="icon-md" variant="outline">
                  <CheckIcon />
                </Button>
              </EditableSubmitTrigger>
            </EditableControl>
          </Editable>
        </Field>
        <Field>
          <FieldLabel>Username</FieldLabel>
          <Editable activationMode="none" defaultValue="@vinihvc">
            <EditableArea>
              <EditableInput asChild>
                <Input />
              </EditableInput>
              <EditablePreview />
            </EditableArea>
            <EditableControl>
              <EditableEditTrigger asChild>
                <Button aria-label="Edit" size="icon-md" variant="outline">
                  <EditIcon />
                </Button>
              </EditableEditTrigger>
              <EditableCancelTrigger asChild>
                <Button aria-label="Cancel" size="icon-md" variant="outline">
                  <XIcon />
                </Button>
              </EditableCancelTrigger>
              <EditableSubmitTrigger asChild>
                <Button aria-label="Save" size="icon-md" variant="outline">
                  <CheckIcon />
                </Button>
              </EditableSubmitTrigger>
            </EditableControl>
          </Editable>
        </Field>
      </FieldGroup>
    </CardContent>
  </Card>
);

export default Example;

```

## Example: controlled

```tsx
"use client";

import { CheckIcon, PencilIcon } from "lucide-react";
import React from "react";
import { Button } from "@/components/ui/button";
import {
  Card,
  CardAction,
  CardContent,
  CardHeader,
} from "@/components/ui/card";
import {
  Editable,
  EditableArea,
  EditableInput,
  EditablePreview,
} from "@/components/ui/editable";
import {
  Field,
  FieldGroup,
  FieldLabel,
} from "@/components/ui/field";
import { Input } from "@/components/ui/input";

const Example = () => {
  const [isEditing, setIsEditing] = React.useState(false);

  return (
    <Card className="w-full max-w-sm">
      <CardHeader
        description="Click the edit button to start editing"
        title="Edit user"
      >
        <CardAction>
          <Button
            onClick={() => setIsEditing((prev) => !prev)}
            variant={isEditing ? "outline" : "ghost"}
          >
            {isEditing ? (
              <>
                <CheckIcon /> Save
              </>
            ) : (
              <>
                <PencilIcon /> Edit
              </>
            )}
          </Button>
        </CardAction>
      </CardHeader>
      <CardContent>
        <FieldGroup>
          <Field>
            <FieldLabel>Name</FieldLabel>
            <Editable
              activationMode="none"
              defaultValue="Vinicius Vicentini"
              edit={isEditing}
            >
              <EditableArea>
                <EditableInput asChild>
                  <Input />
                </EditableInput>
                <EditablePreview />
              </EditableArea>
            </Editable>
          </Field>
          <Field>
            <FieldLabel>Username</FieldLabel>
            <Editable
              activationMode="none"
              defaultValue="@vinihvc"
              edit={isEditing}
            >
              <EditableArea>
                <EditableInput asChild>
                  <Input />
                </EditableInput>
                <EditablePreview />
              </EditableArea>
            </Editable>
          </Field>
        </FieldGroup>
      </CardContent>
    </Card>
  );
};

export default Example;

```

## Example: dblclick

```tsx
import { CheckIcon, XIcon } from "lucide-react";
import { Button } from "@/components/ui/button";
import {
  Card,
  CardContent,
  CardHeader,
} from "@/components/ui/card";
import {
  Editable,
  EditableArea,
  EditableCancelTrigger,
  EditableControl,
  EditableInput,
  EditablePreview,
  EditableSubmitTrigger,
} from "@/components/ui/editable";
import {
  Field,
  FieldGroup,
  FieldLabel,
} from "@/components/ui/field";
import { Input } from "@/components/ui/input";

const Example = () => (
  <Card className="w-full max-w-sm">
    <CardHeader
      description="Double-click the text to start editing"
      title="Edit with double-click"
    />
    <CardContent>
      <FieldGroup>
        <Field>
          <FieldLabel>Name</FieldLabel>
          <Editable activationMode="dblclick" defaultValue="Vinicius Vicentini">
            <EditableArea>
              <EditableInput asChild>
                <Input />
              </EditableInput>
              <EditablePreview />
            </EditableArea>
            <EditableControl>
              <EditableCancelTrigger asChild>
                <Button aria-label="Cancel" size="icon-md" variant="outline">
                  <XIcon />
                </Button>
              </EditableCancelTrigger>
              <EditableSubmitTrigger asChild>
                <Button aria-label="Save" size="icon-md" variant="outline">
                  <CheckIcon />
                </Button>
              </EditableSubmitTrigger>
            </EditableControl>
          </Editable>
        </Field>
        <Field>
          <FieldLabel>Username</FieldLabel>
          <Editable activationMode="dblclick" defaultValue="@vinihvc">
            <EditableArea>
              <EditableInput asChild>
                <Input />
              </EditableInput>
              <EditablePreview />
            </EditableArea>
            <EditableControl>
              <EditableCancelTrigger asChild>
                <Button aria-label="Cancel" size="icon-md" variant="outline">
                  <XIcon />
                </Button>
              </EditableCancelTrigger>
              <EditableSubmitTrigger asChild>
                <Button aria-label="Save" size="icon-md" variant="outline">
                  <CheckIcon />
                </Button>
              </EditableSubmitTrigger>
            </EditableControl>
          </Editable>
        </Field>
      </FieldGroup>
    </CardContent>
  </Card>
);

export default Example;

```

## Example: default

```tsx
import { CheckIcon, XIcon } from "lucide-react";
import { Button } from "@/components/ui/button";
import {
  Card,
  CardContent,
  CardHeader,
} from "@/components/ui/card";
import {
  Editable,
  EditableArea,
  EditableCancelTrigger,
  EditableControl,
  EditableInput,
  EditablePreview,
  EditableSubmitTrigger,
} from "@/components/ui/editable";
import {
  Field,
  FieldGroup,
  FieldLabel,
} from "@/components/ui/field";
import { Input } from "@/components/ui/input";

const EditableDemo = () => (
  <Card className="w-full max-w-sm">
    <CardHeader
      description="Click in the field or edit button to start editing"
      title="Edit user"
    />
    <CardContent>
      <FieldGroup>
        <Field>
          <FieldLabel>Name</FieldLabel>
          <Editable defaultValue="Vinicius Vicentini">
            <EditableArea>
              <EditableInput asChild>
                <Input className="w-full" />
              </EditableInput>
              <EditablePreview />
            </EditableArea>
            <EditableControl>
              <EditableCancelTrigger asChild>
                <Button size="icon-md" variant="outline">
                  <XIcon />
                </Button>
              </EditableCancelTrigger>
              <EditableSubmitTrigger asChild>
                <Button size="icon-md" variant="outline">
                  <CheckIcon />
                </Button>
              </EditableSubmitTrigger>
            </EditableControl>
          </Editable>
        </Field>
        <Field>
          <FieldLabel>Username</FieldLabel>
          <Editable defaultValue="@vinihvc">
            <EditableArea>
              <EditableInput asChild>
                <Input />
              </EditableInput>
              <EditablePreview />
            </EditableArea>
            <EditableControl>
              <EditableCancelTrigger asChild>
                <Button size="icon-md" variant="outline">
                  <XIcon />
                </Button>
              </EditableCancelTrigger>
              <EditableSubmitTrigger asChild>
                <Button size="icon-md" variant="outline">
                  <CheckIcon />
                </Button>
              </EditableSubmitTrigger>
            </EditableControl>
          </Editable>
        </Field>
      </FieldGroup>
    </CardContent>
  </Card>
);

export default EditableDemo;

```

## Example: orientation-horizontal

```tsx
import { CheckIcon, XIcon } from "lucide-react";
import { Button } from "@/components/ui/button";
import {
  Editable,
  EditableArea,
  EditableCancelTrigger,
  EditableControl,
  EditableInput,
  EditablePreview,
  EditableSubmitTrigger,
} from "@/components/ui/editable";
import { Input } from "@/components/ui/input";

const Example = () => (
  <Editable
    className="w-full max-w-64"
    defaultValue="Editable content"
    orientation="horizontal"
  >
    <EditableArea>
      <EditableInput asChild>
        <Input />
      </EditableInput>
      <EditablePreview />
    </EditableArea>
    <EditableControl>
      <EditableCancelTrigger asChild>
        <Button size="icon-md" variant="outline">
          <XIcon />
        </Button>
      </EditableCancelTrigger>
      <EditableSubmitTrigger asChild>
        <Button size="icon-md" variant="outline">
          <CheckIcon />
        </Button>
      </EditableSubmitTrigger>
    </EditableControl>
  </Editable>
);

export default Example;

```

## Example: orientation-vertical

```tsx
import { CheckIcon, XIcon } from "lucide-react";
import { Button } from "@/components/ui/button";
import {
  Editable,
  EditableArea,
  EditableCancelTrigger,
  EditableControl,
  EditableInput,
  EditablePreview,
  EditableSubmitTrigger,
} from "@/components/ui/editable";
import { Textarea } from "@/components/ui/textarea";

const Example = () => (
  <Editable
    className="w-full max-w-64"
    defaultValue="Editable content"
    orientation="vertical"
  >
    <EditableArea>
      <EditableInput asChild>
        <Textarea className="min-h-24" />
      </EditableInput>
      <EditablePreview className="min-h-24" />
    </EditableArea>
    <EditableControl>
      <EditableCancelTrigger asChild>
        <Button size="icon-md" variant="outline">
          <XIcon />
        </Button>
      </EditableCancelTrigger>
      <EditableSubmitTrigger asChild>
        <Button size="icon-md" variant="outline">
          <CheckIcon />
        </Button>
      </EditableSubmitTrigger>
    </EditableControl>
  </Editable>
);

export default Example;

```

## Example: size-lg

```tsx
import { CheckIcon, XIcon } from "lucide-react";
import { Button } from "@/components/ui/button";
import {
  Editable,
  EditableArea,
  EditableCancelTrigger,
  EditableControl,
  EditableInput,
  EditablePreview,
  EditableSubmitTrigger,
} from "@/components/ui/editable";
import { Input } from "@/components/ui/input";

const Example = () => (
  <Editable className="w-full max-w-64" defaultValue="Editable content">
    <EditableArea>
      <EditableInput asChild>
        <Input size="lg" />
      </EditableInput>
      <EditablePreview size="lg" />
    </EditableArea>
    <EditableControl>
      <EditableCancelTrigger asChild>
        <Button size="icon-lg" variant="outline">
          <XIcon />
        </Button>
      </EditableCancelTrigger>
      <EditableSubmitTrigger asChild>
        <Button size="icon-lg" variant="outline">
          <CheckIcon />
        </Button>
      </EditableSubmitTrigger>
    </EditableControl>
  </Editable>
);

export default Example;

```

## Example: size-md

```tsx
import { CheckIcon, X } from "lucide-react";
import { Button } from "@/components/ui/button";
import {
  Editable,
  EditableArea,
  EditableCancelTrigger,
  EditableControl,
  EditableInput,
  EditablePreview,
  EditableSubmitTrigger,
} from "@/components/ui/editable";
import { Input } from "@/components/ui/input";

const Example = () => (
  <Editable className="w-full max-w-64" defaultValue="Editable content">
    <EditableArea>
      <EditableInput asChild>
        <Input size="md" />
      </EditableInput>
      <EditablePreview size="md" />
    </EditableArea>
    <EditableControl>
      <EditableCancelTrigger asChild>
        <Button size="icon-md" variant="outline">
          <X />
        </Button>
      </EditableCancelTrigger>
      <EditableSubmitTrigger asChild>
        <Button size="icon-md" variant="outline">
          <CheckIcon />
        </Button>
      </EditableSubmitTrigger>
    </EditableControl>
  </Editable>
);

export default Example;

```

## Example: size-sm

```tsx
import { CheckIcon, X } from "lucide-react";
import { Button } from "@/components/ui/button";
import {
  Editable,
  EditableArea,
  EditableCancelTrigger,
  EditableControl,
  EditableInput,
  EditablePreview,
  EditableSubmitTrigger,
} from "@/components/ui/editable";
import { Input } from "@/components/ui/input";

const Example = () => (
  <Editable className="w-full max-w-64" defaultValue="Editable content">
    <EditableArea>
      <EditableInput asChild>
        <Input size="sm" />
      </EditableInput>
      <EditablePreview size="sm" />
    </EditableArea>
    <EditableControl>
      <EditableCancelTrigger asChild>
        <Button size="icon-sm" variant="outline">
          <X />
        </Button>
      </EditableCancelTrigger>
      <EditableSubmitTrigger asChild>
        <Button size="icon-sm" variant="outline">
          <CheckIcon />
        </Button>
      </EditableSubmitTrigger>
    </EditableControl>
  </Editable>
);

export default Example;

```

## Example: with-textarea

```tsx
import { CheckIcon, X } from "lucide-react";
import { Button } from "@/components/ui/button";
import {
  Card,
  CardContent,
  CardHeader,
} from "@/components/ui/card";
import {
  Editable,
  EditableArea,
  EditableCancelTrigger,
  EditableControl,
  EditableInput,
  EditablePreview,
  EditableSubmitTrigger,
} from "@/components/ui/editable";
import {
  Field,
  FieldGroup,
  FieldLabel,
} from "@/components/ui/field";
import { Textarea } from "@/components/ui/textarea";

const Example = () => (
  <Card className="w-full max-w-sm">
    <CardHeader
      description="Double-click the text to start editing"
      title="Edit description"
    />
    <CardContent>
      <FieldGroup>
        <Field>
          <FieldLabel>Description</FieldLabel>
          <Editable
            defaultValue="This is a longer description that can be edited. Click to edit and make changes."
            orientation="vertical"
          >
            <EditableArea>
              <EditableInput asChild>
                <Textarea className="min-h-24" />
              </EditableInput>
              <EditablePreview className="min-h-24" />
            </EditableArea>
            <EditableControl>
              <EditableCancelTrigger asChild>
                <Button aria-label="Cancel" size="icon-md" variant="outline">
                  <X />
                </Button>
              </EditableCancelTrigger>
              <EditableSubmitTrigger asChild>
                <Button aria-label="Save" size="icon-md" variant="outline">
                  <CheckIcon />
                </Button>
              </EditableSubmitTrigger>
            </EditableControl>
          </Editable>
        </Field>
      </FieldGroup>
    </CardContent>
  </Card>
);

export default Example;

```

## Example: without-controls

```tsx
import {
  Card,
  CardContent,
  CardHeader,
} from "@/components/ui/card";
import {
  Editable,
  EditableArea,
  EditableInput,
  EditablePreview,
} from "@/components/ui/editable";
import {
  Field,
  FieldGroup,
  FieldLabel,
} from "@/components/ui/field";
import { Input } from "@/components/ui/input";

const Example = () => (
  <Card className="w-full max-w-sm">
    <CardHeader
      description="Click the field to edit, press Enter to save, Escape to cancel"
      title="Edit without controls"
    />
    <CardContent>
      <FieldGroup>
        <Field>
          <FieldLabel>Name</FieldLabel>
          <Editable defaultValue="Vinicius Vicentini">
            <EditableArea>
              <EditableInput asChild>
                <Input />
              </EditableInput>
              <EditablePreview />
            </EditableArea>
          </Editable>
        </Field>
        <Field>
          <FieldLabel>Email</FieldLabel>
          <Editable defaultValue="vinicius@example.com">
            <EditableArea>
              <EditableInput asChild>
                <Input />
              </EditableInput>
              <EditablePreview />
            </EditableArea>
          </Editable>
        </Field>
      </FieldGroup>
    </CardContent>
  </Card>
);

export default Example;

```

# Field - Examples and Patterns

Examples for Field component.

## Example: autocomplete-field

```tsx
"use client";

import { useFilter, useListCollection } from "@ark-ui/react";
import {
  Autocomplete,
  AutocompleteContent,
  AutocompleteEmpty,
  AutocompleteInput,
  AutocompleteItem,
} from "@/components/ui/autocomplete";
import { ComboboxList } from "@/components/ui/combobox";
import {
  Field,
  FieldDescription,
  FieldLabel,
} from "@/components/ui/field";

const Example = () => {
  const { contains } = useFilter({ sensitivity: "base" });

  const { collection, filter } = useListCollection({
    initialItems,
    filter: contains,
  });

  return (
    <Field className="w-full max-w-xs">
      <FieldLabel>Fruits</FieldLabel>
      <Autocomplete
        collection={collection}
        onInputValueChange={({ inputValue }) => filter(inputValue)}
      >
        <AutocompleteInput
          aria-label="Search items"
          placeholder="Search items…"
        />
        <AutocompleteContent>
          <AutocompleteEmpty>No items found.</AutocompleteEmpty>
          <ComboboxList>
            {collection.items.map((item) => (
              <AutocompleteItem item={item} key={item.value}>
                {item.label}
              </AutocompleteItem>
            ))}
          </ComboboxList>
        </AutocompleteContent>
      </Autocomplete>
      <FieldDescription>Select an item.</FieldDescription>
    </Field>
  );
};

const initialItems = [
  { label: "Apple", value: "apple" },
  { label: "Banana", value: "banana" },
  { label: "Orange", value: "orange" },
  { label: "Grape", value: "grape" },
  { label: "Strawberry", value: "strawberry" },
  { label: "Mango", value: "mango" },
  { label: "Pineapple", value: "pineapple" },
  { label: "Kiwi", value: "kiwi" },
  { label: "Peach", value: "peach" },
  { label: "Pear", value: "pear" },
];

export default Example;

```

## Example: checkbox-field

```tsx
"use client";

import { Checkbox } from "@/components/ui/checkbox";
import {
  Field,
  FieldContent,
  FieldDescription,
  FieldLabel,
} from "@/components/ui/field";

const Example = () => (
  <Field className="w-full max-w-xs" orientation="horizontal">
    <Checkbox />
    <FieldContent>
      <FieldLabel>Receive notifications</FieldLabel>
      <FieldDescription>
        You'll receive a notification when someone posts a comment
      </FieldDescription>
    </FieldContent>
  </Field>
);

export default Example;

```

## Example: checkbox-group-field

```tsx
"use client";

import { Checkbox, CheckboxGroup } from "@/components/ui/checkbox";
import {
  Field,
  FieldGroup,
  FieldLabel,
  FieldLegend,
  FieldSet,
} from "@/components/ui/field";

const Example = () => (
  <FieldSet>
    <FieldLegend variant="label">
      Select the items you want to show:
    </FieldLegend>
    <FieldGroup>
      <CheckboxGroup
        className="gap-3"
        defaultValue={["hard-disks", "external-disks"]}
      >
        <Field orientation="horizontal">
          <Checkbox defaultChecked value="hard-disks" />
          <FieldLabel className="font-normal">Hard disks</FieldLabel>
        </Field>
        <Field orientation="horizontal">
          <Checkbox defaultChecked value="external-disks" />
          <FieldLabel className="font-normal">External disks</FieldLabel>
        </Field>
        <Field orientation="horizontal">
          <Checkbox value="cds-dvds-ipods" />
          <FieldLabel className="font-normal">CDs, DVDs, and iPods</FieldLabel>
        </Field>
        <Field orientation="horizontal">
          <Checkbox value="connected-servers" />
          <FieldLabel className="font-normal">Connected servers</FieldLabel>
        </Field>
      </CheckboxGroup>
    </FieldGroup>
  </FieldSet>
);

export default Example;

```

## Example: combobox-field

```tsx
"use client";

import { useFilter, useListCollection } from "@ark-ui/react";
import {
  Combobox,
  ComboboxContent,
  ComboboxInput,
  ComboboxItem,
  ComboboxList,
} from "@/components/ui/combobox";
import {
  Field,
  FieldDescription,
  FieldLabel,
} from "@/components/ui/field";

const Example = () => {
  const { contains } = useFilter({ sensitivity: "base" });

  const { collection, filter } = useListCollection({
    initialItems,
    filter: contains,
  });

  return (
    <Field className="w-full max-w-xs">
      <FieldLabel>Fruits</FieldLabel>
      <Combobox
        collection={collection}
        onInputValueChange={({ inputValue }) => filter(inputValue)}
      >
        <ComboboxInput
          aria-label="Select an item"
          placeholder="Select an item..."
        />
        <ComboboxContent>
          <ComboboxList>
            {collection.items.map((item) => (
              <ComboboxItem item={item} key={item.value}>
                {item.label}
              </ComboboxItem>
            ))}
          </ComboboxList>
        </ComboboxContent>
      </Combobox>
      <FieldDescription>Select an item.</FieldDescription>
    </Field>
  );
};

const initialItems = [
  { label: "Apple", value: "apple" },
  { label: "Banana", value: "banana" },
  { label: "Orange", value: "orange" },
  { label: "Grape", value: "grape" },
  { label: "Strawberry", value: "strawberry" },
  { label: "Mango", value: "mango" },
  { label: "Pineapple", value: "pineapple" },
  { label: "Kiwi", value: "kiwi" },
  { label: "Peach", value: "peach" },
  { label: "Pear", value: "pear" },
];

export default Example;

```

## Example: combobox-multiple-field

```tsx
"use client";

import { useFilter, useListCollection } from "@ark-ui/react";
import {
  Combobox,
  ComboboxContent,
  ComboboxInput,
  ComboboxItem,
  ComboboxList,
} from "@/components/ui/combobox";
import {
  Field,
  FieldDescription,
  FieldLabel,
} from "@/components/ui/field";

const Example = () => {
  const { contains } = useFilter({ sensitivity: "base" });

  const { collection, filter } = useListCollection({
    initialItems,
    filter: contains,
  });

  return (
    <Field className="w-full max-w-xs">
      <FieldLabel>Fruits</FieldLabel>
      <Combobox
        collection={collection}
        multiple
        onInputValueChange={({ inputValue }) => filter(inputValue)}
      >
        <ComboboxInput aria-label="Select items" placeholder="Select items…" />
        <ComboboxContent>
          <ComboboxList>
            {collection.items.map((item) => (
              <ComboboxItem item={item} key={item.value}>
                {item.label}
              </ComboboxItem>
            ))}
          </ComboboxList>
        </ComboboxContent>
      </Combobox>
      <FieldDescription>Select multiple items.</FieldDescription>
    </Field>
  );
};

const initialItems = [
  { label: "Apple", value: "apple" },
  { label: "Banana", value: "banana" },
  { label: "Orange", value: "orange" },
  { label: "Grape", value: "grape" },
  { label: "Strawberry", value: "strawberry" },
  { label: "Mango", value: "mango" },
  { label: "Pineapple", value: "pineapple" },
  { label: "Kiwi", value: "kiwi" },
  { label: "Peach", value: "peach" },
  { label: "Pear", value: "pear" },
];

export default Example;

```

## Example: default

```tsx
"use client";

import {
  Field,
  FieldDescription,
  FieldLabel,
} from "@/components/ui/field";
import { Input } from "@/components/ui/input";

const FieldDemo = () => (
  <Field className="w-full max-w-xs">
    <FieldLabel>Username</FieldLabel>
    <Input placeholder="John Doe" />
    <FieldDescription>
      Choose a unique username for your account.
    </FieldDescription>
  </Field>
);

export default FieldDemo;

```

## Example: disabled-field

```tsx
"use client";

import {
  Field,
  FieldDescription,
  FieldLabel,
} from "@/components/ui/field";
import { Input } from "@/components/ui/input";

const Example = () => (
  <Field className="w-full max-w-xs" disabled>
    <FieldLabel>Email</FieldLabel>
    <Input disabled placeholder="Enter your email" type="email" />
    <FieldDescription>This field is currently disabled.</FieldDescription>
  </Field>
);

export default Example;

```

## Example: field-group

```tsx
"use client";

import { Checkbox, CheckboxGroup } from "@/components/ui/checkbox";
import {
  Field,
  FieldDescription,
  FieldGroup,
  FieldLabel,
  FieldLegend,
  FieldSeparator,
  FieldSet,
} from "@/components/ui/field";

const Example = () => (
  <FieldGroup className="w-full max-w-xs">
    <FieldSet>
      <FieldLegend variant="label">Newsletter</FieldLegend>
      <FieldDescription>
        Choose how you want to receive updates about new features and product
        releases.
      </FieldDescription>
      <CheckboxGroup className="gap-3" defaultValue={["weekly"]}>
        <Field className="w-full max-w-xs" orientation="horizontal">
          <Checkbox disabled id="weekly" value="weekly" />
          <FieldLabel className="font-normal" htmlFor="weekly">
            Weekly digest
          </FieldLabel>
        </Field>
      </CheckboxGroup>
    </FieldSet>
    <FieldSeparator />
    <FieldSet>
      <FieldLegend variant="label">Updates</FieldLegend>
      <FieldDescription>
        Get notified about important account activity.{" "}
        <a href="#">View activity log</a>
      </FieldDescription>
      <CheckboxGroup className="gap-3">
        <Field className="w-full max-w-xs" orientation="horizontal">
          <Checkbox id="security" value="security" />
          <FieldLabel className="font-normal" htmlFor="security">
            Security alerts
          </FieldLabel>
        </Field>
        <Field className="w-full max-w-xs" orientation="horizontal">
          <Checkbox id="billing" value="billing" />
          <FieldLabel className="font-normal" htmlFor="billing">
            Billing reminders
          </FieldLabel>
        </Field>
      </CheckboxGroup>
    </FieldSet>
  </FieldGroup>
);

export default Example;

```

## Example: input-group

```tsx
"use client";

import { ArrowRightIcon } from "lucide-react";
import {
  Field,
  FieldError,
  FieldLabel,
} from "@/components/ui/field";
import {
  InputGroup,
  InputGroupAddon,
  InputGroupButton,
  InputGroupInput,
} from "@/components/ui/input-group";

const Example = () => (
  <Field className="w-full max-w-xs">
    <FieldLabel>Subscribe</FieldLabel>
    <InputGroup>
      <InputGroupInput placeholder="Your best email" type="email" />
      <InputGroupAddon align="inline-end">
        <InputGroupButton aria-label="Subscribe" size="icon-xs" variant="ghost">
          <ArrowRightIcon aria-hidden />
        </InputGroupButton>
      </InputGroupAddon>
    </InputGroup>
    <FieldError>Please enter a valid email address.</FieldError>
  </Field>
);

export default Example;

```

## Example: number-input

```tsx
"use client";

import { Field } from "@/components/ui/field";
import {
  NumberField,
  NumberFieldGroup,
  NumberFieldInput,
  NumberFieldScrubber,
} from "@/components/ui/number-input";

const Example = () => (
  <Field className="w-full max-w-48">
    <NumberField defaultValue="50" max={100} min={1}>
      <NumberFieldScrubber>Quantity</NumberFieldScrubber>
      <NumberFieldGroup>
        <NumberFieldInput />
      </NumberFieldGroup>
    </NumberField>
  </Field>
);

export default Example;

```

## Example: orientation-horizontal

```tsx
"use client";

import { Field, FieldLabel } from "@/components/ui/field";
import { Switch } from "@/components/ui/switch";

const Example = () => (
  <Field className="w-full max-w-xs" orientation="horizontal">
    <Switch />
    <FieldLabel>Enable notifications</FieldLabel>
  </Field>
);

export default Example;

```

## Example: orientation-vertical

```tsx
"use client";

import {
  Field,
  FieldDescription,
  FieldLabel,
} from "@/components/ui/field";
import { Input } from "@/components/ui/input";

const Example = () => (
  <Field className="w-full max-w-xs" orientation="vertical">
    <FieldLabel>Name</FieldLabel>
    <Input placeholder="Enter your name" type="text" />
    <FieldDescription>
      Stacks label, control, and description vertically.
    </FieldDescription>
  </Field>
);

export default Example;

```

## Example: radio-group-field

```tsx
"use client";

import {
  Field,
  FieldDescription,
  FieldLegend,
  FieldSet,
} from "@/components/ui/field";
import {
  RadioGroup,
  RadioGroupItem,
} from "@/components/ui/radio-group";

const Example = () => (
  <FieldSet className="w-full max-w-xs">
    <FieldLegend variant="label">Choose Plan</FieldLegend>
    <RadioGroup defaultValue="free">
      <Field>
        <RadioGroupItem value="free">Free</RadioGroupItem>
      </Field>
      <Field>
        <RadioGroupItem value="pro">Pro</RadioGroupItem>
      </Field>
      <Field>
        <RadioGroupItem value="enterprise">Enterprise</RadioGroupItem>
      </Field>
    </RadioGroup>
    <FieldDescription>Select the plan that fits your needs.</FieldDescription>
  </FieldSet>
);

export default Example;

```

## Example: required-field

```tsx
"use client";

import {
  Field,
  FieldError,
  FieldLabel,
  FieldRequiredIndicator,
} from "@/components/ui/field";
import { Input } from "@/components/ui/input";

const Example = () => (
  <Field className="w-full max-w-xs" required>
    <FieldLabel>
      Password <FieldRequiredIndicator />
    </FieldLabel>
    <Input placeholder="Enter password" type="password" />
    <FieldError>Please fill out this field.</FieldError>
  </Field>
);

export default Example;

```

## Example: select-field

```tsx
"use client";

import { createListCollection } from "@ark-ui/react";
import {
  Field,
  FieldDescription,
  FieldLabel,
} from "@/components/ui/field";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";

const Example = () => (
  <Field className="w-full max-w-64">
    <FieldLabel>Country</FieldLabel>
    <Select collection={collection}>
      <SelectTrigger className="w-full">
        <SelectValue placeholder="Select a country" />
      </SelectTrigger>
      <SelectContent>
        {collection.items.map((item) => (
          <SelectItem item={item} key={item}>
            {item}
          </SelectItem>
        ))}
      </SelectContent>
    </Select>
    <FieldDescription>Used for shipping estimates</FieldDescription>
  </Field>
);

const collection = createListCollection({
  items: ["Brazil", "Mexico", "Ireland"],
});

export default Example;

```

## Example: slider-field

```tsx
"use client";

import { Field, FieldDescription } from "@/components/ui/field";
import { Slider, SliderLabel } from "@/components/ui/slider";

const Example = () => (
  <Field className="w-full max-w-xs items-stretch gap-3">
    <Slider defaultValue={[50]}>
      <SliderLabel>Volume</SliderLabel>
    </Slider>
    <FieldDescription>Adjust the volume of the media player</FieldDescription>
  </Field>
);

export default Example;

```

## Example: switch-field

```tsx
"use client";

import { Field, FieldLabel } from "@/components/ui/field";
import { Switch } from "@/components/ui/switch";

const Example = () => (
  <Field className="w-full max-w-xs" orientation="horizontal">
    <Switch defaultChecked />
    <FieldLabel> Airplane mode</FieldLabel>
  </Field>
);

export default Example;

```

## Example: textarea-field

```tsx
"use client";

import {
  Field,
  FieldDescription,
  FieldLabel,
} from "@/components/ui/field";
import { Textarea } from "@/components/ui/textarea";

const Example = () => (
  <Field className="w-full max-w-xs">
    <FieldLabel>Bio</FieldLabel>
    <Textarea placeholder="Tell us about yourself…" />
    <FieldDescription>
      Write a short bio. Maximum 500 characters.
    </FieldDescription>
  </Field>
);

export default Example;

```

## Example: with-error

```tsx
"use client";

import {
  Field,
  FieldError,
  FieldLabel,
} from "@/components/ui/field";
import { Input } from "@/components/ui/input";

const Example = () => (
  <Field className="w-full max-w-xs" invalid>
    <FieldLabel>Email</FieldLabel>
    <Input placeholder="Enter your email" type="email" />
    <FieldError>Please enter a valid email address.</FieldError>
  </Field>
);

export default Example;

```

# File Upload - Examples and Patterns

Examples for File Upload component.

## Example: accepted-file-types

```tsx
import {
  FileUpload,
  FileUploadDropzone,
  FileUploadDropzoneIcon,
  FileUploadHelper,
  FileUploadList,
  FileUploadTitle,
} from "@/components/ui/file-upload";

const Example = () => (
  <FileUpload accept="image/png,image/jpeg" className="w-full max-w-xs">
    <FileUploadDropzone className="w-full">
      <FileUploadDropzoneIcon />
      <FileUploadTitle>Drop your images here</FileUploadTitle>
      <FileUploadHelper>
        Only PNG and JPEG formats are allowed.
      </FileUploadHelper>
    </FileUploadDropzone>
    <FileUploadList />
  </FileUpload>
);

export default Example;

```

## Example: clear-trigger

```tsx
"use client";

import { Trash2Icon } from "lucide-react";
import { Button } from "@/components/ui/button";
import {
  FileUpload,
  FileUploadClearTrigger,
  FileUploadDropzone,
  FileUploadDropzoneIcon,
  FileUploadList,
  FileUploadTitle,
} from "@/components/ui/file-upload";

const Example = () => (
  <FileUpload className="w-full max-w-xs">
    <FileUploadClearTrigger asChild className="absolute top-2 right-2">
      <Button aria-label="Clear files" size="icon-sm" variant="ghost">
        <Trash2Icon />
      </Button>
    </FileUploadClearTrigger>
    <FileUploadDropzone className="w-full">
      <FileUploadDropzoneIcon />
      <FileUploadTitle>Drop files here</FileUploadTitle>
    </FileUploadDropzone>
    <FileUploadList />
  </FileUpload>
);

export default Example;

```

## Example: custom-preview

```tsx
"use client";

import { XIcon } from "lucide-react";
import { Button } from "@/components/ui/button";
import {
  FileUpload,
  FileUploadDropzone,
  FileUploadDropzoneIcon,
  FileUploadItem,
  FileUploadItemDeleteTrigger,
  FileUploadItemGroup,
  FileUploadItemPreview,
  FileUploadItemPreviewImage,
  FileUploadTitle,
  useFileUpload,
} from "@/components/ui/file-upload";

const Example = () => (
  <FileUpload accept="image/*" className="w-full max-w-xs">
    <FileUploadDropzone>
      <FileUploadDropzoneIcon />
      <FileUploadTitle>Drop files here</FileUploadTitle>
    </FileUploadDropzone>
    <CustomPreviewList />
  </FileUpload>
);

const CustomPreviewList = () => {
  const fileUpload = useFileUpload();

  const files = fileUpload.acceptedFiles;

  if (files.length === 0) {
    return null;
  }

  return (
    <FileUploadItemGroup className="grid grid-cols-4 gap-2">
      {files.map((file) => (
        <FileUploadItem file={file} key={file.name}>
          <FileUploadItemPreview
            className="size-auto w-full rounded-2xl"
            type="image/*"
          >
            <FileUploadItemPreviewImage />
          </FileUploadItemPreview>
          <FileUploadItemDeleteTrigger asChild>
            <Button className="absolute -top-2 -right-2" pill size="icon-xs">
              <XIcon />
            </Button>
          </FileUploadItemDeleteTrigger>
        </FileUploadItem>
      ))}
    </FileUploadItemGroup>
  );
};

export default Example;

```

## Example: custom-spacing

```tsx
"use client";

import {
  FileUpload,
  FileUploadDropzone,
  FileUploadDropzoneIcon,
  FileUploadList,
  FileUploadTitle,
} from "@/components/ui/file-upload";

const Example = () => (
  <FileUpload className="w-full max-w-xs">
    <FileUploadDropzone className="[--space:--spacing(4)] md:[--space:--spacing(6)]">
      <FileUploadDropzoneIcon />
      <FileUploadTitle>Drop your files here</FileUploadTitle>
    </FileUploadDropzone>
    <FileUploadList />
  </FileUpload>
);

export default Example;

```

## Example: default

```tsx
"use client";

import { Button } from "@/components/ui/button";
import {
  FileUpload,
  FileUploadDescription,
  FileUploadDropzone,
  FileUploadDropzoneIcon,
  FileUploadHelper,
  FileUploadList,
  FileUploadTitle,
  FileUploadTrigger,
} from "@/components/ui/file-upload";
import { Separator } from "@/components/ui/separator";

const FileUploadDemo = () => (
  <FileUpload className="mx-auto w-full max-w-xs">
    <FileUploadDropzone>
      <FileUploadDropzoneIcon />
      <FileUploadTitle>Drop files here</FileUploadTitle>
      <div className="flex items-center justify-center gap-2">
        <Separator />
        <FileUploadDescription>or</FileUploadDescription>
        <Separator />
      </div>
      <FileUploadTrigger asChild>
        <Button>Browse files</Button>
      </FileUploadTrigger>
      <FileUploadHelper>
        You can upload up to 2 files at a time.
      </FileUploadHelper>
    </FileUploadDropzone>
    <FileUploadList />
  </FileUpload>
);

export default FileUploadDemo;

```

## Example: directory-upload

```tsx
"use client";

import { Folder } from "lucide-react";
import { Button } from "@/components/ui/button";
import {
  FileUpload,
  FileUploadList,
  FileUploadTrigger,
} from "@/components/ui/file-upload";

const Example = () => (
  <FileUpload className="w-full max-w-xs" directory>
    <div className="flex justify-center">
      <FileUploadTrigger asChild>
        <Button size="sm" variant="outline">
          <Folder />
          Select Folder
        </Button>
      </FileUploadTrigger>
      <FileUploadList />
    </div>
  </FileUpload>
);

export default Example;

```

## Example: dropzone

```tsx
"use client";

import {
  FileUpload,
  FileUploadDropzone,
  FileUploadDropzoneIcon,
  FileUploadList,
  FileUploadTitle,
} from "@/components/ui/file-upload";

const Example = () => (
  <FileUpload className="w-full max-w-xs">
    <FileUploadDropzone>
      <FileUploadDropzoneIcon />
      <FileUploadTitle>Drop your files here</FileUploadTitle>
    </FileUploadDropzone>
    <FileUploadList />
  </FileUpload>
);

export default Example;

```

## Example: media-capture

```tsx
"use client";

import { CameraIcon } from "lucide-react";
import { Button } from "@/components/ui/button";
import {
  FileUpload,
  FileUploadList,
  FileUploadTrigger,
} from "@/components/ui/file-upload";

const Example = () => (
  <FileUpload capture="environment" className="w-full max-w-xs">
    <div className="flex justify-center">
      <FileUploadTrigger asChild>
        <Button variant="outline">
          <CameraIcon />
          Take a picture
        </Button>
      </FileUploadTrigger>
    </div>
    <FileUploadList />
  </FileUpload>
);

export default Example;

```

## Example: multiple-files

```tsx
"use client";

import { Button } from "@/components/ui/button";
import {
  FileUpload,
  FileUploadDescription,
  FileUploadDropzone,
  FileUploadDropzoneIcon,
  FileUploadHelper,
  FileUploadList,
  FileUploadTitle,
  FileUploadTrigger,
} from "@/components/ui/file-upload";
import { Separator } from "@/components/ui/separator";

const Example = () => (
  <FileUpload className="mx-auto w-full max-w-xs" maxFiles={5}>
    <FileUploadDropzone>
      <FileUploadDropzoneIcon />
      <FileUploadTitle>Drop files here</FileUploadTitle>
      <div className="flex items-center justify-center gap-2">
        <Separator />
        <FileUploadDescription>or</FileUploadDescription>
        <Separator />
      </div>
      <FileUploadTrigger asChild>
        <Button>Browse files</Button>
      </FileUploadTrigger>
      <FileUploadHelper>
        You can upload up to 5 files at a time.
      </FileUploadHelper>
    </FileUploadDropzone>
    <FileUploadList />
  </FileUpload>
);

export default Example;

```

## Example: trigger

```tsx
import { PaperclipIcon } from "lucide-react";
import { Button } from "@/components/ui/button";
import {
  FileUpload,
  FileUploadList,
  FileUploadTrigger,
} from "@/components/ui/file-upload";

const Example = () => (
  <FileUpload>
    <div className="flex justify-center">
      <FileUploadTrigger asChild>
        <Button variant="outline">
          <PaperclipIcon />
          Browse files
        </Button>
      </FileUploadTrigger>
    </div>
    <FileUploadList />
  </FileUpload>
);

export default Example;

```

## Example: with-field

```tsx
"use client";

import { Field, FieldLabel } from "@/components/ui/field";
import {
  FileUpload,
  FileUploadDropzone,
  FileUploadDropzoneIcon,
  FileUploadList,
} from "@/components/ui/file-upload";

const Example = () => (
  <Field className="w-full max-w-xs">
    <FieldLabel>Upload images</FieldLabel>
    <FileUpload className="w-full">
      <FileUploadDropzone>
        <FileUploadDropzoneIcon />
      </FileUploadDropzone>
      <FileUploadList />
    </FileUpload>
  </Field>
);

export default Example;

```

# Float - Examples and Patterns

Examples for Float component.

## Example: default

```tsx
import { BellIcon } from "lucide-react";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { Float } from "@/components/ui/float";

const FloatDemo = () => (
  <div className="relative">
    <Button size="icon-lg" variant="outline">
      <BellIcon />
    </Button>
    <Float>
      <Badge pill size="sm" variant="default">
        9+
      </Badge>
    </Float>
  </div>
);

export default FloatDemo;

```

## Example: placement

```tsx
import { Badge } from "@/components/ui/badge";
import { Float } from "@/components/ui/float";

const Example = () => (
  <div className="grid grid-cols-3 gap-4">
    {placements.map((placement) => (
      <div
        className="flex flex-col items-center justify-center gap-2"
        key={placement}
      >
        <span className="text-muted-foreground text-xs">{placement}</span>
        <div className="relative size-16 rounded-lg border bg-muted/30">
          <Float placement={placement}>
            <Badge>3</Badge>
          </Float>
        </div>
      </div>
    ))}
  </div>
);

const placements = [
  "top-start",
  "top-center",
  "top-end",
  "middle-start",
  "middle-center",
  "middle-end",
  "bottom-start",
  "bottom-center",
  "bottom-end",
] as const;

export default Example;

```

# Floating Panel - Examples and Patterns

Examples for Floating Panel component.

## Example: controlled-position

```tsx
"use client";

import {
  ChevronDownIcon,
  ChevronLeftIcon,
  ChevronRightIcon,
  ChevronUpIcon,
  Settings2Icon,
  XIcon,
} from "lucide-react";
import React from "react";
import { Button } from "@/components/ui/button";
import {
  FloatingPanel,
  FloatingPanelBody,
  FloatingPanelCloseTrigger,
  FloatingPanelContent,
  FloatingPanelControl,
  FloatingPanelHeader,
  FloatingPanelMaximize,
  FloatingPanelMinimize,
  FloatingPanelRestore,
  FloatingPanelTitle,
  FloatingPanelTrigger,
} from "@/components/ui/floating-panel";

const Example = () => {
  const [position, setPosition] = React.useState({ x: 200, y: 200 });

  return (
    <div className="flex flex-col gap-4">
      <FloatingPanel
        onPositionChange={(details) => setPosition(details.position)}
        position={position}
      >
        <FloatingPanelTrigger asChild>
          <Button variant="outline">Open</Button>
        </FloatingPanelTrigger>
        <FloatingPanelContent>
          <FloatingPanelHeader>
            <Settings2Icon />
            <FloatingPanelTitle>Settings</FloatingPanelTitle>
            <FloatingPanelControl>
              <FloatingPanelMinimize />
              <FloatingPanelMaximize />
              <FloatingPanelRestore />
              <FloatingPanelCloseTrigger asChild>
                <Button aria-label="Close" size="icon-sm">
                  <XIcon aria-hidden />
                </Button>
              </FloatingPanelCloseTrigger>
            </FloatingPanelControl>
          </FloatingPanelHeader>
          <FloatingPanelBody className="text-center text-muted-foreground text-sm">
            <p>
              Position: ({position.x}, {position.y}).{" "}
            </p>
            <p>Use the buttons to move the panel.</p>

            <div className="flex flex-col items-center gap-1">
              <div>
                <Button
                  aria-label="Move up"
                  onClick={() =>
                    setPosition((prev) => ({ ...prev, y: prev.y - 20 }))
                  }
                  size="icon-md"
                  variant="outline"
                >
                  <ChevronUpIcon aria-hidden />
                </Button>
              </div>

              <div className="flex gap-1">
                <Button
                  aria-label="Move left"
                  onClick={() =>
                    setPosition((prev) => ({ ...prev, x: prev.x - 20 }))
                  }
                  size="icon-md"
                  variant="outline"
                >
                  <ChevronLeftIcon aria-hidden />
                </Button>
                <Button
                  aria-label="Move down"
                  onClick={() =>
                    setPosition((prev) => ({ ...prev, y: prev.y + 20 }))
                  }
                  size="icon-md"
                  variant="outline"
                >
                  <ChevronDownIcon aria-hidden />
                </Button>
                <Button
                  aria-label="Move right"
                  onClick={() =>
                    setPosition((prev) => ({ ...prev, x: prev.x + 20 }))
                  }
                  size="icon-md"
                  variant="outline"
                >
                  <ChevronRightIcon aria-hidden />
                </Button>
              </div>
            </div>
          </FloatingPanelBody>
        </FloatingPanelContent>
      </FloatingPanel>
    </div>
  );
};

export default Example;

```

## Example: controlled-size

```tsx
"use client";

import { Settings2Icon, XIcon } from "lucide-react";
import React from "react";
import { Button } from "@/components/ui/button";
import {
  FloatingPanel,
  FloatingPanelBody,
  FloatingPanelCloseTrigger,
  FloatingPanelContent,
  FloatingPanelControl,
  FloatingPanelHeader,
  FloatingPanelMaximize,
  FloatingPanelMinimize,
  FloatingPanelRestore,
  FloatingPanelTitle,
  FloatingPanelTrigger,
} from "@/components/ui/floating-panel";

const Example = () => {
  const [size, setSize] = React.useState({ width: 360, height: 200 });

  return (
    <FloatingPanel
      onSizeChange={(details) => setSize(details.size)}
      size={size}
    >
      <FloatingPanelTrigger asChild>
        <Button variant="outline">Open</Button>
      </FloatingPanelTrigger>
      <FloatingPanelContent>
        <FloatingPanelHeader>
          <Settings2Icon />
          <FloatingPanelTitle>Settings</FloatingPanelTitle>
          <FloatingPanelControl>
            <FloatingPanelMinimize />
            <FloatingPanelMaximize />
            <FloatingPanelRestore />
            <FloatingPanelCloseTrigger asChild>
              <Button aria-label="Close" size="icon-sm">
                <XIcon aria-hidden />
              </Button>
            </FloatingPanelCloseTrigger>
          </FloatingPanelControl>
        </FloatingPanelHeader>
        <FloatingPanelBody className="text-center text-muted-foreground text-sm">
          <p>
            Size: {size.width} × {size.height}.
          </p>

          <p>Use the buttons above or drag the edges to resize.</p>

          <div className="flex gap-2">
            <Button
              className="flex-1"
              onClick={() =>
                setSize((prev) => ({
                  ...prev,
                  width: prev.width - 50,
                  height: prev.height - 40,
                }))
              }
              variant="outline"
            >
              Shrink
            </Button>
            <Button
              className="flex-1"
              onClick={() =>
                setSize((prev) => ({
                  ...prev,
                  width: prev.width + 50,
                  height: prev.height + 40,
                }))
              }
              variant="outline"
            >
              Grow
            </Button>
          </div>
        </FloatingPanelBody>
      </FloatingPanelContent>
    </FloatingPanel>
  );
};

export default Example;

```

## Example: custom-spacing

```tsx
"use client";

import { createListCollection } from "@ark-ui/react";
import { Settings2Icon, XIcon } from "lucide-react";
import { Button } from "@/components/ui/button";
import { Field, FieldLabel } from "@/components/ui/field";
import {
  FloatingPanel,
  FloatingPanelBody,
  FloatingPanelCloseTrigger,
  FloatingPanelContent,
  FloatingPanelControl,
  FloatingPanelFooter,
  FloatingPanelHeader,
  FloatingPanelMaximize,
  FloatingPanelMinimize,
  FloatingPanelRestore,
  FloatingPanelTitle,
  FloatingPanelTrigger,
} from "@/components/ui/floating-panel";
import {
  NumberField,
  NumberFieldDecrement,
  NumberFieldGroup,
  NumberFieldIncrement,
  NumberFieldInput,
} from "@/components/ui/number-input";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";

const collection = createListCollection({
  items: ["Inter", "Roboto", "Helvetica", "Geist"],
});

const Example = () => {
  return (
    <FloatingPanel defaultSize={{ width: 360, height: 300 }}>
      <FloatingPanelTrigger asChild>
        <Button variant="outline">Open</Button>
      </FloatingPanelTrigger>
      <FloatingPanelContent className="[--space:--spacing(3)] sm:[--space:--spacing(6)]">
        <FloatingPanelHeader>
          <Settings2Icon />
          <FloatingPanelTitle>Settings</FloatingPanelTitle>
          <FloatingPanelControl>
            <FloatingPanelMinimize />
            <FloatingPanelMaximize />
            <FloatingPanelRestore />
            <FloatingPanelCloseTrigger asChild>
              <Button aria-label="Close" size="icon-xs">
                <XIcon aria-hidden />
              </Button>
            </FloatingPanelCloseTrigger>
          </FloatingPanelControl>
        </FloatingPanelHeader>
        <FloatingPanelBody>
          <Field>
            <FieldLabel>Font family</FieldLabel>
            <Select collection={collection} defaultValue={["Inter"]}>
              <SelectTrigger className="w-full">
                <SelectValue />
              </SelectTrigger>
              <SelectContent>
                {collection.items.map((item) => (
                  <SelectItem item={item} key={item}>
                    {item}
                  </SelectItem>
                ))}
              </SelectContent>
            </Select>
          </Field>
          <Field>
            <FieldLabel>Font size</FieldLabel>
            <NumberField className="w-full" defaultValue="16">
              <NumberFieldGroup>
                <NumberFieldDecrement />
                <NumberFieldInput />
                <NumberFieldIncrement />
              </NumberFieldGroup>
            </NumberField>
          </Field>
        </FloatingPanelBody>
        <FloatingPanelFooter>
          <Button variant="outline">Save</Button>
        </FloatingPanelFooter>
      </FloatingPanelContent>
    </FloatingPanel>
  );
};

export default Example;

```

## Example: default

```tsx
"use client";

import { createListCollection } from "@ark-ui/react";
import { Settings2Icon, XIcon } from "lucide-react";
import { Button } from "@/components/ui/button";
import { Field, FieldLabel } from "@/components/ui/field";
import {
  FloatingPanel,
  FloatingPanelBody,
  FloatingPanelCloseTrigger,
  FloatingPanelContent,
  FloatingPanelControl,
  FloatingPanelFooter,
  FloatingPanelHeader,
  FloatingPanelMaximize,
  FloatingPanelMinimize,
  FloatingPanelRestore,
  FloatingPanelTitle,
  FloatingPanelTrigger,
} from "@/components/ui/floating-panel";
import {
  NumberField,
  NumberFieldDecrement,
  NumberFieldGroup,
  NumberFieldIncrement,
  NumberFieldInput,
} from "@/components/ui/number-input";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";

const FloatingPanelDemo = () => {
  return (
    <FloatingPanel defaultSize={{ width: 360, height: 300 }}>
      <FloatingPanelTrigger asChild>
        <Button variant="outline">Open</Button>
      </FloatingPanelTrigger>
      <FloatingPanelContent>
        <FloatingPanelHeader>
          <Settings2Icon />
          <FloatingPanelTitle>Settings</FloatingPanelTitle>
          <FloatingPanelControl>
            <FloatingPanelMinimize />
            <FloatingPanelMaximize />
            <FloatingPanelRestore />
            <FloatingPanelCloseTrigger asChild>
              <Button aria-label="Close" size="icon-xs">
                <XIcon aria-hidden />
              </Button>
            </FloatingPanelCloseTrigger>
          </FloatingPanelControl>
        </FloatingPanelHeader>
        <FloatingPanelBody>
          <Field>
            <FieldLabel>Font family</FieldLabel>
            <Select collection={collection} defaultValue={["Inter"]}>
              <SelectTrigger className="w-full">
                <SelectValue />
              </SelectTrigger>
              <SelectContent>
                {collection.items.map((item) => (
                  <SelectItem item={item} key={item}>
                    {item}
                  </SelectItem>
                ))}
              </SelectContent>
            </Select>
          </Field>
          <Field>
            <FieldLabel>Font size</FieldLabel>
            <NumberField className="w-full" defaultValue="16">
              <NumberFieldGroup>
                <NumberFieldDecrement />
                <NumberFieldInput />
                <NumberFieldIncrement />
              </NumberFieldGroup>
            </NumberField>
          </Field>
        </FloatingPanelBody>
        <FloatingPanelFooter>
          <Button variant="outline">Save</Button>
        </FloatingPanelFooter>
      </FloatingPanelContent>
    </FloatingPanel>
  );
};

const collection = createListCollection({
  items: ["Inter", "Roboto", "Helvetica", "Geist"],
});

export default FloatingPanelDemo;

```

# Format - Examples and Patterns

Examples for Format component.

## Example: byte-unit-display

```tsx
import { FormatByte } from "@/components/ui/format";

const Example = () => (
  <div className="flex flex-col gap-4">
    <div>
      <span className="text-muted-foreground text-sm">Long: </span>
      <FormatByte unitDisplay="long" value={1_500_000} />
    </div>
    <div>
      <span className="text-muted-foreground text-sm">Short: </span>
      <FormatByte unitDisplay="short" value={1_500_000} />
    </div>
    <div>
      <span className="text-muted-foreground text-sm">Narrow: </span>
      <FormatByte unitDisplay="narrow" value={1_500_000} />
    </div>
  </div>
);

export default Example;

```

## Example: byte-unit-system

```tsx
import { FormatByte } from "@/components/ui/format";

const Example = () => (
  <div className="flex flex-col gap-4">
    <div>
      <span className="text-muted-foreground text-sm">Decimal (1000): </span>
      <FormatByte unitSystem="decimal" value={1024} />
    </div>
    <div>
      <span className="text-muted-foreground text-sm">Binary (1024): </span>
      <FormatByte unitSystem="binary" value={1024} />
    </div>
  </div>
);

export default Example;

```

## Example: byte

```tsx
import { FormatByte } from "@/components/ui/format";

const Example = () => (
  <div className="flex flex-col gap-1">
    <span className="text-muted-foreground text-sm">File size</span>
    <span className="font-semibold text-2xl text-foreground tabular-nums tracking-tight">
      <FormatByte value={120_000} />
    </span>
  </div>
);

export default Example;

```

## Example: default

```tsx
import { FormatByte } from "@/components/ui/format";

const FormatDemo = () => (
  <div className="flex flex-col gap-1">
    <span className="text-muted-foreground text-sm">File size</span>
    <span className="font-semibold text-2xl text-foreground tabular-nums tracking-tight">
      <FormatByte value={120_000} />
    </span>
  </div>
);

export default FormatDemo;

```

## Example: number-compact

```tsx
import { FormatNumber } from "@/components/ui/format";

const Example = () => (
  <div className="flex flex-col gap-4">
    <div>
      <span className="text-muted-foreground text-sm">1.2M: </span>
      <FormatNumber notation="compact" value={1_200_000} />
    </div>
    <div>
      <span className="text-muted-foreground text-sm">120K: </span>
      <FormatNumber notation="compact" value={120_000} />
    </div>
    <div>
      <span className="text-muted-foreground text-sm">Downloads: </span>
      <FormatNumber notation="compact" value={1_234_567} />
      <span className="text-muted-foreground text-sm"> per month</span>
    </div>
  </div>
);

export default Example;

```

## Example: number-currency

```tsx
import { FormatNumber } from "@/components/ui/format";

const Example = () => (
  <div className="flex flex-col gap-4">
    <div>
      <span className="text-muted-foreground text-sm">USD: </span>
      <FormatNumber currency="USD" style="currency" value={99.99} />
    </div>
    <div>
      <span className="text-muted-foreground text-sm">EUR: </span>
      <FormatNumber currency="EUR" style="currency" value={99.99} />
    </div>
    <div>
      <span className="text-muted-foreground text-sm">BRL: </span>
      <FormatNumber currency="BRL" style="currency" value={99.99} />
    </div>
  </div>
);

export default Example;

```

## Example: number-percent

```tsx
import { FormatNumber } from "@/components/ui/format";

const Example = () => (
  <div className="flex flex-col gap-4">
    <div>
      <span className="text-muted-foreground text-sm">Default: </span>
      <FormatNumber style="percent" value={0.75} />
    </div>
    <div>
      <span className="text-muted-foreground text-sm">With decimals: </span>
      <FormatNumber minimumFractionDigits={2} style="percent" value={0.7567} />
    </div>
  </div>
);

export default Example;

```

## Example: number

```tsx
import { FormatNumber } from "@/components/ui/format";

const Example = () => (
  <div className="inline-flex items-baseline gap-1">
    <span className="text-muted-foreground text-sm">Downloads</span>
    <span className="font-medium text-foreground tabular-nums tracking-tight">
      <FormatNumber value={1_234_567} />
    </span>
    <span className="text-muted-foreground text-sm">per month</span>
  </div>
);

export default Example;

```

## Example: relative-time-short

```tsx
import { FormatRelativeTime } from "@/components/ui/format";

const Example = () => (
  <div className="flex flex-col gap-4">
    <div>
      <span className="text-muted-foreground text-sm">Long: </span>
      <FormatRelativeTime style="long" value={new Date("2025-05-05")} />
    </div>
    <div>
      <span className="text-muted-foreground text-sm">Short: </span>
      <FormatRelativeTime style="short" value={new Date("2025-05-05")} />
    </div>
    <div>
      <span className="text-muted-foreground text-sm">Narrow: </span>
      <FormatRelativeTime style="narrow" value={new Date("2025-05-05")} />
    </div>
  </div>
);

export default Example;

```

## Example: relative-time

```tsx
import { FormatRelativeTime } from "@/components/ui/format";

const Example = () => (
  <div className="inline-flex items-baseline gap-1">
    <span className="text-muted-foreground text-sm">Last updated</span>
    <span className="font-medium text-foreground tabular-nums tracking-tight">
      <FormatRelativeTime value={new Date("2025-05-05")} />
    </span>
  </div>
);

export default Example;

```

# Frame - Examples and Patterns

Examples for Frame component.

## Example: default

```tsx
import {
  Frame,
  FrameDescription,
  FrameFooter,
  FrameHeader,
  FramePanel,
  FrameTitle,
} from "@/components/ui/frame";

const Example = () => (
  <Frame className="w-full max-w-md">
    <FrameHeader>
      <FrameTitle>Section header</FrameTitle>
      <FrameDescription>Brief description about the section</FrameDescription>
    </FrameHeader>
    <FramePanel>
      <h2 className="font-semibold text-sm">Section title</h2>
      <p className="text-muted-foreground text-sm">Section description</p>
    </FramePanel>
    <FrameFooter>
      <p className="text-muted-foreground text-sm">Footer</p>
    </FrameFooter>
  </Frame>
);

export default Example;

```

## Example: separated-panels

```tsx
import {
  Frame,
  FrameDescription,
  FrameHeader,
  FramePanel,
  FrameTitle,
} from "@/components/ui/frame";

const Example = () => (
  <Frame className="w-full max-w-md">
    <FrameHeader>
      <FrameTitle>Section header</FrameTitle>
      <FrameDescription>Brief description about the section</FrameDescription>
    </FrameHeader>
    <FramePanel>
      <h2 className="font-semibold text-sm">Separated panel</h2>
      <p className="text-muted-foreground text-sm">Section description</p>
    </FramePanel>
    <FramePanel>
      <h2 className="font-semibold text-sm">Separated panel</h2>
      <p className="text-muted-foreground text-sm">Section description</p>
    </FramePanel>
  </Frame>
);

export default Example;

```

# Highlight - Examples and Patterns

Examples for Highlight component.

## Example: custom-style

```tsx
import { Highlight } from "@/components/ui/highlight";

const Example = () => (
  <p className="text-base text-foreground leading-relaxed">
    <Highlight
      className="rounded-md bg-amber-200 px-1.5 font-bold text-amber-900 dark:bg-amber-900/50 dark:text-amber-100"
      query="spotlight"
      text="With the Highlight component, you can spotlight words."
    />
  </p>
);

export default Example;

```

## Example: default

```tsx
import { Highlight } from "@/components/ui/highlight";

const HighlightDemo = () => (
  <p className="text-base text-foreground leading-relaxed">
    <Highlight
      query="component"
      text="Shark UI is a component library for building accessible web applications."
    />
  </p>
);

export default HighlightDemo;

```

## Example: multiple

```tsx
import { Highlight } from "@/components/ui/highlight";

const Example = () => (
  <p className="text-base text-foreground leading-relaxed">
    <Highlight
      query={["spotlight", "emphasize", "accentuate"]}
      text="With the Highlight component, you can spotlight, emphasize and accentuate words."
    />
  </p>
);

export default Example;

```

## Example: search-query

```tsx
"use client";

import React from "react";
import { Highlight } from "@/components/ui/highlight";
import { Input } from "@/components/ui/input";

const searchResults = ["Spotlight bulb", "Spot cleaner", "Spot ceiling"];

const Example = () => {
  const [query, setQuery] = React.useState("spot");

  return (
    <div className="flex w-full max-w-64 flex-col gap-4">
      <Input
        aria-label="Search"
        onChange={(e) => setQuery(e.target.value)}
        placeholder="Search..."
        value={query}
      />
      <div className="space-y-2">
        <p className="text-muted-foreground text-sm">
          Search result for: {query || "(empty)"}
        </p>
        <ul className="space-y-1">
          {searchResults.map((item) => (
            <li className="text-base text-foreground" key={item}>
              {query ? (
                <Highlight ignoreCase query={query} text={item} />
              ) : (
                item
              )}
            </li>
          ))}
        </ul>
      </div>
    </div>
  );
};

export default Example;

```

## Example: squiggle

```tsx
"use client";

import React from "react";
import { useHighlight } from "@/components/ui/highlight";

const Example = () => {
  const chunks = useHighlight({
    query: "real humans",
    text: "Endless scale, powered by real humans.",
  });

  return (
    <p className="font-medium text-foreground text-lg leading-relaxed">
      {chunks.map((chunk, index) =>
        chunk.match ? (
          <mark
            className="relative bg-transparent px-0 font-semibold text-primary"
            key={`${chunk.text}-${index}`}
          >
            {chunk.text}
            <svg
              aria-hidden="true"
              className="pointer-events-none absolute -bottom-1 left-0 select-none"
              viewBox="0 0 580 23"
              xmlns="http://www.w3.org/2000/svg"
            >
              <path
                d="M387.4 8.59683C451.248 9.85285 515.312 12.8344 576.959 20.0747C578.059 20.2035 578.511 20.4132 578.6 20.4608C579.121 20.7428 579.171 21.0296 579.098 21.2629C579.054 21.4046 578.768 22.0003 577.287 22.0248C576.263 22.0407 569.015 21.5622 566.217 21.4154C553.047 20.7257 539.907 19.8855 526.776 18.9667C497.003 16.8884 467.266 14.9891 437.44 13.19C420.694 12.1791 403.939 11.2687 387.192 10.4459C346.873 9.65628 306.637 9.55573 267.151 9.50452C282.824 10.389 297.223 11.2477 309.165 11.8709C329.303 12.9211 349.402 14.0678 369.492 15.4158C379.814 16.1069 390.122 16.8346 400.421 17.6461C401.562 17.7373 404.162 17.8673 405.42 17.9749C405.954 18.0188 406.34 18.0773 406.513 18.1153C407.596 18.3546 407.722 18.7911 407.73 19.0097C407.733 19.1425 407.625 19.8637 405.784 19.9579C320.182 24.3999 231.247 14.4325 145.342 18.682C144.335 18.732 143.402 18.3588 143.264 17.8481C143.127 17.339 143.834 16.8833 144.844 16.8334C225.752 12.8312 309.349 21.4416 390.327 18.7447C383.27 18.2206 376.209 17.7301 369.141 17.2562C349.087 15.9108 329.025 14.7668 308.921 13.7174C288.69 12.6632 261.349 10.9139 232.719 9.52148C208.117 9.5838 183.526 9.73039 158.921 9.75905C148.541 9.77025 138.159 9.73437 127.782 9.75069C123.516 9.7563 112.536 9.95548 110.951 9.73705C109.718 9.56626 109.432 9.11386 109.364 8.88873C109.294 8.64505 109.348 8.34575 109.917 8.073C110.093 7.98677 110.619 7.81204 111.692 7.68482C140.712 4.25964 188.055 5.53051 232.372 7.66494C241.916 7.63919 251.461 7.62688 261.008 7.63982C282.863 7.66714 304.959 7.6989 327.179 7.84637C264.61 5.47565 201.985 4.10465 139.335 3.07229C113.03 2.63942 42.1064 2.26149 14.1555 2.81133C14.4918 2.99627 14.6859 3.24644 14.6558 3.51275C14.596 4.02186 13.7207 4.396 12.7024 4.34655C6.94632 4.06563 3.61991 3.80961 2.30482 3.59975C1.48572 3.46972 1.04256 3.28375 0.838317 3.16432C0.337556 2.8761 0.251542 2.57827 0.358866 2.30049C0.426828 2.12753 0.588632 1.94016 0.953903 1.77309C1.1975 1.65835 1.79021 1.48868 2.79559 1.3883C13.8049 0.296262 107.995 0.700478 139.315 1.21569C222.081 2.58046 304.799 4.53528 387.4 8.59683ZM134.084 7.88874C150.281 7.19755 169.247 7.29239 189.02 7.82101C178.94 7.85833 168.857 7.88886 158.771 7.90083C150.544 7.91141 142.314 7.89 134.084 7.88874ZM463.601 12.9339C484.795 14.2596 505.964 15.6485 527.147 17.1284C529.593 17.2982 532.036 17.4662 534.482 17.6327C511.067 15.5919 487.394 14.0704 463.601 12.9339Z"
                fill="currentColor"
              />
            </svg>
          </mark>
        ) : (
          <React.Fragment key={`${chunk.text}-${index}`}>
            {chunk.text}
          </React.Fragment>
        )
      )}
    </p>
  );
};

export default Example;

```

# Hint - Examples and Patterns

Examples for Hint component.

## Example: controlled

```tsx
"use client";

import React from "react";
import { Button } from "@/components/ui/button";
import {
  Hint,
  HintContent,
  HintTrigger,
} from "@/components/ui/hint";

const Example = () => {
  const [open, setOpen] = React.useState(false);

  return (
    <div className="flex w-full max-w-md flex-col items-center gap-6">
      <Hint onOpenChange={setOpen} open={open}>
        <HintTrigger asChild>
          <Button type="button" variant="secondary">
            Hover/Click to show hint
          </Button>
        </HintTrigger>
        <HintContent>Controlled by React state below.</HintContent>
      </Hint>

      <Button
        onClick={() => setOpen((previous) => !previous)}
        variant="outline"
      >
        {open ? "Hide hint" : "Show hint"}
      </Button>
    </div>
  );
};

export default Example;

```

## Example: default

```tsx
import { Button } from "@/components/ui/button";
import {
  Hint,
  HintContent,
  HintTrigger,
} from "@/components/ui/hint";

const HintDemo = () => (
  <Hint>
    <HintTrigger asChild>
      <Button variant="outline">Hover</Button>
    </HintTrigger>
    <HintContent>This is a hint</HintContent>
  </Hint>
);

export default HintDemo;

```

## Example: positions

```tsx
import { Button } from "@/components/ui/button";
import {
  Hint,
  HintContent,
  HintTrigger,
} from "@/components/ui/hint";

const Example = () => (
  <div className="flex flex-wrap justify-center gap-2">
    <Hint positioning={{ placement: "left" }}>
      <HintTrigger asChild>
        <Button variant="outline">Left</Button>
      </HintTrigger>
      <HintContent>Hint on the left</HintContent>
    </Hint>
    <Hint positioning={{ placement: "top" }}>
      <HintTrigger asChild>
        <Button variant="outline">Top</Button>
      </HintTrigger>
      <HintContent>Hint above</HintContent>
    </Hint>
    <Hint positioning={{ placement: "bottom" }}>
      <HintTrigger asChild>
        <Button variant="outline">Bottom</Button>
      </HintTrigger>
      <HintContent>Hint below</HintContent>
    </Hint>
    <Hint positioning={{ placement: "right" }}>
      <HintTrigger asChild>
        <Button variant="outline">Right</Button>
      </HintTrigger>
      <HintContent>Hint on the right</HintContent>
    </Hint>
  </div>
);

export default Example;

```

# Hitbox - Examples and Patterns

Examples for Hitbox component.

## Example: axes

```tsx
"use client";

import React from "react";
import { cn } from "@/lib/utils";
import { Button } from "@/components/ui/button";
import { Field, FieldLabel } from "@/components/ui/field";
import { Switch } from "@/components/ui/switch";

const Example = () => {
  const [show, setShow] = React.useState(false);

  return (
    <div className="relative flex size-full items-center justify-center">
      <div className="absolute top-2 right-2">
        <Field orientation="horizontal">
          <Switch
            checked={show}
            onCheckedChange={({ checked }) => setShow(checked)}
          />
          <FieldLabel>Show hitbox</FieldLabel>
        </Field>
      </div>

      <div className="flex flex-wrap gap-8">
        <Button
          className={cn("hitbox-x-4", { "hitbox-debug": show })}
          clickEffect={false}
          size="sm"
        >
          Left and right
        </Button>
        <Button
          className={cn("hitbox-y-4", { "hitbox-debug": show })}
          clickEffect={false}
          size="sm"
        >
          Top and bottom
        </Button>
      </div>
    </div>
  );
};

export default Example;

```

## Example: basic

```tsx
"use client";

import React from "react";
import { cn } from "@/lib/utils";
import { Button } from "@/components/ui/button";
import { Field, FieldLabel } from "@/components/ui/field";
import { Switch } from "@/components/ui/switch";

const Example = () => {
  const [show, setShow] = React.useState(false);

  return (
    <div className="relative flex size-full items-center justify-center">
      <div className="absolute top-2 right-2">
        <Field orientation="horizontal">
          <Switch
            checked={show}
            onCheckedChange={({ checked }) => setShow(checked)}
          />
          <FieldLabel>Show hitbox</FieldLabel>
        </Field>
      </div>

      <Button
        className={cn("hitbox-6", { "hitbox-debug": show })}
        clickEffect={false}
        size="sm"
      >
        Small target
      </Button>
    </div>
  );
};

export default Example;

```

## Example: custom

```tsx
"use client";

import React from "react";
import { cn } from "@/lib/utils";
import { Button } from "@/components/ui/button";
import { Field, FieldLabel } from "@/components/ui/field";
import { Switch } from "@/components/ui/switch";

const Example = () => {
  const [show, setShow] = React.useState(false);

  return (
    <div className="relative flex size-full items-center justify-center">
      <div className="absolute top-2 right-2">
        <Field orientation="horizontal">
          <Switch
            checked={show}
            onCheckedChange={({ checked }) => setShow(checked)}
          />
          <FieldLabel>Show hitbox</FieldLabel>
        </Field>
      </div>

      <div className="flex flex-wrap gap-8">
        <Button
          className={cn("hitbox-[21px]", { "hitbox-debug": show })}
          clickEffect={false}
          size="sm"
        >
          Custom
        </Button>
        <Button
          className={cn("hitbox-r-[21px]", { "hitbox-debug": show })}
          clickEffect={false}
          size="sm"
        >
          Left only, custom
        </Button>
      </div>
    </div>
  );
};

export default Example;

```

## Example: debug

```tsx
"use client";

import React from "react";
import { cn } from "@/lib/utils";
import { Button } from "@/components/ui/button";
import { Field, FieldLabel } from "@/components/ui/field";
import { Switch } from "@/components/ui/switch";

const Example = () => {
  const [show, setShow] = React.useState(true);

  return (
    <div className="relative flex size-full items-center justify-center">
      <div className="absolute top-2 right-2">
        <Field orientation="horizontal">
          <Switch
            checked={show}
            onCheckedChange={({ checked }) => setShow(checked)}
          />
          <FieldLabel>Show hitbox</FieldLabel>
        </Field>
      </div>

      <Button
        className={cn("hitbox-6", { "hitbox-debug": show })}
        clickEffect={false}
        size="sm"
      >
        Show hit area
      </Button>
    </div>
  );
};

export default Example;

```

## Example: default

```tsx
"use client";

import React from "react";
import { cn } from "@/lib/utils";
import { Button } from "@/components/ui/button";
import { Field, FieldLabel } from "@/components/ui/field";
import { Switch } from "@/components/ui/switch";

const Example = () => {
  const [show, setShow] = React.useState(true);

  return (
    <div className="relative flex size-full items-center justify-center">
      <div className="absolute top-2 right-2">
        <Field orientation="horizontal">
          <Switch
            checked={show}
            onCheckedChange={({ checked }) => setShow(checked)}
          />
          <FieldLabel>Show hitbox</FieldLabel>
        </Field>
      </div>

      <Button
        className={cn("group/hitbox hitbox-6 w-28", { "hitbox-debug": show })}
        clickEffect={false}
        size="lg"
      >
        <span className="font-mono group-hover/hitbox:hidden">hit-area-6</span>
        <span className="not-group-hover/hitbox:hidden group-active:hidden">
          Hovered
        </span>
        <span className="not-group-active/hitbox:hidden">Pressed</span>
      </Button>
    </div>
  );
};

export default Example;

```

## Example: sidebar

```tsx
"use client";

import React from "react";
import { cn } from "@/lib/utils";
import { Field, FieldLabel } from "@/components/ui/field";
import { Switch } from "@/components/ui/switch";

const Example = () => {
  const [show, setShow] = React.useState(false);

  return (
    <div className="relative flex size-full items-center justify-center">
      <div className="absolute top-2 right-2">
        <Field orientation="horizontal">
          <Switch
            checked={show}
            onCheckedChange={({ checked }) => setShow(checked)}
          />
          <FieldLabel>Show hitbox</FieldLabel>
        </Field>
      </div>

      <nav className="flex w-48 flex-col gap-2 rounded-lg border p-1">
        <a
          className={cn(
            "hitbox-y-1 block rounded-md px-4 py-2 text-sm hover:bg-muted",
            { "hitbox-debug": show }
          )}
          href="#"
        >
          Dashboard
        </a>
        <a
          className={cn(
            "hitbox-y-1 block rounded-md px-4 py-2 text-sm hover:bg-muted",
            { "hitbox-debug": show }
          )}
          href="#"
        >
          Projects
        </a>
        <a
          className={cn(
            "hitbox-y-1 block rounded-md px-4 py-2 text-sm hover:bg-muted",
            { "hitbox-debug": show }
          )}
          href="#"
        >
          Settings
        </a>
      </nav>
    </div>
  );
};

export default Example;

```

## Example: sides

```tsx
"use client";

import React from "react";
import { cn } from "@/lib/utils";
import { Button } from "@/components/ui/button";
import { Field, FieldLabel } from "@/components/ui/field";
import { Switch } from "@/components/ui/switch";

const Example = () => {
  const [show, setShow] = React.useState(false);

  return (
    <div className="relative flex size-full items-center justify-center">
      <div className="absolute top-2 right-2">
        <Field orientation="horizontal">
          <Switch
            checked={show}
            onCheckedChange={({ checked }) => setShow(checked)}
          />
          <FieldLabel>Show hitbox</FieldLabel>
        </Field>
      </div>

      <div className="flex flex-wrap gap-4">
        <Button
          className={cn("hitbox-l-4", { "hitbox-debug": show })}
          clickEffect={false}
          size="sm"
        >
          Left
        </Button>
        <Button
          className={cn("hitbox-t-4", { "hitbox-debug": show })}
          clickEffect={false}
          size="sm"
        >
          Top
        </Button>
        <Button
          className={cn("hitbox-b-4", { "hitbox-debug": show })}
          clickEffect={false}
          size="sm"
        >
          Bottom
        </Button>
        <Button
          className={cn("hitbox-r-4", { "hitbox-debug": show })}
          clickEffect={false}
          size="sm"
        >
          Right
        </Button>
      </div>
    </div>
  );
};

export default Example;

```

# Hover Card - Examples and Patterns

Examples for Hover Card component.

## Example: controlled

```tsx
"use client";

import React from "react";
import { Button } from "@/components/ui/button";
import {
  HoverCard,
  HoverCardContent,
  HoverCardTrigger,
} from "@/components/ui/hover-card";

const Example = () => {
  const [open, setOpen] = React.useState(false);

  return (
    <div className="flex flex-col gap-4">
      <HoverCard
        onOpenChange={({ open: isOpen }) => setOpen(isOpen)}
        open={open}
      >
        <HoverCardTrigger asChild>
          <Button variant="outline">Hover here</Button>
        </HoverCardTrigger>
        <HoverCardContent>
          <div className="flex flex-col gap-1">
            <h4 className="font-medium">Controlled</h4>
            <p className="text-muted-foreground text-sm">
              The open state is managed externally with <code>open</code> and{" "}
              <code>onOpenChange</code>.
            </p>
          </div>
        </HoverCardContent>
      </HoverCard>

      <p className="text-center text-muted-foreground text-sm">
        {open ? "✅" : "❌"}
      </p>
    </div>
  );
};

export default Example;

```

## Example: default

```tsx
import { MapPinIcon } from "lucide-react";
import {
  Avatar,
  AvatarFallback,
  AvatarImage,
} from "@/components/ui/avatar";
import { Button } from "@/components/ui/button";
import {
  HoverCard,
  HoverCardContent,
  HoverCardTrigger,
} from "@/components/ui/hover-card";

const HoverCardDemo = () => (
  <HoverCard>
    <HoverCardTrigger asChild>
      <Button variant="link">Hover here</Button>
    </HoverCardTrigger>
    <HoverCardContent>
      <div className="flex gap-4">
        <Avatar>
          <AvatarImage src="https://github.com/vinihvc.png" />
          <AvatarFallback>VV</AvatarFallback>
        </Avatar>
        <div className="flex flex-col gap-2">
          <a
            className="font-medium text-sm underline underline-offset-4"
            href="https://github.com/vinihvc"
            rel="noopener"
            target="_blank"
          >
            @vinihvc
          </a>

          <p className="text-muted-foreground text-sm">Frontend Developer</p>

          <p className="flex items-center gap-1 text-muted-foreground text-xs">
            <MapPinIcon className="size-4" />
            Joined in 2016
          </p>
        </div>
      </div>
    </HoverCardContent>
  </HoverCard>
);

export default HoverCardDemo;

```

## Example: disabled

```tsx
import { Button } from "@/components/ui/button";
import {
  HoverCard,
  HoverCardContent,
  HoverCardTrigger,
} from "@/components/ui/hover-card";

const Example = () => (
  <HoverCard disabled>
    <HoverCardTrigger asChild>
      <Button variant="link">Hover here</Button>
    </HoverCardTrigger>
    <HoverCardContent>IT WILL NOT OPEN</HoverCardContent>
  </HoverCard>
);

export default Example;

```

## Example: positioning

```tsx
import { Button } from "@/components/ui/button";
import {
  HoverCard,
  HoverCardContent,
  HoverCardTrigger,
} from "@/components/ui/hover-card";

const placements = ["left", "top", "bottom", "right"] as const;

const Example = () => (
  <div className="flex flex-wrap justify-center gap-2">
    {placements.map((placement) => (
      <HoverCard key={placement} positioning={{ placement }}>
        <HoverCardTrigger asChild>
          <Button className="capitalize" variant="outline">
            {placement}
          </Button>
        </HoverCardTrigger>
        <HoverCardContent className="flex flex-col gap-1">
          <h4 className="font-medium">Hover Card</h4>
          <p className="text-muted-foreground text-sm">
            This hover card appears on the {placement} placement of the trigger.
          </p>
        </HoverCardContent>
      </HoverCard>
    ))}
  </div>
);

export default Example;

```

## Example: triggers-delays

```tsx
import { MapPinIcon } from "lucide-react";
import {
  Avatar,
  AvatarFallback,
  AvatarImage,
} from "@/components/ui/avatar";
import { Button } from "@/components/ui/button";
import {
  HoverCard,
  HoverCardContent,
  HoverCardTrigger,
} from "@/components/ui/hover-card";

const Example = () => (
  <HoverCard closeDelay={300} openDelay={200}>
    <HoverCardTrigger asChild>
      <Button variant="link">Hover here</Button>
    </HoverCardTrigger>
    <HoverCardContent>
      <div className="flex gap-4">
        <Avatar>
          <AvatarImage src="https://github.com/vinihvc.png" />
          <AvatarFallback>VV</AvatarFallback>
        </Avatar>
        <div className="flex flex-col gap-2">
          <a
            className="font-medium text-sm underline underline-offset-4"
            href="https://github.com/vinihvc"
            rel="noopener"
            target="_blank"
          >
            @vinihvc
          </a>

          <p className="text-muted-foreground text-sm">Frontend Developer</p>

          <p className="flex items-center gap-1 text-muted-foreground text-xs">
            <MapPinIcon className="size-4" />
            Joined in 2016
          </p>
        </div>
      </div>
    </HoverCardContent>
  </HoverCard>
);

export default Example;

```

# Image Cropper - Examples and Patterns

Examples for Image Cropper component.

## Example: aspect-ratio

```tsx
import {
  ImageCropper,
  ImageCropperImage,
  ImageCropperSelection,
} from "@/components/ui/image-cropper";

const Example = () => (
  <ImageCropper aspectRatio={16 / 9} className="max-w-lg">
    <ImageCropperImage alt="Crop me" src="https://github.com/vinihvc.png" />
    <ImageCropperSelection />
  </ImageCropper>
);

export default Example;

```

## Example: circle-crop

```tsx
import {
  ImageCropper,
  ImageCropperImage,
  ImageCropperSelection,
} from "@/components/ui/image-cropper";

const Example = () => (
  <ImageCropper className="max-w-lg" cropShape="circle">
    <ImageCropperImage alt="Crop me" src="https://github.com/vinihvc.png" />
    <ImageCropperSelection />
  </ImageCropper>
);

export default Example;

```

## Example: controlled-zoom

```tsx
"use client";

import { ZoomInIcon, ZoomOutIcon } from "lucide-react";
import React from "react";
import { Button } from "@/components/ui/button";
import {
  ImageCropper,
  ImageCropperImage,
  ImageCropperSelection,
} from "@/components/ui/image-cropper";

const Example = () => {
  const [zoom, setZoom] = React.useState(1);

  return (
    <div className="flex w-full max-w-lg flex-col items-end gap-2">
      <ImageCropper onZoomChange={(e) => setZoom(e.zoom)} zoom={zoom}>
        <ImageCropperImage alt="Crop me" src="https://github.com/vinihvc.png" />
        <ImageCropperSelection />
      </ImageCropper>
      <div className="flex gap-1">
        <Button
          aria-label="Zoom out"
          onClick={() => setZoom(Math.max(0, zoom - 0.25))}
          size="icon-sm"
          variant="outline"
        >
          <ZoomOutIcon aria-hidden />
        </Button>
        <Button
          aria-label="Zoom in"
          onClick={() => setZoom(Math.min(3, zoom + 0.25))}
          size="icon-sm"
          variant="outline"
        >
          <ZoomInIcon aria-hidden />
        </Button>
      </div>
    </div>
  );
};

export default Example;

```

## Example: default

```tsx
import {
  ImageCropper,
  ImageCropperImage,
  ImageCropperSelection,
} from "@/components/ui/image-cropper";

const ImageCropperDemo = () => (
  <ImageCropper className="aspect-video w-full max-w-lg">
    <ImageCropperImage alt="Crop me" src="https://github.com/vinihvc.png" />
    <ImageCropperSelection />
  </ImageCropper>
);

export default ImageCropperDemo;

```

## Example: fixed-crop-area

```tsx
import {
  ImageCropper,
  ImageCropperImage,
  ImageCropperSelection,
} from "@/components/ui/image-cropper";

const Example = () => (
  <ImageCropper className="max-w-lg" fixedCropArea>
    <ImageCropperImage alt="Crop me" src="https://github.com/vinihvc.png" />
    <ImageCropperSelection />
  </ImageCropper>
);

export default Example;

```

## Example: initial-crop

```tsx
import {
  ImageCropper,
  ImageCropperImage,
  ImageCropperSelection,
} from "@/components/ui/image-cropper";

const Example = () => (
  <ImageCropper
    className="max-w-lg"
    initialCrop={{
      x: 100,
      y: 80,
      width: 200,
      height: 150,
    }}
  >
    <ImageCropperImage alt="Crop me" src="https://github.com/vinihvc.png" />
    <ImageCropperSelection />
  </ImageCropper>
);

export default Example;

```

## Example: min-max-size

```tsx
import {
  ImageCropper,
  ImageCropperImage,
  ImageCropperSelection,
} from "@/components/ui/image-cropper";

const Example = () => (
  <ImageCropper
    className="max-w-lg"
    maxHeight={160}
    maxWidth={280}
    minHeight={80}
    minWidth={80}
  >
    <ImageCropperImage alt="Crop me" src="https://github.com/vinihvc.png" />
    <ImageCropperSelection />
  </ImageCropper>
);

export default Example;

```

## Example: zoom-limits

```tsx
import {
  ImageCropper,
  ImageCropperImage,
  ImageCropperSelection,
} from "@/components/ui/image-cropper";

const Example = () => (
  <ImageCropper className="max-w-lg" maxZoom={2} minZoom={0.5}>
    <ImageCropperImage alt="Crop me" src="https://github.com/vinihvc.png" />
    <ImageCropperSelection />
  </ImageCropper>
);

export default Example;

```

# Input - Examples and Patterns

Examples for Input component.

## Example: badge

```tsx
import { Badge } from "@/components/ui/badge";
import { Field, FieldLabel } from "@/components/ui/field";
import { Input } from "@/components/ui/input";

const Example = () => (
  <Field className="w-full max-w-64">
    <FieldLabel className="flex items-center gap-2">
      Webhook URL
      <Badge className="ml-auto" variant="info">
        Beta
      </Badge>
    </FieldLabel>
    <Input placeholder="https://example.com/webhook" />
  </Field>
);

export default Example;

```

## Example: button-group

```tsx
import { SearchIcon } from "lucide-react";
import { Button } from "@/components/ui/button";
import { ButtonGroup } from "@/components/ui/button-group";
import { Input } from "@/components/ui/input";

const Example = () => (
  <ButtonGroup className="w-full max-w-64">
    <Input placeholder="Search..." type="search" />
    <Button variant="outline">
      <SearchIcon />
    </Button>
  </ButtonGroup>
);

export default Example;

```

## Example: default

```tsx
import { Input } from "@/components/ui/input";

const InputDemo = () => (
  <Input className="w-64" placeholder="Enter your message" />
);

export default InputDemo;

```

## Example: disabled

```tsx
import {
  Field,
  FieldDescription,
  FieldLabel,
} from "@/components/ui/field";
import { Input } from "@/components/ui/input";

const Example = () => (
  <Field className="w-full max-w-64" disabled>
    <FieldLabel>Email</FieldLabel>
    <Input placeholder="john@doe.com" />
    <FieldDescription>The field is currently disabled</FieldDescription>
  </Field>
);

export default Example;

```

## Example: field-group

```tsx
import { Button } from "@/components/ui/button";
import {
  Field,
  FieldDescription,
  FieldGroup,
  FieldLabel,
} from "@/components/ui/field";
import { Input } from "@/components/ui/input";

const Example = () => (
  <FieldGroup className="w-full max-w-64">
    <Field>
      <FieldLabel>Name</FieldLabel>
      <Input placeholder="First name" />
    </Field>
    <Field>
      <FieldLabel>Email</FieldLabel>
      <Input placeholder="you@example.com" type="email" />
      <FieldDescription>We'll use this email to contact you</FieldDescription>
    </Field>
    <Field orientation="horizontal" reverse>
      <Button>Submit</Button>
      <Button variant="outline">Reset</Button>
    </Field>
  </FieldGroup>
);

export default Example;

```

## Example: field

```tsx
import {
  Field,
  FieldDescription,
  FieldLabel,
} from "@/components/ui/field";
import { Input } from "@/components/ui/input";

const Example = () => (
  <Field className="w-full max-w-64">
    <FieldLabel>Username</FieldLabel>
    <Input placeholder="Enter your username" />
    <FieldDescription>
      Choose a unique username for your account
    </FieldDescription>
  </Field>
);

export default Example;

```

## Example: file

```tsx
import {
  Field,
  FieldDescription,
  FieldLabel,
} from "@/components/ui/field";
import { Input } from "@/components/ui/input";

const Example = () => (
  <Field className="w-full max-w-64">
    <FieldLabel>Picture</FieldLabel>
    <Input type="file" />
    <FieldDescription>Choose a picture for your profile</FieldDescription>
  </Field>
);

export default Example;

```

## Example: grid

```tsx
import {
  Field,
  FieldGroup,
  FieldLabel,
} from "@/components/ui/field";
import { Input } from "@/components/ui/input";

const Example = () => (
  <FieldGroup className="grid w-full max-w-xs grid-cols-2">
    <Field>
      <FieldLabel>First name</FieldLabel>
      <Input placeholder="John" />
    </Field>
    <Field>
      <FieldLabel>Last name</FieldLabel>
      <Input placeholder="Doe" />
    </Field>
    <Field className="col-span-2">
      <FieldLabel>Address</FieldLabel>
      <Input placeholder="123 Main St" />
    </Field>
  </FieldGroup>
);

export default Example;

```

## Example: inline

```tsx
import { SearchIcon } from "lucide-react";
import { Button } from "@/components/ui/button";
import { Field } from "@/components/ui/field";
import { Input } from "@/components/ui/input";

const Example = () => (
  <Field className="w-full max-w-64" orientation="horizontal">
    <Input placeholder="Search..." />
    <Button aria-label="Search" size="icon-md">
      <SearchIcon />
    </Button>
  </Field>
);

export default Example;

```

## Example: input-group

```tsx
import { SearchIcon } from "lucide-react";
import {
  InputGroup,
  InputGroupAddon,
  InputGroupInput,
} from "@/components/ui/input-group";

const Example = () => (
  <InputGroup className="w-64">
    <InputGroupInput placeholder="Search..." />
    <InputGroupAddon>
      <SearchIcon />
    </InputGroupAddon>
  </InputGroup>
);

export default Example;

```

## Example: invalid

```tsx
import {
  Field,
  FieldDescription,
  FieldLabel,
} from "@/components/ui/field";
import { Input } from "@/components/ui/input";

const Example = () => (
  <Field className="w-full max-w-64" invalid>
    <FieldLabel>Email</FieldLabel>
    <Input placeholder="john@doe.com" />
    <FieldDescription>Please enter a valid email address</FieldDescription>
  </Field>
);

export default Example;

```

## Example: required

```tsx
import {
  Field,
  FieldDescription,
  FieldLabel,
  FieldRequiredIndicator,
} from "@/components/ui/field";
import { Input } from "@/components/ui/input";

const Example = () => (
  <Field className="w-full max-w-64" required>
    <FieldLabel>
      Email <FieldRequiredIndicator />
    </FieldLabel>
    <Input placeholder="john@doe.com" />

    <FieldDescription>This field must be filled out..</FieldDescription>
  </Field>
);

export default Example;

```

## Example: size-lg

```tsx
import { Input } from "@/components/ui/input";

const Example = () => <Input className="w-64" placeholder="Large" size="lg" />;

export default Example;

```

## Example: size-md

```tsx
import { Input } from "@/components/ui/input";

const Example = () => <Input className="w-64" placeholder="Medium" size="md" />;

export default Example;

```

## Example: size-sm

```tsx
import { Input } from "@/components/ui/input";

const Example = () => <Input className="w-64" placeholder="Small" size="sm" />;

export default Example;

```

# Input Group - Examples and Patterns

Examples for Input Group component.

## Example: align-block-end

```tsx
"use client";

import {
  Field,
  FieldDescription,
  FieldLabel,
} from "@/components/ui/field";
import {
  InputGroup,
  InputGroupAddon,
  InputGroupButton,
  InputGroupText,
  InputGroupTextarea,
} from "@/components/ui/input-group";

const Example = () => (
  <Field className="max-w-xs">
    <FieldLabel>Textarea</FieldLabel>
    <InputGroup>
      <InputGroupTextarea placeholder="Write a comment..." />
      <InputGroupAddon align="block-end">
        <InputGroupText>0/280</InputGroupText>
        <InputGroupButton className="ml-auto" size="xs" variant="default">
          Post
        </InputGroupButton>
      </InputGroupAddon>
    </InputGroup>
    <FieldDescription>Footer positioned below the textarea.</FieldDescription>
  </Field>
);

export default Example;

```

## Example: align-block-start

```tsx
"use client";

import { CopyIcon, FileCodeIcon } from "lucide-react";
import {
  Field,
  FieldDescription,
  FieldLabel,
} from "@/components/ui/field";
import {
  InputGroup,
  InputGroupAddon,
  InputGroupButton,
  InputGroupText,
  InputGroupTextarea,
} from "@/components/ui/input-group";

const Example = () => (
  <Field className="max-w-xs">
    <FieldLabel>Textarea</FieldLabel>
    <InputGroup>
      <InputGroupTextarea
        className="font-mono text-sm"
        placeholder="console.log('Hello, world!');"
      />
      <InputGroupAddon align="block-start">
        <FileCodeIcon className="text-muted-foreground" />
        <InputGroupText className="font-mono">script.js</InputGroupText>
        <InputGroupButton className="ml-auto" size="icon-xs">
          <CopyIcon />
          <span className="sr-only">Copy</span>
        </InputGroupButton>
      </InputGroupAddon>
    </InputGroup>
    <FieldDescription>Header positioned above the textarea.</FieldDescription>
  </Field>
);

export default Example;

```

## Example: align-inline-end

```tsx
"use client";

import { EyeIcon } from "lucide-react";
import {
  Field,
  FieldDescription,
  FieldLabel,
} from "@/components/ui/field";
import {
  InputGroup,
  InputGroupAddon,
  InputGroupInput,
} from "@/components/ui/input-group";

const Example = () => (
  <Field className="max-w-64">
    <FieldLabel>Password</FieldLabel>
    <InputGroup>
      <InputGroupInput placeholder="Enter password" />
      <InputGroupAddon align="inline-end">
        <EyeIcon aria-hidden />
      </InputGroupAddon>
    </InputGroup>
    <FieldDescription>Icon positioned at the end.</FieldDescription>
  </Field>
);

export default Example;

```

## Example: align-inline-start

```tsx
"use client";

import { FilterIcon } from "lucide-react";
import {
  Field,
  FieldDescription,
  FieldLabel,
} from "@/components/ui/field";
import {
  InputGroup,
  InputGroupAddon,
  InputGroupInput,
} from "@/components/ui/input-group";

const Example = () => (
  <Field className="max-w-64">
    <FieldLabel>Filter</FieldLabel>
    <InputGroup>
      <InputGroupAddon align="inline-start">
        <FilterIcon aria-hidden />
      </InputGroupAddon>
      <InputGroupInput placeholder="Search..." />
    </InputGroup>
    <FieldDescription>Icon positioned at the start.</FieldDescription>
  </Field>
);

export default Example;

```

## Example: default

```tsx
import { SearchIcon } from "lucide-react";
import {
  InputGroup,
  InputGroupAddon,
  InputGroupInput,
} from "@/components/ui/input-group";

const InputGroupDemo = () => (
  <InputGroup className="max-w-64">
    <InputGroupInput placeholder="Search..." />
    <InputGroupAddon>
      <SearchIcon />
    </InputGroupAddon>
  </InputGroup>
);

export default InputGroupDemo;

```

## Example: disabled

```tsx
"use client";

import { SearchIcon } from "lucide-react";
import {
  InputGroup,
  InputGroupAddon,
  InputGroupInput,
} from "@/components/ui/input-group";

const Example = () => (
  <InputGroup className="max-w-64">
    <InputGroupInput disabled placeholder="Search..." />
    <InputGroupAddon>
      <SearchIcon aria-hidden />
    </InputGroupAddon>
  </InputGroup>
);

export default Example;

```

## Example: input-group

```tsx
import { CopyIcon, FileCodeIcon } from "lucide-react";
import {
  InputGroup,
  InputGroupAddon,
  InputGroupButton,
  InputGroupText,
  InputGroupTextarea,
} from "@/components/ui/input-group";

const Example = () => (
  <InputGroup className="w-full max-w-sm">
    <InputGroupTextarea
      className="font-mono text-sm"
      placeholder="console.log('Hello, world!');"
    />
    <InputGroupAddon align="block-start">
      <FileCodeIcon className="text-muted-foreground" />
      <InputGroupText className="font-mono">script.js</InputGroupText>
      <InputGroupButton aria-label="Copy" className="ml-auto" size="icon-xs">
        <CopyIcon />
      </InputGroupButton>
    </InputGroupAddon>
  </InputGroup>
);

export default Example;

```

## Example: invalid

```tsx
import {
  InputGroup,
  InputGroupAddon,
  InputGroupInput,
  InputGroupText,
} from "@/components/ui/input-group";

const Example = () => (
  <InputGroup className="max-w-64">
    <InputGroupAddon>
      <InputGroupText>https://</InputGroupText>
    </InputGroupAddon>
    <InputGroupInput aria-invalid className="pl-1!" placeholder="example.com" />
  </InputGroup>
);

export default Example;

```

## Example: password-strength-checker

```tsx
"use client";

import { EyeIcon, EyeOffIcon } from "lucide-react";
import React from "react";
import { cn } from "@/lib/utils";
import { Button } from "@/components/ui/button";
import { Field, FieldLabel } from "@/components/ui/field";
import {
  InputGroup,
  InputGroupAddon,
  InputGroupButton,
  InputGroupInput,
} from "@/components/ui/input-group";

const UPPERCASE_REGEX = /[A-Z]/;
const LOWERCASE_REGEX = /[a-z]/;
const NUMBER_REGEX = /\d/;
const NON_ALPHANUMERIC_REGEX = /[^a-zA-Z0-9]/;

type PasswordStrengthLevel = "weak" | "moderate" | "strong";

function getPasswordStrength(password: string): PasswordStrengthLevel {
  if (!password) {
    return "weak";
  }

  const hasUppercase = UPPERCASE_REGEX.test(password);
  const hasLowercase = LOWERCASE_REGEX.test(password);
  const hasNumber = NUMBER_REGEX.test(password);
  const hasSpecialChar = NON_ALPHANUMERIC_REGEX.test(password);
  const hasMinLength = password.length >= 8;

  const criteriaMet = [
    hasUppercase,
    hasLowercase,
    hasNumber,
    hasSpecialChar,
    hasMinLength,
  ].filter(Boolean).length;

  if (criteriaMet <= 2) {
    return "weak";
  }
  if (criteriaMet <= 4) {
    return "moderate";
  }
  return "strong";
}

interface PasswordStrengthProps {
  password: string;
}

const STRENGTH_STYLES = {
  weak: "bg-red-500 text-white dark:bg-red-600 dark:text-white",
  moderate: "bg-orange-500 text-white dark:bg-orange-600 dark:text-white",
  strong: "bg-green-500 text-white dark:bg-green-600 dark:text-white",
} as const;

const STRENGTH_LABELS = {
  weak: "Weak Password",
  moderate: "Moderate Password",
  strong: "Strong Password",
} as const;

function PasswordStrength({ password }: PasswordStrengthProps) {
  const strength = getPasswordStrength(password);

  return (
    <div
      aria-live="polite"
      className={cn(
        "flex h-12 w-full items-center justify-center rounded-lg font-medium text-sm transition-colors",
        STRENGTH_STYLES[strength]
      )}
      data-testid="passwordStrengthDiv"
      role="status"
    >
      {STRENGTH_LABELS[strength]}
    </div>
  );
}

interface PasswordCheckerProps {
  onPasswordChange: (value: string) => void;
  password: string;
}

function PasswordChecker({ password, onPasswordChange }: PasswordCheckerProps) {
  const [showPassword, setShowPassword] = React.useState(false);

  const handleClear = () => {
    onPasswordChange("");
  };

  const handleToggleVisibility = () => {
    setShowPassword((prev) => !prev);
  };

  return (
    <Field className="w-full max-w-sm">
      <FieldLabel>Enter Your Password</FieldLabel>
      <InputGroup className="w-full">
        <InputGroupInput
          aria-label="Password"
          autoComplete="current-password"
          data-testid="passwordInput"
          onChange={(e) => onPasswordChange(e.target.value)}
          placeholder="•••"
          type={showPassword ? "text" : "password"}
          value={password}
        />
        <InputGroupAddon align="inline-end">
          <InputGroupButton
            aria-label={showPassword ? "Hide password" : "Show password"}
            onClick={handleToggleVisibility}
            type="button"
          >
            {showPassword ? (
              <EyeOffIcon aria-hidden />
            ) : (
              <EyeIcon aria-hidden />
            )}
          </InputGroupButton>
        </InputGroupAddon>
      </InputGroup>
      <div className="mt-3 flex gap-2" data-testid="buttonDiv">
        <Button
          onClick={handleToggleVisibility}
          size="sm"
          type="button"
          variant="default"
        >
          {showPassword ? "Hide Password" : "Show Password"}
        </Button>
        <Button
          disabled={!password}
          onClick={handleClear}
          size="sm"
          type="button"
          variant="default"
        >
          Clear Password
        </Button>
      </div>
    </Field>
  );
}

const Example = () => {
  const [password, setPassword] = React.useState("");

  return (
    <div className="flex w-full max-w-sm flex-col gap-4">
      <PasswordChecker onPasswordChange={setPassword} password={password} />
      <PasswordStrength password={password} />
    </div>
  );
};

export default Example;

```

## Example: size-lg

```tsx
"use client";

import { SearchIcon } from "lucide-react";
import {
  InputGroup,
  InputGroupAddon,
  InputGroupInput,
} from "@/components/ui/input-group";

const Example = () => (
  <InputGroup className="max-w-64" size="lg">
    <InputGroupInput placeholder="Search..." />
    <InputGroupAddon>
      <SearchIcon aria-hidden />
    </InputGroupAddon>
  </InputGroup>
);

export default Example;

```

## Example: size-md

```tsx
"use client";

import { SearchIcon } from "lucide-react";
import {
  InputGroup,
  InputGroupAddon,
  InputGroupInput,
} from "@/components/ui/input-group";

const Example = () => (
  <InputGroup className="max-w-64" size="md">
    <InputGroupInput placeholder="Search..." />
    <InputGroupAddon>
      <SearchIcon aria-hidden />
    </InputGroupAddon>
  </InputGroup>
);

export default Example;

```

## Example: size-sm

```tsx
"use client";

import { SearchIcon } from "lucide-react";
import {
  InputGroup,
  InputGroupAddon,
  InputGroupInput,
} from "@/components/ui/input-group";

const Example = () => (
  <InputGroup className="max-w-64" size="sm">
    <InputGroupInput placeholder="Search..." />
    <InputGroupAddon>
      <SearchIcon aria-hidden />
    </InputGroupAddon>
  </InputGroup>
);

export default Example;

```

## Example: with-badge

```tsx
"use client";

import { AtSignIcon } from "lucide-react";
import { Badge } from "@/components/ui/badge";
import {
  InputGroup,
  InputGroupAddon,
  InputGroupInput,
} from "@/components/ui/input-group";

const Example = () => (
  <InputGroup className="max-w-64">
    <InputGroupInput placeholder="Enter tag" />
    <InputGroupAddon align="inline-end">
      <Badge pill size="sm" variant="success">
        Available
      </Badge>
    </InputGroupAddon>
    <InputGroupAddon align="inline-start">
      <AtSignIcon />
    </InputGroupAddon>
  </InputGroup>
);

export default Example;

```

## Example: with-button

```tsx
"use client";

import {
  InputGroup,
  InputGroupAddon,
  InputGroupButton,
  InputGroupInput,
} from "@/components/ui/input-group";

const Example = () => (
  <InputGroup className="max-w-80">
    <InputGroupInput placeholder="Your email" type="email" />
    <InputGroupAddon align="inline-end">
      <InputGroupButton size="xs" variant="ghost">
        Subscribe
      </InputGroupButton>
    </InputGroupAddon>
  </InputGroup>
);

export default Example;

```

## Example: with-inner-label

```tsx
"use client";

import { InfoIcon } from "lucide-react";
import { Button } from "@/components/ui/button";
import { FieldLabel } from "@/components/ui/field";
import {
  InputGroup,
  InputGroupAddon,
  InputGroupInput,
} from "@/components/ui/input-group";
import {
  Tooltip,
  TooltipContent,
  TooltipTrigger,
} from "@/components/ui/tooltip";

const Example = () => (
  <InputGroup className="max-w-64">
    <InputGroupInput id="username" placeholder="John Doe" />
    <InputGroupAddon align="block-start">
      <FieldLabel htmlFor="username">Username</FieldLabel>

      <Tooltip>
        <TooltipTrigger asChild>
          <Button
            aria-label="More info"
            className="ms-auto rtl:me-auto"
            size="icon-xs"
            variant="ghost"
          >
            <InfoIcon aria-hidden />
          </Button>
        </TooltipTrigger>
        <TooltipContent>Enter a username for your account</TooltipContent>
      </Tooltip>
    </InputGroupAddon>
  </InputGroup>
);

export default Example;

```

## Example: with-keyboard-shortcut

```tsx
"use client";

import {
  InputGroup,
  InputGroupAddon,
  InputGroupInput,
} from "@/components/ui/input-group";
import { Kbd } from "@/components/ui/kbd";

const Example = () => (
  <InputGroup className="max-w-64">
    <InputGroupInput placeholder="Search..." />
    <InputGroupAddon align="inline-end">
      <Kbd>⌘K</Kbd>
    </InputGroupAddon>
  </InputGroup>
);

export default Example;

```

## Example: with-menu

```tsx
"use client";

import { CopyIcon, EllipsisIcon, FileIcon, FolderIcon } from "lucide-react";
import {
  InputGroup,
  InputGroupAddon,
  InputGroupButton,
  InputGroupInput,
} from "@/components/ui/input-group";
import {
  Menu,
  MenuContent,
  MenuItem,
  MenuTrigger,
} from "@/components/ui/menu";

const Example = () => {
  return (
    <InputGroup className="max-w-64">
      <InputGroupInput placeholder="Select file..." />
      <InputGroupAddon align="inline-end">
        <Menu>
          <MenuTrigger asChild>
            <InputGroupButton
              aria-label="Open menu"
              size="icon-xs"
              variant="ghost"
            >
              <EllipsisIcon aria-hidden />
            </InputGroupButton>
          </MenuTrigger>
          <MenuContent className="w-48">
            <MenuItem value="file">
              <FileIcon />
              Select file
            </MenuItem>
            <MenuItem value="folder">
              <FolderIcon />
              Select folder
            </MenuItem>
            <MenuItem value="copy-path">
              <CopyIcon />
              Copy path
            </MenuItem>
          </MenuContent>
        </Menu>
      </InputGroupAddon>
    </InputGroup>
  );
};

export default Example;

```

## Example: with-number-input

```tsx
"use client";

import {
  InputGroup,
  InputGroupAddon,
  InputGroupText,
} from "@/components/ui/input-group";
import {
  NumberField,
  NumberFieldInput,
} from "@/components/ui/number-input";

const Example = () => (
  <InputGroup className="max-w-64">
    <NumberField aria-label="Enter the amount" defaultValue="10">
      <NumberFieldInput className="text-start" />
    </NumberField>
    <InputGroupAddon>
      <InputGroupText>€</InputGroupText>
    </InputGroupAddon>
    <InputGroupAddon align="inline-end">
      <InputGroupText>EUR</InputGroupText>
    </InputGroupAddon>
  </InputGroup>
);

export default Example;

```

## Example: with-spinner

```tsx
"use client";

import {
  InputGroup,
  InputGroupAddon,
  InputGroupInput,
} from "@/components/ui/input-group";
import { Spinner } from "@/components/ui/spinner";

const Example = () => (
  <InputGroup className="max-w-64" data-disabled>
    <InputGroupInput disabled placeholder="Loading..." />
    <InputGroupAddon align="inline-end">
      <Spinner aria-label="Loading" />
    </InputGroupAddon>
  </InputGroup>
);

export default Example;

```

## Example: with-textarea

```tsx
"use client";

import { ArrowUpIcon, PlusIcon } from "lucide-react";
import { Button } from "@/components/ui/button";
import {
  InputGroup,
  InputGroupAddon,
  InputGroupText,
  InputGroupTextarea,
} from "@/components/ui/input-group";

const Example = () => (
  <InputGroup className="max-w-xs">
    <InputGroupTextarea placeholder="Ask, Search or Chat…" />
    <InputGroupAddon align="block-end">
      <Button
        aria-label="Add files"
        className="rounded-full"
        size="icon-sm"
        variant="ghost"
      >
        <PlusIcon />
      </Button>
      <InputGroupText className="ml-auto">33% used</InputGroupText>
      <Button aria-label="Send" className="rounded-full" size="icon-sm">
        <ArrowUpIcon />
      </Button>
    </InputGroupAddon>
  </InputGroup>
);

export default Example;

```

## Example: with-tooltip

```tsx
"use client";

import { InfoIcon } from "lucide-react";
import { Button } from "@/components/ui/button";
import {
  InputGroup,
  InputGroupAddon,
  InputGroupInput,
} from "@/components/ui/input-group";
import {
  Tooltip,
  TooltipContent,
  TooltipTrigger,
} from "@/components/ui/tooltip";

const Example = () => (
  <InputGroup className="max-w-64">
    <InputGroupInput placeholder="Enter value" />
    <InputGroupAddon align="inline-end">
      <Tooltip>
        <TooltipTrigger asChild>
          <Button aria-label="More info" size="icon-xs" variant="ghost">
            <InfoIcon aria-hidden />
          </Button>
        </TooltipTrigger>
        <TooltipContent>Additional information about this field</TooltipContent>
      </Tooltip>
    </InputGroupAddon>
  </InputGroup>
);

export default Example;

```

# Input Otp - Examples and Patterns

Examples for Input Otp component.

## Example: blur-on-complete

```tsx
import { InputOtp, InputOtpSlot } from "@/components/ui/input-otp";

const Example = () => (
  <InputOtp blurOnComplete>
    <InputOtpSlot index={0} />
    <InputOtpSlot index={1} />
    <InputOtpSlot index={2} />
    <InputOtpSlot index={3} />
  </InputOtp>
);

export default Example;

```

## Example: controlled

```tsx
"use client";

import React from "react";
import { InputOtp, InputOtpSlot } from "@/components/ui/input-otp";

const Example = () => {
  const [value, setValue] = React.useState([""]);

  const isCorrect = value.join("") === "1234";

  return (
    <div className="flex flex-col gap-4">
      <p className="text-center text-muted-foreground text-sm">
        Enter the code 1234
      </p>
      <InputOtp onValueChange={({ value }) => setValue(value)} value={value}>
        <InputOtpSlot index={0} />
        <InputOtpSlot index={1} />
        <InputOtpSlot index={2} />
        <InputOtpSlot index={3} />
      </InputOtp>

      <p className="text-center text-muted-foreground text-sm">
        {isCorrect ? "✅" : "❌"}
      </p>
    </div>
  );
};

export default Example;

```

## Example: custom-size

```tsx
import { InputOtp, InputOtpSlot } from "@/components/ui/input-otp";

const Example = () => (
  <InputOtp className="*:data-[slot=input-otp-input]:size-12 *:data-[slot=input-otp-input]:text-lg">
    <InputOtpSlot index={0} />
    <InputOtpSlot index={1} />
    <InputOtpSlot index={2} />
    <InputOtpSlot index={3} />
  </InputOtp>
);

export default Example;

```

## Example: default

```tsx
import {
  InputOtp,
  InputOtpSeparator,
  InputOtpSlot,
} from "@/components/ui/input-otp";

const Example = () => (
  <InputOtp>
    <InputOtpSlot index={0} />
    <InputOtpSlot index={1} />
    <InputOtpSlot index={2} />
    <InputOtpSeparator />
    <InputOtpSlot index={3} />
    <InputOtpSlot index={4} />
    <InputOtpSlot index={5} />
  </InputOtp>
);

export default Example;

```

## Example: disabled

```tsx
import { InputOtp, InputOtpSlot } from "@/components/ui/input-otp";

const Example = () => (
  <InputOtp defaultValue={["1", "2", "3", "4"]} disabled>
    <InputOtpSlot index={0} />
    <InputOtpSlot index={1} />
    <InputOtpSlot index={2} />
    <InputOtpSlot index={3} />
  </InputOtp>
);

export default Example;

```

## Example: four-digits

```tsx
import { InputOtp, InputOtpSlot } from "@/components/ui/input-otp";

const Example = () => (
  <InputOtp>
    <InputOtpSlot index={0} />
    <InputOtpSlot index={1} />
    <InputOtpSlot index={2} />
    <InputOtpSlot index={3} />
  </InputOtp>
);

export default Example;

```

## Example: invalid

```tsx
"use client";

import React from "react";
import { InputOtp, InputOtpSlot } from "@/components/ui/input-otp";

const Example = () => {
  const [value, setValue] = React.useState([""]);

  const isCorrect = value.join("") === "1234";

  return (
    <InputOtp
      invalid={!isCorrect}
      onValueChange={({ value }) => setValue(value)}
      value={value}
    >
      <InputOtpSlot index={0} />
      <InputOtpSlot index={1} />
      <InputOtpSlot index={2} />
      <InputOtpSlot index={3} />
    </InputOtp>
  );
};

export default Example;

```

## Example: mask

```tsx
import { InputOtp, InputOtpSlot } from "@/components/ui/input-otp";

const Example = () => (
  <InputOtp mask>
    <InputOtpSlot index={0} />
    <InputOtpSlot index={1} />
    <InputOtpSlot index={2} />
    <InputOtpSlot index={3} />
  </InputOtp>
);

export default Example;

```

## Example: separator

```tsx
import {
  InputOtp,
  InputOtpSeparator,
  InputOtpSlot,
} from "@/components/ui/input-otp";

const Example = () => (
  <InputOtp>
    <InputOtpSlot index={0} />
    <InputOtpSlot index={1} />
    <InputOtpSeparator />
    <InputOtpSlot index={2} />
    <InputOtpSlot index={3} />
    <InputOtpSeparator />
    <InputOtpSlot index={4} />
    <InputOtpSlot index={5} />
  </InputOtp>
);

export default Example;

```

## Example: with-placeholder

```tsx
import { InputOtp, InputOtpSlot } from "@/components/ui/input-otp";

const Example = () => (
  <InputOtp placeholder="○">
    <InputOtpSlot index={0} />
    <InputOtpSlot index={1} />
    <InputOtpSlot index={2} />
    <InputOtpSlot index={3} />
  </InputOtp>
);

export default Example;

```

# Item - Examples and Patterns

Examples for Item component.

## Example: avatar

```tsx
import {
  Avatar,
  AvatarFallback,
  AvatarImage,
} from "@/components/ui/avatar";
import { Button } from "@/components/ui/button";
import {
  Item,
  ItemActions,
  ItemContent,
  ItemDescription,
  ItemMedia,
  ItemTitle,
} from "@/components/ui/item";

const Example = () => (
  <Item className="w-full max-w-md" variant="outline">
    <ItemMedia>
      <Avatar size="sm">
        <AvatarImage
          alt="@pasqualevitiello"
          src="https://github.com/pasqualevitiello.png"
        />
        <AvatarFallback>PV</AvatarFallback>
      </Avatar>
    </ItemMedia>
    <ItemContent>
      <ItemTitle>Pasquale Vitiello</ItemTitle>
      <ItemDescription>Last seen 5 months ago</ItemDescription>
    </ItemContent>
    <ItemActions>
      <Button size="sm" variant="outline">
        View
      </Button>
    </ItemActions>
  </Item>
);

export default Example;

```

## Example: basic

```tsx
import { Button } from "@/components/ui/button";
import {
  Item,
  ItemActions,
  ItemContent,
  ItemDescription,
  ItemTitle,
} from "@/components/ui/item";

const Example = () => (
  <Item className="w-full max-w-md" variant="outline">
    <ItemContent>
      <ItemTitle>Basic Item</ItemTitle>
      <ItemDescription>
        A simple item with title and description.
      </ItemDescription>
    </ItemContent>
    <ItemActions>
      <Button size="icon-sm" variant="outline">
        Action
      </Button>
    </ItemActions>
  </Item>
);

export default Example;

```

## Example: custom-spacing

```tsx
import { User } from "lucide-react";
import {
  Item,
  ItemContent,
  ItemDescription,
  ItemMedia,
  ItemTitle,
} from "@/components/ui/item";

const Example = () => (
  <div className="flex w-full max-w-md flex-col gap-4">
    <Item className="w-full [--space:--spacing(2)]" variant="outline">
      <ItemMedia variant="icon">
        <User />
      </ItemMedia>
      <ItemContent>
        <ItemTitle>Compact spacing</ItemTitle>
        <ItemDescription>
          Uses `[--space:--spacing(2)]` for tighter padding and gap.
        </ItemDescription>
      </ItemContent>
    </Item>

    <Item
      className="w-full [--space:--spacing(3)] md:[--space:--spacing(5)]"
      variant="outline"
    >
      <ItemMedia variant="icon">
        <User />
      </ItemMedia>
      <ItemContent>
        <ItemTitle>Responsive spacing</ItemTitle>
        <ItemDescription>
          Wider from `md` up with `md:[--space:--spacing(5)]`.
        </ItemDescription>
      </ItemContent>
    </Item>
  </div>
);

export default Example;

```

## Example: default

```tsx
import { BadgeCheck, ChevronRight, Ellipsis } from "lucide-react";
import { Button } from "@/components/ui/button";
import {
  Item,
  ItemActions,
  ItemContent,
  ItemDescription,
  ItemMedia,
  ItemTitle,
} from "@/components/ui/item";

const ItemDemo = () => (
  <div className="flex w-full max-w-md flex-col gap-6">
    <Item variant="outline">
      <ItemContent>
        <ItemTitle>Basic Item</ItemTitle>
        <ItemDescription>
          A simple item with title and description.
        </ItemDescription>
      </ItemContent>
      <ItemActions>
        <Button size="sm" variant="outline">
          <Ellipsis />
        </Button>
      </ItemActions>
    </Item>
    <Item variant="outline">
      <ItemMedia>
        <BadgeCheck className="size-5" />
      </ItemMedia>
      <ItemContent>
        <ItemTitle>Your profile has been verified.</ItemTitle>
      </ItemContent>
      <ItemActions>
        <ChevronRight className="size-4" />
      </ItemActions>{" "}
    </Item>
  </div>
);

export default ItemDemo;

```

## Example: dropdown

```tsx
"use client";

import {
  Avatar,
  AvatarFallback,
  AvatarImage,
} from "@/components/ui/avatar";
import { Button } from "@/components/ui/button";
import {
  Item,
  ItemContent,
  ItemDescription,
  ItemMedia,
  ItemTitle,
} from "@/components/ui/item";
import {
  Menu,
  MenuContent,
  MenuItem,
  MenuTrigger,
} from "@/components/ui/menu";

const people = [
  {
    username: "vinihvc",
    avatar: "https://github.com/vinihvc.png",
    email: "vinihvc@example.com",
  },
  {
    username: "segunadebayo",
    avatar: "https://github.com/segunadebayo.png",
    email: "segunadebayo@example.com",
  },
  {
    username: "pasqualevitiello",
    avatar: "https://github.com/pasqualevitiello.png",
    email: "pasqualevitiello@example.com",
  },
];

const Example = () => (
  <Menu>
    <MenuTrigger asChild>
      <Button variant="outline">Open</Button>
    </MenuTrigger>
    <MenuContent className="w-72">
      {people.map((person) => (
        <MenuItem key={person.username} value={person.username}>
          <Item className="[--space:--spacing(2)]">
            <ItemMedia>
              <Avatar className="grayscale" size="sm">
                <AvatarImage alt="" src={person.avatar} />
                <AvatarFallback>{person.username.charAt(0)}</AvatarFallback>
              </Avatar>
            </ItemMedia>
            <ItemContent>
              <ItemTitle>{person.username}</ItemTitle>
              <ItemDescription>{person.email}</ItemDescription>
            </ItemContent>
          </Item>
        </MenuItem>
      ))}
    </MenuContent>
  </Menu>
);

export default Example;

```

## Example: group

```tsx
import { PlusIcon } from "lucide-react";
import {
  Avatar,
  AvatarFallback,
  AvatarImage,
} from "@/components/ui/avatar";
import { Button } from "@/components/ui/button";
import {
  Item,
  ItemActions,
  ItemContent,
  ItemDescription,
  ItemGroup,
  ItemMedia,
  ItemTitle,
} from "@/components/ui/item";

const people = [
  {
    username: "vinihvc",
    avatar: "https://github.com/vinihvc.png",
    email: "vinihvc@example.com",
  },
  {
    username: "segunadebayo",
    avatar: "https://github.com/segunadebayo.png",
    email: "segunadebayo@example.com",
  },
  {
    username: "pasqualevitiello",
    avatar: "https://github.com/pasqualevitiello.png",
    email: "pasqualevitiello@example.com",
  },
];

const Example = () => {
  return (
    <ItemGroup className="max-w-sm">
      {people.map((person) => (
        <Item key={person.username} variant="outline">
          <ItemMedia>
            <Avatar>
              <AvatarImage className="grayscale" src={person.avatar} />
              <AvatarFallback>{person.username.charAt(0)}</AvatarFallback>
            </Avatar>
          </ItemMedia>
          <ItemContent>
            <ItemTitle>{person.username}</ItemTitle>
            <ItemDescription>{person.email}</ItemDescription>
          </ItemContent>
          <ItemActions>
            <Button className="rounded-full" size="icon-md" variant="ghost">
              <PlusIcon />
            </Button>
          </ItemActions>
        </Item>
      ))}
    </ItemGroup>
  );
};

export default Example;

```

## Example: header

```tsx
import {
  Item,
  ItemContent,
  ItemDescription,
  ItemGroup,
  ItemHeader,
  ItemTitle,
} from "@/components/ui/item";

const models = [
  {
    name: "v0-1.5-sm",
    description: "Everyday tasks and UI generation.",
    image: "https://picsum.photos/seed/1/500/300",
    credit: "Valeria Reverdo on Unsplash",
  },
  {
    name: "v0-1.5-lg",
    description: "Advanced thinking or reasoning.",
    image: "https://picsum.photos/seed/2/500/300",
    credit: "Michael Oeser on Unsplash",
  },
  {
    name: "v0-2.0-mini",
    description: "Open Source model for everyone.",
    image: "https://picsum.photos/seed/3/500/300",
    credit: "Cherry Laithang on Unsplash",
  },
];

const Example = () => {
  return (
    <div className="flex w-full max-w-xl flex-col gap-6">
      <ItemGroup className="grid grid-cols-3 gap-4">
        {models.map((model) => (
          <Item key={model.name} variant="outline">
            <ItemHeader>
              <img
                alt={model.name}
                className="aspect-square grayscale"
                height={128}
                src={model.image}
                width={128}
              />
            </ItemHeader>
            <ItemContent>
              <ItemTitle>{model.name}</ItemTitle>
              <ItemDescription>{model.description}</ItemDescription>
            </ItemContent>
          </Item>
        ))}
      </ItemGroup>
    </div>
  );
};

export default Example;

```

## Example: icon

```tsx
import { ShieldAlert } from "lucide-react";
import { Button } from "@/components/ui/button";
import {
  Item,
  ItemActions,
  ItemContent,
  ItemDescription,
  ItemMedia,
  ItemTitle,
} from "@/components/ui/item";

const Example = () => (
  <Item className="w-full max-w-md" variant="outline">
    <ItemMedia variant="icon">
      <ShieldAlert />
    </ItemMedia>
    <ItemContent>
      <ItemTitle>Security Alert</ItemTitle>
      <ItemDescription>New login detected from unknown device.</ItemDescription>
    </ItemContent>
    <ItemActions>
      <Button size="sm" variant="outline">
        Review
      </Button>
    </ItemActions>
  </Item>
);

export default Example;

```

## Example: image

```tsx
import {
  Item,
  ItemContent,
  ItemDescription,
  ItemMedia,
  ItemTitle,
} from "@/components/ui/item";

const images = [
  {
    src: "https://picsum.photos/seed/1/500/300",
    alt: "Midnight City Lights",
    description: "Electric Nights · Neon Dreams · 3:45",
  },
  {
    src: "https://picsum.photos/seed/2/500/300",
    alt: "Coffee Shop Conversations",
    description: "Urban Stories · The Morning Brew · 4:05",
  },
  {
    src: "https://picsum.photos/seed/3/500/300",
    alt: "Digital Rain",
    description: "Binary Beats · Cyber Symphony · 3:30",
  },
];

const Example = () => (
  <div className="flex w-full max-w-md flex-col gap-4">
    {images.map((image) => (
      <Item key={image.src} variant="outline">
        <ItemMedia variant="image">
          <img
            alt={image.alt}
            className="aspect-square w-full object-cover grayscale"
            height={80}
            src={image.src}
            width={80}
          />
        </ItemMedia>
        <ItemContent>
          <ItemTitle>{image.alt}</ItemTitle>
          <ItemDescription>{image.description}</ItemDescription>
        </ItemContent>
      </Item>
    ))}
  </div>
);

export default Example;

```

## Example: link

```tsx
import { ExternalLinkIcon } from "lucide-react";
import {
  Item,
  ItemContent,
  ItemDescription,
  ItemTitle,
} from "@/components/ui/item";

const Example = () => (
  <div className="flex w-full max-w-md flex-col gap-4">
    <Item asChild variant="muted">
      <a href="/docs">
        <ItemContent>
          <ItemTitle>Visit our documentation</ItemTitle>
          <ItemDescription>
            Learn how to get started with our components.
          </ItemDescription>
        </ItemContent>
      </a>
    </Item>
    <Item asChild variant="outline">
      <a
        href="https://vini.one/twitter"
        rel="noopener noreferrer"
        target="_blank"
      >
        <ItemContent>
          <ItemTitle>External resource</ItemTitle>
          <ItemDescription>
            Opens in a new tab with security attributes.
          </ItemDescription>
        </ItemContent>
        <ExternalLinkIcon />
      </a>
    </Item>
  </div>
);

export default Example;

```

## Example: variant-default

```tsx
import {
  Item,
  ItemContent,
  ItemDescription,
  ItemTitle,
} from "@/components/ui/item";

const Example = () => (
  <Item className="w-full max-w-md" variant="default">
    <ItemContent>
      <ItemTitle>Default Variant</ItemTitle>
      <ItemDescription>Transparent background with no border.</ItemDescription>
    </ItemContent>
  </Item>
);

export default Example;

```

## Example: variant-muted

```tsx
import {
  Item,
  ItemContent,
  ItemDescription,
  ItemTitle,
} from "@/components/ui/item";

const Example = () => (
  <Item className="w-full max-w-md" variant="muted">
    <ItemContent>
      <ItemTitle>Muted Variant</ItemTitle>
      <ItemDescription>Muted background for secondary content.</ItemDescription>
    </ItemContent>
  </Item>
);

export default Example;

```

## Example: variant-outline

```tsx
import {
  Item,
  ItemContent,
  ItemDescription,
  ItemTitle,
} from "@/components/ui/item";

const Example = () => (
  <Item className="w-full max-w-md" variant="outline">
    <ItemContent>
      <ItemTitle>Outline Variant</ItemTitle>
      <ItemDescription>Outlined style with a visible border.</ItemDescription>
    </ItemContent>
  </Item>
);

export default Example;

```

# Json Tree View - Examples and Patterns

Examples for Json Tree View component.

## Example: data-types

```tsx
import { JsonTreeView } from "@/components/ui/json-tree-view";

const data = {
  name: "John Doe",
  email: "john.doe@example.com",
  age: 30,
  balance: 1234.56,
  score: -42,
  isActive: true,
  isVerified: false,
  avatar: null,
  description: undefined,
  createdAt: new Date("2024-01-15T14:22:00.000Z"),
  lastLogin: new Date("2024-01-12T00:00:00.000Z"),
  tags: ["user", "premium", "verified"],
  scores: [95, 87, 92, 78, 100],
  address: {
    street: "123 Main St",
    city: "Anytown",
    state: "CA",
    zip: 12_345,
    coordinates: { lat: 37.7749, lng: -122.4194 },
  },
};

const Example = () => <JsonTreeView data={data} defaultExpandedDepth={2} />;

export default Example;

```

## Example: default

```tsx
import { JsonTreeView } from "@/components/ui/json-tree-view";

const data = {
  name: "John Doe",
  age: 30,
  email: "john.doe@example.com",
  tags: ["tag1", "tag2", "tag3"],
  address: {
    street: "123 Main St",
    city: "Anytown",
    state: "CA",
    zip: "12345",
  },
};

const Example = () => <JsonTreeView data={data} defaultExpandedDepth={1} />;

export default Example;

```

## Example: expand-depth

```tsx
import { JsonTreeView } from "@/components/ui/json-tree-view";

const data = {
  user: {
    profile: {
      name: "Jane",
      settings: {
        theme: "dark",
        notifications: true,
      },
    },
  },
};

const Example = () => (
  <div className="flex flex-col gap-6">
    <div>
      <p className="mb-2 font-medium text-foreground text-sm">
        defaultExpandedDepth={0} (all collapsed)
      </p>
      <JsonTreeView data={data} defaultExpandedDepth={0} />
    </div>
    <div>
      <p className="mb-2 font-medium text-foreground text-sm">
        defaultExpandedDepth={2}
      </p>
      <JsonTreeView data={data} defaultExpandedDepth={2} />
    </div>
  </div>
);

export default Example;

```

## Example: map-set

```tsx
import { JsonTreeView } from "@/components/ui/json-tree-view";

const preferences = new Map([
  ["theme", "dark"],
  ["language", "en"],
  ["notifications", "enabled"],
]);

const visitedPages = new Set(["/home", "/profile", "/settings"]);

const data = {
  preferences,
  visitedPages,
};

const Example = () => <JsonTreeView data={data} defaultExpandedDepth={1} />;

export default Example;

```

# Kbd - Examples and Patterns

Examples for Kbd component.

## Example: button

```tsx
import { SaveIcon } from "lucide-react";
import { Button } from "@/components/ui/button";
import { Kbd, KbdGroup } from "@/components/ui/kbd";

const Example = () => (
  <Button variant="outline">
    <SaveIcon />
    Save{" "}
    <KbdGroup className="translate-x-0.5">
      <Kbd variant="outline">Ctrl+S</Kbd>
    </KbdGroup>
  </Button>
);

export default Example;

```

## Example: default

```tsx
import { Kbd, KbdGroup } from "@/components/ui/kbd";

const Example = () => {
  return (
    <div className="flex flex-col items-center gap-4">
      <div className="flex gap-2">
        <Kbd>K</Kbd>
        <Kbd>⌘</Kbd>
        <Kbd>⌃</Kbd>
        <Kbd>⇧</Kbd>
      </div>
      <div className="flex gap-2">
        <KbdGroup>
          <Kbd>⌘</Kbd>
          <span>+</span>
          <Kbd>K</Kbd>
        </KbdGroup>
      </div>
    </div>
  );
};

export default Example;

```

## Example: input-group

```tsx
import { SearchIcon } from "lucide-react";
import {
  InputGroup,
  InputGroupAddon,
  InputGroupInput,
} from "@/components/ui/input-group";
import { Kbd, KbdGroup } from "@/components/ui/kbd";

const Example = () => (
  <InputGroup className="w-64">
    <InputGroupAddon>
      <SearchIcon />
    </InputGroupAddon>
    <InputGroupInput placeholder="Search..." />
    <InputGroupAddon align="inline-end">
      <KbdGroup>
        <Kbd>⌘</Kbd>
        <Kbd>K</Kbd>
      </KbdGroup>
    </InputGroupAddon>
  </InputGroup>
);

export default Example;

```

## Example: kbd-group

```tsx
import { Kbd, KbdGroup } from "@/components/ui/kbd";

const Example = () => {
  return (
    <div className="text-muted-foreground text-sm">
      Use{" "}
      <KbdGroup>
        <Kbd>Ctrl</Kbd>
        <span>+</span>
        <Kbd>K</Kbd>
      </KbdGroup>{" "}
      to open the command palette
    </div>
  );
};

export default Example;

```

## Example: tooltip

```tsx
import { Button } from "@/components/ui/button";
import { Kbd, KbdGroup } from "@/components/ui/kbd";
import {
  Tooltip,
  TooltipContent,
  TooltipTrigger,
} from "@/components/ui/tooltip";

const Example = () => (
  <Tooltip>
    <TooltipTrigger asChild>
      <Button size="sm" variant="outline">
        Dark mode
      </Button>
    </TooltipTrigger>
    <TooltipContent className="flex items-center gap-2">
      Toggle mode
      <KbdGroup className="ml-1.5 inline">
        <Kbd>D</Kbd>
      </KbdGroup>
    </TooltipContent>
  </Tooltip>
);

export default Example;

```

## Example: variant-outline

```tsx
import { Kbd, KbdGroup } from "@/components/ui/kbd";

const Example = () => (
  <KbdGroup>
    <Kbd variant="outline">K</Kbd>
    <Kbd variant="outline">⌘</Kbd>
    <Kbd variant="outline">⌃</Kbd>
  </KbdGroup>
);

export default Example;

```

# Link Overlay - Examples and Patterns

Examples for Link Overlay component.

## Example: article

```tsx
"use client";

import Link from "next/link";
import { LinkBox, LinkOverlay } from "@/components/ui/link-overlay";

const Example = () => (
  <LinkBox asChild>
    <article className="max-w-sm rounded-xl border p-4">
      <span className="text-muted-foreground text-sm">
        <time dateTime="2026-03-03T15:30:00Z">3 days ago</time>
      </span>
      <h2 className="my-2 font-medium text-lg">
        <LinkOverlay href="#">A11y Link Overlay</LinkOverlay>
      </h2>
      <p className="mb-3 text-muted-foreground text-sm">
        Learn how to construct a screen reader friendly link overlay for
        accessibility and usability.
      </p>
      <Link
        className="text-primary text-sm underline hover:underline"
        href="#inner-link"
      >
        Read more
      </Link>
    </article>
  </LinkBox>
);

export default Example;

```

## Example: default

```tsx
import { Button } from "@/components/ui/button";
import {
  Card,
  CardFooter,
  CardHeader,
  CardMedia,
  CardTitle,
} from "@/components/ui/card";
import { LinkBox, LinkOverlay } from "@/components/ui/link-overlay";

const LinkOverlayDemo = () => (
  <LinkBox asChild>
    <Card className="w-full max-w-xs">
      <CardMedia className="aspect-video w-full bg-muted" variant="image" />
      <CardHeader description="This sofa is perfect for modern tropical spaces, baroque inspired spaces.">
        <LinkOverlay asChild>
          <CardTitle asChild>
            <a href="#">Living room Sofa</a>
          </CardTitle>
        </LinkOverlay>
      </CardHeader>
      <CardFooter className="flex-row-reverse gap-2">
        <Button className="flex-1">Buy now</Button>
        <Button className="flex-1" variant="outline">
          Add to cart
        </Button>
      </CardFooter>
    </Card>
  </LinkBox>
);

export default LinkOverlayDemo;

```

## Example: with-link

```tsx
"use client";

import Link from "next/link";
import { LinkBox, LinkOverlay } from "@/components/ui/link-overlay";

const Example = () => (
  <LinkBox asChild>
    <article className="flex w-full max-w-xs flex-col gap-2 rounded-xl border p-4">
      <LinkOverlay asChild>
        <Link href="#">Simple blog post title</Link>
      </LinkOverlay>
      <p className="text-muted-foreground text-sm">
        This is a awesome blog post!
      </p>
      <Link className="text-primary underline" href="#inner-link">
        Inner link
      </Link>
    </article>
  </LinkBox>
);

export default Example;

```

# Listbox - Examples and Patterns

Examples for Listbox component.

## Example: controlled

```tsx
"use client";

import { createListCollection } from "@ark-ui/react";
import React from "react";
import { Item } from "@/components/ui/item";
import {
  Listbox,
  ListboxContent,
  ListboxItem,
  ListboxItemIndicator,
  ListboxItemText,
} from "@/components/ui/listbox";

const Example = () => {
  const [value, setValue] = React.useState(["md"]);

  const isLarge = value.includes("lg");

  return (
    <div className="flex w-full max-w-64 flex-col gap-4">
      <p className="text-center text-muted-foreground text-sm">
        Selected the Large size
      </p>
      <Item className="p-1" variant="outline">
        <Listbox
          collection={collection}
          onValueChange={(e) => setValue(e.value)}
          value={value}
        >
          <ListboxContent>
            {collection.items.map((item) => (
              <ListboxItem item={item} key={item.value}>
                <ListboxItemText>{item.label}</ListboxItemText>
                <ListboxItemIndicator />
              </ListboxItem>
            ))}
          </ListboxContent>
        </Listbox>
      </Item>
      <p className="text-center text-muted-foreground text-sm">
        {isLarge ? "✅" : "❌"}
      </p>
    </div>
  );
};

const collection = createListCollection({
  items: [
    { label: "Small", value: "sm" },
    { label: "Medium", value: "md" },
    { label: "Large", value: "lg" },
    { label: "Extra Large", value: "xl" },
  ],
});

export default Example;

```

## Example: default

```tsx
"use client";

import { createListCollection } from "@ark-ui/react";
import {
  Listbox,
  ListboxContent,
  ListboxItem,
  ListboxItemIndicator,
  ListboxItemText,
} from "@/components/ui/listbox";

const Example = () => (
  <Listbox
    className="w-full max-w-64"
    collection={collection}
    defaultValue={["br"]}
  >
    <ListboxContent>
      {collection.items.map((item) => (
        <ListboxItem item={item} key={item.value}>
          <ListboxItemText>{item.label}</ListboxItemText>
          <ListboxItemIndicator />
        </ListboxItem>
      ))}
    </ListboxContent>
  </Listbox>
);

const collection = createListCollection({
  items: [
    { label: "Brazil", value: "br" },
    { label: "Mexico", value: "mx" },
    { label: "Ireland", value: "ie" },
  ],
});

export default Example;

```

## Example: disabled-item

```tsx
"use client";

import { createListCollection } from "@ark-ui/react";
import { Item } from "@/components/ui/item";
import {
  Listbox,
  ListboxContent,
  ListboxItem,
  ListboxItemIndicator,
  ListboxItemText,
} from "@/components/ui/listbox";

const Example = () => (
  <Item className="w-full max-w-64 p-1" variant="outline">
    <Listbox collection={collection}>
      <ListboxContent>
        {collection.items.map((item) => (
          <ListboxItem item={item} key={item.value}>
            <ListboxItemText>{item.label}</ListboxItemText>
            <ListboxItemIndicator />
          </ListboxItem>
        ))}
      </ListboxContent>
    </Listbox>
  </Item>
);

const collection = createListCollection({
  items: [
    { label: "Free", value: "free" },
    { label: "Pro", value: "pro" },
    {
      label: "Enterprise",
      value: "enterprise",
      disabled: true,
    },
    { label: "Custom", value: "custom" },
  ],
});

export default Example;

```

## Example: disabled

```tsx
"use client";

import { createListCollection } from "@ark-ui/react";
import { Item } from "@/components/ui/item";
import {
  Listbox,
  ListboxContent,
  ListboxItem,
  ListboxItemIndicator,
  ListboxItemText,
} from "@/components/ui/listbox";

const Example = () => (
  <Item className="w-full max-w-64 p-1" variant="outline">
    <Listbox collection={collection} disabled>
      <ListboxContent>
        {collection.items.map((item) => (
          <ListboxItem item={item} key={item.value}>
            <ListboxItemText>{item.label}</ListboxItemText>
            <ListboxItemIndicator />
          </ListboxItem>
        ))}
      </ListboxContent>
    </Listbox>
  </Item>
);

const collection = createListCollection({
  items: [
    { label: "Brazil", value: "br" },
    { label: "Mexico", value: "mx" },
    { label: "Ireland", value: "ie" },
  ],
});

export default Example;

```

## Example: grid

```tsx
"use client";

import { createGridCollection } from "@ark-ui/react/collection";
import type React from "react";
import { Item } from "@/components/ui/item";
import {
  Listbox,
  ListboxContent,
  ListboxItem,
  ListboxItemText,
} from "@/components/ui/listbox";

const Example = () => {
  return (
    <Item className="w-full max-w-64 p-1" variant="outline">
      <Listbox collection={collection}>
        <ListboxContent
          className="grid grid-cols-[repeat(var(--column-count),1fr)] gap-1"
          style={
            { "--column-count": collection.columnCount } as React.CSSProperties
          }
        >
          {collection.items.map((item) => (
            <ListboxItem item={item} key={item.value}>
              <ListboxItemText className="text-center text-xl">
                {item.label}
              </ListboxItemText>
            </ListboxItem>
          ))}
        </ListboxContent>
      </Listbox>
    </Item>
  );
};

const collection = createGridCollection({
  columnCount: 5,
  items: [
    { label: "😀", value: "grinning" },
    { label: "😍", value: "heart-eyes" },
    { label: "🥳", value: "partying" },
    { label: "😎", value: "sunglasses" },
    { label: "🤩", value: "star-struck" },
    { label: "😂", value: "joy" },
    { label: "🥰", value: "smiling-hearts" },
    { label: "😊", value: "blush" },
    { label: "🤗", value: "hugging" },
    { label: "😇", value: "innocent" },
    { label: "🔥", value: "fire" },
    { label: "✨", value: "sparkles" },
    { label: "💯", value: "hundred" },
    { label: "🎉", value: "tada" },
    { label: "❤️", value: "heart" },
    { label: "👍", value: "thumbs-up" },
    { label: "👏", value: "clap" },
    { label: "🚀", value: "rocket" },
    { label: "⭐", value: "star" },
    { label: "🌈", value: "rainbow" },
  ],
});

export default Example;

```

## Example: grouping

```tsx
"use client";

import { createListCollection } from "@ark-ui/react";
import { Item } from "@/components/ui/item";
import {
  Listbox,
  ListboxContent,
  ListboxItem,
  ListboxItemGroup,
  ListboxItemGroupLabel,
  ListboxItemIndicator,
  ListboxItemText,
} from "@/components/ui/listbox";

const Example = () => (
  <Item className="w-full max-w-64 p-1" variant="outline">
    <Listbox collection={collection}>
      <ListboxContent>
        {collection.group().map(([region, items]) => (
          <ListboxItemGroup key={region}>
            <ListboxItemGroupLabel>{region}</ListboxItemGroupLabel>
            {items.map((item) => (
              <ListboxItem item={item} key={item.value}>
                <ListboxItemText>{item.label}</ListboxItemText>
                <ListboxItemIndicator />
              </ListboxItem>
            ))}
          </ListboxItemGroup>
        ))}
      </ListboxContent>
    </Listbox>
  </Item>
);

const collection = createListCollection({
  items: [
    { label: "Brazil", value: "br", region: "South America" },
    { label: "Colombia", value: "co", region: "South America" },
    { label: "Mexico", value: "mx", region: "North America" },
    { label: "Canada", value: "ca", region: "North America" },
  ],
  groupBy: (item) => (item as { region: string }).region,
});

export default Example;

```

## Example: horizontal

```tsx
"use client";

import { createListCollection } from "@ark-ui/react";
import { Field, FieldLabel } from "@/components/ui/field";
import {
  Listbox,
  ListboxContent,
  ListboxItem,
  ListboxItemIndicator,
  ListboxItemText,
} from "@/components/ui/listbox";

const Example = () => (
  <Field className="w-full max-w-xl">
    <FieldLabel>Favorite album</FieldLabel>
    <Listbox collection={collection} orientation="horizontal">
      <ListboxContent className="overflow-x-auto">
        {collection.items.map((item) => (
          <ListboxItem
            className="w-full flex-col items-start"
            item={item}
            key={item.title}
          >
            <div className="aspect-square size-20 w-full rounded-lg bg-foreground" />
            <div>
              <ListboxItemText>{item.title}</ListboxItemText>
              <p className="text-muted-foreground text-xs">{item.artist}</p>
            </div>
            <ListboxItemIndicator className="absolute top-4 right-4 shrink-0 rounded-sm bg-background [&_svg]:text-foreground!" />
          </ListboxItem>
        ))}
      </ListboxContent>
    </Listbox>
  </Field>
);

const collection = createListCollection({
  items: [
    { title: "Rappa Mundi", artist: "O Rappa" },
    { title: "Acústico MTV", artist: "Charlie Brown Jr." },
    { title: "Thriller", artist: "Michael Jackson" },
    { title: "The Eminem Show", artist: "Eminem" },
  ],
  itemToValue: (item) => item.title,
  itemToString: (item) => item.title,
});

export default Example;

```

## Example: image-explorer

```tsx
"use client";

import { createListCollection } from "@ark-ui/react";
import React from "react";
import {
  Listbox,
  ListboxContent,
  ListboxItem,
  ListboxItemText,
} from "@/components/ui/listbox";

const Example = () => {
  const [value, setValue] = React.useState(["mountain"]);

  const selectedImage = collection.items.find(
    (item) => item.value === value.at(0)
  );

  return (
    <div className="flex w-full max-w-lg flex-col gap-4 sm:flex-row">
      <Listbox
        className="w-full sm:max-w-40"
        collection={collection}
        onValueChange={(e) => setValue(e.value)}
        value={value}
      >
        <ListboxContent className="overflow-auto max-sm:flex-row">
          {collection.items.map((item) => (
            <ListboxItem item={item} key={item.value}>
              <ListboxItemText>{item.label}</ListboxItemText>
            </ListboxItem>
          ))}
        </ListboxContent>
      </Listbox>
      <div className="flex w-full items-end rounded-xl border bg-muted p-4">
        <div className="mt-auto">
          <h3 className="font-medium text-sm">{selectedImage?.label}</h3>
          <p className="text-muted-foreground text-xs">{selectedImage?.alt}</p>
        </div>
      </div>
    </div>
  );
};

const collection = createListCollection({
  items: [
    {
      label: "Mountain Landscape",
      value: "mountain",
      alt: "Scenic mountain view",
    },
    {
      label: "Ocean Waves",
      value: "ocean",
      alt: "Ocean waves",
    },
    {
      label: "Forest Path",
      value: "forest",
      alt: "Forest path",
    },
    {
      label: "City Skyline",
      value: "city",
      alt: "City skyline",
    },
    {
      label: "Desert Dunes",
      value: "desert",
      alt: "Desert dunes",
    },
  ],
});

export default Example;

```

## Example: selection-extended

```tsx
"use client";

import { createListCollection } from "@ark-ui/react";
import { Item } from "@/components/ui/item";
import { Kbd } from "@/components/ui/kbd";
import {
  Listbox,
  ListboxContent,
  ListboxItem,
  ListboxItemIndicator,
  ListboxItemText,
} from "@/components/ui/listbox";

const Example = () => (
  <div className="flex w-full max-w-64 flex-col gap-4">
    <p className="text-center text-muted-foreground text-sm">
      Hold <Kbd>⌘</Kbd> or <Kbd>Ctrl</Kbd> to select multiple
    </p>
    <Item className="w-full p-1" variant="outline">
      <Listbox collection={collection} selectionMode="extended">
        <ListboxContent>
          {collection.items.map((item) => (
            <ListboxItem item={item} key={item.value}>
              <ListboxItemText>{item.label}</ListboxItemText>
              <ListboxItemIndicator />
            </ListboxItem>
          ))}
        </ListboxContent>
      </Listbox>
    </Item>
  </div>
);

const collection = createListCollection({
  items: [
    { label: "Brazil", value: "br" },
    { label: "Mexico", value: "mx" },
    { label: "Ireland", value: "ie" },
  ],
});

export default Example;

```

## Example: selection-multiple

```tsx
"use client";

import { createListCollection } from "@ark-ui/react";
import { Item } from "@/components/ui/item";
import {
  Listbox,
  ListboxContent,
  ListboxItem,
  ListboxItemIndicator,
  ListboxItemText,
} from "@/components/ui/listbox";

const Example = () => (
  <Item className="w-full max-w-64 p-1" variant="outline">
    <Listbox collection={collection} selectionMode="multiple">
      <ListboxContent>
        {collection.items.map((item) => (
          <ListboxItem item={item} key={item.value}>
            <ListboxItemText>{item.label}</ListboxItemText>
            <ListboxItemIndicator />
          </ListboxItem>
        ))}
      </ListboxContent>
    </Listbox>
  </Item>
);

const collection = createListCollection({
  items: [
    { label: "Brazil", value: "br" },
    { label: "Mexico", value: "mx" },
    { label: "Ireland", value: "ie" },
  ],
});

export default Example;

```

## Example: selection-none

```tsx
"use client";

import { createListCollection } from "@ark-ui/react";
import { PencilIcon, SquarePlusIcon, Trash2Icon } from "lucide-react";
import { Item } from "@/components/ui/item";
import {
  Listbox,
  ListboxContent,
  ListboxItem,
  ListboxItemGroup,
  ListboxItemText,
  ListboxShortcut,
} from "@/components/ui/listbox";
import { Separator } from "@/components/ui/separator";

const Example = () => {
  return (
    <Item className="w-full max-w-64 p-1" variant="outline">
      <Listbox
        aria-label="File actions"
        className="w-full"
        collection={collection}
        selectionMode="none"
      >
        <ListboxContent>
          <ListboxItemGroup heading="Actions">
            <ListboxItem item={collection.items[0]}>
              <div className="flex h-8 items-start justify-start">
                <SquarePlusIcon />
              </div>
              <div className="flex min-w-0 flex-1 flex-col">
                <ListboxItemText>New file</ListboxItemText>
                <span className="text-muted-foreground text-xs">
                  Create a new file
                </span>
              </div>
              <ListboxShortcut>⌘N</ListboxShortcut>
            </ListboxItem>
            <ListboxItem item={collection.items[1]}>
              <div className="flex h-8 items-start justify-start">
                <PencilIcon />
              </div>
              <div className="flex min-w-0 flex-1 flex-col">
                <ListboxItemText>Edit file</ListboxItemText>
                <span className="text-muted-foreground text-xs">
                  Make changes
                </span>
              </div>
              <ListboxShortcut>⌘E</ListboxShortcut>
            </ListboxItem>
          </ListboxItemGroup>
          <Separator />
          <ListboxItemGroup heading="Danger zone">
            <ListboxItem item={collection.items[2]} variant="destructive">
              <div className="flex h-8 items-start justify-start">
                <Trash2Icon />
              </div>
              <div className="flex min-w-0 flex-1 flex-col">
                <ListboxItemText>Delete file</ListboxItemText>
                <span className="text-muted-foreground text-xs">
                  Move to trash
                </span>
              </div>
              <ListboxShortcut>⌘⇧D</ListboxShortcut>
            </ListboxItem>
          </ListboxItemGroup>
        </ListboxContent>
      </Listbox>
    </Item>
  );
};

const collection = createListCollection({
  items: [
    { label: "New file", value: "new-file", section: "actions" },
    { label: "Edit file", value: "edit-file", section: "actions" },
    {
      label: "Delete file",
      value: "delete-file",
      section: "danger",
    },
  ],
});

export default Example;

```

## Example: transfer-list

```tsx
"use client";

import { createListCollection } from "@ark-ui/react";
import { ChevronLeftIcon, ChevronRightIcon } from "lucide-react";
import React from "react";
import { Button } from "@/components/ui/button";
import { Item } from "@/components/ui/item";
import {
  Listbox,
  ListboxContent,
  ListboxItem,
  ListboxItemGroup,
  ListboxItemIndicator,
  ListboxItemText,
} from "@/components/ui/listbox";

const Example = () => {
  const [available, setAvailable] = React.useState(["Brazil", "Ireland"]);
  const [selected, setSelected] = React.useState<string[]>(["Mexico"]);
  const [availableValue, setAvailableValue] = React.useState<string[]>([]);
  const [selectedValue, setSelectedValue] = React.useState<string[]>([]);

  const availableCollection = createListCollection({
    items: available.map((label) => ({ label, value: label })),
  });

  const selectedCollection = createListCollection({
    items: selected.map((label) => ({ label, value: label })),
  });

  const moveToSelected = React.useCallback(() => {
    setAvailable((prev) =>
      prev.filter((item) => !availableValue.includes(item))
    );
    setSelected((prev) => [...prev, ...availableValue]);
    setAvailableValue([]);
  }, [availableValue]);

  const moveToAvailable = React.useCallback(() => {
    setSelected((prev) => prev.filter((item) => !selectedValue.includes(item)));
    setAvailable((prev) => [...prev, ...selectedValue]);
    setSelectedValue([]);
  }, [selectedValue]);

  return (
    <div className="flex w-full max-w-lg gap-2 max-sm:flex-col sm:gap-4">
      <Item className="w-full p-1" variant="outline">
        <Listbox
          className="min-h-40"
          collection={availableCollection}
          onValueChange={(e) => setAvailableValue(e.value)}
          selectionMode="multiple"
          value={availableValue}
        >
          <ListboxContent>
            <ListboxItemGroup heading="Available">
              {availableCollection.items.map((item) => (
                <ListboxItem item={item} key={item.value}>
                  <ListboxItemText>{item.label}</ListboxItemText>
                  <ListboxItemIndicator />
                </ListboxItem>
              ))}
            </ListboxItemGroup>
          </ListboxContent>
        </Listbox>
      </Item>
      <div className="flex flex-row-reverse justify-center gap-2 sm:flex-col">
        <Button
          disabled={availableValue.length === 0}
          onClick={moveToSelected}
          size="icon-md"
          variant="outline"
        >
          <ChevronRightIcon />
        </Button>
        <Button
          disabled={selectedValue.length === 0}
          onClick={moveToAvailable}
          size="icon-md"
          variant="outline"
        >
          <ChevronLeftIcon />
        </Button>
      </div>
      <Item className="w-full p-1" variant="outline">
        <Listbox
          className="min-h-40"
          collection={selectedCollection}
          onValueChange={(e) => setSelectedValue(e.value)}
          selectionMode="multiple"
          value={selectedValue}
        >
          <ListboxContent className="max-h-48 min-h-40">
            <ListboxItemGroup heading="Selected">
              {selectedCollection.items.map((item) => (
                <ListboxItem item={item} key={item.value}>
                  <ListboxItemText>{item.label}</ListboxItemText>
                  <ListboxItemIndicator />
                </ListboxItem>
              ))}
            </ListboxItemGroup>
          </ListboxContent>
        </Listbox>
      </Item>
    </div>
  );
};

export default Example;

```

## Example: with-description

```tsx
"use client";

import { createListCollection } from "@ark-ui/react";
import { Item } from "@/components/ui/item";
import {
  Listbox,
  ListboxContent,
  ListboxItem,
  ListboxItemIndicator,
  ListboxItemText,
} from "@/components/ui/listbox";

const Example = () => (
  <Item className="w-full max-w-xs p-1" variant="outline">
    <Listbox collection={collection}>
      <ListboxContent>
        {collection.items.map((item) => (
          <ListboxItem item={item} key={item.value}>
            <div className="flex min-w-0 flex-1 flex-col gap-0.5">
              <ListboxItemText>{item.label}</ListboxItemText>
              <span className="text-muted-foreground text-xs">
                {item.description}
              </span>
            </div>
            <ListboxItemIndicator />
          </ListboxItem>
        ))}
      </ListboxContent>
    </Listbox>
  </Item>
);

const collection = createListCollection({
  items: [
    {
      label: "Brazil",
      value: "br",
      description: "South America's country, Portuguese speaking.",
    },
    {
      label: "Mexico",
      value: "mx",
      description: "North America's country, Spanish speaking.",
    },
    {
      label: "Ireland",
      value: "ie",
      description: "Europe's country, Irish/English speaking.",
    },
  ],
});

export default Example;

```

## Example: with-filter

```tsx
"use client";

import { useListCollection } from "@ark-ui/react/collection";
import { useFilter } from "@ark-ui/react/locale";
import React from "react";
import { Input } from "@/components/ui/input";
import { Item } from "@/components/ui/item";
import {
  Listbox,
  ListboxContent,
  ListboxEmpty,
  ListboxItem,
  ListboxItemIndicator,
  ListboxItemText,
} from "@/components/ui/listbox";

const Example = () => {
  const [search, setSearch] = React.useState("");

  const { contains } = useFilter({ sensitivity: "base" });

  const { collection, filter } = useListCollection({
    initialItems: [
      { label: "Brazil", value: "br" },
      { label: "Mexico", value: "mx" },
      { label: "Ireland", value: "ie" },
    ],
    filter: contains,
  });

  const isEmpty = collection.items.length === 0 && search;

  return (
    <Item className="flex w-full max-w-64 flex-col gap-2 p-1" variant="outline">
      <Input
        onChange={(e) => {
          const value = e.target.value;
          setSearch(value);
          filter(value);
        }}
        placeholder="Search..."
        value={search}
      />
      <Listbox collection={collection}>
        <ListboxContent>
          {collection.items.map((item) => (
            <ListboxItem item={item} key={item.value}>
              <ListboxItemText>{item.label}</ListboxItemText>
              <ListboxItemIndicator />
            </ListboxItem>
          ))}

          {isEmpty && <ListboxEmpty>No results found.</ListboxEmpty>}
        </ListboxContent>
      </Listbox>
    </Item>
  );
};

export default Example;

```

## Example: with-icon

```tsx
"use client";

import { createListCollection } from "@ark-ui/react";
import { Item } from "@/components/ui/item";
import {
  Listbox,
  ListboxContent,
  ListboxItem,
  ListboxItemIndicator,
  ListboxItemText,
} from "@/components/ui/listbox";

const Example = () => (
  <Item className="w-full max-w-64 p-1" variant="outline">
    <Listbox collection={collection}>
      <ListboxContent>
        {collection.items.map((item) => (
          <ListboxItem item={item} key={item.value}>
            {item.icon}
            <ListboxItemText>{item.label}</ListboxItemText>
            <ListboxItemIndicator />
          </ListboxItem>
        ))}
      </ListboxContent>
    </Listbox>
  </Item>
);

const collection = createListCollection({
  items: [
    { label: "Brazil", value: "brazil", icon: "🇧🇷" },
    { label: "Mexico", value: "mexico", icon: "🇲🇽" },
    { label: "Ireland", value: "ireland", icon: "🇮🇪" },
  ],
});

export default Example;

```

## Example: with-popover

```tsx
"use client";

import { useListCollection } from "@ark-ui/react/collection";
import { useFilter } from "@ark-ui/react/locale";
import { ChevronsUpDown } from "lucide-react";
import React from "react";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import {
  Listbox,
  ListboxContent,
  ListboxEmpty,
  ListboxItem,
  ListboxItemIndicator,
  ListboxItemText,
  ListboxValueText,
} from "@/components/ui/listbox";
import {
  Popover,
  PopoverContent,
  PopoverTrigger,
} from "@/components/ui/popover";

const Example = () => {
  const [search, setSearch] = React.useState("");
  const [isOpen, setIsOpen] = React.useState(false);

  const { contains } = useFilter({ sensitivity: "base" });

  const { collection, filter } = useListCollection({
    initialItems: [
      { label: "Brazil", value: "br" },
      { label: "Mexico", value: "mx" },
      { label: "Ireland", value: "ie" },
      { label: "Canada", value: "ca" },
    ],
    filter: contains,
  });

  const isEmpty = collection.items.length === 0 && search;

  return (
    <Listbox
      className="w-full max-w-48"
      collection={collection}
      onSelect={() => {
        setIsOpen(false);
      }}
    >
      <Popover onOpenChange={({ open }) => setIsOpen(open)} open={isOpen}>
        <PopoverTrigger asChild>
          <Button
            className="justify-between"
            clickEffect={false}
            variant="outline"
          >
            <ListboxValueText placeholder="Select framework" />
            <ChevronsUpDown className="opacity-64" />
          </Button>
        </PopoverTrigger>
        <PopoverContent className="min-w-64 gap-2 p-1">
          <Input
            onChange={(e) => {
              const value = e.target.value;
              setSearch(value);
              filter(value);
            }}
            placeholder="Search..."
            value={search}
          />
          <ListboxContent>
            {collection.items.map((item) => (
              <ListboxItem item={item} key={item.value}>
                <ListboxItemText>{item.label}</ListboxItemText>
                <ListboxItemIndicator />
              </ListboxItem>
            ))}

            {isEmpty && <ListboxEmpty>No results found.</ListboxEmpty>}
          </ListboxContent>
        </PopoverContent>
      </Popover>
    </Listbox>
  );
};

export default Example;

```

# Marquee - Examples and Patterns

Examples for Marquee component.

## Example: autofill

```tsx
import { Card, CardContent } from "@/components/ui/card";
import {
  Marquee,
  MarqueeContent,
  MarqueeItem,
} from "@/components/ui/marquee";

const items = Array.from({ length: 2 });

const Example = () => (
  <Marquee autoFill speed={100}>
    <MarqueeContent>
      {items.map((_, index) => (
        <MarqueeItem key={index}>
          <Card className="shadow-none">
            <CardContent>
              <p>Sponsor {index + 1}</p>
            </CardContent>
          </Card>
        </MarqueeItem>
      ))}
    </MarqueeContent>
  </Marquee>
);

export default Example;

```

## Example: custom-speed

```tsx
import { Card, CardContent } from "@/components/ui/card";
import {
  Marquee,
  MarqueeContent,
  MarqueeItem,
} from "@/components/ui/marquee";

const items = Array.from({ length: 10 });

const Example = () => (
  <Marquee speed={10}>
    <MarqueeContent>
      {items.map((_, index) => (
        <MarqueeItem key={index}>
          <Card className="shadow-none">
            <CardContent>
              <p>Sponsor {index + 1}</p>
            </CardContent>
          </Card>
        </MarqueeItem>
      ))}
    </MarqueeContent>
  </Marquee>
);

export default Example;

```

## Example: default

```tsx
import { Card, CardContent } from "@/components/ui/card";
import {
  Marquee,
  MarqueeContent,
  MarqueeItem,
} from "@/components/ui/marquee";

const items = Array.from({ length: 10 });

const MarqueeDemo = () => {
  return (
    <Marquee>
      <MarqueeContent>
        {items.map((_, index) => (
          <MarqueeItem key={index}>
            <Card className="shadow-none">
              <CardContent>
                <p>Sponsor {index + 1}</p>
              </CardContent>
            </Card>
          </MarqueeItem>
        ))}
      </MarqueeContent>
    </Marquee>
  );
};

export default MarqueeDemo;

```

## Example: fade

```tsx
import { Card, CardContent } from "@/components/ui/card";
import {
  Marquee,
  MarqueeContent,
  MarqueeItem,
} from "@/components/ui/marquee";

const items = Array.from({ length: 10 });

const Example = () => (
  <div className="flex flex-col gap-6 overflow-hidden">
    <Marquee pauseOnInteraction showEdges={false}>
      <MarqueeContent>
        {items.map((_, index) => (
          <MarqueeItem key={index}>
            <Card>
              <CardContent>
                <p>Sponsor {index + 1}</p>
              </CardContent>
            </Card>
          </MarqueeItem>
        ))}
      </MarqueeContent>
    </Marquee>

    <Marquee pauseOnInteraction reverse>
      <MarqueeContent>
        {items.map((_, index) => (
          <MarqueeItem key={index}>
            <Card className="shadow-none">
              <CardContent>
                <p>Sponsor {index + 1}</p>
              </CardContent>
            </Card>
          </MarqueeItem>
        ))}
      </MarqueeContent>
    </Marquee>
  </div>
);

export default Example;

```

## Example: orientation-horizontal

```tsx
import { Card, CardContent } from "@/components/ui/card";
import {
  Marquee,
  MarqueeContent,
  MarqueeItem,
} from "@/components/ui/marquee";

const items = Array.from({ length: 10 });

const Example = () => (
  <Marquee orientation="horizontal">
    <MarqueeContent>
      {items.map((_, index) => (
        <MarqueeItem key={index}>
          <Card className="shadow-none">
            <CardContent>
              <p>Sponsor {index + 1}</p>
            </CardContent>
          </Card>
        </MarqueeItem>
      ))}
    </MarqueeContent>
  </Marquee>
);

export default Example;

```

## Example: orientation-vertical

```tsx
import { Card, CardContent } from "@/components/ui/card";
import {
  Marquee,
  MarqueeContent,
  MarqueeItem,
} from "@/components/ui/marquee";

const items = Array.from({ length: 10 });

const Example = () => (
  <Marquee className="max-h-[300px] w-full max-w-40" orientation="vertical">
    <MarqueeContent>
      {items.map((_, index) => (
        <MarqueeItem key={index}>
          <Card className="shadow-none">
            <CardContent>
              <p>Sponsor {index + 1}</p>
            </CardContent>
          </Card>
        </MarqueeItem>
      ))}
    </MarqueeContent>
  </Marquee>
);

export default Example;

```

## Example: pause-on-hover

```tsx
import { Card, CardContent } from "@/components/ui/card";
import {
  Marquee,
  MarqueeContent,
  MarqueeItem,
} from "@/components/ui/marquee";

const items = Array.from({ length: 10 });

const Example = () => {
  return (
    <Marquee pauseOnInteraction>
      <MarqueeContent>
        {items.map((_, index) => (
          <MarqueeItem key={index}>
            <Card className="shadow-none">
              <CardContent>
                <p>Sponsor {index + 1}</p>
              </CardContent>
            </Card>
          </MarqueeItem>
        ))}
      </MarqueeContent>
    </Marquee>
  );
};

export default Example;

```

## Example: reverse

```tsx
import { Card, CardContent } from "@/components/ui/card";
import {
  Marquee,
  MarqueeContent,
  MarqueeItem,
} from "@/components/ui/marquee";

const items = Array.from({ length: 10 });

const Example = () => (
  <Marquee reverse>
    <MarqueeContent>
      {items.map((_, index) => (
        <MarqueeItem key={index}>
          <Card className="shadow-none">
            <CardContent>
              <p>Sponsor {index + 1}</p>
            </CardContent>
          </Card>
        </MarqueeItem>
      ))}
    </MarqueeContent>
  </Marquee>
);

export default Example;

```

## Example: spacing

```tsx
import { Card, CardContent } from "@/components/ui/card";
import {
  Marquee,
  MarqueeContent,
  MarqueeItem,
} from "@/components/ui/marquee";

const items = Array.from({ length: 10 });

const Example = () => (
  <Marquee pauseOnInteraction spacing="40px">
    <MarqueeContent>
      {items.map((_, index) => (
        <MarqueeItem key={index}>
          <Card className="shadow-none">
            <CardContent>
              <p>Sponsor {index + 1}</p>
            </CardContent>
          </Card>
        </MarqueeItem>
      ))}
    </MarqueeContent>
  </Marquee>
);

export default Example;

```

# Menu - Examples and Patterns

Examples for Menu component.

## Example: checkboxes

```tsx
import { Button } from "@/components/ui/button";
import {
  Menu,
  MenuCheckboxItem,
  MenuContent,
  MenuGroup,
  MenuTrigger,
} from "@/components/ui/menu";

const Example = () => (
  <Menu>
    <MenuTrigger asChild>
      <Button variant="outline">Open</Button>
    </MenuTrigger>
    <MenuContent className="w-40">
      <MenuGroup heading="Appearance">
        <MenuCheckboxItem checked value="save">
          Status bar
        </MenuCheckboxItem>
        <MenuCheckboxItem checked={false} value="notifications">
          Activity bar
        </MenuCheckboxItem>
        <MenuCheckboxItem checked={false} disabled value="dark-mode">
          Panel
        </MenuCheckboxItem>
      </MenuGroup>
    </MenuContent>
  </Menu>
);

export default Example;

```

## Example: default

```tsx
import {
  Archive,
  ArchiveX,
  Bell,
  CirclePlus,
  FolderInput,
  MailX,
  Reply,
  Send,
  SquarePen,
  Trash,
  Trash2,
} from "lucide-react";
import { Button } from "@/components/ui/button";
import {
  Menu,
  MenuCheckboxItem,
  MenuContent,
  MenuGroup,
  MenuItem,
  MenuRadioGroup,
  MenuRadioItem,
  MenuSeparator,
  MenuShortcut,
  MenuSub,
  MenuSubContent,
  MenuSubTrigger,
  MenuTrigger,
} from "@/components/ui/menu";

const MenuDemo = () => {
  return (
    <Menu>
      <MenuTrigger asChild>
        <Button variant="outline">Open</Button>
      </MenuTrigger>
      <MenuContent className="w-40">
        <MenuGroup>
          <MenuItem value="forward">
            <Send /> Forward
            <MenuShortcut>⇧⌘F</MenuShortcut>
          </MenuItem>
          <MenuItem value="reply">
            <Reply /> Reply
            <MenuShortcut>⇧⌘R</MenuShortcut>
          </MenuItem>
          <MenuItem value="archive">
            <Archive /> Archive
            <MenuShortcut>⇧⌘Z</MenuShortcut>
          </MenuItem>
          <MenuSub>
            <MenuSubTrigger>
              <FolderInput /> Move to
            </MenuSubTrigger>
            <MenuSubContent>
              <MenuItem value="move-to-folder-1">
                <ArchiveX /> Junk
              </MenuItem>
              <MenuItem value="move-to-folder-2">
                <Trash /> Trash
              </MenuItem>
              <MenuItem value="move-to-folder-3">
                <Bell /> Reminders
              </MenuItem>
              <MenuSub>
                <MenuSubTrigger>
                  <CirclePlus />
                  More
                </MenuSubTrigger>
                <MenuSubContent>
                  <MenuItem value="move-to-folder-4">
                    <SquarePen />
                    Drafts
                  </MenuItem>
                  <MenuItem value="move-to-folder-6">
                    <MailX />
                    Spam
                  </MenuItem>
                </MenuSubContent>
              </MenuSub>
            </MenuSubContent>
          </MenuSub>
          <MenuSeparator />
          <MenuRadioGroup heading="Priority" value="medium">
            <MenuRadioItem value="low">Low</MenuRadioItem>
            <MenuRadioItem value="medium">Medium</MenuRadioItem>
            <MenuRadioItem value="high">High</MenuRadioItem>
          </MenuRadioGroup>
          <MenuSeparator />
          <MenuCheckboxItem checked value="block">
            Block sender
          </MenuCheckboxItem>
          <MenuSeparator />
          <MenuItem value="delete" variant="destructive">
            <Trash2 /> Delete
            <MenuShortcut>⌫</MenuShortcut>
          </MenuItem>
        </MenuGroup>
      </MenuContent>
    </Menu>
  );
};

export default MenuDemo;

```

## Example: destructive

```tsx
import { CopyIcon, PencilIcon, Trash2Icon } from "lucide-react";
import { Button } from "@/components/ui/button";
import {
  Menu,
  MenuContent,
  MenuItem,
  MenuSeparator,
  MenuTrigger,
} from "@/components/ui/menu";

const Example = () => (
  <Menu>
    <MenuTrigger asChild>
      <Button variant="outline">Open</Button>
    </MenuTrigger>
    <MenuContent className="w-40">
      <MenuItem value="edit">
        <PencilIcon />
        Edit
      </MenuItem>
      <MenuItem value="duplicate">
        <CopyIcon />
        Duplicate
      </MenuItem>
      <MenuSeparator />
      <MenuItem value="delete" variant="destructive">
        <Trash2Icon />
        Delete
      </MenuItem>
    </MenuContent>
  </Menu>
);

export default Example;

```

## Example: dialog

```tsx
"use client";

import React from "react";
import { Button } from "@/components/ui/button";
import {
  Dialog,
  DialogClose,
  DialogContent,
  DialogFooter,
  DialogHeader,
} from "@/components/ui/dialog";
import {
  Menu,
  MenuContent,
  MenuItem,
  MenuTrigger,
} from "@/components/ui/menu";

const Example = () => {
  const [dialogOpen, setDialogOpen] = React.useState(false);

  return (
    <>
      <Menu>
        <MenuTrigger asChild>
          <Button variant="outline">Open</Button>
        </MenuTrigger>
        <MenuContent className="w-40">
          <MenuItem onClick={() => setDialogOpen(true)} value="dialog">
            Open dialog
          </MenuItem>
        </MenuContent>
      </Menu>
      <Dialog onOpenChange={(e) => setDialogOpen(e.open)} open={dialogOpen}>
        <DialogContent>
          <DialogHeader
            description="Change your preferences."
            title="Settings"
          />
          <DialogFooter>
            <DialogClose asChild>
              <Button variant="outline">Close</Button>
            </DialogClose>
          </DialogFooter>
        </DialogContent>
      </Dialog>
    </>
  );
};

export default Example;

```

## Example: group-label

```tsx
import { Button } from "@/components/ui/button";
import {
  Menu,
  MenuContent,
  MenuGroup,
  MenuGroupLabel,
  MenuItem,
  MenuSeparator,
  MenuTrigger,
} from "@/components/ui/menu";

const Example = () => (
  <Menu>
    <MenuTrigger asChild>
      <Button variant="outline">Open</Button>
    </MenuTrigger>
    <MenuContent className="w-40">
      <MenuGroup heading="Account">
        <MenuItem value="profile">Profile</MenuItem>
        <MenuItem value="billing">Billing</MenuItem>
      </MenuGroup>
      <MenuSeparator />
      <MenuGroup>
        <MenuGroupLabel>Support</MenuGroupLabel>
        <MenuItem value="docs">Docs</MenuItem>
        <MenuItem value="contact">Contact</MenuItem>
      </MenuGroup>
    </MenuContent>
  </Menu>
);

export default Example;

```

## Example: icons

```tsx
import { CopyIcon, PencilIcon, ShareIcon } from "lucide-react";
import { Button } from "@/components/ui/button";
import {
  Menu,
  MenuContent,
  MenuItem,
  MenuTrigger,
} from "@/components/ui/menu";

const Example = () => (
  <Menu>
    <MenuTrigger asChild>
      <Button variant="outline">Open</Button>
    </MenuTrigger>
    <MenuContent className="w-40">
      <MenuItem value="edit">
        <PencilIcon />
        Edit
      </MenuItem>
      <MenuItem value="copy">
        <CopyIcon />
        Copy
      </MenuItem>
      <MenuItem value="share">
        <ShareIcon />
        Share
      </MenuItem>
    </MenuContent>
  </Menu>
);

export default Example;

```

## Example: link

```tsx
import { ExternalLink } from "lucide-react";
import Link from "next/link";
import { Button } from "@/components/ui/button";
import {
  Menu,
  MenuContent,
  MenuItem,
  MenuShortcut,
  MenuTrigger,
} from "@/components/ui/menu";

const Example = () => (
  <Menu>
    <MenuTrigger asChild>
      <Button variant="outline">Open</Button>
    </MenuTrigger>
    <MenuContent className="w-40">
      <MenuItem asChild value="docs">
        <a
          href="https://x.com/vinihvc"
          rel="noopener noreferrer"
          target="_blank"
        >
          External link
          <MenuShortcut>
            <ExternalLink />
          </MenuShortcut>
        </a>
      </MenuItem>
      <MenuItem asChild value="components">
        <Link href="/docs/components">View docs</Link>
      </MenuItem>
    </MenuContent>
  </Menu>
);

export default Example;

```

## Example: nested

```tsx
import { Button } from "@/components/ui/button";
import {
  Menu,
  MenuContent,
  MenuItem,
  MenuSub,
  MenuSubContent,
  MenuSubTrigger,
  MenuTrigger,
} from "@/components/ui/menu";

const Example = () => (
  <Menu>
    <MenuTrigger asChild>
      <Button variant="outline">Open</Button>
    </MenuTrigger>
    <MenuContent className="w-40">
      <MenuItem value="item-one">Item one</MenuItem>
      <MenuSub>
        <MenuSubTrigger>More</MenuSubTrigger>
        <MenuSubContent>
          <MenuItem value="sub-a">Sub item A</MenuItem>
          <MenuItem value="sub-b">Sub item B</MenuItem>
        </MenuSubContent>
      </MenuSub>
      <MenuItem value="item-two">Item two</MenuItem>
    </MenuContent>
  </Menu>
);

export default Example;

```

## Example: positioning

```tsx
import { Button } from "@/components/ui/button";
import {
  Menu,
  MenuContent,
  MenuItem,
  MenuTrigger,
} from "@/components/ui/menu";

const placements = ["left", "top", "bottom", "right"] as const;

const Example = () => (
  <div className="flex flex-wrap justify-center gap-2">
    {placements.map((placement) => (
      <Menu key={placement} positioning={{ placement }}>
        <MenuTrigger asChild>
          <Button className="capitalize" variant="outline">
            {placement}
          </Button>
        </MenuTrigger>
        <MenuContent className="w-36">
          <MenuItem value="edit">Edit</MenuItem>
          <MenuItem value="copy">Copy</MenuItem>
          <MenuItem value="share">Share</MenuItem>
        </MenuContent>
      </Menu>
    ))}
  </div>
);

export default Example;

```

## Example: quick-item

```tsx
import {
  CopyIcon,
  HandIcon,
  MessageCircle,
  PencilIcon,
  RotateCwIcon,
  ShareIcon,
} from "lucide-react";
import { Button } from "@/components/ui/button";
import {
  Menu,
  MenuContent,
  MenuGroup,
  MenuItem,
  MenuQuickItem,
  MenuSeparator,
  MenuTrigger,
} from "@/components/ui/menu";

const Example = () => (
  <Menu>
    <MenuTrigger asChild>
      <Button variant="outline">Open</Button>
    </MenuTrigger>
    <MenuContent className="w-44">
      <MenuGroup heading="Actions">
        <MenuItem value="edit">
          <PencilIcon />
          Edit
        </MenuItem>
        <MenuItem value="add-action">
          <RotateCwIcon />
          Add Action
        </MenuItem>
        <MenuItem value="key-point">
          <HandIcon />
          Key Point
        </MenuItem>
        <MenuItem value="comment">
          <MessageCircle />
          Comment
        </MenuItem>
      </MenuGroup>
      <MenuSeparator />
      <div className="flex w-full gap-1">
        <MenuQuickItem className="min-w-0 flex-1" value="copy">
          <CopyIcon />
          Copy
        </MenuQuickItem>
        <MenuQuickItem className="min-w-0 flex-1" value="share">
          <ShareIcon />
          Share
        </MenuQuickItem>
      </div>
    </MenuContent>
  </Menu>
);

export default Example;

```

## Example: radio-group

```tsx
import { Button } from "@/components/ui/button";
import {
  Menu,
  MenuContent,
  MenuRadioGroup,
  MenuRadioItem,
  MenuTrigger,
} from "@/components/ui/menu";

const Example = () => (
  <Menu>
    <MenuTrigger asChild>
      <Button variant="outline">Open</Button>
    </MenuTrigger>
    <MenuContent className="w-40">
      <MenuRadioGroup value="dark">
        <MenuRadioItem value="light">Light</MenuRadioItem>
        <MenuRadioItem value="dark">Dark</MenuRadioItem>
        <MenuRadioItem value="system">System</MenuRadioItem>
      </MenuRadioGroup>
    </MenuContent>
  </Menu>
);

export default Example;

```

## Example: shortcuts

```tsx
import { CopyIcon, LogOutIcon, SettingsIcon, UserIcon } from "lucide-react";
import { Button } from "@/components/ui/button";
import {
  Menu,
  MenuContent,
  MenuItem,
  MenuSeparator,
  MenuShortcut,
  MenuTrigger,
} from "@/components/ui/menu";

const Example = () => (
  <Menu>
    <MenuTrigger asChild>
      <Button variant="outline">Open</Button>
    </MenuTrigger>
    <MenuContent className="w-40">
      <MenuItem value="profile">
        <UserIcon />
        Profile
        <MenuShortcut>⌘P</MenuShortcut>
      </MenuItem>
      <MenuItem value="settings">
        <SettingsIcon />
        Settings
        <MenuShortcut>⌘S</MenuShortcut>
      </MenuItem>
      <MenuItem value="copy">
        <CopyIcon />
        Copy
        <MenuShortcut>⌘C</MenuShortcut>
      </MenuItem>
      <MenuSeparator />
      <MenuItem value="logout">
        <LogOutIcon />
        Log out
        <MenuShortcut>⇧⌘Q</MenuShortcut>
      </MenuItem>
    </MenuContent>
  </Menu>
);

export default Example;

```

## Example: with-scroll

```tsx
import { Button } from "@/components/ui/button";
import {
  Menu,
  MenuContent,
  MenuItem,
  MenuTrigger,
} from "@/components/ui/menu";

const items = [
  "Item 1",
  "Item 2",
  "Item 3",
  "Item 4",
  "Item 5",
  "Item 6",
  "Item 7",
  "Item 8",
  "Item 9",
  "Item 10",
  "Item 11",
  "Item 12",
  "Item 13",
  "Item 14",
  "Item 15",
];

const Example = () => (
  <Menu>
    <MenuTrigger asChild>
      <Button variant="outline">Open</Button>
    </MenuTrigger>
    <MenuContent className="max-h-60 min-w-40">
      {items.map((label, index) => (
        <MenuItem key={label} value={`item-${index + 1}`}>
          {label}
        </MenuItem>
      ))}
    </MenuContent>
  </Menu>
);

export default Example;

```

## Example: with-separator

```tsx
import { Button } from "@/components/ui/button";
import {
  Menu,
  MenuContent,
  MenuItem,
  MenuSeparator,
  MenuTrigger,
} from "@/components/ui/menu";

const Example = () => (
  <Menu>
    <MenuTrigger asChild>
      <Button variant="outline">Open</Button>
    </MenuTrigger>
    <MenuContent className="w-40">
      <MenuItem value="new">New file</MenuItem>
      <MenuItem value="open">Open file</MenuItem>
      <MenuItem value="save">Save</MenuItem>
      <MenuSeparator />
      <MenuItem value="copy">Copy</MenuItem>
      <MenuItem value="paste">Paste</MenuItem>
      <MenuSeparator />
      <MenuItem value="preferences">Preferences</MenuItem>
    </MenuContent>
  </Menu>
);

export default Example;

```

# Native Select - Examples and Patterns

Examples for Native Select component.

## Example: controlled

```tsx
"use client";

import React from "react";
import {
  NativeSelect,
  NativeSelectOption,
} from "@/components/ui/native-select";

const Example = () => {
  const [value, setValue] = React.useState("");

  return (
    <div className="flex flex-col gap-2">
      <NativeSelect
        className="w-full max-w-40"
        onChange={(e) => setValue(e.target.value)}
        value={value}
      >
        <NativeSelectOption value="">Select an option</NativeSelectOption>
        <NativeSelectOption value="banana">Banana</NativeSelectOption>
        <NativeSelectOption value="apple">Apple</NativeSelectOption>
        <NativeSelectOption value="orange">Orange</NativeSelectOption>
      </NativeSelect>
      <p className="text-muted-foreground text-sm">Selected: {value || "—"}</p>
    </div>
  );
};

export default Example;

```

## Example: default

```tsx
import {
  NativeSelect,
  NativeSelectOption,
} from "@/components/ui/native-select";

const NativeSelectDemo = () => (
  <NativeSelect className="w-full max-w-40">
    <NativeSelectOption value="">Select an option</NativeSelectOption>
    <NativeSelectOption value="banana">Banana</NativeSelectOption>
    <NativeSelectOption value="apple">Apple</NativeSelectOption>
    <NativeSelectOption value="orange">Orange</NativeSelectOption>
    <NativeSelectOption value="pineapple">Pineapple</NativeSelectOption>
  </NativeSelect>
);

export default NativeSelectDemo;

```

## Example: disabled

```tsx
import {
  NativeSelect,
  NativeSelectOption,
} from "@/components/ui/native-select";

const Example = () => (
  <NativeSelect className="w-full max-w-40" disabled>
    <NativeSelectOption value="">Select an option</NativeSelectOption>
    <NativeSelectOption value="banana">Banana</NativeSelectOption>
    <NativeSelectOption value="apple">Apple</NativeSelectOption>
    <NativeSelectOption value="orange">Orange</NativeSelectOption>
  </NativeSelect>
);

export default Example;

```

## Example: groups

```tsx
import {
  NativeSelect,
  NativeSelectOptGroup,
  NativeSelectOption,
} from "@/components/ui/native-select";

const Example = () => (
  <NativeSelect className="w-full max-w-40">
    <NativeSelectOption value="">Select an option</NativeSelectOption>
    <NativeSelectOptGroup label="Tropical">
      <NativeSelectOption value="banana">Banana</NativeSelectOption>
      <NativeSelectOption value="mango">Mango</NativeSelectOption>
      <NativeSelectOption value="pineapple">Pineapple</NativeSelectOption>
    </NativeSelectOptGroup>
    <NativeSelectOptGroup label="Vegetables">
      <NativeSelectOption value="carrot">Carrot</NativeSelectOption>
      <NativeSelectOption value="potato">Potato</NativeSelectOption>
      <NativeSelectOption value="tomato">Tomato</NativeSelectOption>
    </NativeSelectOptGroup>
  </NativeSelect>
);

export default Example;

```

## Example: invalid

```tsx
import { Field, FieldLabel } from "@/components/ui/field";
import {
  NativeSelect,
  NativeSelectOption,
} from "@/components/ui/native-select";

const Example = () => (
  <Field className="w-full max-w-40" invalid>
    <FieldLabel>Select a fruit</FieldLabel>
    <NativeSelect className="w-full max-w-40">
      <NativeSelectOption value="banana">Banana</NativeSelectOption>
      <NativeSelectOption value="apple">Apple</NativeSelectOption>
      <NativeSelectOption value="orange">Orange</NativeSelectOption>
    </NativeSelect>
  </Field>
);

export default Example;

```

## Example: size-lg

```tsx
import {
  NativeSelect,
  NativeSelectOption,
} from "@/components/ui/native-select";

const Example = () => (
  <NativeSelect className="min-w-[180px]" size="lg">
    <NativeSelectOption value="">Select an option</NativeSelectOption>
    <NativeSelectOption value="banana">Banana</NativeSelectOption>
    <NativeSelectOption value="apple">Apple</NativeSelectOption>
    <NativeSelectOption value="orange">Orange</NativeSelectOption>
  </NativeSelect>
);

export default Example;

```

## Example: size-md

```tsx
import {
  NativeSelect,
  NativeSelectOption,
} from "@/components/ui/native-select";

const Example = () => (
  <NativeSelect className="min-w-[180px]" size="md">
    <NativeSelectOption value="">Select an option</NativeSelectOption>
    <NativeSelectOption value="banana">Banana</NativeSelectOption>
    <NativeSelectOption value="apple">Apple</NativeSelectOption>
    <NativeSelectOption value="orange">Orange</NativeSelectOption>
  </NativeSelect>
);

export default Example;

```

## Example: size-sm

```tsx
import {
  NativeSelect,
  NativeSelectOption,
} from "@/components/ui/native-select";

const Example = () => (
  <NativeSelect className="min-w-[180px]" size="sm">
    <NativeSelectOption value="">Select an option</NativeSelectOption>
    <NativeSelectOption value="banana">Banana</NativeSelectOption>
    <NativeSelectOption value="apple">Apple</NativeSelectOption>
    <NativeSelectOption value="orange">Orange</NativeSelectOption>
  </NativeSelect>
);

export default Example;

```

## Example: with-field

```tsx
import {
  Field,
  FieldDescription,
  FieldLabel,
} from "@/components/ui/field";
import {
  NativeSelect,
  NativeSelectOption,
} from "@/components/ui/native-select";

const Example = () => (
  <Field className="w-full max-w-64">
    <FieldLabel>Country</FieldLabel>
    <NativeSelect>
      <NativeSelectOption value="">Select a country</NativeSelectOption>
      <NativeSelectOption value="br">Brazil</NativeSelectOption>
      <NativeSelectOption value="mx">Mexico</NativeSelectOption>
      <NativeSelectOption value="ie">Ireland</NativeSelectOption>
    </NativeSelect>
    <FieldDescription>Used for shipping estimates</FieldDescription>
  </Field>
);

export default Example;

```

# Number Input - Examples and Patterns

Examples for Number Input component.

## Example: controlled

```tsx
"use client";

import React from "react";
import {
  NumberField,
  NumberFieldDecrement,
  NumberFieldGroup,
  NumberFieldIncrement,
  NumberFieldInput,
} from "@/components/ui/number-input";

const Example = () => {
  const [value, setValue] = React.useState("1");

  const isNumberFive = value === "3";

  return (
    <div className="flex w-full max-w-40 flex-col gap-4 text-center text-sm">
      <p>Select the number 3</p>
      <NumberField onValueChange={({ value }) => setValue(value)} value={value}>
        <NumberFieldGroup>
          <NumberFieldDecrement />
          <NumberFieldInput />
          <NumberFieldIncrement />
        </NumberFieldGroup>
      </NumberField>
      <p className="text-center">{isNumberFive ? "✅" : "❌"}</p>
    </div>
  );
};

export default Example;

```

## Example: default

```tsx
import {
  NumberField,
  NumberFieldDecrement,
  NumberFieldGroup,
  NumberFieldIncrement,
  NumberFieldInput,
} from "@/components/ui/number-input";

const NumberInputDemo = () => (
  <NumberField className="w-full max-w-40" defaultValue="1">
    <NumberFieldGroup>
      <NumberFieldDecrement />
      <NumberFieldInput />
      <NumberFieldIncrement />
    </NumberFieldGroup>
  </NumberField>
);

export default NumberInputDemo;

```

## Example: disabled

```tsx
import {
  NumberField,
  NumberFieldDecrement,
  NumberFieldGroup,
  NumberFieldIncrement,
  NumberFieldInput,
} from "@/components/ui/number-input";

const Example = () => (
  <NumberField className="w-full max-w-40" disabled>
    <NumberFieldGroup>
      <NumberFieldDecrement />
      <NumberFieldInput />
      <NumberFieldIncrement />
    </NumberFieldGroup>
  </NumberField>
);

export default Example;

```

## Example: field-only

```tsx
import {
  NumberField,
  NumberFieldGroup,
  NumberFieldInput,
} from "@/components/ui/number-input";

const Example = () => (
  <NumberField className="w-full max-w-40" defaultValue="0">
    <NumberFieldGroup>
      <NumberFieldInput className="text-start" />
    </NumberFieldGroup>
  </NumberField>
);

export default Example;

```

## Example: formatted

```tsx
import {
  NumberField,
  NumberFieldDecrement,
  NumberFieldGroup,
  NumberFieldIncrement,
  NumberFieldInput,
} from "@/components/ui/number-input";

const Example = () => (
  <NumberField
    className="w-full max-w-40"
    defaultValue="19.00"
    formatOptions={{ currency: "USD", style: "currency" }}
  >
    <NumberFieldGroup>
      <NumberFieldDecrement />
      <NumberFieldInput />
      <NumberFieldIncrement />
    </NumberFieldGroup>
  </NumberField>
);

export default Example;

```

## Example: invalid

```tsx
import {
  NumberField,
  NumberFieldDecrement,
  NumberFieldGroup,
  NumberFieldIncrement,
  NumberFieldInput,
} from "@/components/ui/number-input";

const Example = () => (
  <NumberField className="w-full max-w-40" defaultValue="32" invalid>
    <NumberFieldGroup>
      <NumberFieldDecrement />
      <NumberFieldInput />
      <NumberFieldIncrement />
    </NumberFieldGroup>
  </NumberField>
);

export default Example;

```

## Example: mouse-wheel

```tsx
import {
  NumberField,
  NumberFieldDecrement,
  NumberFieldGroup,
  NumberFieldIncrement,
  NumberFieldInput,
} from "@/components/ui/number-input";

const Example = () => (
  <NumberField allowMouseWheel className="w-full max-w-40" defaultValue="10">
    <NumberFieldGroup>
      <NumberFieldDecrement />
      <NumberFieldInput />
      <NumberFieldIncrement />
    </NumberFieldGroup>
  </NumberField>
);

export default Example;

```

## Example: range

```tsx
import {
  NumberField,
  NumberFieldDecrement,
  NumberFieldGroup,
  NumberFieldIncrement,
  NumberFieldInput,
} from "@/components/ui/number-input";

const Example = () => (
  <NumberField className="w-full max-w-40" defaultValue="5" max={10} min={0}>
    <NumberFieldGroup>
      <NumberFieldDecrement />
      <NumberFieldInput />
      <NumberFieldIncrement />
    </NumberFieldGroup>
  </NumberField>
);

export default Example;

```

## Example: scrub

```tsx
import {
  NumberField,
  NumberFieldDecrement,
  NumberFieldGroup,
  NumberFieldIncrement,
  NumberFieldInput,
  NumberFieldScrubber,
} from "@/components/ui/number-input";

const Example = () => (
  <NumberField className="w-full max-w-40" defaultValue="10">
    <NumberFieldScrubber>Quantity</NumberFieldScrubber>
    <NumberFieldGroup>
      <NumberFieldDecrement />
      <NumberFieldInput />
      <NumberFieldIncrement />
    </NumberFieldGroup>
  </NumberField>
);

export default Example;

```

## Example: size-lg

```tsx
import {
  NumberField,
  NumberFieldDecrement,
  NumberFieldGroup,
  NumberFieldIncrement,
  NumberFieldInput,
} from "@/components/ui/number-input";

const Example = () => (
  <NumberField className="w-full max-w-40" defaultValue="10" size="lg">
    <NumberFieldGroup>
      <NumberFieldDecrement />
      <NumberFieldInput />
      <NumberFieldIncrement />
    </NumberFieldGroup>
  </NumberField>
);

export default Example;

```

## Example: size-md

```tsx
import {
  NumberField,
  NumberFieldDecrement,
  NumberFieldGroup,
  NumberFieldIncrement,
  NumberFieldInput,
} from "@/components/ui/number-input";

const Example = () => (
  <NumberField className="w-full max-w-40" defaultValue="10" size="md">
    <NumberFieldGroup>
      <NumberFieldDecrement />
      <NumberFieldInput />
      <NumberFieldIncrement />
    </NumberFieldGroup>
  </NumberField>
);

export default Example;

```

## Example: size-sm

```tsx
import {
  NumberField,
  NumberFieldDecrement,
  NumberFieldGroup,
  NumberFieldIncrement,
  NumberFieldInput,
} from "@/components/ui/number-input";

const Example = () => (
  <NumberField className="w-full max-w-40" defaultValue="10" size="sm">
    <NumberFieldGroup>
      <NumberFieldDecrement />
      <NumberFieldInput />
      <NumberFieldIncrement />
    </NumberFieldGroup>
  </NumberField>
);

export default Example;

```

## Example: step

```tsx
import { FieldLabel } from "@/components/ui/field";
import {
  NumberField,
  NumberFieldDecrement,
  NumberFieldGroup,
  NumberFieldIncrement,
  NumberFieldInput,
} from "@/components/ui/number-input";

const Example = () => (
  <div className="flex flex-col gap-6">
    <NumberField className="w-full max-w-40" defaultValue="0" step={5}>
      <FieldLabel>Step 5</FieldLabel>
      <NumberFieldGroup>
        <NumberFieldDecrement />
        <NumberFieldInput />
        <NumberFieldIncrement />
      </NumberFieldGroup>
    </NumberField>
    <NumberField className="w-full max-w-40" defaultValue="0.1" step={0.1}>
      <FieldLabel>Step 0.1</FieldLabel>
      <NumberFieldGroup>
        <NumberFieldDecrement />
        <NumberFieldInput />
        <NumberFieldIncrement />
      </NumberFieldGroup>
    </NumberField>
  </div>
);

export default Example;

```

## Example: with-field

```tsx
"use client";

import {
  Field,
  FieldDescription,
  FieldLabel,
} from "@/components/ui/field";
import {
  NumberField,
  NumberFieldDecrement,
  NumberFieldGroup,
  NumberFieldIncrement,
  NumberFieldInput,
} from "@/components/ui/number-input";

const Example = () => (
  <Field className="w-full max-w-52">
    <FieldLabel>Quantity</FieldLabel>
    <NumberField defaultValue="1" max={99} min={0}>
      <NumberFieldGroup>
        <NumberFieldDecrement />
        <NumberFieldInput />
        <NumberFieldIncrement />
      </NumberFieldGroup>
    </NumberField>
    <FieldDescription>Enter a value between 0 and 99</FieldDescription>
  </Field>
);

export default Example;

```

## Example: with-input-group

```tsx
"use client";

import {
  InputGroup,
  InputGroupAddon,
  InputGroupText,
} from "@/components/ui/input-group";
import {
  NumberField,
  NumberFieldInput,
} from "@/components/ui/number-input";

const Example = () => (
  <InputGroup className="max-w-40">
    <NumberField aria-label="Enter the amount" defaultValue="10">
      <NumberFieldInput className="text-start" />
    </NumberField>
    <InputGroupAddon>
      <InputGroupText>€</InputGroupText>
    </InputGroupAddon>
    <InputGroupAddon align="inline-end">
      <InputGroupText>EUR</InputGroupText>
    </InputGroupAddon>
  </InputGroup>
);

export default Example;

```

# Pagination - Examples and Patterns

Examples for Pagination component.

## Example: controlled

```tsx
"use client";

import React from "react";
import {
  Pagination,
  PaginationItems,
  PaginationNext,
  PaginationPrevious,
} from "@/components/ui/pagination";

const Example = () => {
  const [page, setPage] = React.useState(1);

  return (
    <div className="flex flex-col gap-4">
      <Pagination
        count={50}
        onPageChange={(details) => setPage(details.page)}
        page={page}
        pageSize={10}
      >
        <PaginationPrevious />
        <PaginationItems />
        <PaginationNext />
      </Pagination>

      <p className="text-center text-muted-foreground text-sm">
        Page {page} of 5
      </p>
    </div>
  );
};

export default Example;

```

## Example: default

```tsx
"use client";

import {
  Pagination,
  PaginationItems,
  PaginationNext,
  PaginationPrevious,
} from "@/components/ui/pagination";

const PaginationDemo = () => (
  <Pagination count={50} pageSize={10}>
    <PaginationPrevious />
    <PaginationItems />
    <PaginationNext />
  </Pagination>
);

export default PaginationDemo;

```

## Example: links

```tsx
"use client";

import { ChevronLeftIcon, ChevronRightIcon } from "lucide-react";
import {
  Pagination,
  PaginationItemLink,
  PaginationItems,
} from "@/components/ui/pagination";

const Example = () => (
  <Pagination count={50} pageSize={10}>
    <PaginationItemLink page="previous">
      <ChevronLeftIcon />
      Previous
    </PaginationItemLink>
    <PaginationItems />
    <PaginationItemLink page="next">
      Next
      <ChevronRightIcon />
    </PaginationItemLink>
  </Pagination>
);

export default Example;

```

## Example: page-range

```tsx
"use client";

import {
  Pagination,
  PaginationItems,
  PaginationNext,
  PaginationPrevious,
} from "@/components/ui/pagination";

const Example = () => (
  <Pagination count={100} page={6} pageSize={10}>
    <PaginationPrevious />
    <PaginationItems />
    <PaginationNext />
  </Pagination>
);

export default Example;

```

## Example: table

```tsx
"use client";

import React from "react";
import {
  NativeSelect,
  NativeSelectOption,
} from "@/components/ui/native-select";
import {
  Pagination,
  PaginationNext,
  PaginationPrevious,
} from "@/components/ui/pagination";
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@/components/ui/table";

const users = Array.from({ length: 48 }, (_, i) => ({
  id: `user-${i + 1}`,
  name: `User ${i + 1}`,
  email: `user${i + 1}@example.com`,
}));

const Example = () => {
  const [page, setPage] = React.useState(1);
  const [pageSize, setPageSize] = React.useState(2);

  const paginatedUsers = users.slice((page - 1) * pageSize, page * pageSize);

  return (
    <div className="flex w-full max-w-lg flex-col gap-2 rounded-xl border p-4">
      <Table>
        <TableHeader>
          <TableRow>
            <TableHead>Name</TableHead>
            <TableHead>Email</TableHead>
          </TableRow>
        </TableHeader>
        <TableBody>
          {paginatedUsers.map((user) => (
            <TableRow key={user.id}>
              <TableCell>{user.name}</TableCell>
              <TableCell>{user.email}</TableCell>
            </TableRow>
          ))}
        </TableBody>
      </Table>
      <div className="flex items-center justify-between gap-22">
        <div className="flex shrink-0 items-center gap-2">
          <div className="text-muted-foreground text-sm">Items per page:</div>
          <NativeSelect
            onChange={(e) => setPageSize(Number(e.target.value))}
            value={pageSize}
          >
            <NativeSelectOption value="2">2</NativeSelectOption>
            <NativeSelectOption value="3">3</NativeSelectOption>
            <NativeSelectOption value="4">4</NativeSelectOption>
          </NativeSelect>
        </div>

        <Pagination
          className="flex-1 justify-end"
          count={users.length}
          onPageChange={({ page }) => setPage(page)}
          onPageSizeChange={({ pageSize }) => setPageSize(pageSize)}
          page={page}
          pageSize={pageSize}
        >
          <PaginationPrevious />
          <PaginationNext />
        </Pagination>
      </div>
    </div>
  );
};

export default Example;

```

# Popover - Examples and Patterns

Examples for Popover component.

## Example: anchor

```tsx
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import {
  Popover,
  PopoverAnchor,
  PopoverContent,
  PopoverHeader,
  PopoverTrigger,
} from "@/components/ui/popover";

const Example = () => (
  <div className="w-full max-w-sm">
    <Popover>
      <div className="flex items-center gap-2">
        <PopoverTrigger asChild>
          <Button variant="outline">Open</Button>
        </PopoverTrigger>
        <PopoverAnchor asChild>
          <Input className="w-full" placeholder="john@doe.com" />
        </PopoverAnchor>
        <PopoverContent className="w-56">
          <PopoverHeader
            description="We'll send you a link to reset your password."
            title="Enter your email"
          />
        </PopoverContent>
      </div>
    </Popover>
  </div>
);

export default Example;

```

## Example: close-behavior

```tsx
import { Button } from "@/components/ui/button";
import {
  Popover,
  PopoverContent,
  PopoverHeader,
  PopoverTrigger,
} from "@/components/ui/popover";

const Example = () => (
  <div className="flex flex-wrap justify-center gap-4">
    <Popover closeOnInteractOutside={false}>
      <PopoverTrigger asChild>
        <Button variant="outline">Open outside click</Button>
      </PopoverTrigger>
      <PopoverContent className="w-64" showCloseButton>
        <PopoverHeader
          description="Clicking outside does not close this popover. Press ESC to close."
          title="Stays on outside click"
        />
      </PopoverContent>
    </Popover>
    <Popover closeOnEscape={false}>
      <PopoverTrigger asChild>
        <Button variant="outline">Open escape</Button>
      </PopoverTrigger>
      <PopoverContent className="w-64" showCloseButton>
        <PopoverHeader
          description="Pressing escape does not close this popover. Click outside to close."
          title="Escape disabled"
        />
      </PopoverContent>
    </Popover>
  </div>
);

export default Example;

```

## Example: close-button

```tsx
import { Button } from "@/components/ui/button";
import {
  Popover,
  PopoverContent,
  PopoverHeader,
  PopoverTrigger,
} from "@/components/ui/popover";

const Example = () => (
  <Popover>
    <PopoverTrigger asChild>
      <Button variant="outline">Open</Button>
    </PopoverTrigger>
    <PopoverContent className="w-72" showCloseButton>
      <PopoverHeader
        description="You are all caught up!"
        title="Notifications"
      />
    </PopoverContent>
  </Popover>
);

export default Example;

```

## Example: custom-spacing

```tsx
import { Button } from "@/components/ui/button";
import {
  Field,
  FieldGroup,
  FieldLabel,
} from "@/components/ui/field";
import { Input } from "@/components/ui/input";
import {
  Popover,
  PopoverBody,
  PopoverContent,
  PopoverHeader,
  PopoverTrigger,
} from "@/components/ui/popover";

const Example = () => (
  <Popover>
    <PopoverTrigger asChild>
      <Button variant="outline">Open</Button>
    </PopoverTrigger>

    <PopoverContent className="w-80 [--space:--spacing(2)] sm:[--space:--spacing(5)]">
      <PopoverHeader
        description="Set the dimensions for the layer."
        title="Dimensions"
      />
      <PopoverBody>
        <FieldGroup className="gap-2">
          <Field className="grid grid-cols-3 items-center gap-4">
            <FieldLabel>Width</FieldLabel>
            <Input className="col-span-2" defaultValue="100%" />
          </Field>

          <Field className="grid grid-cols-3 items-center gap-4">
            <FieldLabel>Max. width</FieldLabel>
            <Input className="col-span-2" defaultValue="300px" />
          </Field>
        </FieldGroup>
      </PopoverBody>
    </PopoverContent>
  </Popover>
);

export default Example;

```

## Example: default

```tsx
import { Button } from "@/components/ui/button";
import {
  Field,
  FieldGroup,
  FieldLabel,
} from "@/components/ui/field";
import { Input } from "@/components/ui/input";
import {
  Popover,
  PopoverBody,
  PopoverContent,
  PopoverHeader,
  PopoverTrigger,
} from "@/components/ui/popover";

const PopoverDemo = () => (
  <Popover>
    <PopoverTrigger asChild>
      <Button variant="outline">Open</Button>
    </PopoverTrigger>

    <PopoverContent className="w-80">
      <PopoverHeader
        description="Set the dimensions for the layer."
        title="Dimensions"
      />
      <PopoverBody>
        <FieldGroup className="gap-2">
          <Field className="grid grid-cols-3 items-center gap-4">
            <FieldLabel>Width</FieldLabel>
            <Input className="col-span-2" defaultValue="100%" />
          </Field>

          <Field className="grid grid-cols-3 items-center gap-4">
            <FieldLabel>Max. width</FieldLabel>
            <Input className="col-span-2" defaultValue="300px" />
          </Field>

          <Field className="grid grid-cols-3 items-center gap-4">
            <FieldLabel>Height</FieldLabel>
            <Input className="col-span-2" defaultValue="25px" />
          </Field>

          <Field className="grid grid-cols-3 items-center gap-4">
            <FieldLabel>Max. height</FieldLabel>
            <Input className="col-span-2" defaultValue="none" />
          </Field>
        </FieldGroup>
      </PopoverBody>
    </PopoverContent>
  </Popover>
);

export default PopoverDemo;

```

## Example: nested

```tsx
import { Button } from "@/components/ui/button";
import {
  Popover,
  PopoverBody,
  PopoverContent,
  PopoverHeader,
  PopoverTrigger,
} from "@/components/ui/popover";

const Example = () => (
  <Popover>
    <PopoverTrigger asChild>
      <Button variant="outline">Open</Button>
    </PopoverTrigger>
    <PopoverContent className="w-64">
      <PopoverHeader
        description="Check your notifications."
        title="Notifications"
      />
      <PopoverBody>
        <Popover>
          <PopoverTrigger asChild>
            <Button size="sm" variant="outline">
              Open nested
            </Button>
          </PopoverTrigger>

          <PopoverContent className="w-56">
            <PopoverHeader
              description="You are all caught up!"
              title="Nested popover"
            />
          </PopoverContent>
        </Popover>
      </PopoverBody>
    </PopoverContent>
  </Popover>
);

export default Example;

```

## Example: non-modal

```tsx
import { Button } from "@/components/ui/button";
import {
  Popover,
  PopoverContent,
  PopoverHeader,
  PopoverTrigger,
} from "@/components/ui/popover";

const Example = () => (
  <Popover modal={false}>
    <PopoverTrigger asChild>
      <Button variant="outline">Open</Button>
    </PopoverTrigger>
    <PopoverContent className="w-64">
      <PopoverHeader
        description="You are all caught up!"
        title="Notifications"
      />
    </PopoverContent>
  </Popover>
);

export default Example;

```

## Example: positioning

```tsx
import { Button } from "@/components/ui/button";
import {
  Popover,
  PopoverContent,
  PopoverHeader,
  PopoverTrigger,
} from "@/components/ui/popover";

const placements = ["left", "top", "bottom", "right"] as const;

const Example = () => (
  <div className="flex flex-wrap justify-center gap-2">
    {placements.map((placement) => (
      <Popover key={placement} positioning={{ placement }}>
        <PopoverTrigger asChild>
          <Button className="capitalize" variant="outline">
            {placement}
          </Button>
        </PopoverTrigger>
        <PopoverContent className="w-56">
          <PopoverHeader
            description={`This popover appears on the ${placement} placement of the trigger.`}
            title="Popover"
          />
        </PopoverContent>
      </Popover>
    ))}
  </div>
);

export default Example;

```

## Example: scroll-area

```tsx
import { Button } from "@/components/ui/button";
import {
  Popover,
  PopoverBody,
  PopoverClose,
  PopoverContent,
  PopoverFooter,
  PopoverHeader,
  PopoverTrigger,
} from "@/components/ui/popover";

const items = Array.from({ length: 12 }, (_, i) => ({
  id: i + 1,
  label: `Item ${i + 1}`,
}));

const Example = () => (
  <Popover>
    <PopoverTrigger asChild>
      <Button variant="outline">Open</Button>
    </PopoverTrigger>
    <PopoverContent className="h-80 w-72">
      <PopoverHeader title="Scrollable content" />
      <PopoverBody>
        <ul className="flex flex-col gap-1">
          {items.map((item) => (
            <li
              className="rounded-md px-2 py-1.5 text-sm hover:bg-muted"
              key={item.id}
            >
              {item.label}
            </li>
          ))}
        </ul>
      </PopoverBody>
      <PopoverFooter>
        <PopoverClose asChild>
          <Button>Close</Button>
        </PopoverClose>
      </PopoverFooter>
    </PopoverContent>
  </Popover>
);

export default Example;

```

## Example: with-dialog

```tsx
import { Button } from "@/components/ui/button";
import {
  Dialog,
  DialogBody,
  DialogClose,
  DialogContent,
  DialogFooter,
  DialogHeader,
  DialogTrigger,
} from "@/components/ui/dialog";
import {
  Popover,
  PopoverContent,
  PopoverHeader,
  PopoverTrigger,
} from "@/components/ui/popover";

const Example = () => (
  <Dialog>
    <DialogTrigger asChild>
      <Button variant="outline">Open </Button>
    </DialogTrigger>
    <DialogContent>
      <DialogHeader
        description="Open the popover from the button below to see it layered above the dialog."
        title="Popover inside dialog"
      />
      <DialogBody>
        <Popover>
          <PopoverTrigger asChild>
            <Button variant="outline">Open</Button>
          </PopoverTrigger>
          <PopoverContent>
            <PopoverHeader
              description="You are all caught up!"
              title="Nested popover"
            />
          </PopoverContent>
        </Popover>
      </DialogBody>
      <DialogFooter>
        <DialogClose asChild>
          <Button variant="outline">Close</Button>
        </DialogClose>
      </DialogFooter>
    </DialogContent>
  </Dialog>
);

export default Example;

```

# Presence - Examples and Patterns

Examples for Presence component.

## Example: default

```tsx
"use client";

import React from "react";
import { cn } from "@/lib/utils";
import { Button } from "@/components/ui/button";
import { Presence } from "@/components/ui/presence";

const PresenceDemo = () => {
  const [present, setPresent] = React.useState(false);

  return (
    <div className="relative">
      <Button
        clickEffect={false}
        onClick={() => setPresent(!present)}
        variant="outline"
      >
        Toggle
      </Button>
      <Presence asChild present={present}>
        <div
          className={cn(
            "absolute bottom-full left-1/2 mb-2 -translate-x-1/2",
            "px-4 py-2",
            "bg-muted",
            "text-sm",
            "rounded-md border",
            "origin-bottom",
            "data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-[98%] data-[state=closed]:slide-out-to-bottom-5 data-[state=closed]:animate-out",
            "data-[state=open]:fade-in-0 data-[state=open]:zoom-in-[98%] data-[state=open]:slide-in-from-bottom-5 data-[state=open]:animate-in"
          )}
        >
          Content
        </div>
      </Presence>
    </div>
  );
};

export default PresenceDemo;

```

# Progress - Examples and Patterns

Examples for Progress component.

## Example: controlled

```tsx
"use client";

import { MinusIcon, PlusIcon } from "lucide-react";
import React from "react";
import { Button } from "@/components/ui/button";
import { ButtonGroup } from "@/components/ui/button-group";
import { Field, FieldLabel } from "@/components/ui/field";
import { Progress } from "@/components/ui/progress";

const Example = () => {
  const [value, setValue] = React.useState(50);

  return (
    <Field className="w-full max-w-64">
      <FieldLabel className="flex items-center gap-2">
        Controlled progress
        <ButtonGroup className="ml-auto">
          <Button
            clickEffect={false}
            onClick={() => setValue(Math.max(0, value - 10))}
            size="icon-sm"
            variant="outline"
          >
            <MinusIcon />
          </Button>
          <Button
            clickEffect={false}
            onClick={() => setValue(Math.min(100, value + 10))}
            size="icon-sm"
            variant="outline"
          >
            <PlusIcon />
          </Button>
        </ButtonGroup>
      </FieldLabel>
      <Progress value={value} />
    </Field>
  );
};

export default Example;

```

## Example: default

```tsx
"use client";

import React from "react";
import { Progress } from "@/components/ui/progress";

const ProgressDemo = () => {
  const [progress, setProgress] = React.useState(13);

  React.useEffect(() => {
    const timer = setTimeout(() => setProgress(66), 500);
    return () => clearTimeout(timer);
  }, []);

  return <Progress className="w-full max-w-64" value={progress} />;
};

export default ProgressDemo;

```

## Example: indeterminate

```tsx
import { Field, FieldLabel } from "@/components/ui/field";
import { Progress } from "@/components/ui/progress";

const Example = () => (
  <Field className="w-full max-w-xs">
    <FieldLabel>Establishing connection...</FieldLabel>
    <Progress indeterminate />
  </Field>
);

export default Example;

```

## Example: orientation-horizontal

```tsx
import { Progress } from "@/components/ui/progress";

const Example = () => (
  <Progress className="w-full max-w-64" orientation="horizontal" value={60} />
);

export default Example;

```

## Example: orientation-vertical

```tsx
import { Progress } from "@/components/ui/progress";

const Example = () => (
  <div className="flex w-full items-center justify-center">
    <Progress className="h-64" orientation="vertical" value={60} />
  </div>
);

export default Example;

```

## Example: with-label

```tsx
import { Field, FieldLabel } from "@/components/ui/field";
import { Progress, ProgressValue } from "@/components/ui/progress";

const Example = () => (
  <Field className="w-full max-w-xs">
    <Progress value={66}>
      <FieldLabel>Upload progress</FieldLabel>

      <ProgressValue />
    </Progress>
  </Field>
);

export default Example;

```

# Prose - Examples and Patterns

Examples for Prose component.

## Example: a

```tsx
import { Prose } from "@/components/ui/prose";

const Example = () => (
  <Prose>
    <p>
      Read more <a href="#about-the-joke-tax">about the joke tax</a> in the
      kingdom archives.
    </p>
  </Prose>
);

export default Example;

```

## Example: blockquote

```tsx
import { Prose } from "@/components/ui/prose";

const Example = () => (
  <Prose>
    <blockquote>
      "After all," he said, "everyone enjoys a good joke, so it's only fair that
      they should pay for the privilege."
    </blockquote>
  </Prose>
);

export default Example;

```

## Example: default

```tsx
import { Prose } from "@/components/ui/prose";

const ProseDemo = () => (
  <Prose className="py-8">
    <h1>Title Heading 1</h1>
    <h2>Title Heading 2</h2>
    <h3>Title Heading 3</h3>
    <p>
      Lorem, ipsum dolor sit amet consectetur adipisicing elit. Odit sed enim
      ducimus quae aperiam animi nobis est vitae incidunt cumque voluptate
      magnam adipisci, accusantium, beatae neque totam cum? Rem, aliquam.
    </p>
  </Prose>
);

export default ProseDemo;

```

## Example: details

```tsx
import { Prose } from "@/components/ui/prose";

const Example = () => (
  <Prose>
    <details>
      <summary>How did the joke tax end?</summary>
      <p>
        The king repealed the tax after seeing how much happier his subjects
        were. Jokester was declared a hero.
      </p>
    </details>
  </Prose>
);

export default Example;

```

## Example: dl

```tsx
import { Prose } from "@/components/ui/prose";

const Example = () => (
  <Prose>
    <dl>
      <dt>Joke Tax</dt>
      <dd>A levy on humor imposed by the king.</dd>
      <dt>Jokester</dt>
      <dd>The court jester who led the revolt.</dd>
    </dl>
  </Prose>
);

export default Example;

```

## Example: h1

```tsx
import { Prose } from "@/components/ui/prose";

const Example = () => (
  <Prose>
    <h1>Taxing Laughter: The Joke Tax Chronicles</h1>
  </Prose>
);

export default Example;

```

## Example: h2

```tsx
import { Prose } from "@/components/ui/prose";

const Example = () => (
  <Prose>
    <h2>The People of the Kingdom</h2>
  </Prose>
);

export default Example;

```

## Example: h3

```tsx
import { Prose } from "@/components/ui/prose";

const Example = () => (
  <Prose>
    <h3>The Joke Tax</h3>
  </Prose>
);

export default Example;

```

## Example: h4

```tsx
import { Prose } from "@/components/ui/prose";

const Example = () => (
  <Prose>
    <h4>People stopped telling jokes</h4>
  </Prose>
);

export default Example;

```

## Example: h5

```tsx
import { Prose } from "@/components/ui/prose";

const Example = () => (
  <Prose>
    <h4>People stopped telling jokes</h4>
  </Prose>
);

export default Example;

```

## Example: h6

```tsx
import { Prose } from "@/components/ui/prose";

const Example = () => (
  <Prose>
    <h4>People stopped telling jokes</h4>
  </Prose>
);

export default Example;

```

## Example: inline-code

```tsx
import { Prose } from "@/components/ui/prose";

const Example = () => (
  <Prose>
    <code>@ark-ui/react</code>
  </Prose>
);

export default Example;

```

## Example: kbd

```tsx
import { Prose } from "@/components/ui/prose";

const Example = () => (
  <Prose>
    <p>
      Press <kbd>Ctrl</kbd> + <kbd>S</kbd> to save your work.
    </p>
  </Prose>
);

export default Example;

```

## Example: list

```tsx
import { Prose } from "@/components/ui/prose";

const Example = () => (
  <Prose>
    <ul>
      <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>
    </ul>
  </Prose>
);

export default Example;

```

## Example: mark

```tsx
import { Prose } from "@/components/ui/prose";

const Example = () => (
  <Prose>
    <p>
      The king&apos;s <mark>brilliant plan</mark> was to tax jokes in the
      kingdom.
    </p>
  </Prose>
);

export default Example;

```

## Example: media

```tsx
import { Prose } from "@/components/ui/prose";

const Example = () => (
  <Prose>
    <figure>
      <img
        alt="Placeholder"
        height={200}
        src="/images/placeholder.svg"
        width={200}
      />
      <figcaption>A description of the image.</figcaption>
    </figure>
  </Prose>
);

export default Example;

```

## Example: not-prose

```tsx
import { Prose } from "@/components/ui/prose";

const Example = () => (
  <Prose className="space-y-10">
    <div>
      <h1>Davy Jones' locker</h1>

      <p>
        Davy Jones' locker is a metaphor for the oceanic abyss, the final
        resting place of drowned sailors and travellers
      </p>
    </div>

    <hr />

    <div className="not-prose">
      <h1>Davy Jones' locker</h1>

      <p>
        Davy Jones' locker is a metaphor for the oceanic abyss, the final
        resting place of drowned sailors and travellers
      </p>
    </div>
  </Prose>
);

export default Example;

```

## Example: ol

```tsx
import { Prose } from "@/components/ui/prose";

const Example = () => (
  <Prose>
    <ol>
      <li>First, gather the ingredients.</li>
      <li>Then, mix them together.</li>
      <li>Finally, bake for 30 minutes.</li>
    </ol>
  </Prose>
);

export default Example;

```

## Example: p

```tsx
import { Prose } from "@/components/ui/prose";

const Example = () => (
  <Prose>
    <p>
      The king, seeing how much happier his subjects were, realized the error of
      his ways and repealed the joke tax.
    </p>
  </Prose>
);

export default Example;

```

## Example: separator

```tsx
import { Prose } from "@/components/ui/prose";

const Example = () => (
  <Prose>
    <p>First section of content.</p>
    <hr />
    <p>Second section after the divider.</p>
  </Prose>
);

export default Example;

```

## Example: small

```tsx
import { Prose } from "@/components/ui/prose";

const Example = () => (
  <Prose>
    <small>
      Never underestimate the power of a good laugh and always be careful of bad
      ideas.
    </small>
  </Prose>
);

export default Example;

```

## Example: table

```tsx
import { Prose } from "@/components/ui/prose";

const Example = () => (
  <Prose>
    <table>
      <thead>
        <tr>
          <th>King&apos;s Treasury</th>
          <th>People&apos;s happiness</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Empty</td>
          <td>Overflowing</td>
        </tr>
        <tr>
          <td>Modest</td>
          <td>Satisfied</td>
        </tr>
        <tr>
          <td>Full</td>
          <td>Ecstatic</td>
        </tr>
      </tbody>
    </table>
  </Prose>
);

export default Example;

```

# Qr Code - Examples and Patterns

Examples for Qr Code component.

## Example: default

```tsx
import { QrCode, QrCodeFrame } from "@/components/ui/qr-code";

const QrCodeDemo = () => (
  <QrCode value="https://www.x.com/vinihvc">
    <QrCodeFrame />
  </QrCode>
);

export default QrCodeDemo;

```

## Example: download

```tsx
"use client";

import { DownloadIcon } from "lucide-react";
import React from "react";
import { Button } from "@/components/ui/button";
import { Card, CardContent } from "@/components/ui/card";
import { Input } from "@/components/ui/input";
import {
  QrCode,
  QrCodeDownload,
  QrCodeFrame,
} from "@/components/ui/qr-code";

const QUALITY_BY_LEVEL = {
  0: "L",
  20: "M",
  40: "Q",
  60: "H",
} as const;

const Example = () => {
  const [value, setValue] = React.useState("");

  const qualityLabel = QUALITY_BY_LEVEL[getQualityLevel(value.length)];

  return (
    <QrCode encoding={{ ecc: qualityLabel }} value={value}>
      <Card className="w-full max-w-xs [--space:--spacing(6)]">
        <CardContent className="flex flex-col justify-center gap-6">
          <Input
            onChange={(e) => setValue(e.target.value)}
            placeholder="Generate a QR code"
            value={value}
          />

          <div className="flex flex-col items-center gap-2">
            <p className="font-medium text-muted-foreground text-sm">
              Live Preview
            </p>
            <QrCodeFrame />
          </div>

          <div className="flex items-center gap-2">
            <QrCodeDownload asChild fileName="qr-code" mimeType="image/png">
              <Button className="w-1/2" size="icon-md" variant="outline">
                <DownloadIcon />
                PNG
              </Button>
            </QrCodeDownload>

            <QrCodeDownload asChild fileName="qr-code" mimeType="image/svg+xml">
              <Button className="w-1/2" size="icon-md">
                <DownloadIcon />
                SVG
              </Button>
            </QrCodeDownload>
          </div>
        </CardContent>
      </Card>
    </QrCode>
  );
};

const getQualityLevel = (length: number) => {
  if (length < 20) {
    return 0;
  }
  if (length < 40) {
    return 20;
  }
  if (length < 60) {
    return 40;
  }
  return 60;
};

export default Example;

```

## Example: error-correction

```tsx
import { QrCode, QrCodeFrame } from "@/components/ui/qr-code";

const eccLevels = ["L", "M", "Q", "H"] as const;

const Example = () => (
  <div className="flex flex-wrap items-center gap-6">
    {eccLevels.map((ecc) => (
      <div className="flex flex-col items-center gap-2" key={ecc}>
        <QrCode
          className="[--qr-code-size:6rem]"
          encoding={{ ecc }}
          value="https://x.com/vinihvc"
        >
          <QrCodeFrame />
        </QrCode>

        <p className="text-muted-foreground text-sm">{ecc}</p>
      </div>
    ))}
  </div>
);

export default Example;

```

## Example: overlay

```tsx
import { SharkIcon } from "@/components/icons/shark";
import {
  QrCode,
  QrCodeFrame,
  QrCodeOverlay,
} from "@/components/ui/qr-code";

const Example = () => (
  <QrCode value="https://x.com/vinihvc">
    <QrCodeFrame />
    <QrCodeOverlay>
      <SharkIcon />
    </QrCodeOverlay>
  </QrCode>
);

export default Example;

```

## Example: size

```tsx
import { QrCode, QrCodeFrame } from "@/components/ui/qr-code";

const Example = () => (
  <div className="flex flex-wrap items-end justify-center gap-6">
    <QrCode className="[--qr-code-size:6rem]">
      <QrCodeFrame className="rounded-md border" />
    </QrCode>

    <QrCode className="[--qr-code-size:8rem]">
      <QrCodeFrame className="rounded-md border" />
    </QrCode>
  </div>
);

export default Example;

```

# Radio Group - Examples and Patterns

Allows single selection from multiple options.

## Example: card

```tsx
import {
  Field,
  FieldContent,
  FieldDescription,
  FieldLabel,
} from "@/components/ui/field";
import {
  RadioGroup,
  RadioGroupItem,
} from "@/components/ui/radio-group";

const Example = () => {
  return (
    <RadioGroup className="w-full max-w-sm" defaultValue="r-1">
      <FieldLabel>
        <Field>
          <FieldContent>
            <RadioGroupItem value="r-1">Plus</RadioGroupItem>
            <FieldDescription>
              For individuals and small teams.
            </FieldDescription>
          </FieldContent>
        </Field>
      </FieldLabel>

      <FieldLabel>
        <Field>
          <FieldContent>
            <RadioGroupItem value="r-2">Pro</RadioGroupItem>
            <FieldDescription>For growing businesses.</FieldDescription>
          </FieldContent>
        </Field>
      </FieldLabel>

      <FieldLabel>
        <Field>
          <FieldContent>
            <RadioGroupItem value="r-3">Enterprise</RadioGroupItem>
            <FieldDescription>
              For large teams and enterprises.
            </FieldDescription>
          </FieldContent>
        </Field>
      </FieldLabel>
    </RadioGroup>
  );
};

export default Example;

```

## Example: controlled

```tsx
"use client";

import React from "react";
import {
  RadioGroup,
  RadioGroupItem,
} from "@/components/ui/radio-group";

const Example = () => {
  const [value, setValue] = React.useState<string | null>(null);

  const isCorrectOption = value === "comfortable";

  return (
    <div className="flex flex-col items-center gap-4 text-center text-sm">
      <p>Select the option comfortable</p>
      <RadioGroup onValueChange={({ value }) => setValue(value)} value={value}>
        <RadioGroupItem value="default">Default</RadioGroupItem>
        <RadioGroupItem value="comfortable">Comfortable</RadioGroupItem>
        <RadioGroupItem value="compact">Compact</RadioGroupItem>
      </RadioGroup>
      <p className="text-center">{isCorrectOption ? "✅" : "❌"}</p>
    </div>
  );
};

export default Example;

```

## Example: default

```tsx
import {
  RadioGroup,
  RadioGroupItem,
} from "@/components/ui/radio-group";

const RadioGroupDemo = () => (
  <RadioGroup defaultValue="1">
    <RadioGroupItem value="1">Default</RadioGroupItem>
    <RadioGroupItem value="2">Confortable</RadioGroupItem>
    <RadioGroupItem value="3">Compact</RadioGroupItem>
  </RadioGroup>
);

export default RadioGroupDemo;

```

## Example: disabled

```tsx
import {
  RadioGroup,
  RadioGroupItem,
} from "@/components/ui/radio-group";

const Example = () => {
  return (
    <div className="mx-auto flex w-full max-w-fit flex-wrap gap-8">
      <RadioGroup defaultValue="1">
        <RadioGroupItem value="1">Default</RadioGroupItem>
        <RadioGroupItem disabled value="2">
          Comfortable
        </RadioGroupItem>
        <RadioGroupItem value="3">Compact</RadioGroupItem>
      </RadioGroup>

      <RadioGroup disabled>
        <RadioGroupItem value="1">Default</RadioGroupItem>
        <RadioGroupItem value="2">Comfortable</RadioGroupItem>
        <RadioGroupItem value="3">Compact</RadioGroupItem>
      </RadioGroup>
    </div>
  );
};

export default Example;

```

## Example: invalid

```tsx
import {
  RadioGroup,
  RadioGroupItem,
} from "@/components/ui/radio-group";

const Example = () => {
  return (
    <RadioGroup invalid>
      <RadioGroupItem value="default">Default</RadioGroupItem>
      <RadioGroupItem value="comfortable">Comfortable</RadioGroupItem>
      <RadioGroupItem value="compact">Compact</RadioGroupItem>
    </RadioGroup>
  );
};

export default Example;

```

## Example: with-description

```tsx
import { Field, FieldDescription } from "@/components/ui/field";
import {
  RadioGroup,
  RadioGroupItem,
} from "@/components/ui/radio-group";

const Example = () => {
  return (
    <RadioGroup defaultValue="all">
      <Field>
        <RadioGroupItem value="all">Default</RadioGroupItem>
        <FieldDescription>
          Standard spacing for most use cases.
        </FieldDescription>
      </Field>
      <Field>
        <RadioGroupItem value="mentions">Comfortable</RadioGroupItem>
        <FieldDescription>More space between elements.</FieldDescription>
      </Field>
      <Field>
        <RadioGroupItem value="none">Compact</RadioGroupItem>
        <FieldDescription>Minimal spacing for dense layouts.</FieldDescription>
      </Field>
    </RadioGroup>
  );
};

export default Example;

```

# Rating - Examples and Patterns

Examples for Rating component.

## Example: controlled

```tsx
"use client";

import React from "react";
import { Rating } from "@/components/ui/rating";

const Example = () => {
  const [value, setValue] = React.useState(0);

  const isCorrectRating = value === 5;

  return (
    <div className="flex w-full max-w-40 flex-col gap-4 text-center text-sm">
      <p>Select the rating 5</p>
      <Rating
        onValueChange={(details) => setValue(details.value ?? 0)}
        value={value}
      />
      <p className="text-center">{isCorrectRating ? "✅" : "❌"}</p>
    </div>
  );
};

export default Example;

```

## Example: count

```tsx
import { Rating } from "@/components/ui/rating";

const Example = () => <Rating count={3} defaultValue={3} />;

export default Example;

```

## Example: custom-color

```tsx
import { Rating } from "@/components/ui/rating";

const Example = () => (
  <div className="flex flex-wrap items-center gap-8">
    <Rating className="text-info" count={5} defaultValue={4} />
    <Rating className="text-success" count={5} defaultValue={4} />
  </div>
);

export default Example;

```

## Example: custom-icon

```tsx
import { HeartIcon } from "lucide-react";
import { Rating } from "@/components/ui/rating";

const Example = () => (
  <Rating allowHalf className="text-destructive" icon={<HeartIcon />} />
);

export default Example;

```

## Example: custom-size

```tsx
import { Rating } from "@/components/ui/rating";

const Example = () => (
  <Rating className="**:data-[slot=rating-item-indicator]:size-8" />
);

export default Example;

```

## Example: default

```tsx
import {
  Avatar,
  AvatarFallback,
  AvatarImage,
} from "@/components/ui/avatar";
import { Button } from "@/components/ui/button";
import {
  Card,
  CardContent,
  CardDescription,
  CardFooter,
  CardHeader,
  CardTitle,
} from "@/components/ui/card";
import { Rating } from "@/components/ui/rating";

const RatingDemo = () => (
  <Card className="w-full max-w-xs">
    <CardHeader className="flex flex-col items-center gap-3 text-center">
      <Avatar size="lg">
        <AvatarImage alt="Driver" src="https://github.com/vinihvc.png" />
        <AvatarFallback>VV</AvatarFallback>
      </Avatar>
      <div>
        <CardTitle className="text-base">Vinicius Vicentini</CardTitle>
        <CardDescription> Tuestday morning at Mercado N.89</CardDescription>
      </div>
    </CardHeader>
    <CardContent className="space-y-2 text-center">
      <p className="font-medium text-sm">Rate your driver</p>
      <Rating />
    </CardContent>
    <CardFooter>
      <Button className="w-full">Submit</Button>
    </CardFooter>
  </Card>
);

export default RatingDemo;

```

## Example: disabled

```tsx
import { Rating } from "@/components/ui/rating";

const Example = () => <Rating defaultValue={3} disabled />;

export default Example;

```

## Example: half-star

```tsx
import { Rating } from "@/components/ui/rating";

const Example = () => <Rating allowHalf defaultValue={3.5} />;

export default Example;

```

## Example: readonly

```tsx
import { Rating } from "@/components/ui/rating";

const Example = () => <Rating defaultValue={3} readOnly />;

export default Example;

```

## Example: testimonial

```tsx
import {
  Avatar,
  AvatarFallback,
  AvatarImage,
} from "@/components/ui/avatar";
import {
  Card,
  CardContent,
  CardDescription,
  CardTitle,
} from "@/components/ui/card";
import { Rating } from "@/components/ui/rating";

const Example = () => (
  <Card className="w-full max-w-xs">
    <CardContent className="space-y-2">
      <Rating
        className="**:data-[slot=rating-item-indicator]:size-4"
        defaultValue={5}
        readOnly
      />
      <blockquote className="text-muted-foreground">
        &ldquo;This completely changed our workflow. Fast, reliable, and the
        team loves it. Would recommend to anyone.&rdquo;
      </blockquote>
      <div className="flex gap-2">
        <Avatar size="lg">
          <AvatarImage alt="@vinihvc" src="https://github.com/vinihvc.png" />
          <AvatarFallback>VV</AvatarFallback>
        </Avatar>
        <div>
          <CardTitle className="font-medium text-sm">
            Vinicius Vicentini
          </CardTitle>
          <CardDescription>Frontend Developer</CardDescription>
        </div>
      </div>
    </CardContent>
  </Card>
);

export default Example;

```

# Resizable - Examples and Patterns

Examples for Resizable component.

## Example: default

```tsx
import {
  Resizable,
  ResizablePanel,
  ResizableResizeTrigger,
} from "@/components/ui/resizable";

const ResizableDemo = () => (
  <Resizable
    className="rounded-md border"
    defaultSize={[50, 50]}
    panels={[
      { id: "1", minSize: 10 },
      { id: "2", minSize: 10 },
    ]}
  >
    <ResizablePanel className="flex h-full items-center justify-center" id="1">
      One
    </ResizablePanel>

    <ResizableResizeTrigger id="1:2" />

    <ResizablePanel id="2">
      <Resizable
        defaultSize={[50, 50]}
        orientation="vertical"
        panels={[
          { id: "3", minSize: 10 },
          { id: "4", minSize: 10 },
        ]}
      >
        <ResizablePanel className="flex items-center justify-center" id="3">
          Two
        </ResizablePanel>

        <ResizableResizeTrigger id="3:4" />

        <ResizablePanel className="flex items-center justify-center" id="4">
          Three
        </ResizablePanel>
      </Resizable>
    </ResizablePanel>
  </Resizable>
);

export default ResizableDemo;

```

## Example: handle

```tsx
import {
  Resizable,
  ResizablePanel,
  ResizableResizeTrigger,
} from "@/components/ui/resizable";

const Example = () => (
  <Resizable
    className="rounded-md border"
    defaultSize={[50, 50]}
    panels={[{ id: "1" }, { id: "2" }]}
  >
    <ResizablePanel className="flex items-center justify-center" id="1">
      Panel 1
    </ResizablePanel>

    <ResizableResizeTrigger id="1:2" withHandle />

    <ResizablePanel className="flex items-center justify-center" id="2">
      Panel 2
    </ResizablePanel>
  </Resizable>
);

export default Example;

```

## Example: min-max

```tsx
import {
  Resizable,
  ResizablePanel,
  ResizableResizeTrigger,
} from "@/components/ui/resizable";

const Example = () => (
  <Resizable
    className="rounded-md border"
    defaultSize={[30, 70]}
    panels={[{ id: "1", minSize: 25, maxSize: 40 }, { id: "2" }]}
  >
    <ResizablePanel className="flex items-center justify-center" id="1">
      Sidebar
    </ResizablePanel>

    <ResizableResizeTrigger id="1:2" withHandle />

    <ResizablePanel className="flex items-center justify-center" id="2">
      Content
    </ResizablePanel>
  </Resizable>
);

export default Example;

```

## Example: multiple-panels

```tsx
import {
  Resizable,
  ResizablePanel,
  ResizableResizeTrigger,
} from "@/components/ui/resizable";

const Example = () => (
  <Resizable
    className="rounded-md border"
    defaultSize={[20, 60, 20]}
    panels={[
      { id: "1", minSize: 20 },
      { id: "2", minSize: 40 },
      { id: "3", minSize: 20 },
    ]}
  >
    <ResizablePanel className="flex items-center justify-center" id="1">
      Left
    </ResizablePanel>

    <ResizableResizeTrigger id="1:2" withHandle />

    <ResizablePanel className="flex items-center justify-center" id="2">
      Center
    </ResizablePanel>

    <ResizableResizeTrigger id="2:3" withHandle />

    <ResizablePanel className="flex items-center justify-center" id="3">
      Right
    </ResizablePanel>
  </Resizable>
);

export default Example;

```

## Example: orientation-horizontal

```tsx
import {
  Resizable,
  ResizablePanel,
  ResizableResizeTrigger,
} from "@/components/ui/resizable";

const Example = () => (
  <Resizable
    className="rounded-md border"
    defaultSize={[50, 50]}
    orientation="horizontal"
    panels={[{ id: "1" }, { id: "2" }]}
  >
    <ResizablePanel className="flex items-center justify-center" id="1">
      Left
    </ResizablePanel>

    <ResizableResizeTrigger id="1:2" />

    <ResizablePanel className="flex items-center justify-center" id="2">
      Right
    </ResizablePanel>
  </Resizable>
);

export default Example;

```

## Example: orientation-vertical

```tsx
import {
  Resizable,
  ResizablePanel,
  ResizableResizeTrigger,
} from "@/components/ui/resizable";

const Example = () => (
  <Resizable
    className="rounded-md border"
    defaultSize={[50, 50]}
    orientation="vertical"
    panels={[{ id: "1" }, { id: "2" }]}
  >
    <ResizablePanel className="flex items-center justify-center" id="1">
      Top
    </ResizablePanel>

    <ResizableResizeTrigger id="1:2" />

    <ResizablePanel className="flex items-center justify-center" id="2">
      Bottom
    </ResizablePanel>
  </Resizable>
);

export default Example;

```

# Scroll Area - Examples and Patterns

Examples for Scroll Area component.

## Example: both-directions

```tsx
import { ScrollArea } from "@/components/ui/scroll-area";

const Example = () => (
  <ScrollArea className="h-64 max-w-80 rounded-lg border **:[p]:min-w-100">
    <div className="space-y-4 p-8">
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ut nulla
        metus. Ut consequat augue et semper porttitor. Integer vel ante arcu.
        Nullam tincidunt dolor odio, ac tincidunt leo dictum eu. Proin auctor,
        nulla vel tincidunt lacinia, leo erat sagittis erat, quis porta orci sem
        id purus. Nam fermentum turpis vitae pretium facilisis. Mauris id
        iaculis augue, ut tristique purus. Pellentesque sed diam semper, porta
        nibh ut, sodales nunc. Aliquam accumsan a mi eget fringilla. Vestibulum
        varius mi vitae sem placerat, et imperdiet lorem fringilla. Curabitur
        sed congue mi, quis tincidunt tortor. Suspendisse pharetra sem vel risus
        volutpat, a auctor massa faucibus.
      </p>

      <p>
        Etiam posuere felis et consectetur molestie. Cras sed rhoncus nisl.
        Aenean quis est sit amet quam facilisis lacinia at non magna. In eu orci
        accumsan, ultrices justo vitae, sodales nibh. Curabitur in sagittis dui.
        Maecenas commodo cursus magna, non fringilla nisl commodo in. Vestibulum
        nec fermentum dolor. Etiam euismod nisl non scelerisque faucibus.
        Aliquam erat volutpat. Donec quis nunc ultrices, viverra quam ut,
        sagittis tortor. Nullam nulla tortor, convallis nec magna ut, lacinia
        interdum est. Proin lobortis diam sollicitudin venenatis dictum.
      </p>

      <p>
        Mauris a dui a nibh ullamcorper tempus. Maecenas laoreet magna venenatis
        leo mattis sagittis. Donec in convallis leo, quis suscipit leo. Sed a
        augue purus. Integer id vulputate erat. Quisque a arcu purus. Nulla
        feugiat ex tellus, ac elementum magna porttitor a. Sed convallis rhoncus
        aliquam. Praesent euismod metus a fermentum faucibus.
      </p>
    </div>
  </ScrollArea>
);

export default Example;

```

## Example: default

```tsx
import React from "react";
import { ScrollArea } from "@/components/ui/scroll-area";
import { Separator } from "@/components/ui/separator";

const tags = Array.from({ length: 50 }, (_, i) => `v1.0.0-beta.${i}`);

const ScrollAreaDemo = () => (
  <ScrollArea className="h-64 w-48 rounded-md border">
    <div className="p-4">
      <h4 className="mb-4 font-medium text-sm leading-none">Tags</h4>
      {tags.map((tag) => (
        <React.Fragment key={tag}>
          <div className="text-sm">{tag}</div>
          <Separator className="my-2" />
        </React.Fragment>
      ))}
    </div>
  </ScrollArea>
);

export default ScrollAreaDemo;

```

## Example: horizontal

```tsx
import { ScrollArea } from "@/components/ui/scroll-area";

const Example = () => (
  <ScrollArea className="h-auto max-w-96 rounded-lg border">
    <div className="flex w-max gap-4 p-4">
      {Array.from({ length: 20 }).map((_, i) => (
        <div
          className="flex h-20 w-32 shrink-0 items-center justify-center rounded-md bg-muted"
          key={String(i)}
        >
          <span className="font-medium text-sm">Item {i + 1}</span>
        </div>
      ))}
    </div>
  </ScrollArea>
);

export default Example;

```

## Example: nested

```tsx
import { ScrollArea } from "@/components/ui/scroll-area";

const Example = () => (
  <ScrollArea className="h-64 w-64 rounded-md border text-sm">
    <div className="space-y-4 p-4">
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod
        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
        veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
        commodo consequat.
      </p>

      <ScrollArea className="h-32 rounded-md border">
        <div className="p-4">
          This is a nested scroll area. Duis aute irure dolor in reprehenderit
          in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
          Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
          officia deserunt mollit anim id est laborum. Sed ut perspiciatis unde
          omnis iste natus error sit voluptatem accusantium doloremque
          laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore
          veritatis et quasi architecto beatae vitae dicta sunt explicabo.
        </div>
      </ScrollArea>
    </div>
  </ScrollArea>
);

export default Example;

```

## Example: scroll-fade

```tsx
import React from "react";
import { ScrollArea } from "@/components/ui/scroll-area";
import { Separator } from "@/components/ui/separator";

const tags = Array.from({ length: 50 }, (_, i) => `v1.0.0-beta.${i}`);

const Example = () => (
  <ScrollArea className="h-64 w-48 rounded-md border" scrollFade>
    <div className="p-4">
      <h4 className="mb-4 font-medium text-sm leading-none">Tags</h4>
      {tags.map((tag) => (
        <React.Fragment key={tag}>
          <div className="text-sm">{tag}</div>
          <Separator className="my-2" />
        </React.Fragment>
      ))}
    </div>
  </ScrollArea>
);

export default Example;

```

# Segment Group - Examples and Patterns

Examples for Segment Group component.

## Example: controlled

```tsx
"use client";

import React from "react";
import {
  SegmentGroup,
  SegmentGroupIndicator,
  SegmentGroupItem,
  SegmentGroupItemText,
} from "@/components/ui/segment-group";

const Example = () => {
  const [value, setValue] = React.useState<string | null>("Profile");

  return (
    <SegmentGroup
      className="rounded-lg"
      onValueChange={(e) => setValue(e.value)}
      value={value}
    >
      <SegmentGroupIndicator />
      {items.map((item) => (
        <SegmentGroupItem
          className="px-2 py-1.5 text-sm"
          key={item}
          value={item}
        >
          <SegmentGroupItemText>{item}</SegmentGroupItemText>
        </SegmentGroupItem>
      ))}
    </SegmentGroup>
  );
};

const items = ["Profile", "Account", "Security", "Notifications"];

export default Example;

```

## Example: custom-indicator

```tsx
"use client";

import {
  SegmentGroup,
  SegmentGroupIndicator,
  SegmentGroupItem,
  SegmentGroupItemText,
} from "@/components/ui/segment-group";

const Example = () => (
  <SegmentGroup className="rounded-lg" defaultValue="Profile">
    <SegmentGroupIndicator className="bg-primary/20 dark:bg-primary/40" />
    {items.map((item) => (
      <SegmentGroupItem
        className="px-2 py-1.5 text-sm"
        disabled={item === "Security"}
        key={item}
        value={item}
      >
        <SegmentGroupItemText>{item}</SegmentGroupItemText>
      </SegmentGroupItem>
    ))}
  </SegmentGroup>
);

const items = ["Profile", "Account", "Security", "Notifications"];

export default Example;

```

## Example: default

```tsx
import {
  SegmentGroup,
  SegmentGroupIndicator,
  SegmentGroupItem,
  SegmentGroupItemText,
} from "@/components/ui/segment-group";

const SegmentGroupDemo = () => (
  <SegmentGroup className="rounded-lg" defaultValue="Profile">
    <SegmentGroupIndicator />
    {items.map((item) => (
      <SegmentGroupItem className="px-2 py-1.5 text-sm" key={item} value={item}>
        <SegmentGroupItemText>{item}</SegmentGroupItemText>
      </SegmentGroupItem>
    ))}
  </SegmentGroup>
);

const items = ["Profile", "Account", "Security", "Notifications"];

export default SegmentGroupDemo;

```

## Example: disabled-item

```tsx
"use client";

import {
  SegmentGroup,
  SegmentGroupIndicator,
  SegmentGroupItem,
  SegmentGroupItemText,
} from "@/components/ui/segment-group";

const Example = () => (
  <SegmentGroup className="rounded-lg" defaultValue="Profile">
    <SegmentGroupIndicator />
    {items.map((item) => (
      <SegmentGroupItem
        className="px-2 py-1.5 text-sm"
        disabled={item === "Security"}
        key={item}
        value={item}
      >
        <SegmentGroupItemText>{item}</SegmentGroupItemText>
      </SegmentGroupItem>
    ))}
  </SegmentGroup>
);

const items = ["Profile", "Account", "Security", "Notifications"];

export default Example;

```

## Example: disabled

```tsx
"use client";

import {
  SegmentGroup,
  SegmentGroupIndicator,
  SegmentGroupItem,
  SegmentGroupItemText,
} from "@/components/ui/segment-group";

const Example = () => (
  <SegmentGroup className="rounded-lg" defaultValue="Profile" disabled>
    <SegmentGroupIndicator />
    {items.map((item) => (
      <SegmentGroupItem className="px-2 py-1.5 text-sm" key={item} value={item}>
        <SegmentGroupItemText>{item}</SegmentGroupItemText>
      </SegmentGroupItem>
    ))}
  </SegmentGroup>
);

const items = ["Profile", "Account", "Security", "Notifications"];

export default Example;

```

## Example: indicator-on-hover

```tsx
"use client";

import React from "react";
import {
  SegmentGroup,
  SegmentGroupIndicator,
  SegmentGroupItem,
  SegmentGroupItemText,
} from "@/components/ui/segment-group";

const pages = ["Profile", "Account", "Security", "Notifications"];

const Example = () => {
  const [value, setValue] = React.useState("Profile");
  const [hoverValue, setHoverValue] = React.useState<string | null>(null);

  return (
    <SegmentGroup
      className="rounded-lg"
      onValueChange={(e) => setValue(e.value ?? "Profile")}
      value={hoverValue ?? value}
    >
      <SegmentGroupIndicator />
      {pages.map((page) => (
        <SegmentGroupItem
          className="px-2 py-1.5 text-sm"
          key={page}
          onClick={() => setValue(page)}
          onMouseEnter={() => setHoverValue(page)}
          onMouseLeave={() => setHoverValue(null)}
          value={page}
        >
          <SegmentGroupItemText>{page}</SegmentGroupItemText>
        </SegmentGroupItem>
      ))}
    </SegmentGroup>
  );
};

export default Example;

```

## Example: orientation-horizontal

```tsx
import {
  SegmentGroup,
  SegmentGroupIndicator,
  SegmentGroupItem,
  SegmentGroupItemText,
} from "@/components/ui/segment-group";

const Example = () => (
  <SegmentGroup
    className="rounded-lg"
    defaultValue="Profile"
    orientation="horizontal"
  >
    <SegmentGroupIndicator />
    {items.map((item) => (
      <SegmentGroupItem className="px-2 py-1.5 text-sm" key={item} value={item}>
        <SegmentGroupItemText>{item}</SegmentGroupItemText>
      </SegmentGroupItem>
    ))}
  </SegmentGroup>
);

const items = ["Profile", "Account", "Security", "Notifications"];

export default Example;

```

## Example: orientation-vertical

```tsx
import {
  SegmentGroup,
  SegmentGroupIndicator,
  SegmentGroupItem,
  SegmentGroupItemText,
} from "@/components/ui/segment-group";

const Example = () => (
  <SegmentGroup
    className="rounded-lg"
    defaultValue="Profile"
    orientation="vertical"
  >
    <SegmentGroupIndicator />
    {items.map((item) => (
      <SegmentGroupItem className="px-2 py-1.5 text-sm" key={item} value={item}>
        <SegmentGroupItemText>{item}</SegmentGroupItemText>
      </SegmentGroupItem>
    ))}
  </SegmentGroup>
);

const items = ["Profile", "Account", "Security", "Notifications"];

export default Example;

```

## Example: variant-underline-orientation-vertical

```tsx
import {
  SegmentGroup,
  SegmentGroupIndicator,
  SegmentGroupItem,
  SegmentGroupItemText,
} from "@/components/ui/segment-group";

const Example = () => (
  <SegmentGroup
    defaultValue="Profile"
    orientation="vertical"
    variant="underline"
  >
    <SegmentGroupIndicator />
    {items.map((item) => (
      <SegmentGroupItem className="px-2 py-1.5 text-sm" key={item} value={item}>
        <SegmentGroupItemText>{item}</SegmentGroupItemText>
      </SegmentGroupItem>
    ))}
  </SegmentGroup>
);

const items = ["Profile", "Account", "Security", "Notifications"];

export default Example;

```

## Example: variant-underline

```tsx
import {
  SegmentGroup,
  SegmentGroupIndicator,
  SegmentGroupItem,
  SegmentGroupItemText,
} from "@/components/ui/segment-group";

const Example = () => (
  <SegmentGroup defaultValue="Profile" variant="underline">
    <SegmentGroupIndicator />
    {items.map((item) => (
      <SegmentGroupItem className="px-2 py-1.5 text-sm" key={item} value={item}>
        <SegmentGroupItemText>{item}</SegmentGroupItemText>
      </SegmentGroupItem>
    ))}
  </SegmentGroup>
);

const items = ["Profile", "Account", "Security", "Notifications"];

export default Example;

```

# Select - Examples and Patterns

Examples for Select component.

## Example: controlled

```tsx
"use client";

import { createListCollection } from "@ark-ui/react";
import React from "react";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";

const Example = () => {
  const [value, setValue] = React.useState<string[]>(["react"]);

  return (
    <Select
      collection={collection}
      onValueChange={(e) => setValue(e.value)}
      value={value}
    >
      <SelectTrigger className="w-48">
        <SelectValue placeholder="Select a framework" />
      </SelectTrigger>
      <SelectContent>
        {collection.items.map((item) => (
          <SelectItem item={item} key={item.value}>
            {item.label}
          </SelectItem>
        ))}
      </SelectContent>
    </Select>
  );
};

const collection = createListCollection({
  items: [
    { label: "React", value: "react" },
    { label: "Vue", value: "vue" },
    { label: "Svelte", value: "svelte" },
  ],
});

export default Example;

```

## Example: default

```tsx
"use client";

import { createListCollection } from "@ark-ui/react";
import {
  Select,
  SelectContent,
  SelectGroup,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";

const SelectDemo = () => {
  return (
    <Select collection={collection}>
      <SelectTrigger className="w-48">
        <SelectValue placeholder="Select a fruit" />
      </SelectTrigger>

      <SelectContent>
        <SelectGroup heading="Fruits">
          {collection.items.map((item) => (
            <SelectItem item={item} key={item}>
              {item}
            </SelectItem>
          ))}
        </SelectGroup>
      </SelectContent>
    </Select>
  );
};

const collection = createListCollection({
  items: ["Banana", "Apple", "Orange", "Pineapple"],
});

export default SelectDemo;

```

## Example: disabled

```tsx
"use client";

import { createListCollection } from "@ark-ui/react";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";

const Example = () => (
  <Select collection={collection} disabled>
    <SelectTrigger className="w-48">
      <SelectValue placeholder="Select framework" />
    </SelectTrigger>
    <SelectContent>
      {collection.items.map((item) => (
        <SelectItem item={item} key={item.value}>
          {item.label}
        </SelectItem>
      ))}
    </SelectContent>
  </Select>
);

const collection = createListCollection({
  items: [
    { label: "Next.js", value: "next" },
    { label: "Vite", value: "vite" },
    { label: "Astro", value: "astro" },
  ],
});

export default Example;

```

## Example: empty

```tsx
"use client";

import { createListCollection } from "@ark-ui/react";
import {
  Select,
  SelectContent,
  SelectEmpty,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";

const Example = () => (
  <Select collection={collection}>
    <SelectTrigger className="w-48">
      <SelectValue placeholder="Select an option" />
    </SelectTrigger>
    <SelectContent>
      <SelectEmpty>No items to display</SelectEmpty>
    </SelectContent>
  </Select>
);

const collection = createListCollection({
  items: [],
});

export default Example;

```

## Example: grouping

```tsx
"use client";

import { createListCollection } from "@ark-ui/react";
import {
  Select,
  SelectContent,
  SelectGroup,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";

const Example = () => (
  <Select collection={collection}>
    <SelectTrigger className="w-56">
      <SelectValue placeholder="Select framework" />
    </SelectTrigger>
    <SelectContent>
      {collection.group().map(([category, items]) => (
        <SelectGroup heading={category} key={category}>
          {items.map((item) => (
            <SelectItem item={item} key={item.value}>
              {item.label}
            </SelectItem>
          ))}
        </SelectGroup>
      ))}
    </SelectContent>
  </Select>
);

const collection = createListCollection({
  items: [
    { label: "Next.js", value: "next", category: "Frontend" },
    { label: "Vite", value: "vite", category: "Frontend" },
    { label: "Astro", value: "astro", category: "Frontend" },
    { label: "Express", value: "express", category: "Backend" },
    { label: "Fastify", value: "fastify", category: "Backend" },
    { label: "NestJS", value: "nestjs", category: "Backend" },
  ],
  groupBy: (item) => (item as { category: string }).category,
});

export default Example;

```

## Example: invalid

```tsx
"use client";

import { createListCollection } from "@ark-ui/react";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";

const Example = () => (
  <Select collection={collection} invalid>
    <SelectTrigger className="w-48">
      <SelectValue placeholder="Select framework" />
    </SelectTrigger>
    <SelectContent>
      {collection.items.map((item) => (
        <SelectItem item={item} key={item.value}>
          {item.label}
        </SelectItem>
      ))}
    </SelectContent>
  </Select>
);

const collection = createListCollection({
  items: [
    { label: "Next.js", value: "next" },
    { label: "Vite", value: "vite" },
    { label: "Astro", value: "astro" },
  ],
});

export default Example;

```

## Example: max-selection

```tsx
"use client";

import { createListCollection } from "@ark-ui/react";
import React from "react";
import {
  Select,
  SelectContent,
  SelectContext,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";

const MAX_SELECTION = 3;

const Example = () => {
  const [value, setValue] = React.useState<string[]>([]);

  const handleValueChange = (details: { value: string[] }) => {
    const newValue = details.value.slice(0, MAX_SELECTION);
    setValue(newValue);
  };

  return (
    <Select
      collection={collection}
      multiple
      onValueChange={handleValueChange}
      value={value}
    >
      <SelectTrigger className="w-56">
        <SelectValue className="capitalize">
          <SelectContext>{({ value }) => renderValue(value)}</SelectContext>
        </SelectValue>
      </SelectTrigger>
      <SelectContent>
        {collection.items.map((item) => (
          <SelectItem item={item} key={item.value}>
            {item.label}
          </SelectItem>
        ))}
      </SelectContent>
    </Select>
  );
};

const renderValue = (value: string[]) => {
  if (value.length === 0) {
    return "Select 3 frameworks";
  }

  const firstValue = value?.at(0) ?? "";
  const additionalValues =
    value.length > 1 ? ` (+${value.length - 1} more)` : "";

  return firstValue + additionalValues;
};

const collection = createListCollection({
  items: [
    { label: "JavaScript", value: "javascript" },
    { label: "TypeScript", value: "typescript" },
    { label: "Python", value: "python" },
    { label: "Rust", value: "rust" },
  ],
});

export default Example;

```

## Example: multiple

```tsx
"use client";

import { createListCollection } from "@ark-ui/react";
import {
  Select,
  SelectContent,
  SelectContext,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";

const Example = () => (
  <Select
    collection={collection}
    defaultValue={["javascript", "typescript"]}
    multiple
  >
    <SelectTrigger className="w-64">
      <SelectValue className="capitalize">
        <SelectContext>{({ value }) => renderValue(value)}</SelectContext>
      </SelectValue>
    </SelectTrigger>
    <SelectContent>
      {collection.items.map((item) => (
        <SelectItem item={item} key={item.value}>
          {item.label}
        </SelectItem>
      ))}
    </SelectContent>
  </Select>
);

const renderValue = (value: string[]) => {
  if (value.length === 0) {
    return "Select languages…";
  }

  const firstValue = value?.at(0) ?? "";
  const additionalValues =
    value.length > 1 ? ` (+${value.length - 1} more)` : "";

  return firstValue + additionalValues;
};

const collection = createListCollection({
  items: [
    { label: "JavaScript", value: "javascript" },
    { label: "TypeScript", value: "typescript" },
    { label: "Python", value: "python" },
    { label: "Rust", value: "rust" },
  ],
});

export default Example;

```

## Example: size-lg

```tsx
"use client";

import { createListCollection } from "@ark-ui/react";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";

const Example = () => (
  <Select collection={collection}>
    <SelectTrigger className="w-48" size="lg">
      <SelectValue placeholder="Select framework" />
    </SelectTrigger>
    <SelectContent>
      {collection.items.map((item) => (
        <SelectItem item={item} key={item.value}>
          {item.label}
        </SelectItem>
      ))}
    </SelectContent>
  </Select>
);

const collection = createListCollection({
  items: [
    { label: "Next.js", value: "next" },
    { label: "Vite", value: "vite" },
    { label: "ESBuild", value: "esbuild" },
  ],
});

export default Example;

```

## Example: size-md

```tsx
"use client";

import { createListCollection } from "@ark-ui/react";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";

const Example = () => (
  <Select collection={collection}>
    <SelectTrigger className="w-48" size="md">
      <SelectValue placeholder="Select framework" />
    </SelectTrigger>
    <SelectContent>
      {collection.items.map((item) => (
        <SelectItem item={item} key={item.value}>
          {item.label}
        </SelectItem>
      ))}
    </SelectContent>
  </Select>
);

const collection = createListCollection({
  items: [
    { label: "Next.js", value: "next" },
    { label: "Vite", value: "vite" },
    { label: "ESBuild", value: "esbuild" },
  ],
});

export default Example;

```

## Example: size-sm

```tsx
"use client";

import { createListCollection } from "@ark-ui/react";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";

const Example = () => (
  <Select collection={collection}>
    <SelectTrigger className="w-48" size="sm">
      <SelectValue placeholder="Select framework" />
    </SelectTrigger>
    <SelectContent>
      {collection.items.map((item) => (
        <SelectItem item={item} key={item.value}>
          {item.label}
        </SelectItem>
      ))}
    </SelectContent>
  </Select>
);

const collection = createListCollection({
  items: [
    { label: "Next.js", value: "next" },
    { label: "Vite", value: "vite" },
    { label: "ESBuild", value: "esbuild" },
  ],
});

export default Example;

```

## Example: with-field

```tsx
"use client";

import { createListCollection } from "@ark-ui/react";
import {
  Field,
  FieldDescription,
  FieldLabel,
} from "@/components/ui/field";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";

const Example = () => (
  <Field className="w-full max-w-64">
    <FieldLabel>Country</FieldLabel>
    <Select collection={collection}>
      <SelectTrigger className="w-full">
        <SelectValue placeholder="Select a country" />
      </SelectTrigger>
      <SelectContent>
        {collection.items.map((item) => (
          <SelectItem item={item} key={item}>
            {item}
          </SelectItem>
        ))}
      </SelectContent>
    </Select>
    <FieldDescription>Used for shipping estimates</FieldDescription>
  </Field>
);

const collection = createListCollection({
  items: ["Brazil", "Mexico", "Ireland"],
});

export default Example;

```

## Example: with-scroll

```tsx
"use client";

import { createListCollection } from "@ark-ui/react";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";

const Example = () => (
  <Select collection={collection} positioning={{ fitViewport: true }}>
    <SelectTrigger className="w-56">
      <SelectValue placeholder="Select framework" />
    </SelectTrigger>
    <SelectContent className="max-h-56">
      {collection.items.map((item) => (
        <SelectItem item={item} key={item.value}>
          {item.label}
        </SelectItem>
      ))}
    </SelectContent>
  </Select>
);

const collection = createListCollection({
  items: Array.from({ length: 20 }, (_, i) => ({
    label: `Framework ${i + 1}`,
    value: `framework-${i + 1}`,
  })),
});

export default Example;

```

# Separator - Examples and Patterns

Examples for Separator component.

## Example: default

```tsx
import { Separator } from "@/components/ui/separator";

const SeparatorDemo = () => (
  <div className="flex max-w-sm flex-col gap-4 text-sm">
    <div className="flex flex-col gap-1">
      <h4 className="font-medium leading-none">Shark UI</h4>
      <p className="text-muted-foreground">
        A set of primitive components for building UI.
      </p>
    </div>
    <Separator />
    <div>
      A collection of accessible, beautiful, and customizable components.
    </div>
  </div>
);

export default SeparatorDemo;

```

## Example: list

```tsx
import { Separator } from "@/components/ui/separator";

const Example = () => (
  <div className="flex w-full max-w-sm flex-col gap-2 text-sm">
    <dl className="flex items-center justify-between">
      <dt>Item 1</dt>
      <dd className="text-muted-foreground">Value 1</dd>
    </dl>
    <Separator />
    <dl className="flex items-center justify-between">
      <dt>Item 2</dt>
      <dd className="text-muted-foreground">Value 2</dd>
    </dl>
    <Separator />
    <dl className="flex items-center justify-between">
      <dt>Item 3</dt>
      <dd className="text-muted-foreground">Value 3</dd>
    </dl>
  </div>
);

export default Example;

```

## Example: menu

```tsx
import { Separator } from "@/components/ui/separator";

const Example = () => (
  <div className="flex h-5 items-center gap-4 text-sm *:[div]:space-y-1">
    <div>
      <p className="font-medium leading-none">Blog</p>
      <p className="text-muted-foreground text-xs">Latest posts</p>
    </div>
    <Separator orientation="vertical" />
    <div>
      <p className="font-medium leading-none">Docs</p>
      <p className="text-muted-foreground text-xs">API references</p>
    </div>
    <Separator orientation="vertical" />
    <div>
      <p className="font-medium leading-none">Source</p>
      <p className="text-muted-foreground text-xs">View on GitHub</p>
    </div>
  </div>
);

export default Example;

```

## Example: vertical

```tsx
import { Separator } from "@/components/ui/separator";

const Example = () => (
  <div className="flex h-5 items-center gap-4 text-sm">
    <span>Blog</span>
    <Separator orientation="vertical" />
    <span>Docs</span>
    <Separator orientation="vertical" />
    <span>Source</span>
  </div>
);

export default Example;

```

# Sheet - Examples and Patterns

Examples for Sheet component.

## Example: close-behavior

```tsx
import { Button } from "@/components/ui/button";
import {
  Sheet,
  SheetContent,
  SheetHeader,
  SheetTrigger,
} from "@/components/ui/sheet";

const Example = () => (
  <div className="flex flex-wrap justify-center gap-4">
    <Sheet closeOnInteractOutside={false}>
      <SheetTrigger asChild>
        <Button variant="outline">No close on outside click</Button>
      </SheetTrigger>
      <SheetContent>
        <SheetHeader
          description="Clicking outside does not close this sheet. Press ESC or use the close button."
          title="Stays on outside click"
        />
      </SheetContent>
    </Sheet>
    <Sheet closeOnEscape={false}>
      <SheetTrigger asChild>
        <Button variant="outline">No close on Escape</Button>
      </SheetTrigger>
      <SheetContent>
        <SheetHeader
          description="Pressing Escape does not close this sheet. Click outside or use the close button."
          title="Escape disabled"
        />
      </SheetContent>
    </Sheet>
  </div>
);

export default Example;

```

## Example: custom-spacing

```tsx
import { Button } from "@/components/ui/button";
import {
  Field,
  FieldGroup,
  FieldLabel,
} from "@/components/ui/field";
import { Input } from "@/components/ui/input";
import {
  Sheet,
  SheetBody,
  SheetClose,
  SheetContent,
  SheetFooter,
  SheetHeader,
  SheetTrigger,
} from "@/components/ui/sheet";

const Example = () => (
  <Sheet>
    <SheetTrigger asChild>
      <Button variant="outline">Open</Button>
    </SheetTrigger>
    <SheetContent className="[--space:--spacing(4)] sm:[--space:--spacing(8)]">
      <SheetHeader
        description="Make changes to your account here. Click save when you're done."
        title="Edit User"
      />
      <SheetBody>
        <FieldGroup>
          <Field>
            <FieldLabel>Name</FieldLabel>
            <Input defaultValue="Vinicius Vicentini" />
          </Field>
          <Field>
            <FieldLabel>Username</FieldLabel>
            <Input defaultValue="@vinihvc" />
          </Field>
        </FieldGroup>
      </SheetBody>
      <SheetFooter>
        <SheetClose asChild>
          <Button variant="outline">Cancel</Button>
        </SheetClose>
        <SheetClose asChild>
          <Button>Save changes</Button>
        </SheetClose>
      </SheetFooter>
    </SheetContent>
  </Sheet>
);

export default Example;

```

## Example: default

```tsx
import { Button } from "@/components/ui/button";
import {
  Field,
  FieldGroup,
  FieldLabel,
} from "@/components/ui/field";
import { Input } from "@/components/ui/input";
import {
  Sheet,
  SheetBody,
  SheetClose,
  SheetContent,
  SheetFooter,
  SheetHeader,
  SheetTrigger,
} from "@/components/ui/sheet";

const Example = () => (
  <Sheet>
    <SheetTrigger asChild>
      <Button variant="outline">Open</Button>
    </SheetTrigger>
    <SheetContent>
      <SheetHeader
        description="Make changes to your account here. Click save when you're done."
        title="Edit User"
      />
      <SheetBody>
        <FieldGroup>
          <Field>
            <FieldLabel>Name</FieldLabel>
            <Input defaultValue="Vinicius Vicentini" />
          </Field>
          <Field>
            <FieldLabel>Username</FieldLabel>
            <Input defaultValue="@vinihvc" />
          </Field>
        </FieldGroup>
      </SheetBody>
      <SheetFooter>
        <SheetClose asChild>
          <Button variant="outline">Cancel</Button>
        </SheetClose>
        <SheetClose asChild>
          <Button>Save changes</Button>
        </SheetClose>
      </SheetFooter>
    </SheetContent>
  </Sheet>
);

export default Example;

```

## Example: inset

```tsx
import { Button } from "@/components/ui/button";
import {
  Field,
  FieldGroup,
  FieldLabel,
} from "@/components/ui/field";
import { Input } from "@/components/ui/input";
import {
  Sheet,
  SheetBody,
  SheetClose,
  SheetContent,
  SheetFooter,
  SheetHeader,
  SheetTrigger,
} from "@/components/ui/sheet";

const Example = () => (
  <Sheet>
    <SheetTrigger asChild>
      <Button variant="outline">Open</Button>
    </SheetTrigger>
    <SheetContent variant="inset">
      <SheetHeader
        description="This sheet uses the inset variant with rounded corners and padding."
        title="Inset Sheet"
      />
      <SheetBody>
        <FieldGroup>
          <Field>
            <FieldLabel>Name</FieldLabel>
            <Input defaultValue="Vinicius Vicentini" />
          </Field>
          <Field>
            <FieldLabel>Email</FieldLabel>
            <Input defaultValue="vinicius@example.com" />
          </Field>
        </FieldGroup>
      </SheetBody>
      <SheetFooter>
        <SheetClose asChild>
          <Button variant="outline">Cancel</Button>
        </SheetClose>
        <SheetClose asChild>
          <Button>Save changes</Button>
        </SheetClose>
      </SheetFooter>
    </SheetContent>
  </Sheet>
);

export default Example;

```

## Example: no-close-button

```tsx
import { Button } from "@/components/ui/button";
import {
  Sheet,
  SheetBody,
  SheetClose,
  SheetContent,
  SheetFooter,
  SheetHeader,
  SheetTrigger,
} from "@/components/ui/sheet";

const Example = () => (
  <Sheet>
    <SheetTrigger asChild>
      <Button variant="outline">Open</Button>
    </SheetTrigger>

    <SheetContent showCloseButton={false}>
      <SheetHeader
        description="You can only close this sheet using the buttons in the footer, by pressing Escape or by clicking the backdrop."
        title="No close button"
      />
      <SheetBody>
        <p className="text-muted-foreground text-sm">
          The close button in the top right corner is hidden. Use the footer
          buttons or press Escape to close.
        </p>
      </SheetBody>
      <SheetFooter>
        <SheetClose asChild>
          <Button variant="outline">Cancel</Button>
        </SheetClose>
        <SheetClose asChild>
          <Button>Confirm</Button>
        </SheetClose>
      </SheetFooter>
    </SheetContent>
  </Sheet>
);

export default Example;

```

## Example: non-modal

```tsx
import { Button } from "@/components/ui/button";
import {
  Sheet,
  SheetBody,
  SheetClose,
  SheetContent,
  SheetFooter,
  SheetHeader,
  SheetTrigger,
} from "@/components/ui/sheet";

const Example = () => (
  <Sheet modal={false}>
    <SheetTrigger asChild>
      <Button variant="outline">Open</Button>
    </SheetTrigger>
    <SheetContent>
      <SheetHeader
        description="This is a non-modal sheet. You can interact with elements outside the sheet."
        title="Non-Modal Sheet"
      />
      <SheetBody>
        <p className="text-muted-foreground text-sm">
          Non-modal sheets allow interaction with elements outside. Focus
          trapping and scroll prevention are disabled.
        </p>
      </SheetBody>
      <SheetFooter>
        <SheetClose asChild>
          <Button variant="outline">Close</Button>
        </SheetClose>
      </SheetFooter>
    </SheetContent>
  </Sheet>
);

export default Example;

```

## Example: scroll-area

```tsx
import { Button } from "@/components/ui/button";
import {
  Sheet,
  SheetBody,
  SheetClose,
  SheetContent,
  SheetFooter,
  SheetHeader,
  SheetTrigger,
} from "@/components/ui/sheet";

const Example = () => (
  <Sheet>
    <SheetTrigger asChild>
      <Button variant="outline">Open</Button>
    </SheetTrigger>

    <SheetContent>
      <SheetHeader title="Terms & Conditions" />
      <SheetBody scrollFade>
        <div className="space-y-2 **:[h3]:font-semibold **:[p]:text-muted-foreground **:[p]:text-sm">
          <h3>What is Lorem Ipsum?</h3>
          <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi
            imperdiet placerat nisl, ac consequat sem hendrerit in.
          </p>
          <h3>Why do we use it?</h3>
          <p>
            Pellentesque quis sapien tortor. Nulla egestas tristique justo, in
            commodo quam posuere id. Cras varius, nunc non placerat vulputate,
            dolor turpis elementum elit, non lobortis lacus nunc nec nisl.
          </p>
          <h3>Where does it come from?</h3>
          <p>
            Pellentesque turpis est, mollis eu arcu eu, tempor tincidunt urna.
            Pellentesque pellentesque est euismod accumsan ullamcorper. Quisque
            urna lorem, porttitor ac malesuada at, vehicula eget nulla. Donec
            eget consequat erat, quis pharetra ex.
          </p>
          <h3>Where can I get some?</h3>
          <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec
            egestas semper eros a maximus. Sed consequat tempus lobortis.
            Phasellus sed vulputate turpis. Nulla facilisi. Curabitur consequat
            dui tellus.
          </p>
          <h3>Who can I contact if I have questions?</h3>
          <p>
            Donec tortor lorem, finibus vel suscipit vehicula, sagittis
            efficitur erat. Proin sagittis aliquam sagittis. Nullam sed porta
            leo. Nunc sed velit felis.
          </p>
          <h3>What happens if I don't agree to these terms?</h3>
          <p>
            Aenean maximus, libero vel laoreet congue, purus leo iaculis libero,
            egestas egestas quam mi at quam. Curabitur eu tempus mauris.
            Vestibulum ante ipsum primis in faucibus orci luctus et ultrices
            posuere cubilia curae;
          </p>
          <h3>Where can I get some?</h3>
          <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec
            egestas semper eros a maximus. Sed consequat tempus lobortis.
            Phasellus sed vulputate turpis. Nulla facilisi. Curabitur consequat
            dui tellus.
          </p>
        </div>
      </SheetBody>
      <SheetFooter>
        <SheetClose asChild>
          <Button variant="ghost">Cancel</Button>
        </SheetClose>
        <SheetClose asChild>
          <Button>I Agree</Button>
        </SheetClose>
      </SheetFooter>
    </SheetContent>
  </Sheet>
);

export default Example;

```

## Example: sides

```tsx
import { Button } from "@/components/ui/button";
import {
  Sheet,
  SheetBody,
  SheetContent,
  SheetHeader,
  SheetTrigger,
} from "@/components/ui/sheet";

const Example = () => (
  <div className="flex flex-wrap justify-center gap-4">
    <Sheet>
      <SheetTrigger asChild>
        <Button variant="outline">Right</Button>
      </SheetTrigger>
      <SheetContent placement="right">
        <SheetHeader title="Right Placement Sheet" />
        <SheetBody>
          <p className="text-muted-foreground text-sm">
            This sheet slides in from the right placement.
          </p>
        </SheetBody>
      </SheetContent>
    </Sheet>

    <Sheet>
      <SheetTrigger asChild>
        <Button variant="outline">Left</Button>
      </SheetTrigger>
      <SheetContent placement="left">
        <SheetHeader title="Left Placement Sheet" />
        <SheetBody>
          <p className="text-muted-foreground text-sm">
            This sheet slides in from the left placement.
          </p>
        </SheetBody>
      </SheetContent>
    </Sheet>

    <Sheet>
      <SheetTrigger asChild>
        <Button variant="outline">Top</Button>
      </SheetTrigger>
      <SheetContent placement="top">
        <SheetHeader title="Top Placement Sheet" />
        <SheetBody>
          <p className="text-muted-foreground text-sm">
            This sheet slides in from the top placement.
          </p>
        </SheetBody>
      </SheetContent>
    </Sheet>

    <Sheet>
      <SheetTrigger asChild>
        <Button variant="outline">Bottom</Button>
      </SheetTrigger>
      <SheetContent placement="bottom">
        <SheetHeader title="Bottom Placement Sheet" />
        <SheetBody>
          <p className="text-muted-foreground text-sm">
            This sheet slides in from the bottom.
          </p>
        </SheetBody>
      </SheetContent>
    </Sheet>
  </div>
);

export default Example;

```

# Show - Examples and Patterns

Examples for Show component.

## Example: default

```tsx
"use client";

import React from "react";
import {
  NumberField,
  NumberFieldDecrement,
  NumberFieldGroup,
  NumberFieldIncrement,
  NumberFieldInput,
} from "@/components/ui/number-input";
import { Show } from "@/components/ui/show";

const ShowDemo = () => {
  const [value, setValue] = React.useState(0);

  const isGreaterThan2 = value > 2;

  return (
    <div className="flex max-w-48 flex-col gap-4 text-center text-sm">
      <NumberField
        min={0}
        onValueChange={({ value }) => setValue(Number(value))}
      >
        <NumberFieldGroup>
          <NumberFieldDecrement />
          <NumberFieldInput />
          <NumberFieldIncrement />
        </NumberFieldGroup>
      </NumberField>

      <Show fallback={<Fallback />} when={isGreaterThan2}>
        <Content />
      </Show>
    </div>
  );
};

const Fallback = () => (
  <p className="text-muted-foreground">Not there yet. Keep clicking...</p>
);

const Content = () => <p className="text-success">Your got it!</p>;

export default ShowDemo;

```

# Signature Pad - Examples and Patterns

Examples for Signature Pad component.

## Example: default

```tsx
import { SignaturePad } from "@/components/ui/signature-pad";

const SignaturePadDemo = () => <SignaturePad className="w-full max-w-md" />;

export default SignaturePadDemo;

```

## Example: field

```tsx
import {
  Field,
  FieldHelper,
  FieldLabel,
} from "@/components/ui/field";
import { SignaturePad } from "@/components/ui/signature-pad";

const Example = () => (
  <Field className="w-full max-w-md">
    <FieldLabel>Signature</FieldLabel>
    <SignaturePad />
    <FieldHelper>Draw your signature in the box above</FieldHelper>
  </Field>
);

export default Example;

```

## Example: image-preview

```tsx
"use client";

import Image from "next/image";
import React from "react";
import { Field, FieldDescription } from "@/components/ui/field";
import { SignaturePad } from "@/components/ui/signature-pad";

const Example = () => {
  const [imageUrl, setImageUrl] = React.useState<string | null>(null);

  return (
    <Field className="flex w-full max-w-md flex-col gap-4">
      <SignaturePad
        onDrawEnd={(details) =>
          details.getDataUrl("image/png").then((url) => setImageUrl(url))
        }
      />
      <FieldDescription>Image preview</FieldDescription>
      <div className="relative h-40 w-full rounded-lg border bg-muted">
        {imageUrl && (
          <Image
            alt="Your signature as captured from the pad above"
            className="size-full dark:invert"
            fill
            src={imageUrl}
            unoptimized
          />
        )}
      </div>
    </Field>
  );
};

export default Example;

```

# Skeleton - Examples and Patterns

Examples for Skeleton component.

## Example: default

```tsx
import {
  SkeletonCircle,
  SkeletonText,
} from "@/components/ui/skeleton";

const SkeletonDemo = () => (
  <div className="flex w-full max-w-xs items-center gap-4">
    <SkeletonCircle className="size-16" />
    <SkeletonText lines={3} />
  </div>
);

export default SkeletonDemo;

```

## Example: loading-card

```tsx
import {
  Card,
  CardContent,
  CardFooter,
  CardHeader,
} from "@/components/ui/card";
import {
  Skeleton,
  SkeletonCircle,
  SkeletonText,
} from "@/components/ui/skeleton";

const Example = () => (
  <Card className="w-full max-w-xs">
    <CardHeader className="flex flex-row items-center gap-4">
      <SkeletonCircle className="size-12" />
      <SkeletonText lines={2} />
    </CardHeader>
    <CardContent>
      <SkeletonText lines={3} />
    </CardContent>
    <CardFooter className="flex gap-2">
      <Skeleton className="h-9 flex-1" />
      <Skeleton className="h-9 flex-1" />
    </CardFooter>
  </Card>
);

export default Example;

```

## Example: skeleton-circle

```tsx
import {
  Card,
  CardContent,
  CardFooter,
} from "@/components/ui/card";
import {
  SkeletonCircle,
  SkeletonText,
} from "@/components/ui/skeleton";

const Example = () => (
  <Card className="w-full max-w-xs">
    <CardContent>
      <SkeletonText lines={4} />
    </CardContent>
    <CardFooter className="flex items-center gap-4">
      <SkeletonCircle className="size-12" />
      <SkeletonText lines={2} />
    </CardFooter>
  </Card>
);

export default Example;

```

## Example: skeleton-text

```tsx
import { Skeleton, SkeletonText } from "@/components/ui/skeleton";

const Example = () => (
  <div className="flex w-full max-w-xs flex-col gap-5">
    <Skeleton className="h-6 w-3/4" />
    <SkeletonText lines={5} />
    <SkeletonText lines={3} />
    <SkeletonText lines={2} />
  </div>
);

export default Example;

```

## Example: skeleton

```tsx
import {
  Card,
  CardContent,
  CardFooter,
  CardHeader,
  CardMedia,
} from "@/components/ui/card";
import { Skeleton, SkeletonText } from "@/components/ui/skeleton";

const Example = () => (
  <Card className="w-full max-w-xs">
    <CardMedia className="h-32" variant="image">
      <Skeleton className="aspect-video w-full" />
    </CardMedia>
    <CardHeader>
      <Skeleton className="h-6 w-3/4" />
    </CardHeader>
    <CardContent>
      <SkeletonText lines={2} />
    </CardContent>
    <CardFooter className="flex gap-2">
      <Skeleton className="h-9 flex-1" />
      <Skeleton className="h-9 flex-1" />
    </CardFooter>
  </Card>
);

export default Example;

```

# Skip Nav - Examples and Patterns

Examples for Skip Nav component.

## Example: default

```tsx
import {
  SkipNavContent,
  SkipNavLink,
} from "@/components/ui/skip-nav";

const SkipNavDemo = () => (
  <>
    <SkipNavLink className="focus:absolute" id="demo-content" />

    <SkipNavContent
      className="max-w-sm rounded-lg border bg-card p-4 focus:ring-2"
      id="demo-content"
      tabIndex={undefined}
    >
      <h2 className="mb-2 font-semibold">Main Content</h2>
      <p className="text-muted-foreground text-sm">
        This is the main content area. When users press Tab and then Enter on
        the skip link, focus jumps here.
      </p>
    </SkipNavContent>
  </>
);

export default SkipNavDemo;

```

# Slider - Examples and Patterns

Examples for Slider component.

## Example: controlled

```tsx
"use client";

import React from "react";
import { Field } from "@/components/ui/field";
import {
  Slider,
  SliderLabel,
  SliderValue,
} from "@/components/ui/slider";

const Example = () => {
  const [value, setValue] = React.useState<number[]>([40]);

  const isGreaterThan80 = value[0] > 80;

  return (
    <div className="flex w-full max-w-xs flex-col gap-4">
      <p className="text-center text-sm">Greater than 80</p>
      <Field>
        <Slider onValueChange={({ value }) => setValue(value)} value={value}>
          <div className="flex items-center justify-between">
            <SliderLabel>Temperature</SliderLabel>
            <SliderValue />
          </div>
        </Slider>
      </Field>
      <p className="text-center">{isGreaterThan80 ? "✅" : "❌"}</p>
    </div>
  );
};

export default Example;

```

## Example: default

```tsx
import { Slider } from "@/components/ui/slider";

export const SliderDemo = () => (
  <Slider className="w-full max-w-xs" defaultValue={[20]} />
);

export default SliderDemo;

```

## Example: disabled

```tsx
import { Slider } from "@/components/ui/slider";

const Example = () => (
  <Slider className="w-full max-w-xs" defaultValue={[50]} disabled />
);

export default Example;

```

## Example: marks

```tsx
import { Slider } from "@/components/ui/slider";

const Example = () => (
  <Slider
    className="w-full max-w-xs"
    defaultValue={[5]}
    markerInterval={2}
    max={12}
    showMarkers
  />
);

export default Example;

```

## Example: min-max

```tsx
import {
  Slider,
  SliderLabel,
  SliderValue,
} from "@/components/ui/slider";

const Example = () => (
  <Slider className="w-full max-w-xs" defaultValue={[50]} max={200} min={0}>
    <div className="flex items-center justify-between">
      <SliderLabel>Volume</SliderLabel>
      <SliderValue />
    </div>
  </Slider>
);

export default Example;

```

## Example: range

```tsx
import { Slider } from "@/components/ui/slider";

const Example = () => (
  <Slider className="w-full max-w-xs" defaultValue={[40, 60]} />
);

export default Example;

```

## Example: step

```tsx
import { Slider, SliderLabel } from "@/components/ui/slider";

const Example = () => (
  <Slider
    className="w-full max-w-xs"
    defaultValue={[0]}
    markerInterval={1}
    markerLabels={["5GB", "25GB", "50GB"]}
    max={2}
    min={0}
    showMarkers
  >
    <SliderLabel>Storage size</SliderLabel>
  </Slider>
);

export default Example;

```

## Example: vertical

```tsx
import { Slider } from "@/components/ui/slider";

const Example = () => {
  return (
    <div className="mx-auto flex w-full max-w-xs items-center justify-center gap-6">
      <Slider
        className="h-40"
        defaultValue={[75]}
        max={100}
        orientation="vertical"
        step={1}
      />
      <Slider
        className="h-40"
        defaultValue={[25]}
        max={100}
        orientation="vertical"
        step={1}
      />
    </div>
  );
};

export default Example;

```

## Example: with-label

```tsx
import { Field } from "@/components/ui/field";
import {
  Slider,
  SliderLabel,
  SliderValue,
} from "@/components/ui/slider";

const Example = () => (
  <Field className="w-full max-w-xs">
    <Slider defaultValue={[50]}>
      <div className="flex items-center justify-between">
        <SliderLabel>Opacity</SliderLabel>
        <SliderValue />
      </div>
    </Slider>
  </Field>
);

export default Example;

```

# Spinner - Examples and Patterns

Examples for Spinner component.

## Example: badge

```tsx
import { Badge } from "@/components/ui/badge";
import { Spinner } from "@/components/ui/spinner";

const Example = () => (
  <div className="flex flex-wrap items-center gap-2">
    <Badge variant="destructive">
      <Spinner />
      Deleting
    </Badge>
    <Badge variant="outline">
      Generating <Spinner />
    </Badge>
  </div>
);

export default Example;

```

## Example: default

```tsx
import {
  Item,
  ItemContent,
  ItemMedia,
  ItemTitle,
} from "@/components/ui/item";
import { Spinner } from "@/components/ui/spinner";

const SpinnerDemo = () => (
  <div className="flex w-full max-w-xs flex-col gap-4">
    <Item className="border- rounded-full" variant="muted">
      <ItemMedia>
        <Spinner />
      </ItemMedia>
      <ItemContent>
        <ItemTitle className="line-clamp-1">Generating image...</ItemTitle>
      </ItemContent>
      <ItemContent className="flex-none justify-end">
        <span className="text-sm tabular-nums">78%</span>
      </ItemContent>
    </Item>
  </div>
);

export default SpinnerDemo;

```

## Example: input-group

```tsx
import {
  InputGroup,
  InputGroupAddon,
  InputGroupInput,
} from "@/components/ui/input-group";
import { Spinner } from "@/components/ui/spinner";

const Example = () => (
  <InputGroup className="w-full max-w-xs">
    <InputGroupInput disabled placeholder="Processing…" type="search" />
    <InputGroupAddon align="inline-end">
      <Spinner />
    </InputGroupAddon>
  </InputGroup>
);

export default Example;

```

## Example: size

```tsx
import { Spinner } from "@/components/ui/spinner";

const Example = () => (
  <div className="flex flex-wrap items-center gap-6">
    <Spinner className="size-4" />
    <Spinner className="size-6" />
    <Spinner className="size-8" />
  </div>
);

export default Example;

```

# Status - Examples and Patterns

Examples for Status component.

## Example: custom-color

```tsx
import { Status } from "@/components/ui/status";

const Example = () => (
  <div className="flex flex-wrap items-center gap-4">
    <Status className="bg-amber-500" variant="default" />
    <Status className="bg-teal-500" variant="default" />
    <Status className="bg-purple-500" variant="default" />
  </div>
);

export default Example;

```

## Example: custom-size

```tsx
import { Status } from "@/components/ui/status";

const Example = () => (
  <div className="flex flex-wrap items-center gap-4">
    <Status className="size-4" variant="success" />
    <Status className="size-6" variant="info" />
    <Status className="size-8" variant="warning" />
  </div>
);

export default Example;

```

## Example: default

```tsx
import { Status } from "@/components/ui/status";

const StatusDemo = () => (
  <div className="flex gap-4">
    <Status />
    <Status variant="success" />
    <Status variant="info" />
    <Status variant="warning" />
    <Status variant="destructive" />
  </div>
);

export default StatusDemo;

```

## Example: size-lg

```tsx
import { Status } from "@/components/ui/status";

const Example = () => <Status size="lg" variant="info" />;

export default Example;

```

## Example: size-md

```tsx
import { Status } from "@/components/ui/status";

const Example = () => <Status size="md" variant="info" />;

export default Example;

```

## Example: size-sm

```tsx
import { Status } from "@/components/ui/status";

const Example = () => <Status size="sm" variant="info" />;

export default Example;

```

## Example: variant-default

```tsx
import { Status } from "@/components/ui/status";

const Example = () => <Status variant="default" />;

export default Example;

```

## Example: variant-destructive

```tsx
import { Status } from "@/components/ui/status";

const Example = () => <Status variant="destructive" />;

export default Example;

```

## Example: variant-info

```tsx
import { Status } from "@/components/ui/status";

const Example = () => <Status variant="info" />;

export default Example;

```

## Example: variant-success

```tsx
import { Status } from "@/components/ui/status";

const Example = () => <Status variant="success" />;

export default Example;

```

## Example: variant-warning

```tsx
import { Status } from "@/components/ui/status";

const Example = () => <Status variant="warning" />;

export default Example;

```

## Example: with-badge

```tsx
import { Badge } from "@/components/ui/badge";
import { Status } from "@/components/ui/status";

const Example = () => (
  <div className="flex flex-wrap gap-2">
    <Badge variant="outline">
      <Status size="sm" variant="success" />
      Online
    </Badge>
    <Badge variant="outline">
      <Status size="sm" variant="info" />
      In progress
    </Badge>
    <Badge variant="outline">
      <Status size="sm" variant="warning" />
      Pending
    </Badge>
    <Badge variant="outline">
      <Status size="sm" variant="destructive" />
      Offline
    </Badge>
  </div>
);

export default Example;

```

## Example: with-icon

```tsx
import { PlusIcon } from "lucide-react";
import { Status } from "@/components/ui/status";

const Example = () => (
  <Status size="lg">
    <PlusIcon />
  </Status>
);

export default Example;

```

# Steps - Examples and Patterns

Examples for Steps component.

## Example: controlled

```tsx
"use client";

import React from "react";
import { Button } from "@/components/ui/button";
import {
  Steps,
  StepsCompletedContent,
  StepsContent,
  StepsIndicator,
  StepsItem,
  StepsList,
  StepsSeparator,
  StepsTitle,
  StepsTrigger,
} from "@/components/ui/steps";

const items = [
  {
    title: "Your details",
    content: "Please provide your name and email address.",
  },
  { title: "Company details", content: "A few details about your company." },
  { title: "Invite your team", content: "Start collaborating with your team." },
];

const Example = () => {
  const [step, setStep] = React.useState(0);

  return (
    <div className="flex w-full max-w-lg flex-col gap-4">
      <Steps
        className="w-full"
        count={items.length}
        onStepChange={(details) => setStep(details.step)}
        step={step}
      >
        <StepsList>
          {items.map((item, index) => (
            <StepsItem index={index} key={item.title}>
              <StepsTrigger>
                <StepsIndicator>{index + 1}</StepsIndicator>
                <StepsTitle>{item.title}</StepsTitle>
              </StepsTrigger>

              <StepsSeparator />
            </StepsItem>
          ))}
        </StepsList>

        {items.map((item, index) => (
          <StepsContent index={index} key={item.title}>
            <p className="text-muted-foreground">{item.content}</p>
          </StepsContent>
        ))}

        <StepsCompletedContent>
          <p className="text-muted-foreground">
            All steps completed. You&apos;re all set!
          </p>
        </StepsCompletedContent>
      </Steps>

      <div className="flex gap-2">
        <Button
          onClick={() => setStep((s) => Math.max(0, s - 1))}
          variant="outline"
        >
          Back
        </Button>

        <Button onClick={() => setStep((s) => Math.min(items.length, s + 1))}>
          Next
        </Button>

        <Button onClick={() => setStep(0)} variant="ghost">
          Reset
        </Button>
      </div>
    </div>
  );
};

export default Example;

```

## Example: default

```tsx
import { ChevronLeftIcon, ChevronRight } from "lucide-react";
import { Button } from "@/components/ui/button";
import {
  Steps,
  StepsCompletedContent,
  StepsContent,
  StepsIndicator,
  StepsItem,
  StepsList,
  StepsNext,
  StepsPrevious,
  StepsSeparator,
  StepsTrigger,
} from "@/components/ui/steps";

const steps = Array.from({ length: 3 }, (_, index) => index + 1);

const StepsDemo = () => {
  return (
    <Steps className="size-full max-w-md" count={steps.length}>
      <StepsList>
        {steps.map((step) => (
          <StepsItem index={step - 1} key={step}>
            <StepsTrigger>
              <StepsIndicator>{step}</StepsIndicator>
            </StepsTrigger>
            <StepsSeparator />
          </StepsItem>
        ))}
      </StepsList>
      {steps.map((step) => (
        <StepsContent
          className="flex h-full items-center justify-center rounded-md border"
          index={step - 1}
          key={step}
        >
          <p className="text-muted-foreground text-sm">Step {step}</p>
        </StepsContent>
      ))}

      <StepsCompletedContent className="flex h-full items-center justify-center rounded-md border">
        <p className="text-muted-foreground text-sm">
          All steps completed. You&apos;re all set!
        </p>
      </StepsCompletedContent>

      <div className="flex flex-row-reverse gap-2">
        <StepsNext asChild>
          <Button>
            Next
            <ChevronRight />
          </Button>
        </StepsNext>
        <StepsPrevious asChild>
          <Button variant="outline">
            <ChevronLeftIcon />
            Back
          </Button>
        </StepsPrevious>
      </div>
    </Steps>
  );
};

export default StepsDemo;

```

## Example: description

```tsx
import {
  Steps,
  StepsDescription,
  StepsIndicator,
  StepsItem,
  StepsList,
  StepsSeparator,
  StepsTitle,
  StepsTrigger,
} from "@/components/ui/steps";

const items = [
  { title: "Info", description: "Personal" },
  { title: "Docs", description: "Company" },
  { title: "Team", description: "Create" },
];

const Example = () => {
  return (
    <Steps className="w-full max-w-md" count={items.length}>
      <StepsList>
        {items.map((item, index) => (
          <StepsItem index={index} key={item.title}>
            <StepsTrigger>
              <StepsIndicator>{index + 1}</StepsIndicator>
              <div className="flex flex-col items-start gap-1">
                <StepsTitle>{item.title}</StepsTitle>
                <StepsDescription>{item.description}</StepsDescription>
              </div>
            </StepsTrigger>
            <StepsSeparator />
          </StepsItem>
        ))}
      </StepsList>
    </Steps>
  );
};

export default Example;

```

## Example: icon

```tsx
import { CreditCardIcon, HardDriveIcon, UserIcon } from "lucide-react";
import {
  Steps,
  StepsIndicator,
  StepsItem,
  StepsList,
  StepsSeparator,
  StepsTrigger,
} from "@/components/ui/steps";

const items = [
  { icon: UserIcon },
  { icon: HardDriveIcon },
  { icon: CreditCardIcon },
];

const Example = () => {
  return (
    <Steps className="w-full max-w-md" count={items.length}>
      <StepsList>
        {items.map((item, index) => (
          <StepsItem index={index} key={index}>
            <StepsTrigger>
              <StepsIndicator>
                <item.icon />
              </StepsIndicator>
            </StepsTrigger>
            <StepsSeparator />
          </StepsItem>
        ))}
      </StepsList>
    </Steps>
  );
};

export default Example;

```

## Example: loading

```tsx
import { Loader2Icon } from "lucide-react";
import {
  Steps,
  StepsIndicator,
  StepsItem,
  StepsList,
  StepsSeparator,
  StepsTrigger,
} from "@/components/ui/steps";

const items = [true, false, false];

const Example = () => {
  return (
    <Steps className="w-full max-w-md" count={items.length}>
      <StepsList>
        {items.map((item, index) => (
          <StepsItem index={index} key={index}>
            <StepsTrigger disabled>
              <StepsIndicator>
                {item ? <Loader2Icon className="animate-spin" /> : index + 1}
              </StepsIndicator>
            </StepsTrigger>

            <StepsSeparator />
          </StepsItem>
        ))}
      </StepsList>
    </Steps>
  );
};

export default Example;

```

## Example: title

```tsx
import {
  Steps,
  StepsIndicator,
  StepsItem,
  StepsList,
  StepsSeparator,
  StepsTitle,
  StepsTrigger,
} from "@/components/ui/steps";

const items = ["Info", "Docs", "Team"];

const Example = () => {
  return (
    <Steps className="w-full max-w-md" count={items.length}>
      <StepsList>
        {items.map((item, index) => (
          <StepsItem index={index} key={item}>
            <StepsTrigger>
              <StepsIndicator>{index + 1}</StepsIndicator>
              <StepsTitle>{item}</StepsTitle>
            </StepsTrigger>
            <StepsSeparator />
          </StepsItem>
        ))}
      </StepsList>
    </Steps>
  );
};

export default Example;

```

## Example: vertical

```tsx
import { ChevronLeftIcon, ChevronRightIcon } from "lucide-react";
import { Button } from "@/components/ui/button";
import {
  Steps,
  StepsCompletedContent,
  StepsContent,
  StepsDescription,
  StepsIndicator,
  StepsItem,
  StepsList,
  StepsNext,
  StepsPrevious,
  StepsSeparator,
  StepsTitle,
  StepsTrigger,
} from "@/components/ui/steps";

const items = [
  { title: "Info", description: "Personal" },
  { title: "Docs", description: "Company" },
  { title: "Team", description: "Create" },
];

const Example = () => {
  return (
    <Steps
      className="h-64 w-full max-w-md"
      count={items.length}
      orientation="vertical"
    >
      <StepsList>
        {items.map((item, index) => (
          <StepsItem index={index} key={item.title}>
            <StepsTrigger>
              <StepsIndicator>{index + 1}</StepsIndicator>
              <span className="flex flex-col items-start gap-1">
                <StepsTitle>{item.title}</StepsTitle>
                <StepsDescription>{item.description}</StepsDescription>
              </span>
            </StepsTrigger>
            <StepsSeparator />
          </StepsItem>
        ))}
      </StepsList>
      <div className="flex flex-1 flex-col gap-4">
        {items.map((item, index) => (
          <StepsContent
            className="flex h-full items-center justify-center rounded-md border"
            index={index}
            key={item.title}
          >
            <p className="text-muted-foreground">{item.description}</p>
          </StepsContent>
        ))}
        <StepsCompletedContent className="flex h-full items-center justify-center rounded-md border">
          <p className="text-muted-foreground">Completed</p>
        </StepsCompletedContent>
        <div className="flex flex-row-reverse gap-2">
          <StepsNext asChild>
            <Button variant="outline">
              Next
              <ChevronRightIcon />
            </Button>
          </StepsNext>

          <StepsPrevious asChild>
            <Button variant="outline">
              <ChevronLeftIcon />
              Back
            </Button>
          </StepsPrevious>
        </div>
      </div>
    </Steps>
  );
};

export default Example;

```

# Swap - Examples and Patterns

Examples for Swap component.

## Example: blur

```tsx
"use client";

import { MoonIcon, SunIcon } from "lucide-react";
import React from "react";
import { Button } from "@/components/ui/button";
import { Swap, SwapIndicator } from "@/components/ui/swap";

const Example = () => {
  const [swap, setSwap] = React.useState(false);

  return (
    <Button onClick={() => setSwap(!swap)} size="icon-lg" variant="outline">
      <Swap swap={swap} variant="blur">
        <SwapIndicator type="on">
          <MoonIcon />
        </SwapIndicator>
        <SwapIndicator type="off">
          <SunIcon />
        </SwapIndicator>
      </Swap>
    </Button>
  );
};

export default Example;

```

## Example: default

```tsx
"use client";

import { MoonIcon, SunIcon } from "lucide-react";
import React from "react";
import { Button } from "@/components/ui/button";
import { Swap, SwapIndicator } from "@/components/ui/swap";

const SwapDemo = () => {
  const [swap, setSwap] = React.useState(false);

  return (
    <Button onClick={() => setSwap(!swap)} size="icon-lg" variant="outline">
      <Swap swap={swap} variant="fade">
        <SwapIndicator type="on">
          <MoonIcon />
        </SwapIndicator>
        <SwapIndicator type="off">
          <SunIcon />
        </SwapIndicator>
      </Swap>
    </Button>
  );
};

export default SwapDemo;

```

## Example: flip

```tsx
"use client";

import { MoonIcon, SunIcon } from "lucide-react";
import React from "react";
import { Button } from "@/components/ui/button";
import { Swap, SwapIndicator } from "@/components/ui/swap";

const Example = () => {
  const [swap, setSwap] = React.useState(false);

  return (
    <Button onClick={() => setSwap(!swap)} size="icon-lg" variant="outline">
      <Swap swap={swap} variant="flip">
        <SwapIndicator type="on">
          <MoonIcon />
        </SwapIndicator>
        <SwapIndicator type="off">
          <SunIcon />
        </SwapIndicator>
      </Swap>
    </Button>
  );
};

export default Example;

```

## Example: rotate

```tsx
"use client";

import { MoonIcon, SunIcon } from "lucide-react";
import React from "react";
import { Button } from "@/components/ui/button";
import { Swap, SwapIndicator } from "@/components/ui/swap";

const Example = () => {
  const [swap, setSwap] = React.useState(false);

  return (
    <Button onClick={() => setSwap(!swap)} size="icon-lg" variant="outline">
      <Swap swap={swap} variant="rotate">
        <SwapIndicator type="on">
          <MoonIcon />
        </SwapIndicator>
        <SwapIndicator type="off">
          <SunIcon />
        </SwapIndicator>
      </Swap>
    </Button>
  );
};

export default Example;

```

## Example: scale

```tsx
"use client";

import { MoonIcon, SunIcon } from "lucide-react";
import React from "react";
import { Button } from "@/components/ui/button";
import { Swap, SwapIndicator } from "@/components/ui/swap";

const Example = () => {
  const [swap, setSwap] = React.useState(false);

  return (
    <Button onClick={() => setSwap(!swap)} size="icon-lg" variant="outline">
      <Swap swap={swap} variant="scale">
        <SwapIndicator type="on">
          <MoonIcon />
        </SwapIndicator>
        <SwapIndicator type="off">
          <SunIcon />
        </SwapIndicator>
      </Swap>
    </Button>
  );
};

export default Example;

```

# Switch - Examples and Patterns

A control element that allows for a binary selection.

## Example: card

```tsx
import {
  Field,
  FieldContent,
  FieldDescription,
  FieldLabel,
  FieldTitle,
} from "@/components/ui/field";
import { Switch } from "@/components/ui/switch";

const Example = () => (
  <FieldLabel className="w-full max-w-sm">
    <Field orientation="horizontal">
      <FieldContent>
        <FieldTitle>Enable notifications</FieldTitle>
        <FieldDescription>
          You can enable or disable notifications at any time.
        </FieldDescription>
      </FieldContent>
      <Switch defaultChecked />
    </Field>
  </FieldLabel>
);

export default Example;

```

## Example: controlled

```tsx
"use client";

import React from "react";
import {
  Field,
  FieldContent,
  FieldGroup,
  FieldLabel,
} from "@/components/ui/field";
import { Switch } from "@/components/ui/switch";

const Example = () => {
  const [checked, setChecked] = React.useState(false);

  return (
    <FieldGroup className="flex max-w-sm flex-col items-center gap-4">
      <Field className="w-48" orientation="horizontal">
        <Switch
          checked={checked}
          onCheckedChange={({ checked }) => setChecked(checked ?? false)}
        />
        <FieldContent>
          <FieldLabel>Enable notifications</FieldLabel>
        </FieldContent>
      </Field>

      <p className="text-center">{checked ? "✅" : "❌"}</p>
    </FieldGroup>
  );
};

export default Example;

```

## Example: default

```tsx
import { Field, FieldLabel } from "@/components/ui/field";
import { Switch } from "@/components/ui/switch";

const SwitchDemo = () => (
  <div className="max-w-sm">
    <Field orientation="horizontal">
      <Switch defaultChecked />
      <FieldLabel> Airplane mode</FieldLabel>
    </Field>
  </div>
);

export default SwitchDemo;

```

## Example: description

```tsx
import {
  Field,
  FieldContent,
  FieldDescription,
  FieldLabel,
} from "@/components/ui/field";
import { Switch } from "@/components/ui/switch";

const Example = () => (
  <Field className="max-w-sm" orientation="horizontal">
    <Switch defaultChecked />
    <FieldContent>
      <FieldLabel>Share across devices</FieldLabel>
      <FieldDescription>
        Focus is shared across devices, and turns off when you leave the app.
      </FieldDescription>
    </FieldContent>
  </Field>
);

export default Example;

```

## Example: disabled

```tsx
import {
  Field,
  FieldContent,
  FieldLabel,
} from "@/components/ui/field";
import { Switch } from "@/components/ui/switch";

const Example = () => (
  <div className="max-w-sm">
    <Field disabled orientation="horizontal">
      <Switch />
      <FieldContent>
        <FieldLabel>Marketing emails</FieldLabel>
      </FieldContent>
    </Field>
  </div>
);

export default Example;

```

## Example: form

```tsx
"use client";

import React from "react";
import { Button } from "@/components/ui/button";
import {
  Card,
  CardContent,
  CardDescription,
  CardFooter,
  CardHeader,
} from "@/components/ui/card";
import {
  Field,
  FieldContent,
  FieldError,
  FieldGroup,
  FieldLabel,
} from "@/components/ui/field";
import { Switch } from "@/components/ui/switch";

const Example = () => {
  const [terms, setTerms] = React.useState(false);
  const [errors, setErrors] = React.useState<{ terms?: string }>({});

  const onSubmit = (e: React.SubmitEvent) => {
    e.preventDefault();

    if (!terms) {
      setErrors({ terms: "You must accept the terms" });
    }
  };

  return (
    <Card asChild>
      <form className="w-full max-w-xs" onSubmit={onSubmit}>
        <CardHeader title="Terms and conditions">
          <CardDescription className="text-pretty">
            Please read the terms and conditions carefully.
          </CardDescription>
        </CardHeader>
        <CardContent>
          <FieldGroup>
            <Field invalid={!!errors.terms} orientation="horizontal">
              <Switch
                checked={terms}
                name="terms"
                onCheckedChange={({ checked }) => setTerms(checked)}
              />
              <FieldContent>
                <FieldLabel>I agree to the terms</FieldLabel>
                {errors.terms && <FieldError>{errors.terms}</FieldError>}
              </FieldContent>
            </Field>
          </FieldGroup>
        </CardContent>
        <CardFooter>
          <Field orientation="horizontal" reverse>
            <Button type="submit">Submit</Button>
            <Button
              onClick={() => {
                setTerms(false);
                setErrors({});
              }}
              type="reset"
              variant="outline"
            >
              Reset
            </Button>
          </Field>
        </CardFooter>
      </form>
    </Card>
  );
};

export default Example;

```

## Example: invalid

```tsx
import {
  Field,
  FieldContent,
  FieldLabel,
} from "@/components/ui/field";
import { Switch } from "@/components/ui/switch";

const Example = () => (
  <Field className="max-w-64" invalid orientation="horizontal">
    <Switch />
    <FieldContent>
      <FieldLabel>Accept terms and conditions</FieldLabel>
    </FieldContent>
  </Field>
);

export default Example;

```

## Example: size

```tsx
import { Switch } from "@/components/ui/switch";

const Example = () => (
  <div className="max-w-sm">
    <Switch className="[--size:--spacing(5)] sm:[--size:--spacing(6)]" />
  </div>
);

export default Example;

```

# Table - Examples and Patterns

Examples for Table component.

## Example: action-bar

```tsx
"use client";

import {
  ArchiveIcon,
  CopyIcon,
  EllipsisIcon,
  PencilIcon,
  SendIcon,
  Trash2Icon,
} from "lucide-react";
import React from "react";
import {
  ActionBar,
  ActionBarContent,
  ActionBarSelectionTrigger,
} from "@/components/ui/action-bar";
import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogBody,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogTrigger,
} from "@/components/ui/alert-dialog";
import { Badge, type BadgeVariant } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { Checkbox } from "@/components/ui/checkbox";
import {
  Menu,
  MenuContent,
  MenuItem,
  MenuTrigger,
} from "@/components/ui/menu";
import {
  Table,
  TableBody,
  TableCaption,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@/components/ui/table";

const Example = () => {
  const [selectedIds, setSelectedIds] = React.useState<string[]>([]);

  const isOpen = selectedIds.length > 0;
  const allSelected =
    selectedIds.length > 0 && selectedIds.length === orders.length;

  const handleSelectAll = (checked: boolean | "indeterminate") => {
    if (checked) {
      setSelectedIds(orders.map((order) => order.id));
    } else {
      setSelectedIds([]);
    }
  };

  const handleSelectRow = (id: string, checked: boolean | "indeterminate") => {
    if (checked) {
      setSelectedIds((prev) => [...prev, id]);
    } else {
      setSelectedIds((prev) => prev.filter((item) => item !== id));
    }
  };

  const handleClose = () => {
    setSelectedIds([]);
  };

  return (
    <div className="w-full max-w-2xl rounded-lg border">
      <ActionBar onOpenChange={(open) => !open && handleClose()} open={isOpen}>
        <Table>
          <TableCaption className="sr-only">
            Orders with checkbox selection and action bar.
          </TableCaption>
          <TableHeader>
            <TableRow>
              <TableHead className="w-12">
                <Checkbox
                  aria-label="Select all orders"
                  checked={allSelected}
                  onCheckedChange={({ checked }) => handleSelectAll(checked)}
                />
              </TableHead>
              <TableHead>ID</TableHead>
              <TableHead>Name</TableHead>
              <TableHead>Status</TableHead>
              <TableHead>Amount</TableHead>
            </TableRow>
          </TableHeader>
          <TableBody>
            {orders.map((order) => {
              const isSelected = selectedIds.includes(order.id);

              return (
                <TableRow
                  data-state={isSelected ? "selected" : undefined}
                  key={order.id}
                >
                  <TableCell className="w-12">
                    <Checkbox
                      aria-label={`Select order ${order.id}`}
                      checked={isSelected}
                      onCheckedChange={({ checked }) =>
                        handleSelectRow(order.id, checked)
                      }
                    />
                  </TableCell>
                  <TableCell className="font-medium">{order.id}</TableCell>
                  <TableCell>{order.name}</TableCell>
                  <TableCell>
                    <Badge
                      className="capitalize"
                      variant={statusVariants[order.status]}
                    >
                      {order.status}
                    </Badge>
                  </TableCell>
                  <TableCell>{order.amount}</TableCell>
                </TableRow>
              );
            })}
          </TableBody>
        </Table>

        <ActionBarContent className="w-full max-w-xl">
          <ActionBarSelectionTrigger count={selectedIds.length} />
          <div className="ml-auto flex gap-2">
            <Button size="sm" variant="secondary">
              <SendIcon />
              Send
            </Button>
            <Button size="sm" variant="secondary">
              <PencilIcon />
              Edit
            </Button>
            <Menu positioning={{ placement: "top" }}>
              <MenuTrigger asChild>
                <Button size="sm" variant="secondary">
                  <EllipsisIcon />
                </Button>
              </MenuTrigger>
              <MenuContent>
                <MenuItem value="archive">
                  <ArchiveIcon />
                  Archive
                </MenuItem>
                <MenuItem value="duplicate">
                  <CopyIcon />
                  Duplicate
                </MenuItem>
              </MenuContent>
            </Menu>
            <AlertDialog>
              <AlertDialogTrigger asChild>
                <Button size="sm" variant="destructive">
                  <Trash2Icon />
                  Delete
                </Button>
              </AlertDialogTrigger>
              <AlertDialogContent>
                <AlertDialogHeader
                  description="This action cannot be undone."
                  title="Delete selected orders?"
                />
                <AlertDialogBody>
                  <ul>
                    {selectedIds.map((id) => {
                      const order = orders.find((o) => o.id === id);

                      if (!order) {
                        return null;
                      }

                      return (
                        <li className="py-1 text-sm" key={id}>
                          {order.id} - {order.name}
                        </li>
                      );
                    })}
                  </ul>
                </AlertDialogBody>
                <AlertDialogFooter>
                  <AlertDialogCancel>Cancel</AlertDialogCancel>
                  <AlertDialogAction variant="destructive">
                    Delete
                  </AlertDialogAction>
                </AlertDialogFooter>
              </AlertDialogContent>
            </AlertDialog>
          </div>
        </ActionBarContent>
      </ActionBar>
    </div>
  );
};

export default Example;

const orders = [
  {
    id: "SO-01",
    name: "Macbook Pro 16",
    status: "progress",
    amount: "245,12 $",
  },
  {
    id: "SO-02",
    name: "Apple Watch Series 9",
    status: "transit",
    amount: "122,18 $",
  },
  {
    id: "SO-03",
    name: "AirPods Max",
    status: "pending",
    amount: "89,50 $",
  },
  {
    id: "SO-04",
    name: "iPad Pro 13",
    status: "pending",
    amount: "310,00 $",
  },
  {
    id: "SO-05",
    name: "iPhone 15 Pro Max",
    status: "transit",
    amount: "156,75 $",
  },
];

const statusVariants: Record<string, BadgeVariant> = {
  transit: "success",
  pending: "warning",
  progress: "info",
};

```

## Example: actions

```tsx
import {
  EllipsisVerticalIcon,
  EyeIcon,
  PencilIcon,
  Trash2Icon,
} from "lucide-react";
import { Button } from "@/components/ui/button";
import {
  Menu,
  MenuContent,
  MenuItem,
  MenuShortcut,
  MenuTrigger,
} from "@/components/ui/menu";
import {
  Table,
  TableBody,
  TableCaption,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@/components/ui/table";

const Example = () => {
  return (
    <Table className="mx-auto w-full max-w-xl">
      <TableCaption className="sr-only">
        Users with row actions (edit, delete).
      </TableCaption>
      <TableHeader>
        <TableRow>
          <TableHead>Name</TableHead>
          <TableHead>Email</TableHead>
          <TableHead className="text-right">Actions</TableHead>
        </TableRow>
      </TableHeader>
      <TableBody>
        {users.map((user) => (
          <TableRow key={user.id}>
            <TableCell className="font-medium">{user.name}</TableCell>
            <TableCell>{user.email}</TableCell>
            <TableCell className="text-right">
              <Menu positioning={{ placement: "left-end" }}>
                <MenuTrigger asChild>
                  <Button size="icon-sm" variant="outline">
                    <EllipsisVerticalIcon />
                  </Button>
                </MenuTrigger>
                <MenuContent className="min-w-40">
                  <MenuItem value="view">
                    <EyeIcon />
                    View
                    <MenuShortcut>⌘ V</MenuShortcut>
                  </MenuItem>
                  <MenuItem value="edit">
                    <PencilIcon />
                    Edit
                    <MenuShortcut>⌘ E</MenuShortcut>
                  </MenuItem>
                  <MenuItem value="delete" variant="destructive">
                    <Trash2Icon />
                    Delete
                    <MenuShortcut>⌘ ⌫</MenuShortcut>
                  </MenuItem>
                </MenuContent>
              </Menu>
            </TableCell>
          </TableRow>
        ))}
      </TableBody>
    </Table>
  );
};

const users = [
  { id: "1", name: "Alice Johnson", email: "alice@example.com" },
  { id: "2", name: "Bruno Silva", email: "bruno@example.com" },
  { id: "3", name: "Clara Mendes", email: "clara@example.com" },
];

export default Example;

```

## Example: context-menu

```tsx
"use client";

import { EyeIcon, PencilIcon, Trash2Icon } from "lucide-react";
import {
  ContextMenu,
  ContextMenuContent,
  ContextMenuItem,
  ContextMenuShortcut,
  ContextMenuTrigger,
} from "@/components/ui/context-menu";
import {
  Table,
  TableBody,
  TableCaption,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@/components/ui/table";

const Example = () => (
  <Table className="mx-auto w-full max-w-xl">
    <TableCaption className="sr-only">
      Users with row context menu. Right-click a row to open the menu.
    </TableCaption>
    <TableHeader>
      <TableRow>
        <TableHead>Name</TableHead>
        <TableHead>Email</TableHead>
      </TableRow>
    </TableHeader>
    <TableBody>
      {users.map((user) => (
        <ContextMenu key={user.id}>
          <ContextMenuTrigger asChild>
            <TableRow>
              <TableCell className="font-medium">{user.name}</TableCell>
              <TableCell>{user.email}</TableCell>
            </TableRow>
          </ContextMenuTrigger>
          <ContextMenuContent className="min-w-40">
            <ContextMenuItem value="view">
              <EyeIcon />
              View
              <ContextMenuShortcut>⌘ V</ContextMenuShortcut>
            </ContextMenuItem>
            <ContextMenuItem value="edit">
              <PencilIcon />
              Edit
              <ContextMenuShortcut>⌘ E</ContextMenuShortcut>
            </ContextMenuItem>
            <ContextMenuItem value="delete" variant="destructive">
              <Trash2Icon />
              Delete
              <ContextMenuShortcut>⌘ ⌫</ContextMenuShortcut>
            </ContextMenuItem>
          </ContextMenuContent>
        </ContextMenu>
      ))}
    </TableBody>
  </Table>
);

const users = [
  { id: "1", name: "Alice Johnson", email: "alice@example.com" },
  { id: "2", name: "Bruno Silva", email: "bruno@example.com" },
  { id: "3", name: "Clara Mendes", email: "clara@example.com" },
];

export default Example;

```

## Example: default

```tsx
import { Badge, type BadgeVariant } from "@/components/ui/badge";
import {
  Table,
  TableBody,
  TableCaption,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@/components/ui/table";

const TableDemo = () => {
  return (
    <Table className="mx-auto w-full max-w-xl">
      <TableCaption>A list of users in your workspace.</TableCaption>
      <TableHeader>
        <TableRow>
          <TableHead>Name</TableHead>
          <TableHead>Email</TableHead>
          <TableHead>Role</TableHead>
          <TableHead className="text-center">Status</TableHead>
        </TableRow>
      </TableHeader>
      <TableBody>
        {users.map((user) => (
          <TableRow key={user.id}>
            <TableCell>{user.name}</TableCell>
            <TableCell>{user.email}</TableCell>
            <TableCell>{user.role}</TableCell>
            <TableCell className="text-center">
              <Badge
                className="capitalize"
                variant={statusVariants[user.status]}
              >
                {user.status}
              </Badge>
            </TableCell>
          </TableRow>
        ))}
      </TableBody>
    </Table>
  );
};

const statusVariants: Record<string, BadgeVariant> = {
  active: "success",
  invited: "info",
  inactive: "destructive",
};

const users = [
  {
    id: "1",
    name: "Alice Johnson",
    email: "alice.johnson@example.com",
    role: "Admin",
    status: "active",
  },
  {
    id: "2",
    name: "Bruno Silva",
    email: "bruno.silva@example.com",
    role: "Editor",
    status: "invited",
  },
  {
    id: "3",
    name: "Clara Mendes",
    email: "clara.mendes@example.com",
    role: "Viewer",
    status: "inactive",
  },
  {
    id: "4",
    name: "David Park",
    email: "david.park@example.com",
    role: "Editor",
    status: "active",
  },
];

export default TableDemo;

```

## Example: footer

```tsx
import {
  Table,
  TableBody,
  TableCaption,
  TableCell,
  TableFooter,
  TableHead,
  TableHeader,
  TableRow,
} from "@/components/ui/table";

const Example = () => {
  return (
    <Table className="mx-auto w-full max-w-xl">
      <TableCaption className="sr-only">
        Order summary with footer totals.
      </TableCaption>
      <TableHeader>
        <TableRow>
          <TableHead>Item</TableHead>
          <TableHead className="text-right">Qty</TableHead>
          <TableHead className="text-right">Unit price</TableHead>
          <TableHead className="text-right">Amount</TableHead>
        </TableRow>
      </TableHeader>
      <TableBody>
        {items.map((row) => (
          <TableRow key={row.id}>
            <TableCell>{row.item}</TableCell>
            <TableCell className="text-right">{row.qty}</TableCell>
            <TableCell className="text-right">
              ${row.unitPrice.toFixed(2)}
            </TableCell>
            <TableCell className="text-right">
              ${(row.qty * row.unitPrice).toFixed(2)}
            </TableCell>
          </TableRow>
        ))}
      </TableBody>
      <TableFooter>
        <TableRow>
          <TableCell colSpan={3}>Total</TableCell>
          <TableCell className="text-right">$379.47</TableCell>
        </TableRow>
      </TableFooter>
    </Table>
  );
};

const items = [
  { id: "1", item: "Wireless mouse", qty: 2, unitPrice: 29.99 },
  { id: "2", item: "Mechanical keyboard", qty: 1, unitPrice: 149.99 },
  { id: "3", item: "USB-C hub", qty: 3, unitPrice: 45.0 },
];

export default Example;

```

## Example: not-hoverable

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

const Example = () => {
  return (
    <Table className="mx-auto w-full max-w-xl" isHoverable={false}>
      <TableCaption className="sr-only">
        Table with row hover disabled (isHoverable=false).
      </TableCaption>
      <TableHeader>
        <TableRow>
          <TableHead>Name</TableHead>
          <TableHead>Email</TableHead>
        </TableRow>
      </TableHeader>
      <TableBody>
        {users.map((user) => (
          <TableRow key={user.id}>
            <TableCell>{user.name}</TableCell>
            <TableCell>{user.email}</TableCell>
          </TableRow>
        ))}
      </TableBody>
    </Table>
  );
};

const users = [
  {
    id: "1",
    name: "Alice Johnson",
    email: "alice@example.com",
  },
  {
    id: "2",
    name: "Bruno Silva",
    email: "bruno@example.com",
  },
  {
    id: "3",
    name: "Clara Mendes",
    email: "clara@example.com",
  },
];

export default Example;

```

## Example: striped

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

const Example = () => {
  return (
    <Table className="mx-auto w-full max-w-xl" variant="striped">
      <TableCaption className="sr-only">
        Users with alternating row backgrounds.
      </TableCaption>
      <TableHeader>
        <TableRow>
          <TableHead>Name</TableHead>
          <TableHead>Email</TableHead>
          <TableHead>Role</TableHead>
          <TableHead className="text-center">Status</TableHead>
        </TableRow>
      </TableHeader>
      <TableBody>
        {users.map((user) => (
          <TableRow key={user.id}>
            <TableCell>{user.name}</TableCell>
            <TableCell>{user.email}</TableCell>
            <TableCell>{user.role}</TableCell>
            <TableCell className="text-center">{user.status}</TableCell>
          </TableRow>
        ))}
      </TableBody>
    </Table>
  );
};

const users = [
  {
    id: "1",
    name: "Alice Johnson",
    email: "alice.johnson@example.com",
    role: "Admin",
    status: "Active",
  },
  {
    id: "2",
    name: "Bruno Silva",
    email: "bruno.silva@example.com",
    role: "Editor",
    status: "Invited",
  },
  {
    id: "3",
    name: "Clara Mendes",
    email: "clara.mendes@example.com",
    role: "Viewer",
    status: "Inactive",
  },
  {
    id: "4",
    name: "David Park",
    email: "david.park@example.com",
    role: "Editor",
    status: "Active",
  },
];

export default Example;

```

# Tabs - Examples and Patterns

Examples for Tabs component.

## Example: controlled

```tsx
"use client";

import React from "react";
import { Button } from "@/components/ui/button";
import {
  Tabs,
  TabsContent,
  TabsList,
  TabsTrigger,
} from "@/components/ui/tabs";

const Example = () => {
  const [value, setValue] = React.useState("profile");

  return (
    <div className="flex flex-col gap-4">
      <Tabs onValueChange={(e) => setValue(e.value)} value={value}>
        <TabsList>
          <TabsTrigger value="profile">Profile</TabsTrigger>
          <TabsTrigger value="settings">Settings</TabsTrigger>
          <TabsTrigger value="security">Security</TabsTrigger>
        </TabsList>

        <TabsContent value="profile">
          <p className="text-muted-foreground text-sm">
            Manage your profile information and preferences.
          </p>
        </TabsContent>

        <TabsContent value="settings">
          <p className="text-muted-foreground text-sm">
            Customize notifications, theme, and text density.
          </p>
        </TabsContent>

        <TabsContent value="security">
          <p className="text-muted-foreground text-sm">
            Update your password and security settings.
          </p>
        </TabsContent>
      </Tabs>

      <div className="flex gap-2">
        <Button onClick={() => setValue("profile")} size="sm" variant="outline">
          Go to Profile
        </Button>
        <Button
          onClick={() => setValue("settings")}
          size="sm"
          variant="outline"
        >
          Go to Settings
        </Button>
        <Button
          onClick={() => setValue("security")}
          size="sm"
          variant="outline"
        >
          Go to Security
        </Button>
      </div>
    </div>
  );
};

export default Example;

```

## Example: default

```tsx
import {
  Card,
  CardContent,
  CardHeader,
} from "@/components/ui/card";
import {
  Tabs,
  TabsContent,
  TabsList,
  TabsTrigger,
} from "@/components/ui/tabs";

const TabsDemo = () => (
  <Tabs defaultValue="tab-1">
    <TabsList>
      <TabsTrigger value="tab-1">Profile</TabsTrigger>
      <TabsTrigger value="tab-2">Settings</TabsTrigger>
      <TabsTrigger value="tab-3">Security</TabsTrigger>
    </TabsList>

    <TabsContent value="tab-1">
      <Card className="h-full w-sm">
        <CardHeader
          description="Manage your profile information"
          title="Profile"
        />

        <CardContent className="text-muted-foreground text-sm">
          View you shared information here, update you profile name, picture and
          email.
        </CardContent>
      </Card>
    </TabsContent>

    <TabsContent value="tab-2">
      <Card className="h-full w-sm">
        <CardHeader description="Update your preferences" title="Settings" />

        <CardContent className="text-muted-foreground text-sm">
          Customize how to handle notifications, update the theme and text
          density.
        </CardContent>
      </Card>
    </TabsContent>

    <TabsContent value="tab-3">
      <Card className="h-full w-sm">
        <CardHeader
          description="Protect your account and data"
          title="Security"
        />
        <CardContent className="text-muted-foreground text-sm">
          Update your security settings here, change your password and more.
        </CardContent>
      </Card>
    </TabsContent>
  </Tabs>
);

export default TabsDemo;

```

## Example: disabled

```tsx
import {
  Tabs,
  TabsContent,
  TabsList,
  TabsTrigger,
} from "@/components/ui/tabs";

const Example = () => (
  <Tabs defaultValue="tab-1">
    <TabsList>
      <TabsTrigger value="tab-1">Profile</TabsTrigger>
      <TabsTrigger disabled value="tab-2">
        Settings
      </TabsTrigger>
    </TabsList>
    <TabsContent
      className="p-4 text-center text-muted-foreground text-xs"
      value="tab-1"
    >
      Profile content
    </TabsContent>
    <TabsContent
      className="p-4 text-center text-muted-foreground text-xs"
      value="tab-2"
    >
      Settings content
    </TabsContent>
  </Tabs>
);

export default Example;

```

## Example: orientation-horizontal

```tsx
import {
  Tabs,
  TabsContent,
  TabsList,
  TabsTrigger,
} from "@/components/ui/tabs";

const Example = () => (
  <Tabs defaultValue="tab-1">
    <TabsList>
      <TabsTrigger value="tab-1">Tab 1</TabsTrigger>
      <TabsTrigger value="tab-2">Tab 2</TabsTrigger>
      <TabsTrigger value="tab-3">Tab 3</TabsTrigger>
    </TabsList>
    <TabsContent
      className="p-4 text-center text-muted-foreground text-xs"
      value="tab-1"
    >
      Content 1
    </TabsContent>

    <TabsContent
      className="p-4 text-center text-muted-foreground text-xs"
      value="tab-2"
    >
      Content 2
    </TabsContent>

    <TabsContent
      className="p-4 text-center text-muted-foreground text-xs"
      value="tab-3"
    >
      Content 3
    </TabsContent>
  </Tabs>
);

export default Example;

```

## Example: orientation-vertical

```tsx
import {
  Tabs,
  TabsContent,
  TabsList,
  TabsTrigger,
} from "@/components/ui/tabs";

const Example = () => (
  <Tabs className="w-full max-w-40" defaultValue="tab-1" orientation="vertical">
    <TabsList variant="default">
      <TabsTrigger value="tab-1">Tab 1</TabsTrigger>
      <TabsTrigger value="tab-2">Tab 2</TabsTrigger>
      <TabsTrigger value="tab-3">Tab 3</TabsTrigger>
    </TabsList>
    <TabsContent
      className="p-4 text-center text-muted-foreground text-xs"
      value="tab-1"
    >
      Content 1
    </TabsContent>
    <TabsContent
      className="p-4 text-center text-muted-foreground text-xs"
      value="tab-2"
    >
      Content 2
    </TabsContent>
    <TabsContent
      className="p-4 text-center text-muted-foreground text-xs"
      value="tab-3"
    >
      Content 3
    </TabsContent>
  </Tabs>
);

export default Example;

```

## Example: variant-default

```tsx
import {
  Tabs,
  TabsContent,
  TabsList,
  TabsTrigger,
} from "@/components/ui/tabs";

const Example = () => (
  <Tabs defaultValue="tab-1">
    <TabsList variant="default">
      <TabsTrigger value="tab-1">Profile</TabsTrigger>
      <TabsTrigger value="tab-2">Settings</TabsTrigger>
      <TabsTrigger value="tab-3">Security</TabsTrigger>
    </TabsList>
    <TabsContent
      className="p-4 text-center text-muted-foreground text-xs"
      value="tab-1"
    >
      Content 1
    </TabsContent>
    <TabsContent
      className="p-4 text-center text-muted-foreground text-xs"
      value="tab-2"
    >
      Content 2
    </TabsContent>
    <TabsContent
      className="p-4 text-center text-muted-foreground text-xs"
      value="tab-3"
    >
      Content 3
    </TabsContent>
  </Tabs>
);

export default Example;

```

## Example: variant-underline-orientation-vertical

```tsx
import {
  Tabs,
  TabsContent,
  TabsList,
  TabsTrigger,
} from "@/components/ui/tabs";

const Example = () => (
  <Tabs className="w-full max-w-40" defaultValue="tab-1" orientation="vertical">
    <TabsList variant="underline">
      <TabsTrigger value="tab-1">Tab 1</TabsTrigger>
      <TabsTrigger value="tab-2">Tab 2</TabsTrigger>
      <TabsTrigger value="tab-3">Tab 3</TabsTrigger>
    </TabsList>
    <TabsContent
      className="p-4 text-center text-muted-foreground text-xs"
      value="tab-1"
    >
      Content 1
    </TabsContent>
    <TabsContent
      className="p-4 text-center text-muted-foreground text-xs"
      value="tab-2"
    >
      Content 2
    </TabsContent>
    <TabsContent
      className="p-4 text-center text-muted-foreground text-xs"
      value="tab-3"
    >
      Content 3
    </TabsContent>
  </Tabs>
);

export default Example;

```

## Example: variant-underline

```tsx
import {
  Tabs,
  TabsContent,
  TabsList,
  TabsTrigger,
} from "@/components/ui/tabs";

const Example = () => (
  <Tabs defaultValue="tab-1">
    <TabsList variant="underline">
      <TabsTrigger value="tab-1">Profile</TabsTrigger>
      <TabsTrigger value="tab-2">Settings</TabsTrigger>
      <TabsTrigger value="tab-3">Security</TabsTrigger>
    </TabsList>
    <TabsContent
      className="p-4 text-center text-muted-foreground text-xs"
      value="tab-1"
    >
      Content 1
    </TabsContent>
    <TabsContent
      className="p-4 text-center text-muted-foreground text-xs"
      value="tab-2"
    >
      Content 2
    </TabsContent>
    <TabsContent
      className="p-4 text-center text-muted-foreground text-xs"
      value="tab-3"
    >
      Content 3
    </TabsContent>
  </Tabs>
);

export default Example;

```

## Example: with-icons

```tsx
import { SettingsIcon, ShieldIcon, UserIcon } from "lucide-react";
import {
  Tabs,
  TabsContent,
  TabsList,
  TabsTrigger,
} from "@/components/ui/tabs";

const Example = () => (
  <Tabs defaultValue="tab-1">
    <TabsList>
      <TabsTrigger value="tab-1">
        <UserIcon />
        Profile
      </TabsTrigger>
      <TabsTrigger value="tab-2">
        <SettingsIcon />
        Settings
      </TabsTrigger>
      <TabsTrigger value="tab-3">
        <ShieldIcon />
        Security
      </TabsTrigger>
    </TabsList>
    <TabsContent
      className="p-4 text-center text-muted-foreground text-xs"
      value="tab-1"
    >
      Profile content
    </TabsContent>
    <TabsContent
      className="p-4 text-center text-muted-foreground text-xs"
      value="tab-2"
    >
      Settings content
    </TabsContent>
    <TabsContent
      className="p-4 text-center text-muted-foreground text-xs"
      value="tab-3"
    >
      Security content
    </TabsContent>
  </Tabs>
);

export default Example;

```

# Textarea - Examples and Patterns

Examples for Textarea component.

## Example: autoresize

```tsx
import { Textarea } from "@/components/ui/textarea";

const Example = () => (
  <Textarea
    autoresize
    className="max-w-xs"
    placeholder="Type your message here"
  />
);

export default Example;

```

## Example: controlled

```tsx
"use client";

import React from "react";
import { Field, FieldDescription } from "@/components/ui/field";
import { Textarea } from "@/components/ui/textarea";

const Example = () => {
  const [message, setMessage] = React.useState("");

  return (
    <Field className="flex w-full max-w-xs flex-col gap-3">
      <Textarea
        onChange={({ target }) => setMessage(target.value)}
        placeholder="Type your message here"
        value={message}
      />
      <FieldDescription className="text-right">
        Character count: {message.length}
      </FieldDescription>
    </Field>
  );
};

export default Example;

```

## Example: default

```tsx
import { Textarea } from "@/components/ui/textarea";

const TextareaDemo = () => (
  <Textarea className="max-w-xs" placeholder="Enter your message" />
);

export default TextareaDemo;

```

## Example: disabled

```tsx
import { Field, FieldLabel } from "@/components/ui/field";
import { Textarea } from "@/components/ui/textarea";

const Example = () => (
  <Field className="max-w-xs" disabled>
    <FieldLabel>Feedback</FieldLabel>
    <Textarea placeholder="Type your feedback here" />
  </Field>
);

export default Example;

```

## Example: form

```tsx
"use client";

import React from "react";
import { Button } from "@/components/ui/button";
import {
  Card,
  CardContent,
  CardFooter,
} from "@/components/ui/card";
import {
  Field,
  FieldError,
  FieldLabel,
} from "@/components/ui/field";
import { Textarea } from "@/components/ui/textarea";

const Example = () => {
  const [message, setMessage] = React.useState("");
  const [error, setError] = React.useState<string | null>(null);

  const onSubmit = (e: React.SubmitEvent) => {
    e.preventDefault();

    if (message.trim().length < 10) {
      setError("Message must be at least 10 characters.");
      return;
    }
    setError(null);
  };

  return (
    <Card asChild>
      <form className="w-full max-w-xs" onSubmit={onSubmit}>
        <CardContent>
          <Field invalid={!!error}>
            <FieldLabel>Message</FieldLabel>
            <Textarea
              name="message"
              onChange={(e) => {
                setMessage(e.target.value);
                setError(null);
              }}
              placeholder="Type your message here"
              value={message}
            />
            {error && <FieldError>{error}</FieldError>}
          </Field>
        </CardContent>
        <CardFooter>
          <Field orientation="horizontal" reverse>
            <Button type="submit">Submit</Button>
            <Button
              onClick={() => {
                setMessage("");
                setError(null);
              }}
              variant="outline"
            >
              Clear
            </Button>
          </Field>
        </CardFooter>
      </form>
    </Card>
  );
};

export default Example;

```

## Example: invalid

```tsx
import {
  Field,
  FieldDescription,
  FieldLabel,
} from "@/components/ui/field";
import { Textarea } from "@/components/ui/textarea";

const Example = () => (
  <Field className="max-w-xs" invalid>
    <FieldLabel>Feedback</FieldLabel>
    <Textarea placeholder="Type your feedback here" />
    <FieldDescription>Please provide at least 20 characters.</FieldDescription>
  </Field>
);

export default Example;

```

## Example: with-field

```tsx
import {
  Field,
  FieldDescription,
  FieldLabel,
} from "@/components/ui/field";
import { Textarea } from "@/components/ui/textarea";

const Example = () => (
  <Field className="max-w-xs">
    <FieldLabel>Message</FieldLabel>
    <Textarea placeholder="Type your message..." />
    <FieldDescription>
      Add a short message to include with your submission.
    </FieldDescription>
  </Field>
);

export default Example;

```

# Timer - Examples and Patterns

Examples for Timer component.

## Example: countdown

```tsx
import { PauseIcon, PlayIcon, RotateCcwIcon } from "lucide-react";
import { Button } from "@/components/ui/button";
import {
  Timer,
  TimerActionTrigger,
  TimerArea,
  TimerControl,
  TimerItem,
  TimerSeparator,
} from "@/components/ui/timer";

const Example = () => (
  <Timer countdown startMs={5 * 60 * 1000}>
    <TimerArea>
      <div className="flex flex-col items-center gap-0">
        <TimerItem type="minutes" />
        <span className="text-muted-foreground text-xs">minutes</span>
      </div>
      <TimerSeparator>:</TimerSeparator>
      <div className="flex flex-col items-center gap-0">
        <TimerItem type="seconds" />
        <span className="text-muted-foreground text-xs">seconds</span>
      </div>
    </TimerArea>
    <TimerControl className="flex gap-2">
      <TimerActionTrigger action="start" asChild>
        <Button size="sm" variant="outline">
          <PlayIcon />
          Start
        </Button>
      </TimerActionTrigger>
      <TimerActionTrigger action="pause" asChild>
        <Button size="sm" variant="outline">
          <PauseIcon />
          Pause
        </Button>
      </TimerActionTrigger>
      <TimerActionTrigger action="reset" asChild>
        <Button size="sm" variant="outline">
          <RotateCcwIcon />
          Reset
        </Button>
      </TimerActionTrigger>
    </TimerControl>
  </Timer>
);

export default Example;

```

## Example: default

```tsx
import { PauseIcon, PlayIcon } from "lucide-react";
import { Button } from "@/components/ui/button";
import {
  Timer,
  TimerActionTrigger,
  TimerArea,
  TimerControl,
  TimerItem,
  TimerSeparator,
} from "@/components/ui/timer";

const TimerDemo = () => (
  <Timer startMs={40 * 60 * 1000} targetMs={60 * 60 * 1000}>
    <TimerArea>
      <div className="flex flex-col items-center gap-0">
        <TimerItem type="days" />
        <span className="text-muted-foreground text-xs">days</span>
      </div>
      <TimerSeparator>:</TimerSeparator>
      <div className="flex flex-col items-center gap-0">
        <TimerItem type="hours" />
        <span className="text-muted-foreground text-xs">hours</span>
      </div>
      <TimerSeparator>:</TimerSeparator>
      <div className="flex flex-col items-center gap-0">
        <TimerItem type="minutes" />
        <span className="text-muted-foreground text-xs">minutes</span>
      </div>
      <TimerSeparator>:</TimerSeparator>
      <div className="flex flex-col items-center gap-0">
        <TimerItem type="seconds" />
        <span className="text-muted-foreground text-xs">seconds</span>
      </div>
    </TimerArea>
    <TimerControl className="flex gap-2">
      <TimerActionTrigger action="start" asChild>
        <Button size="sm" variant="outline">
          <PlayIcon />
          Play
        </Button>
      </TimerActionTrigger>
      <TimerActionTrigger action="resume" asChild>
        <Button size="sm" variant="outline">
          <PlayIcon />
          Resume
        </Button>
      </TimerActionTrigger>
      <TimerActionTrigger action="pause" asChild>
        <Button size="sm" variant="outline">
          <PauseIcon />
          Pause
        </Button>
      </TimerActionTrigger>
    </TimerControl>
  </Timer>
);

export default TimerDemo;

```

## Example: events

```tsx
"use client";

import { PlayIcon, RotateCcwIcon } from "lucide-react";
import React from "react";
import { Button } from "@/components/ui/button";
import {
  Timer,
  TimerActionTrigger,
  TimerArea,
  TimerControl,
  TimerItem,
  TimerSeparator,
} from "@/components/ui/timer";

const Example = () => {
  const [ticks, setTicks] = React.useState(0);
  const [completed, setCompleted] = React.useState(false);

  return (
    <Timer
      onComplete={() => setCompleted(true)}
      onTick={() => setTicks((t) => t + 1)}
      targetMs={60 * 1000}
    >
      <TimerArea>
        <div className="flex flex-col items-center gap-0">
          <TimerItem type="minutes" />
          <span className="text-muted-foreground text-xs">minutes</span>
        </div>
        <TimerSeparator>:</TimerSeparator>
        <div className="flex flex-col items-center gap-0">
          <TimerItem type="seconds" />
          <span className="text-muted-foreground text-xs">seconds</span>
        </div>
      </TimerArea>
      <TimerControl className="flex flex-col gap-2">
        <div className="flex gap-2">
          <TimerActionTrigger action="start" asChild>
            <Button size="sm" variant="outline">
              <PlayIcon />
              Start
            </Button>
          </TimerActionTrigger>
          <TimerActionTrigger action="reset" asChild>
            <Button size="sm" variant="outline">
              <RotateCcwIcon />
              Reset
            </Button>
          </TimerActionTrigger>
        </div>
        <output className="text-muted-foreground text-sm">
          Ticks: {ticks}
          {completed ? " — Completed!" : ""}
        </output>
      </TimerControl>
    </Timer>
  );
};

export default Example;

```

## Example: interval

```tsx
import { PauseIcon, PlayIcon, RotateCcwIcon } from "lucide-react";
import { Button } from "@/components/ui/button";
import {
  Timer,
  TimerActionTrigger,
  TimerArea,
  TimerControl,
  TimerItem,
  TimerSeparator,
} from "@/components/ui/timer";

const Example = () => (
  <Timer interval={100} targetMs={60 * 1000}>
    <TimerArea>
      <div className="flex flex-col items-center gap-0">
        <TimerItem type="seconds" />
        <span className="text-muted-foreground text-xs">seconds</span>
      </div>
      <TimerSeparator>.</TimerSeparator>
      <div className="flex flex-col items-center gap-0">
        <TimerItem type="milliseconds" />
        <span className="text-muted-foreground text-xs">ms</span>
      </div>
    </TimerArea>
    <TimerControl className="flex gap-2">
      <TimerActionTrigger action="start" asChild>
        <Button size="sm" variant="outline">
          <PlayIcon />
          Start
        </Button>
      </TimerActionTrigger>
      <TimerActionTrigger action="pause" asChild>
        <Button size="sm" variant="outline">
          <PauseIcon />
          Pause
        </Button>
      </TimerActionTrigger>
      <TimerActionTrigger action="reset" asChild>
        <Button size="sm" variant="outline">
          <RotateCcwIcon />
          Reset
        </Button>
      </TimerActionTrigger>
    </TimerControl>
  </Timer>
);

export default Example;

```

## Example: pomodoro

```tsx
"use client";

import { PauseIcon, PlayIcon, RotateCcwIcon } from "lucide-react";
import React from "react";
import { Button } from "@/components/ui/button";
import {
  Timer,
  TimerActionTrigger,
  TimerArea,
  TimerControl,
  TimerItem,
  TimerSeparator,
} from "@/components/ui/timer";

const Example = () => {
  const [isWorking, setIsWorking] = React.useState(true);
  const [cycles, setCycles] = React.useState(0);

  const handleComplete = () => {
    setIsWorking(!isWorking);
    if (!isWorking) {
      setCycles((c) => c + 1);
    }
  };

  return (
    <Timer
      countdown
      onComplete={handleComplete}
      startMs={isWorking ? 25 * 60 * 1000 : 5 * 60 * 1000}
    >
      <h2 className="font-semibold text-lg">
        {isWorking ? "Work Session" : "Break Session"}
      </h2>
      <TimerArea>
        <div className="flex flex-col items-center gap-0">
          <TimerItem type="minutes" />
          <span className="text-muted-foreground text-xs">minutes</span>
        </div>
        <TimerSeparator>:</TimerSeparator>
        <div className="flex flex-col items-center gap-0">
          <TimerItem type="seconds" />
          <span className="text-muted-foreground text-xs">seconds</span>
        </div>
      </TimerArea>
      <TimerControl className="flex flex-col gap-2">
        <div className="flex gap-2">
          <TimerActionTrigger action="start" asChild>
            <Button size="sm" variant="outline">
              <PlayIcon />
              Start
            </Button>
          </TimerActionTrigger>
          <TimerActionTrigger action="pause" asChild>
            <Button size="sm" variant="outline">
              <PauseIcon />
              Pause
            </Button>
          </TimerActionTrigger>
          <TimerActionTrigger action="reset" asChild>
            <Button size="sm" variant="outline">
              <RotateCcwIcon />
              Reset
            </Button>
          </TimerActionTrigger>
        </div>
        <output className="text-muted-foreground text-sm">
          Completed cycles: {cycles}
        </output>
      </TimerControl>
    </Timer>
  );
};

export default Example;

```

# Toast - Examples and Patterns

Examples for Toast component.

## Example: action

```tsx
"use client";

import { Button } from "@/components/ui/button";
import { toast } from "@/components/ui/toast";

const Example = () => {
  const handleAction = () => {
    const id = toast.create({
      id: "action-performed",
      title: "User has been deleted.",
      description: "You can restore the user.",
      type: "error",
      action: {
        label: "Undo",
        onClick() {
          toast.dismiss(id);
          toast.success({
            id: "action-undone",
            title: "User has been restored.",
            type: "success",
          });
        },
      },
    });
  };

  return (
    <Button onClick={handleAction} variant="outline">
      Toast
    </Button>
  );
};

export default Example;

```

## Example: closable

```tsx
"use client";

import { Button } from "@/components/ui/button";
import { toast } from "@/components/ui/toast";

const Example = () => {
  return (
    <div className="flex flex-wrap gap-2">
      <Button
        onClick={() =>
          toast.create({
            title: "Event has been created.",
            description: "Tuesday, February 10, 2026 at 10:00 AM.",
            closable: true,
          })
        }
        variant="outline"
      >
        Toast
      </Button>
    </div>
  );
};

export default Example;

```

## Example: dedupe

```tsx
"use client";

import { Button } from "@/components/ui/button";
import { toast } from "@/components/ui/toast";

const Example = () => (
  <div className="flex gap-2">
    <Button
      onClick={() =>
        toast.create({
          id: "dedupe-on",
          title: "Heads up!",
          description: "This is a toast with id.",
        })
      }
      variant="outline"
    >
      Toast with id
    </Button>
    <Button
      onClick={() =>
        toast.create({
          title: "Heads up!",
          description: "This is a toast without id.",
        })
      }
      variant="outline"
    >
      Toast without id
    </Button>
  </div>
);

export default Example;

```

## Example: default

```tsx
"use client";

import { Button } from "@/components/ui/button";
import { toast } from "@/components/ui/toast";

const ToastDemo = () => {
  return (
    <Button
      onClick={() => {
        toast.create({
          title: "Event has been created.",
          description: "Tuesday, February 10, 2026 at 10:00 AM.",
        });
      }}
      variant="outline"
    >
      Toast
    </Button>
  );
};

export default ToastDemo;

```

## Example: duration

```tsx
"use client";

import { Button } from "@/components/ui/button";
import { toast } from "@/components/ui/toast";

const Example = () => {
  return (
    <div className="flex flex-wrap gap-2">
      <Button
        onClick={() =>
          toast.create({
            title: "Short duration.",
            description: "This toast disappears after 2 seconds.",
            duration: 2000,
          })
        }
        variant="outline"
      >
        2 seconds
      </Button>
      <Button
        onClick={() =>
          toast.create({
            title: "Long duration.",
            description: "This toast stays for 10 seconds.",
            duration: 10_000,
          })
        }
        variant="outline"
      >
        10 seconds
      </Button>
      <Button
        onClick={() =>
          toast.create({
            title: "Persistent.",
            description: "This toast stays until you close it.",
            duration: Number.POSITIVE_INFINITY,
            closable: true,
          })
        }
        variant="outline"
      >
        Until dismissed
      </Button>
    </div>
  );
};

export default Example;

```

## Example: placement

```tsx
"use client";

import { createToaster } from "@ark-ui/react/toast";
import { Button } from "@/components/ui/button";
import { Toaster } from "@/components/ui/toast";

const topStartToaster = createToaster({
  placement: "top-start",
  overlap: true,
});

const topToaster = createToaster({
  placement: "top",
  overlap: true,
});

const topEndToaster = createToaster({
  placement: "top-end",
  overlap: true,
});

const bottomStartToaster = createToaster({
  placement: "bottom-start",
  overlap: true,
});

const bottomToaster = createToaster({
  placement: "bottom",
  overlap: true,
});

const bottomEndToaster = createToaster({
  placement: "bottom-end",
  overlap: true,
});

const Example = () => (
  <>
    <Toaster toaster={topStartToaster} />
    <Toaster toaster={topToaster} />
    <Toaster toaster={topEndToaster} />
    <Toaster toaster={bottomStartToaster} />
    <Toaster toaster={bottomToaster} />
    <Toaster toaster={bottomEndToaster} />

    <div className="flex flex-col items-center justify-center gap-4">
      <div className="flex flex-wrap gap-2">
        <Button
          onClick={() =>
            topStartToaster.create({
              title: "Top start",
              description: "placement: top-start",
            })
          }
          variant="outline"
        >
          Top start
        </Button>
        <Button
          onClick={() =>
            topToaster.create({
              title: "Top end",
              description: "placement: top-end",
            })
          }
          variant="outline"
        >
          Top center
        </Button>
        <Button
          onClick={() =>
            topEndToaster.create({
              title: "Top end",
              description: "placement: top-end",
            })
          }
          variant="outline"
        >
          Top end
        </Button>
      </div>

      <div className="flex flex-wrap gap-2">
        <Button
          onClick={() =>
            bottomStartToaster.create({
              title: "Bottom start",
              description: "placement: bottom-start",
            })
          }
          variant="outline"
        >
          Bottom start
        </Button>
        <Button
          onClick={() =>
            bottomToaster.create({
              title: "Bottom end",
              description: "placement: bottom-end",
            })
          }
          variant="outline"
        >
          Bottom center
        </Button>
        <Button
          onClick={() =>
            bottomEndToaster.create({
              title: "Bottom end",
              description: "placement: bottom-end",
            })
          }
          variant="outline"
        >
          Bottom end
        </Button>
      </div>
    </div>
  </>
);

export default Example;

```

## Example: promise

```tsx
"use client";

import { Button } from "@/components/ui/button";
import { toast } from "@/components/ui/toast";

const Example = () => {
  return (
    <Button
      onClick={() => {
        toast.promise<{ name: string }>(
          () =>
            new Promise((resolve) =>
              setTimeout(() => resolve({ name: "Event" }), 2000)
            ),
          {
            loading: {
              title: "Generating event...",
              description: "Please wait while we generate the event.",
            },
            success: (data) => ({
              title: "Event generated!",
              description: `${data.name} has been created`,
            }),
            error: {
              title: "Error generating event",
              description: "Something went wrong.",
            },
          }
        );
      }}
      variant="outline"
    >
      Run Promise
    </Button>
  );
};

export default Example;

```

## Example: variants

```tsx
"use client";

import { Button } from "@/components/ui/button";
import { toast } from "@/components/ui/toast";

const Example = () => {
  return (
    <div className="flex flex-wrap gap-2">
      <Button
        onClick={() =>
          toast.success({
            title: "Success!",
            description: "Event has been created.",
          })
        }
        variant="outline"
      >
        Success
      </Button>
      <Button
        onClick={() =>
          toast.error({
            title: "Something went wrong.",
            description: "Event has not been created.",
          })
        }
        variant="outline"
      >
        Error
      </Button>
      <Button
        onClick={() =>
          toast.warning({
            title: "Warning!",
            description: "Your session will expire soon.",
          })
        }
        variant="outline"
      >
        Warning
      </Button>
      <Button
        onClick={() =>
          toast.info({
            title: "Heads up!",
            description: "You have a new event.",
          })
        }
        variant="outline"
      >
        Info
      </Button>
    </div>
  );
};

export default Example;

```

# Toggle - Examples and Patterns

Examples for Toggle component.

## Example: controlled

```tsx
"use client";

import React from "react";
import { Toggle } from "@/components/ui/toggle";

const Example = () => {
  const [pressed, setPressed] = React.useState(false);

  return (
    <div className="flex flex-col items-center gap-4">
      <Toggle onPressedChange={setPressed} pressed={pressed} variant="outline">
        Toggle
      </Toggle>
      <p className="text-muted-foreground text-sm">{pressed ? "✅" : "❌"}</p>
    </div>
  );
};

export default Example;

```

## Example: default

```tsx
import { Toggle } from "@/components/ui/toggle";

const ToggleDemo = () => <Toggle>Toggle</Toggle>;

export default ToggleDemo;

```

## Example: disabled

```tsx
import { Toggle } from "@/components/ui/toggle";

const Example = () => (
  <Toggle disabled variant="outline">
    Disabled
  </Toggle>
);

export default Example;

```

## Example: icon-group

```tsx
import { BoldIcon, ItalicIcon, UnderlineIcon } from "lucide-react";
import { Toggle } from "@/components/ui/toggle";

const Example = () => (
  <div className="flex items-center gap-1">
    <Toggle aria-label="Toggle bold" variant="outline">
      <BoldIcon />
    </Toggle>
    <Toggle aria-label="Toggle italic" variant="outline">
      <ItalicIcon />
    </Toggle>
    <Toggle aria-label="Toggle underline" variant="outline">
      <UnderlineIcon />
    </Toggle>
  </div>
);

export default Example;

```

## Example: outline

```tsx
import { Toggle } from "@/components/ui/toggle";

const Example = () => <Toggle variant="outline">Toggle</Toggle>;

export default Example;

```

## Example: size-lg

```tsx
import { Toggle } from "@/components/ui/toggle";

const Example = () => (
  <Toggle size="lg" variant="outline">
    Large
  </Toggle>
);

export default Example;

```

## Example: size-md

```tsx
import { Toggle } from "@/components/ui/toggle";

const Example = () => (
  <Toggle size="md" variant="outline">
    Medium
  </Toggle>
);

export default Example;

```

## Example: size-sm

```tsx
import { Toggle } from "@/components/ui/toggle";

const Example = () => (
  <Toggle size="sm" variant="outline">
    Small
  </Toggle>
);

export default Example;

```

## Example: with-icon

```tsx
import { BoldIcon } from "lucide-react";
import { Toggle } from "@/components/ui/toggle";

const Example = () => (
  <Toggle aria-label="Toggle bold" variant="outline">
    <BoldIcon />
  </Toggle>
);

export default Example;

```

# Toggle Group - Examples and Patterns

Examples for Toggle Group component.

## Example: custom

```tsx
"use client";

import React from "react";
import { cn } from "@/lib/utils";
import {
  ToggleGroup,
  ToggleGroupItem,
} from "@/components/ui/toggle-group";

const FONT_WEIGHTS = [
  { value: "light", label: "Light", className: "font-light" },
  { value: "normal", label: "Normal", className: "font-normal" },
  { value: "medium", label: "Medium", className: "font-medium" },
  { value: "bold", label: "Bold", className: "font-bold" },
] as const;

const Example = () => {
  const [value, setValue] = React.useState<string[]>(["normal"]);

  return (
    <div className="flex flex-col gap-4">
      <div className="flex flex-col gap-2">
        <span className="font-medium text-sm">Font Weight</span>
        <ToggleGroup
          className="flex-wrap"
          multiple={false}
          onValueChange={(e) => setValue(e.value)}
          size="lg"
          spacing={2}
          value={value}
          variant="outline"
        >
          {FONT_WEIGHTS.map((weight) => (
            <ToggleGroupItem
              aria-label={`Set font weight to ${weight.label}`}
              className="size-16 flex-col gap-1 py-2"
              key={weight.value}
              value={weight.value}
            >
              <span className={cn("text-lg", weight.className)}>Aa</span>
              <span className="text-muted-foreground text-xs">
                {weight.label}
              </span>
            </ToggleGroupItem>
          ))}
        </ToggleGroup>
      </div>
    </div>
  );
};

export default Example;

```

## Example: default

```tsx
import { BoldIcon, ItalicIcon, UnderlineIcon } from "lucide-react";
import {
  ToggleGroup,
  ToggleGroupItem,
} from "@/components/ui/toggle-group";

const ToggleGroupDemo = () => (
  <ToggleGroup defaultValue={["bold"]} multiple>
    <ToggleGroupItem aria-label="Toggle bold" value="bold">
      <BoldIcon />
    </ToggleGroupItem>
    <ToggleGroupItem aria-label="Toggle italic" value="italic">
      <ItalicIcon />
    </ToggleGroupItem>
    <ToggleGroupItem aria-label="Toggle underline" value="underline">
      <UnderlineIcon />
    </ToggleGroupItem>
  </ToggleGroup>
);

export default ToggleGroupDemo;

```

## Example: disabled-item

```tsx
import { BoldIcon, ItalicIcon, UnderlineIcon } from "lucide-react";
import {
  ToggleGroup,
  ToggleGroupItem,
} from "@/components/ui/toggle-group";

const Example = () => (
  <ToggleGroup defaultValue={["bold"]} multiple>
    <ToggleGroupItem aria-label="Toggle bold" value="bold">
      <BoldIcon />
    </ToggleGroupItem>
    <ToggleGroupItem aria-label="Toggle italic" disabled value="italic">
      <ItalicIcon />
    </ToggleGroupItem>
    <ToggleGroupItem aria-label="Toggle underline" value="underline">
      <UnderlineIcon />
    </ToggleGroupItem>
  </ToggleGroup>
);

export default Example;

```

## Example: disabled

```tsx
import { Bold, Italic, Underline } from "lucide-react";
import {
  ToggleGroup,
  ToggleGroupItem,
} from "@/components/ui/toggle-group";

const Example = () => (
  <ToggleGroup defaultValue={["bold"]} disabled multiple>
    <ToggleGroupItem aria-label="Toggle bold" value="bold">
      <Bold />
    </ToggleGroupItem>
    <ToggleGroupItem aria-label="Toggle italic" value="italic">
      <Italic />
    </ToggleGroupItem>
    <ToggleGroupItem aria-label="Toggle underline" value="underline">
      <Underline />
    </ToggleGroupItem>
  </ToggleGroup>
);

export default Example;

```

## Example: ghost

```tsx
import { BoldIcon, ItalicIcon, UnderlineIcon } from "lucide-react";
import {
  ToggleGroup,
  ToggleGroupItem,
} from "@/components/ui/toggle-group";

const Example = () => (
  <ToggleGroup defaultValue={["bold"]} multiple variant="ghost">
    <ToggleGroupItem aria-label="Toggle bold" value="bold">
      <BoldIcon />
    </ToggleGroupItem>
    <ToggleGroupItem aria-label="Toggle italic" value="italic">
      <ItalicIcon />
    </ToggleGroupItem>
    <ToggleGroupItem aria-label="Toggle underline" value="underline">
      <UnderlineIcon />
    </ToggleGroupItem>
  </ToggleGroup>
);

export default Example;

```

## Example: horizontal

```tsx
import { BoldIcon, ItalicIcon, UnderlineIcon } from "lucide-react";
import {
  ToggleGroup,
  ToggleGroupItem,
} from "@/components/ui/toggle-group";

const Example = () => (
  <ToggleGroup
    defaultValue={["bold"]}
    orientation="horizontal"
    variant="outline"
  >
    <ToggleGroupItem aria-label="Toggle bold" value="bold">
      <BoldIcon />
    </ToggleGroupItem>
    <ToggleGroupItem aria-label="Toggle italic" value="italic">
      <ItalicIcon />
    </ToggleGroupItem>
    <ToggleGroupItem aria-label="Toggle underline" value="underline">
      <UnderlineIcon />
    </ToggleGroupItem>
  </ToggleGroup>
);

export default Example;

```

## Example: outline

```tsx
import { BoldIcon, ItalicIcon, UnderlineIcon } from "lucide-react";
import {
  ToggleGroup,
  ToggleGroupItem,
} from "@/components/ui/toggle-group";

const Example = () => (
  <ToggleGroup defaultValue={["bold"]} multiple variant="outline">
    <ToggleGroupItem aria-label="Toggle bold" value="bold">
      <BoldIcon />
    </ToggleGroupItem>
    <ToggleGroupItem aria-label="Toggle italic" value="italic">
      <ItalicIcon />
    </ToggleGroupItem>
    <ToggleGroupItem aria-label="Toggle underline" value="underline">
      <UnderlineIcon />
    </ToggleGroupItem>
  </ToggleGroup>
);

export default Example;

```

## Example: single

```tsx
import { BoldIcon, ItalicIcon, UnderlineIcon } from "lucide-react";
import {
  ToggleGroup,
  ToggleGroupItem,
} from "@/components/ui/toggle-group";

const Example = () => (
  <ToggleGroup defaultValue={["bold"]} multiple={false}>
    <ToggleGroupItem aria-label="Toggle bold" value="bold">
      <BoldIcon />
    </ToggleGroupItem>
    <ToggleGroupItem aria-label="Toggle italic" value="italic">
      <ItalicIcon />
    </ToggleGroupItem>
    <ToggleGroupItem aria-label="Toggle underline" value="underline">
      <UnderlineIcon />
    </ToggleGroupItem>
  </ToggleGroup>
);

export default Example;

```

## Example: size-lg

```tsx
import { BoldIcon, ItalicIcon, UnderlineIcon } from "lucide-react";
import {
  ToggleGroup,
  ToggleGroupItem,
} from "@/components/ui/toggle-group";

const Example = () => (
  <ToggleGroup defaultValue={["bold"]} multiple size="lg">
    <ToggleGroupItem aria-label="Toggle bold" value="bold">
      <BoldIcon />
    </ToggleGroupItem>
    <ToggleGroupItem aria-label="Toggle italic" value="italic">
      <ItalicIcon />
    </ToggleGroupItem>
    <ToggleGroupItem aria-label="Toggle underline" value="underline">
      <UnderlineIcon />
    </ToggleGroupItem>
  </ToggleGroup>
);

export default Example;

```

## Example: size-sm

```tsx
import { BoldIcon, ItalicIcon, UnderlineIcon } from "lucide-react";
import {
  ToggleGroup,
  ToggleGroupItem,
} from "@/components/ui/toggle-group";

const Example = () => (
  <ToggleGroup defaultValue={["bold"]} multiple size="sm">
    <ToggleGroupItem aria-label="Toggle bold" value="bold">
      <BoldIcon />
    </ToggleGroupItem>
    <ToggleGroupItem aria-label="Toggle italic" value="italic">
      <ItalicIcon />
    </ToggleGroupItem>
    <ToggleGroupItem aria-label="Toggle underline" value="underline">
      <UnderlineIcon />
    </ToggleGroupItem>
  </ToggleGroup>
);

export default Example;

```

## Example: spacing

```tsx
import { BoldIcon, ItalicIcon, UnderlineIcon } from "lucide-react";
import {
  ToggleGroup,
  ToggleGroupItem,
} from "@/components/ui/toggle-group";

const Example = () => (
  <ToggleGroup defaultValue={["italic"]} multiple spacing={2} variant="outline">
    <ToggleGroupItem aria-label="Toggle bold" value="bold">
      <BoldIcon />
    </ToggleGroupItem>
    <ToggleGroupItem aria-label="Toggle italic" value="italic">
      <ItalicIcon />
    </ToggleGroupItem>
    <ToggleGroupItem aria-label="Toggle underline" value="underline">
      <UnderlineIcon />
    </ToggleGroupItem>
  </ToggleGroup>
);

export default Example;

```

## Example: vertical

```tsx
import { BoldIcon, ItalicIcon, UnderlineIcon } from "lucide-react";
import {
  ToggleGroup,
  ToggleGroupItem,
} from "@/components/ui/toggle-group";

const Example = () => (
  <ToggleGroup defaultValue={["bold"]} orientation="vertical" variant="outline">
    <ToggleGroupItem aria-label="Toggle bold" value="bold">
      <BoldIcon />
    </ToggleGroupItem>
    <ToggleGroupItem aria-label="Toggle italic" value="italic">
      <ItalicIcon />
    </ToggleGroupItem>
    <ToggleGroupItem aria-label="Toggle underline" value="underline">
      <UnderlineIcon />
    </ToggleGroupItem>
  </ToggleGroup>
);

export default Example;

```

# Toggle Tooltip - Examples and Patterns

Examples for Toggle Tooltip component.

## Example: default

```tsx
import { InfoIcon } from "lucide-react";
import { Button } from "@/components/ui/button";
import {
  ToggleTooltip,
  ToggleTooltipContent,
  ToggleTooltipTrigger,
} from "@/components/ui/toggle-tooltip";

const Example = () => (
  <ToggleTooltip>
    <ToggleTooltipTrigger asChild>
      <Button aria-label="More information" size="icon-md" variant="outline">
        <InfoIcon />
      </Button>
    </ToggleTooltipTrigger>
    <ToggleTooltipContent className="max-w-52">
      Hover or click to see this content. Works on touch devices too.
    </ToggleTooltipContent>
  </ToggleTooltip>
);

export default Example;

```

## Example: info-icon

```tsx
import { InfoIcon } from "lucide-react";
import { Button } from "@/components/ui/button";
import {
  DataList,
  DataListItem,
  DataListItemLabel,
  DataListItemValue,
} from "@/components/ui/data-list";
import {
  ToggleTooltip,
  ToggleTooltipContent,
  ToggleTooltipTrigger,
} from "@/components/ui/toggle-tooltip";

const Example = () => (
  <DataList>
    {data.map((item) => (
      <DataListItem key={item.label}>
        <DataListItemLabel className="inline-flex items-center gap-1.5">
          {item.label}
          <ToggleTooltip>
            <ToggleTooltipTrigger asChild>
              <Button aria-label={`Info about ${item.label}`} variant="outline">
                <InfoIcon />
              </Button>
            </ToggleTooltipTrigger>
            <ToggleTooltipContent>{item.info}</ToggleTooltipContent>
          </ToggleTooltip>
        </DataListItemLabel>
        <DataListItemValue>{item.value}</DataListItemValue>
      </DataListItem>
    ))}
  </DataList>
);

const data = [
  {
    label: "New Users",
    value: "234",
    info: "Total new user signups this month",
  },
  { label: "Sales", value: "£12,340", info: "Revenue from product sales" },
  {
    label: "Revenue",
    value: "3,450",
    info: "Total revenue in the last quarter",
  },
];

export default Example;

```

## Example: side

```tsx
import { Button } from "@/components/ui/button";
import {
  ToggleTooltip,
  ToggleTooltipContent,
  ToggleTooltipTrigger,
} from "@/components/ui/toggle-tooltip";

const placements = ["left", "top", "bottom", "right"] as const;

const Example = () => (
  <div className="flex flex-wrap items-center justify-center gap-4">
    {placements.map((placement) => (
      <ToggleTooltip key={placement} positioning={{ placement }}>
        <ToggleTooltipTrigger asChild>
          <Button className="capitalize" variant="outline">
            {placement}
          </Button>
        </ToggleTooltipTrigger>
        <ToggleTooltipContent>Info on {placement}</ToggleTooltipContent>
      </ToggleTooltip>
    ))}
  </div>
);

export default Example;

```

## Example: with-link

```tsx
import { InfoIcon } from "lucide-react";
import { Button } from "@/components/ui/button";
import {
  ToggleTooltip,
  ToggleTooltipContent,
  ToggleTooltipTrigger,
} from "@/components/ui/toggle-tooltip";

const Example = () => (
  <ToggleTooltip>
    <ToggleTooltipTrigger asChild>
      <Button aria-label="Learn more about this feature" variant="outline">
        <InfoIcon />
      </Button>
    </ToggleTooltipTrigger>
    <ToggleTooltipContent>
      This is a popover, so it can contain interactive content like{" "}
      <a
        className="underline underline-offset-2"
        href="https://ark-ui.com"
        rel="noopener"
        target="_blank"
      >
        this link
      </a>
      .
    </ToggleTooltipContent>
  </ToggleTooltip>
);

export default Example;

```

# Tooltip - Examples and Patterns

Examples for Tooltip component.

## Example: default

```tsx
import {
  BoldIcon,
  ItalicIcon,
  StrikethroughIcon,
  UnderlineIcon,
} from "lucide-react";
import { Button } from "@/components/ui/button";
import { ButtonGroup } from "@/components/ui/button-group";
import {
  Tooltip,
  TooltipContent,
  TooltipTrigger,
} from "@/components/ui/tooltip";

const TooltipDemo = () => (
  <ButtonGroup>
    <Tooltip>
      <TooltipTrigger asChild>
        <Button clickEffect={false} size="icon-md" variant="outline">
          <BoldIcon />
        </Button>
      </TooltipTrigger>
      <TooltipContent>Bold</TooltipContent>
    </Tooltip>

    <Tooltip>
      <TooltipTrigger asChild>
        <Button clickEffect={false} size="icon-md" variant="outline">
          <ItalicIcon />
        </Button>
      </TooltipTrigger>
      <TooltipContent>Italic</TooltipContent>
    </Tooltip>

    <Tooltip>
      <TooltipTrigger asChild>
        <Button clickEffect={false} size="icon-md" variant="outline">
          <UnderlineIcon />
        </Button>
      </TooltipTrigger>
      <TooltipContent>Underline</TooltipContent>
    </Tooltip>

    <Tooltip>
      <TooltipTrigger asChild>
        <Button clickEffect={false} size="icon-md" variant="outline">
          <StrikethroughIcon />
        </Button>
      </TooltipTrigger>
      <TooltipContent>Strikethrough</TooltipContent>
    </Tooltip>
  </ButtonGroup>
);

export default TooltipDemo;

```

## Example: disabled-button

```tsx
import { Button } from "@/components/ui/button";
import {
  Tooltip,
  TooltipContent,
  TooltipTrigger,
} from "@/components/ui/tooltip";

const Example = () => (
  <Tooltip>
    <TooltipTrigger asChild>
      <span>
        <Button disabled variant="outline">
          Disabled
        </Button>
      </span>
    </TooltipTrigger>
    <TooltipContent>
      <p>You can still show a tooltip on a disabled element</p>
    </TooltipContent>
  </Tooltip>
);

export default Example;

```

## Example: side

```tsx
import { Button } from "@/components/ui/button";
import {
  Tooltip,
  TooltipContent,
  TooltipTrigger,
} from "@/components/ui/tooltip";

const placements = ["left", "top", "bottom", "right"] as const;

const Example = () => (
  <div className="flex flex-wrap items-center justify-center gap-4">
    {placements.map((placement) => (
      <Tooltip key={placement} positioning={{ placement }}>
        <TooltipTrigger asChild>
          <Button className="capitalize" variant="outline">
            {placement}
          </Button>
        </TooltipTrigger>
        <TooltipContent>
          <p>Add to library</p>
        </TooltipContent>
      </Tooltip>
    ))}
  </div>
);

export default Example;

```

## Example: with-keyboard-shortcut

```tsx
import { Button } from "@/components/ui/button";
import { Kbd, KbdGroup } from "@/components/ui/kbd";
import {
  Tooltip,
  TooltipContent,
  TooltipTrigger,
} from "@/components/ui/tooltip";

const Example = () => (
  <Tooltip>
    <TooltipTrigger asChild>
      <Button variant="outline">Add to library</Button>
    </TooltipTrigger>
    <TooltipContent className="flex items-center gap-2">
      <p>Add to library</p>
      <KbdGroup className="ml-1.5 inline">
        <Kbd>⌘</Kbd>
        <Kbd>K</Kbd>
      </KbdGroup>
    </TooltipContent>
  </Tooltip>
);

export default Example;

```

# Tour - Examples and Patterns

Examples for Tour component.

## Example: async

```tsx
"use client";

import { Button } from "@/components/ui/button";
import {
  Tour,
  TourActions,
  TourContent,
  TourDescription,
  TourHeader,
  TourProgressText,
  type TourStepType,
  TourTitle,
  TourTrigger,
} from "@/components/ui/tour";

const steps: TourStepType[] = [
  {
    id: "intro",
    type: "dialog",
    title: "Async Data Loading",
    description: "This tour demonstrates loading data before showing a step.",
    actions: [{ label: "Next", action: "next" }],
  },
  {
    id: "user-info",
    type: "tooltip",
    title: "Loading...",
    description: "Fetching user data...",
    target: () => document.querySelector<HTMLElement>("#user-card"),
    actions: [
      { label: "Back", action: "prev" },
      { label: "Next", action: "next" },
    ],
    effect({ show, update }) {
      const controller = new AbortController();

      fetch("https://api.github.com/users/segunadebayo", {
        signal: controller.signal,
      })
        .then((res) => res.json())
        .then((data) => {
          update({
            title: `Welcome, ${data.name ?? data.login}!`,
            description: `You have ${data.public_repos} public repositories and ${data.followers} followers.`,
          });
          show();
        })
        .catch(() => {
          update({
            title: "User Profile",
            description: "Could not load user data. Please try again.",
          });
          show();
        });

      return () => controller.abort();
    },
  },
  {
    id: "complete",
    type: "dialog",
    title: "Tour Complete",
    description:
      "The async step loaded data from the GitHub API before displaying.",
    actions: [{ label: "Done", action: "dismiss" }],
  },
];

const Example = () => (
  <div className="flex flex-col gap-4">
    <Tour steps={steps}>
      <TourTrigger asChild>
        <Button variant="outline">Start Tour</Button>
      </TourTrigger>

      <div
        className="flex items-center justify-center rounded-lg border border-border bg-muted px-8 py-4 font-medium text-sm"
        id="user-card"
      >
        User Profile Card
      </div>

      <TourContent>
        <TourHeader>
          <TourProgressText />
          <TourTitle />
          <TourDescription />
        </TourHeader>

        <TourActions />
      </TourContent>
    </Tour>
  </div>
);

export default Example;

```

## Example: custom-spacing

```tsx
"use client";

import { Button } from "@/components/ui/button";
import {
  Tour,
  TourContent,
  TourDescription,
  TourFooter,
  TourHeader,
  TourNextStep,
  TourPreviousStep,
  TourProgressText,
  type TourStepType,
  TourTitle,
  TourTrigger,
} from "@/components/ui/tour";

const steps: TourStepType[] = [
  {
    id: "step-1",
    type: "dialog",
    title: "Custom spacing",
    description:
      "`TourContent` uses `[--space:--spacing(2)]` here for tighter padding than the default.",
    actions: [{ label: "Next", action: "next" as const }],
  },
  {
    id: "step-2",
    type: "dialog",
    title: "Breakpoint utilities",
    description:
      "You can pair `[--space]` with responsive variants, e.g. `md:[--space:--spacing(6)]`.",
    actions: [{ label: "Done", action: "dismiss" as const }],
  },
];

const Example = () => (
  <Tour steps={steps}>
    <TourTrigger asChild>
      <Button variant="outline">Open</Button>
    </TourTrigger>
    <TourContent className="max-w-md [--space:--spacing(2)]">
      <TourHeader>
        <TourProgressText />
        <TourTitle />
        <TourDescription />
      </TourHeader>
      <TourFooter>
        <TourPreviousStep />
        <TourNextStep />
      </TourFooter>
    </TourContent>
  </Tour>
);

export default Example;

```

## Example: default

```tsx
"use client";

import { Button } from "@/components/ui/button";
import {
  Tour,
  TourContent,
  TourDescription,
  TourFooter,
  TourHeader,
  TourNextStep,
  TourPreviousStep,
  TourProgressText,
  type TourStepType,
  TourTitle,
  TourTrigger,
} from "@/components/ui/tour";

const TourDemo = () => (
  <Tour steps={steps}>
    <TourTrigger asChild>
      <Button variant="outline">Open</Button>
    </TourTrigger>
    <TourContent>
      <TourHeader>
        <TourProgressText />
        <TourTitle />
        <TourDescription />
      </TourHeader>
      <TourFooter>
        <TourPreviousStep />
        <TourNextStep />
      </TourFooter>
    </TourContent>
  </Tour>
);

const steps: TourStepType[] = [
  {
    id: "step-1",
    type: "dialog",
    title: "Welcome to the tour",
    description: "You gonna learn how to use to install and use the component.",
    actions: [{ label: "Start Tour", action: "next" as const }],
  },
  {
    id: "step-2",
    type: "tooltip",
    target: () => document.querySelector("#installation"),
    title: "Installation Step",
    description:
      "Let's take a quick tour of the documentation site to help you get started。",
    actions: [
      { label: "Previous", action: "prev" as const },
      { label: "Next", action: "next" as const },
    ],
  },
  {
    id: "step-3",
    type: "tooltip",
    target: () => document.querySelector("#usage"),
    title: "Usage Step",
    description: "This is how to use the component.",
    actions: [
      { label: "Previous", action: "prev" as const },
      { label: "Next", action: "next" as const },
    ],
  },
  {
    id: "step-4",
    type: "dialog",
    title: "That's all folks!",
    description: "You've completed the tour. Thank you for your time!",
    actions: [{ label: "Finish Tour", action: "dismiss" as const }],
  },
];

export default TourDemo;

```

## Example: events

```tsx
"use client";

import React from "react";
import { Button } from "@/components/ui/button";
import {
  Tour,
  TourActions,
  TourContent,
  TourDescription,
  TourFooter,
  TourHeader,
  TourProgressText,
  type TourStepType,
  TourTitle,
  TourTrigger,
} from "@/components/ui/tour";

const steps: TourStepType[] = [
  {
    id: "step-1",
    type: "tooltip",
    title: "First Step",
    description: "Watch the event log below as you navigate.",
    target: () => document.querySelector<HTMLElement>("#event-1"),
    actions: [{ label: "Next", action: "next" }],
  },
  {
    id: "step-2",
    type: "tooltip",
    title: "Second Step",
    description: "Each step change triggers an event.",
    target: () => document.querySelector<HTMLElement>("#event-2"),
    actions: [
      { label: "Back", action: "prev" },
      { label: "Next", action: "next" },
    ],
  },
  {
    id: "step-3",
    type: "tooltip",
    title: "Final Step",
    description: "Complete the tour to see the status change.",
    target: () => document.querySelector<HTMLElement>("#event-3"),
    actions: [
      { label: "Back", action: "prev" },
      { label: "Finish", action: "dismiss" },
    ],
  },
];

const Example = () => {
  const [logs, setLogs] = React.useState<string[]>([]);

  const addLog = (message: string) => {
    setLogs((prev) => [...prev, message]);
  };

  return (
    <div className="flex w-full max-w-sm flex-col gap-4">
      <Tour
        onStatusChange={(details) => addLog(`Status: ${details.status}`)}
        onStepChange={(details) =>
          addLog(`Step changed: ${details.stepId ?? "unknown"}`)
        }
        steps={steps}
      >
        <TourTrigger asChild>
          <Button variant="outline">Start Tour</Button>
        </TourTrigger>

        <div className="flex flex-wrap gap-2">
          <div
            className="flex items-center justify-center rounded-md border bg-popover px-6 py-4 font-medium"
            id="event-1"
          >
            Step 1
          </div>
          <div
            className="flex items-center justify-center rounded-md border bg-popover px-6 py-4 font-medium"
            id="event-2"
          >
            Step 2
          </div>
          <div
            className="flex items-center justify-center rounded-md border bg-popover px-6 py-4 font-medium"
            id="event-3"
          >
            Step 3
          </div>
        </div>

        <div className="flex h-32 flex-col gap-1 overflow-y-auto rounded-md border bg-muted p-3 font-mono text-muted-foreground text-xs">
          <strong>Event Log:</strong>
          {logs.length === 0 ? (
            <span>Start the tour to see events</span>
          ) : (
            logs.map((log, i) => <span key={i}>{log}</span>)
          )}
        </div>

        <TourContent>
          <TourHeader>
            <TourProgressText />
            <TourTitle />
            <TourDescription />
          </TourHeader>

          <TourFooter>
            <TourActions />
          </TourFooter>
        </TourContent>
      </Tour>
    </div>
  );
};

export default Example;

```

## Example: keyboard-navigation

```tsx
"use client";

import { KeyboardIcon } from "lucide-react";
import { Button } from "@/components/ui/button";
import {
  Tour,
  TourActions,
  TourContent,
  TourDescription,
  TourHeader,
  TourProgressText,
  type TourStepType,
  TourTitle,
  TourTrigger,
} from "@/components/ui/tour";

const steps: TourStepType[] = [
  {
    id: "step-1",
    type: "tooltip",
    title: "Keyboard Navigation",
    description: "Press the right arrow key (→) to go to the next step.",
    target: () => document.querySelector<HTMLElement>("#tour-key-1"),
    actions: [{ label: "Next", action: "next" }],
  },
  {
    id: "step-2",
    type: "tooltip",
    title: "Go Back",
    description: "Press the left arrow key (←) to go back.",
    target: () => document.querySelector<HTMLElement>("#tour-key-2"),
    actions: [
      { label: "Back", action: "prev" },
      { label: "Next", action: "next" },
    ],
  },
  {
    id: "step-3",
    type: "tooltip",
    title: "Close Tour",
    description: "Press Escape to close the tour at any time.",
    target: () => document.querySelector<HTMLElement>("#tour-key-3"),
    actions: [
      { label: "Back", action: "prev" },
      { label: "Finish", action: "dismiss" },
    ],
  },
];

const Example = () => (
  <div className="flex flex-col gap-4">
    <Tour keyboardNavigation steps={steps}>
      <TourTrigger asChild>
        <Button variant="outline">Start Tour</Button>
      </TourTrigger>

      <p className="flex items-center gap-2 text-muted-foreground text-sm">
        <KeyboardIcon className="size-4" />
        Use arrow keys to navigate, Escape to close
      </p>

      <div className="flex flex-wrap gap-2">
        <div
          className="flex items-center justify-center rounded-lg border border-border bg-muted px-8 py-4 font-medium text-sm"
          id="tour-key-1"
        >
          Step 1
        </div>
        <div
          className="flex items-center justify-center rounded-lg border border-border bg-muted px-8 py-4 font-medium text-sm"
          id="tour-key-2"
        >
          Step 2
        </div>
        <div
          className="flex items-center justify-center rounded-lg border border-border bg-muted px-8 py-4 font-medium text-sm"
          id="tour-key-3"
        >
          Step 3
        </div>
      </div>

      <TourContent>
        <TourHeader>
          <TourProgressText />
          <TourTitle />
          <TourDescription />
        </TourHeader>

        <TourActions />
      </TourContent>
    </Tour>
  </div>
);

export default Example;

```

## Example: progress

```tsx
"use client";

import { Button } from "@/components/ui/button";
import {
  Tour,
  TourActions,
  TourContent,
  TourDescription,
  TourHeader,
  TourProgressText,
  type TourStepType,
  TourTitle,
  TourTrigger,
  useTourContext,
} from "@/components/ui/tour";

const TourProgressBar = () => {
  const { tour } = useTourContext();
  return (
    <div className="absolute right-0 bottom-0 left-0 h-1 overflow-hidden rounded-b-2xl bg-muted">
      <div
        className="h-full bg-primary transition-[width]"
        style={{ width: `${tour.getProgressPercent()}%` }}
      />
    </div>
  );
};

const steps: TourStepType[] = [
  {
    id: "step-1",
    type: "tooltip",
    title: "Progress Tracking",
    description: "Watch the progress bar at the bottom as you navigate.",
    target: () => document.querySelector<HTMLElement>("#progress-1"),
    actions: [{ label: "Next", action: "next" }],
  },
  {
    id: "step-2",
    type: "tooltip",
    title: "Halfway There",
    description: "The progress bar shows how far along you are.",
    target: () => document.querySelector<HTMLElement>("#progress-2"),
    actions: [
      { label: "Back", action: "prev" },
      { label: "Next", action: "next" },
    ],
  },
  {
    id: "step-3",
    type: "tooltip",
    title: "Almost Done",
    description: "One more step to complete the tour.",
    target: () => document.querySelector<HTMLElement>("#progress-3"),
    actions: [
      { label: "Back", action: "prev" },
      { label: "Next", action: "next" },
    ],
  },
  {
    id: "step-4",
    type: "tooltip",
    title: "Complete!",
    description: "You have completed all the steps.",
    target: () => document.querySelector<HTMLElement>("#progress-4"),
    actions: [
      { label: "Back", action: "prev" },
      { label: "Finish", action: "dismiss" },
    ],
  },
];

const Example = () => (
  <div className="flex w-full max-w-sm flex-col gap-4">
    <Tour steps={steps}>
      <TourTrigger asChild>
        <Button variant="outline">Start Tour</Button>
      </TourTrigger>

      <div className="flex flex-wrap gap-2">
        <div
          className="flex items-center justify-center rounded-md border bg-popover px-6 py-4 font-medium"
          id="progress-1"
        >
          Step 1
        </div>
        <div
          className="flex items-center justify-center rounded-md border bg-popover px-6 py-4 font-medium"
          id="progress-2"
        >
          Step 2
        </div>
        <div
          className="flex items-center justify-center rounded-md border bg-popover px-6 py-4 font-medium"
          id="progress-3"
        >
          Step 3
        </div>
        <div
          className="flex items-center justify-center rounded-md border bg-popover px-6 py-4 font-medium"
          id="progress-4"
        >
          Step 4
        </div>
      </div>

      <TourContent>
        <TourHeader>
          <TourProgressText />
          <TourTitle />
          <TourDescription />
        </TourHeader>

        <TourActions />

        <TourProgressBar />
      </TourContent>
    </Tour>
  </div>
);

export default Example;

```

## Example: skip

```tsx
"use client";

import { Button } from "@/components/ui/button";
import {
  Tour,
  TourActions,
  TourContent,
  TourDescription,
  TourHeader,
  TourProgressText,
  type TourStepType,
  TourTitle,
  TourTrigger,
} from "@/components/ui/tour";

const steps: TourStepType[] = [
  {
    id: "step-1",
    type: "tooltip",
    title: "First Feature",
    description: "You can skip this tour at any time using the Skip button.",
    target: () => document.querySelector<HTMLElement>("#tour-item-1"),
    actions: [
      { label: "Skip", action: "dismiss" },
      { label: "Next", action: "next" },
    ],
  },
  {
    id: "step-2",
    type: "tooltip",
    title: "Second Feature",
    description: "Continue or skip to end the tour early.",
    target: () => document.querySelector<HTMLElement>("#tour-item-2"),
    actions: [
      { label: "Skip", action: "dismiss" },
      { label: "Back", action: "prev" },
      { label: "Next", action: "next" },
    ],
  },
  {
    id: "step-3",
    type: "tooltip",
    title: "Final Feature",
    description: "This is the last step of the tour.",
    target: () => document.querySelector<HTMLElement>("#tour-item-3"),
    actions: [
      { label: "Back", action: "prev" },
      { label: "Finish", action: "dismiss" },
    ],
  },
];

const Example = () => (
  <div className="flex flex-col gap-4">
    <Tour steps={steps}>
      <TourTrigger asChild>
        <Button variant="outline">Start Tour</Button>
      </TourTrigger>

      <div className="flex flex-wrap gap-2">
        <div
          className="flex items-center justify-center rounded-lg border border-border bg-muted px-8 py-4 font-medium text-sm"
          id="tour-item-1"
        >
          Item 1
        </div>
        <div
          className="flex items-center justify-center rounded-lg border border-border bg-muted px-8 py-4 font-medium text-sm"
          id="tour-item-2"
        >
          Item 2
        </div>
        <div
          className="flex items-center justify-center rounded-lg border border-border bg-muted px-8 py-4 font-medium text-sm"
          id="tour-item-3"
        >
          Item 3
        </div>
      </div>

      <TourContent>
        <TourHeader>
          <TourProgressText />
          <TourTitle />
          <TourDescription />
        </TourHeader>

        <TourActions />
      </TourContent>
    </Tour>
  </div>
);

export default Example;

```

## Example: step-types

```tsx
"use client";

import { Button } from "@/components/ui/button";
import {
  Tour,
  TourActions,
  TourContent,
  TourDescription,
  TourHeader,
  TourProgressText,
  type TourStepType,
  TourTitle,
  TourTrigger,
} from "@/components/ui/tour";

const steps: TourStepType[] = [
  {
    id: "welcome",
    type: "dialog",
    title: "Welcome!",
    description:
      "This tour demonstrates different step types: dialog, tooltip, and floating.",
    actions: [{ label: "Start Tour", action: "next" }],
  },
  {
    id: "tooltip-step",
    type: "tooltip",
    title: "Tooltip Step",
    description:
      "This step appears as a tooltip anchored to a specific element.",
    target: () => document.querySelector<HTMLElement>("#tour-target-element"),
    actions: [
      { label: "Back", action: "prev" },
      { label: "Next", action: "next" },
    ],
  },
  {
    id: "floating-step",
    type: "floating",
    placement: "bottom-end",
    title: "Floating Step",
    description:
      "This step floats at a fixed position on the screen, independent of any target.",
    actions: [
      { label: "Back", action: "prev" },
      { label: "Next", action: "next" },
    ],
  },
  {
    id: "complete",
    type: "dialog",
    title: "Tour Complete!",
    description: "You have seen all the different step types available.",
    actions: [{ label: "Done", action: "dismiss" }],
  },
];

const Example = () => (
  <div className="flex flex-col gap-4">
    <Tour steps={steps}>
      <TourTrigger asChild>
        <Button variant="outline">Start Tour</Button>
      </TourTrigger>

      <div
        className="flex items-center justify-center rounded-lg border border-border bg-muted px-8 py-4 font-medium text-sm"
        id="tour-target-element"
      >
        Target Element
      </div>

      <TourContent>
        <TourHeader>
          <TourProgressText />
          <TourTitle />
          <TourDescription />
        </TourHeader>

        <TourActions />
      </TourContent>
    </Tour>
  </div>
);

export default Example;

```

## Example: wait-for-click

```tsx
"use client";

import { waitForEvent } from "@ark-ui/react/tour";
import { Button } from "@/components/ui/button";
import {
  Tour,
  TourActions,
  TourContent,
  TourDescription,
  TourHeader,
  TourProgressText,
  type TourStepType,
  TourTitle,
  TourTrigger,
} from "@/components/ui/tour";

const steps: TourStepType[] = [
  {
    id: "intro",
    type: "dialog",
    title: "Interactive Tutorial",
    description:
      "This tour will guide you through actions. You must complete each step to proceed.",
    actions: [{ label: "Begin", action: "next" }],
  },
  {
    id: "click-add",
    type: "tooltip",
    title: "Click the Add Button",
    description: 'Click the "Add Item" button to continue.',
    target: () => document.querySelector<HTMLElement>("#btn-add"),
    effect({ next, target, show }) {
      show();
      const [promise, cancel] = waitForEvent(target, "click");
      promise.then(() => next());
      return cancel;
    },
  },
  {
    id: "click-edit",
    type: "tooltip",
    title: "Click the Edit Button",
    description: 'Now click the "Edit" button.',
    target: () => document.querySelector<HTMLElement>("#btn-edit"),
    effect({ next, target, show }) {
      show();
      const [promise, cancel] = waitForEvent(target, "click");
      promise.then(() => next());
      return cancel;
    },
  },
  {
    id: "click-delete",
    type: "tooltip",
    title: "Click the Delete Button",
    description: 'Finally, click the "Delete" button.',
    target: () => document.querySelector<HTMLElement>("#btn-delete"),
    effect({ next, target, show }) {
      show();
      const [promise, cancel] = waitForEvent(target, "click");
      promise.then(() => next());
      return cancel;
    },
  },
  {
    id: "complete",
    type: "dialog",
    title: "Well Done!",
    description: "You completed all the interactive steps.",
    actions: [{ label: "Finish", action: "dismiss" }],
  },
];

const Example = () => (
  <div className="flex flex-col gap-4">
    <Tour steps={steps}>
      <TourTrigger asChild>
        <Button variant="outline">Start Interactive Tour</Button>
      </TourTrigger>

      <div className="flex flex-wrap gap-2">
        <Button id="btn-add" size="sm" type="button" variant="outline">
          Add Item
        </Button>
        <Button id="btn-edit" size="sm" type="button" variant="outline">
          Edit
        </Button>
        <Button id="btn-delete" size="sm" type="button" variant="outline">
          Delete
        </Button>
      </div>

      <TourContent>
        <TourHeader>
          <TourProgressText />
          <TourTitle />
          <TourDescription />
        </TourHeader>

        <TourActions />
      </TourContent>
    </Tour>
  </div>
);

export default Example;

```

## Example: wait-for-element

```tsx
"use client";

import { waitForElement, waitForEvent } from "@ark-ui/react/tour";
import { PlusIcon } from "lucide-react";
import React from "react";
import { Button } from "@/components/ui/button";
import {
  Tour,
  TourActions,
  TourContent,
  TourDescription,
  TourHeader,
  TourProgressText,
  type TourStepType,
  TourTitle,
  TourTrigger,
} from "@/components/ui/tour";

const steps: TourStepType[] = [
  {
    id: "intro",
    type: "dialog",
    title: "Dynamic Elements",
    description:
      "This tour demonstrates waiting for elements that appear dynamically.",
    actions: [{ label: "Start", action: "next" }],
  },
  {
    id: "add-item",
    type: "tooltip",
    title: "Add an Item",
    description: "Click the button to add a new item to the list.",
    target: () => document.querySelector<HTMLElement>("#btn-add-item"),
    effect({ next, target, show }) {
      show();
      const [promise, cancel] = waitForEvent(target, "click");
      promise.then(() => next());
      return cancel;
    },
  },
  {
    id: "new-item",
    type: "tooltip",
    title: "New Item Added!",
    description:
      "The tour waited for this element to appear before showing this step.",
    target: () => document.querySelector<HTMLElement>('[data-item="new"]'),
    effect({ show }) {
      const [promise, cancel] = waitForElement(
        () => document.querySelector<HTMLElement>('[data-item="new"]'),
        { timeout: 5000 }
      );
      promise.then(() => show());
      return () => cancel();
    },
    actions: [{ label: "Next", action: "next" }],
  },
  {
    id: "complete",
    type: "dialog",
    title: "Tour Complete",
    description: "You learned how to use waitForElement for dynamic content.",
    actions: [{ label: "Done", action: "dismiss" }],
  },
];

const Example = () => {
  const [items, setItems] = React.useState(["Item 1", "Item 2"]);

  const addItem = () => {
    setItems((prev) => [...prev, `Item ${prev.length + 1}`]);
  };

  return (
    <div className="flex flex-col gap-4">
      <Tour steps={steps}>
        <TourTrigger asChild>
          <Button variant="outline">Start Tour</Button>
        </TourTrigger>

        <div className="flex flex-col gap-2">
          <Button
            id="btn-add-item"
            onClick={addItem}
            size="sm"
            type="button"
            variant="outline"
          >
            <PlusIcon className="size-4" />
            Add Item
          </Button>

          <div className="flex flex-col gap-2">
            {items.map((item, index) => (
              <div
                className="rounded-lg border border-border bg-muted/50 px-4 py-3 text-sm"
                data-item={
                  index === items.length - 1 && items.length > 2
                    ? "new"
                    : undefined
                }
                key={item}
              >
                {item}
              </div>
            ))}
          </div>
        </div>

        <TourContent>
          <TourHeader>
            <TourProgressText />
            <TourTitle />
            <TourDescription />
          </TourHeader>

          <TourActions />
        </TourContent>
      </Tour>
    </div>
  );
};

export default Example;

```

## Example: wait-for-input

```tsx
"use client";

import { waitForEvent } from "@ark-ui/react/tour";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import {
  Tour,
  TourActions,
  TourContent,
  TourDescription,
  TourHeader,
  TourProgressText,
  type TourStepType,
  TourTitle,
  TourTrigger,
} from "@/components/ui/tour";

const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;

const steps: TourStepType[] = [
  {
    id: "intro",
    type: "dialog",
    title: "Form Tutorial",
    description:
      "Learn how to fill out the form by following the guided steps.",
    actions: [{ label: "Start", action: "next" }],
  },
  {
    id: "enter-name",
    type: "tooltip",
    title: "Enter Your Name",
    description: "Type your name in the input field to continue.",
    target: () => document.querySelector<HTMLInputElement>("#input-name"),
    effect({ next, target, show }) {
      show();
      const [promise, cancel] = waitForEvent<HTMLInputElement>(
        target,
        "input",
        {
          predicate: (el) => el.value.trim().length >= 2,
        }
      );
      promise.then(() => next());
      return cancel;
    },
  },
  {
    id: "enter-email",
    type: "tooltip",
    title: "Enter Your Email",
    description: "Now enter a valid email address.",
    target: () => document.querySelector<HTMLInputElement>("#input-email"),
    effect({ next, target, show }) {
      show();
      const [promise, cancel] = waitForEvent<HTMLInputElement>(
        target,
        "input",
        {
          predicate: (el) => emailRegex.test(el.value),
        }
      );
      promise.then(() => next());
      return cancel;
    },
  },
  {
    id: "check-terms",
    type: "tooltip",
    title: "Accept Terms",
    description: "Check the checkbox to accept the terms.",
    target: () => document.querySelector<HTMLInputElement>("#checkbox-terms"),
    effect({ next, target, show }) {
      show();
      const [promise, cancel] = waitForEvent<HTMLInputElement>(
        target,
        "change",
        {
          predicate: (el) => el.checked,
        }
      );
      promise.then(() => next());
      return cancel;
    },
  },
  {
    id: "complete",
    type: "dialog",
    title: "Form Complete!",
    description: "You have successfully filled out the form.",
    actions: [{ label: "Done", action: "dismiss" }],
  },
];

const Example = () => (
  <div className="flex flex-col gap-4">
    <Tour steps={steps}>
      <TourTrigger asChild>
        <Button variant="outline">Start Form Tutorial</Button>
      </TourTrigger>

      <div className="flex max-w-xs flex-col gap-4 rounded-lg border border-border bg-muted/50 p-4">
        <div className="flex flex-col gap-2">
          <label className="font-medium text-sm" htmlFor="input-name">
            Name
          </label>
          <Input id="input-name" placeholder="Enter your name" type="text" />
        </div>
        <div className="flex flex-col gap-2">
          <label className="font-medium text-sm" htmlFor="input-email">
            Email
          </label>
          <Input id="input-email" placeholder="Enter your email" type="email" />
        </div>
        <div className="flex items-center gap-2">
          <input
            className="size-4 rounded border-input accent-primary"
            id="checkbox-terms"
            type="checkbox"
          />
          <label
            className="text-muted-foreground text-sm"
            htmlFor="checkbox-terms"
          >
            I accept the terms and conditions
          </label>
        </div>
      </div>

      <TourContent>
        <TourHeader>
          <TourProgressText />
          <TourTitle />
          <TourDescription />
        </TourHeader>

        <TourActions />
      </TourContent>
    </Tour>
  </div>
);

export default Example;

```

# Tree View - Examples and Patterns

Examples for Tree View component.

## Example: checkbox-tree

```tsx
"use client";

import React from "react";
import {
  createTreeCollection,
  type TreeNodeType,
  TreeView,
  TreeViewBranch,
  TreeViewBranchContent,
  TreeViewBranchItem,
  TreeViewCheckbox,
  TreeViewContent,
  TreeViewItem,
  TreeViewNode,
  TreeViewTree,
} from "@/components/ui/tree-view";

const Example = () => {
  const [checkedNodes, setCheckedNodes] = React.useState<string[]>([
    "readme.md",
  ]);

  return (
    <div className="flex w-full max-w-md items-center gap-4">
      <div className="w-full max-w-52">
        <TreeView
          checkedValue={checkedNodes}
          collection={collection}
          onCheckedChange={({ checkedValue }) => setCheckedNodes(checkedValue)}
        >
          <TreeViewTree>
            {collection.rootNode.children?.map((node, index) => (
              <TreeNode indexPath={[index]} key={node.id} node={node} />
            ))}
          </TreeViewTree>
        </TreeView>
      </div>

      <p className="whitespace-pre-wrap text-muted-foreground text-sm">
        {JSON.stringify(checkedNodes, null, 2)}
      </p>
    </div>
  );
};

const collection = createTreeCollection({
  rootNode: {
    id: "ROOT",
    name: "",
    children: [
      {
        id: "app",
        name: "app",
        children: [
          { id: "app/page.tsx", name: "page.tsx" },
          { id: "app/layout.tsx", name: "layout.tsx" },
        ],
      },
      {
        id: "components",
        name: "components",
        children: [
          { id: "components/button.tsx", name: "button.tsx" },
          { id: "components/input.tsx", name: "input.tsx" },
        ],
      },
      { id: "package.json", name: "package.json" },
      { id: "readme.md", name: "README.md" },
    ],
  },
});

const TreeNode = (props: { node: TreeNodeType; indexPath: number[] }) => {
  const { node, indexPath } = props;

  return (
    <TreeViewNode indexPath={indexPath} node={node}>
      {node.children ? (
        <TreeViewBranch>
          <TreeViewBranchItem>
            <TreeViewCheckbox />
            {node.name}
          </TreeViewBranchItem>
          <TreeViewBranchContent>
            {node.children.map((child, index) => (
              <TreeNode
                indexPath={[...indexPath, index]}
                key={child.id}
                node={child}
              />
            ))}
          </TreeViewBranchContent>
        </TreeViewBranch>
      ) : (
        <TreeViewContent>
          <TreeViewCheckbox />
          <TreeViewItem>{node.name}</TreeViewItem>
        </TreeViewContent>
      )}
    </TreeViewNode>
  );
};

export default Example;

```

## Example: context-menu

```tsx
"use client";

import {
  FilePlusIcon,
  FolderPlusIcon,
  PencilIcon,
  Trash2Icon,
} from "lucide-react";
import {
  ContextMenu,
  ContextMenuContent,
  ContextMenuItem,
  ContextMenuSeparator,
  ContextMenuTrigger,
} from "@/components/ui/context-menu";
import {
  createTreeCollection,
  type NodeProviderProps,
  TreeView,
  TreeViewBranch,
  TreeViewBranchContent,
  TreeViewBranchItem,
  TreeViewContent,
  TreeViewItem,
  TreeViewNode,
  TreeViewTree,
} from "@/components/ui/tree-view";

const Example = () => {
  return (
    <div className="w-full max-w-40">
      <TreeView collection={collection}>
        <TreeViewTree>
          {collection.rootNode.children?.map((node, index) => (
            <TreeNode indexPath={[index]} key={node.id} node={node} />
          ))}
        </TreeViewTree>
      </TreeView>
    </div>
  );
};

const collection = createTreeCollection({
  rootNode: {
    id: "ROOT",
    name: "",
    children: [
      {
        id: "app",
        name: "app",
        children: [
          { id: "app/page.tsx", name: "page.tsx" },
          { id: "app/layout.tsx", name: "layout.tsx" },
        ],
      },
      {
        id: "components",
        name: "components",
        children: [
          { id: "components/button.tsx", name: "button.tsx" },
          { id: "components/input.tsx", name: "input.tsx" },
        ],
      },
      { id: "package.json", name: "package.json" },
      { id: "readme.md", name: "README.md" },
    ],
  },
});

const TreeNode = (props: NodeProviderProps) => {
  const { node, indexPath, ...rest } = props;

  return (
    <TreeViewNode indexPath={indexPath} node={node} {...rest}>
      {node.children ? (
        <TreeViewBranch>
          <ContextMenu>
            <ContextMenuTrigger asChild>
              <TreeViewBranchItem>{node.name}</TreeViewBranchItem>
            </ContextMenuTrigger>
            <ContextMenuContent className="w-40">
              <ContextMenuItem value="add-folder">
                <FolderPlusIcon aria-hidden />
                Add folder
              </ContextMenuItem>
              <ContextMenuItem value="add-file">
                <FilePlusIcon aria-hidden />
                Add file
              </ContextMenuItem>
              <ContextMenuSeparator />
              <ContextMenuItem value="rename">
                <PencilIcon aria-hidden />
                Rename
              </ContextMenuItem>
              <ContextMenuSeparator />
              <ContextMenuItem value="delete" variant="destructive">
                <Trash2Icon aria-hidden />
                Delete
              </ContextMenuItem>
            </ContextMenuContent>
          </ContextMenu>
          <TreeViewBranchContent>
            {node.children.map((child, index) => (
              <TreeNode
                indexPath={[...indexPath, index]}
                key={child.id}
                node={child}
              />
            ))}
          </TreeViewBranchContent>
        </TreeViewBranch>
      ) : (
        <ContextMenu>
          <ContextMenuTrigger asChild>
            <TreeViewContent>
              <TreeViewItem>{node.name}</TreeViewItem>
            </TreeViewContent>
          </ContextMenuTrigger>
          <ContextMenuContent className="w-40">
            <ContextMenuItem value="add-file">
              <PencilIcon aria-hidden />
              Rename
            </ContextMenuItem>
            <ContextMenuSeparator />
            <ContextMenuItem value="delete" variant="destructive">
              <Trash2Icon aria-hidden />
              Delete
            </ContextMenuItem>
          </ContextMenuContent>
        </ContextMenu>
      )}
    </TreeViewNode>
  );
};

export default Example;

```

## Example: controlled

```tsx
"use client";

import React from "react";
import {
  createTreeCollection,
  TreeView,
  TreeViewBranch,
  TreeViewBranchContent,
  TreeViewBranchItem,
  TreeViewContent,
  TreeViewItem,
  TreeViewNode,
  TreeViewTree,
} from "@/components/ui/tree-view";

const Example = () => {
  const [selected, setSelected] = React.useState<string[]>([]);

  const isCorrectSelection = selected[0] === "components/input.tsx";

  return (
    <div className="flex w-full max-w-40 flex-col items-center gap-4">
      <p className="text-muted-foreground text-sm">Select input.tsx</p>

      <TreeView
        className="overflow-hidden"
        collection={collection}
        onSelectionChange={({ selectedValue }) => setSelected(selectedValue)}
        selectedValue={selected}
      >
        <TreeViewTree>
          {collection.rootNode.children?.map((node, index) => (
            <TreeNode indexPath={[index]} key={node.id} node={node} />
          ))}
        </TreeViewTree>
      </TreeView>

      <p className="text-muted-foreground text-sm">
        {isCorrectSelection ? "✅" : "❌"}
      </p>
    </div>
  );
};

const collection = createTreeCollection({
  rootNode: {
    id: "ROOT",
    name: "",
    children: [
      {
        id: "components",
        name: "components",
        children: [
          { id: "components/button.tsx", name: "button.tsx" },
          { id: "components/input.tsx", name: "input.tsx" },
        ],
      },
      { id: "package.json", name: "package.json" },
    ],
  },
});

const TreeNode = (props: React.ComponentProps<typeof TreeViewNode>) => {
  const { node, indexPath } = props;

  return (
    <TreeViewNode indexPath={indexPath} key={node.id} node={node}>
      {node.children ? (
        <TreeViewBranch>
          <TreeViewBranchItem>{node.name}</TreeViewBranchItem>

          <TreeViewBranchContent>
            {node.children.map((child, index) => (
              <TreeNode
                indexPath={[...indexPath, index]}
                key={child.id}
                node={child}
              />
            ))}
          </TreeViewBranchContent>
        </TreeViewBranch>
      ) : (
        <TreeViewContent>
          <TreeViewItem>{node.name}</TreeViewItem>
        </TreeViewContent>
      )}
    </TreeViewNode>
  );
};

export default Example;

```

## Example: custom-icons-folder

```tsx
"use client";

import { PackageIcon, PackageOpenIcon } from "lucide-react";
import {
  createTreeCollection,
  TreeView,
  TreeViewBranch,
  TreeViewBranchContent,
  TreeViewBranchItem,
  TreeViewContent,
  TreeViewItem,
  TreeViewNode,
  TreeViewTree,
} from "@/components/ui/tree-view";

const Example = () => (
  <div className="w-full max-w-40">
    <TreeView collection={collection}>
      <TreeViewTree>
        {collection.rootNode.children?.map((node, index) => (
          <TreeNode indexPath={[index]} key={node.id} node={node} />
        ))}
      </TreeViewTree>
    </TreeView>
  </div>
);

const collection = createTreeCollection({
  rootNode: {
    id: "ROOT",
    name: "",
    children: [
      {
        id: "app",
        name: "app",
        icon: PackageIcon,
        expandedIcon: PackageOpenIcon,
        children: [
          { id: "app/page.tsx", name: "page.tsx" },
          { id: "app/layout.tsx", name: "layout.tsx" },
        ],
      },
      {
        id: "components",
        name: "components",
        icon: null,
        expandedIcon: null,
        children: [
          { id: "components/button.tsx", name: "button.tsx" },
          { id: "components/input.tsx", name: "input.tsx" },
        ],
      },
      { id: "package.json", name: "package.json" },
      { id: "readme.md", name: "README.md" },
    ],
  },
});

const TreeNode = (props: React.ComponentProps<typeof TreeViewNode>) => {
  const { node, indexPath, ...rest } = props;

  return (
    <TreeViewNode indexPath={indexPath} node={node} {...rest}>
      {node.children ? (
        <TreeViewBranch>
          <TreeViewBranchItem expandedIcon={node.expandedIcon} icon={node.icon}>
            {node.name}
          </TreeViewBranchItem>

          <TreeViewBranchContent>
            {node.children.map((child, index) => (
              <TreeNode
                indexPath={[...indexPath, index]}
                key={child.id}
                node={child}
              />
            ))}
          </TreeViewBranchContent>
        </TreeViewBranch>
      ) : (
        <TreeViewContent>
          <TreeViewItem>{node.name}</TreeViewItem>
        </TreeViewContent>
      )}
    </TreeViewNode>
  );
};

export default Example;

```

## Example: custom-icons-item

```tsx
"use client";

import { StarIcon } from "lucide-react";
import {
  createTreeCollection,
  TreeView,
  TreeViewBranch,
  TreeViewBranchContent,
  TreeViewBranchItem,
  TreeViewContent,
  TreeViewItem,
  TreeViewNode,
  TreeViewTree,
} from "@/components/ui/tree-view";

const Example = () => (
  <div className="w-full max-w-40">
    <TreeView collection={collection}>
      <TreeViewTree>
        {collection.rootNode.children?.map((node, index) => (
          <TreeNode indexPath={[index]} key={node.id} node={node} />
        ))}
      </TreeViewTree>
    </TreeView>
  </div>
);

const collection = createTreeCollection({
  rootNode: {
    id: "ROOT",
    name: "",
    children: [
      {
        id: "app",
        name: "app",
        children: [
          { id: "app/page.tsx", name: "page.tsx" },
          { id: "app/layout.tsx", name: "layout.tsx" },
        ],
      },
      {
        id: "components",
        name: "components",
        children: [
          { id: "components/button.tsx", name: "button.tsx" },
          { id: "components/input.tsx", name: "input.tsx" },
        ],
      },
      { id: "package.json", name: "package.json" },
      { id: "readme.md", name: "README.md" },
    ],
  },
});

const TreeNode = (props: React.ComponentProps<typeof TreeViewNode>) => {
  const { node, indexPath, ...rest } = props;

  return (
    <TreeViewNode indexPath={indexPath} node={node} {...rest}>
      {node.children ? (
        <TreeViewBranch>
          <TreeViewBranchItem>{node.name}</TreeViewBranchItem>

          <TreeViewBranchContent>
            {node.children.map((child, index) => (
              <TreeNode
                indexPath={[...indexPath, index]}
                key={child.id}
                node={child}
              />
            ))}
          </TreeViewBranchContent>
        </TreeViewBranch>
      ) : (
        <TreeViewContent>
          <TreeViewItem icon={StarIcon}>{node.name}</TreeViewItem>
        </TreeViewContent>
      )}
    </TreeViewNode>
  );
};

export default Example;

```

## Example: custom-icons

```tsx
"use client";

import { FileCodeIcon, FileJsonIcon, FileTextIcon } from "lucide-react";
import {
  createFileIcons,
  createTreeCollection,
  TreeView,
  TreeViewBranch,
  TreeViewBranchContent,
  TreeViewBranchItem,
  TreeViewContent,
  TreeViewItem,
  TreeViewNode,
  TreeViewTree,
} from "@/components/ui/tree-view";

const fileIcons = createFileIcons({
  ".tsx": FileCodeIcon,
  ".json": FileJsonIcon,
  ".md": FileTextIcon,
});

const Example = () => (
  <div className="w-full max-w-40">
    <TreeView collection={collection} fileIcons={fileIcons}>
      <TreeViewTree>
        {collection.rootNode.children?.map((node, index) => (
          <TreeNode indexPath={[index]} key={node.id} node={node} />
        ))}
      </TreeViewTree>
    </TreeView>
  </div>
);

const collection = createTreeCollection({
  rootNode: {
    id: "ROOT",
    name: "",
    children: [
      {
        id: "app",
        name: "app",
        children: [
          { id: "app/page.tsx", name: "page.tsx" },
          { id: "app/layout.tsx", name: "layout.tsx" },
        ],
      },
      {
        id: "components",
        name: "components",
        children: [
          { id: "components/button.tsx", name: "button.tsx" },
          { id: "components/input.tsx", name: "input.tsx" },
        ],
      },
      { id: "package.json", name: "package.json" },
      { id: "readme.md", name: "README.md" },
    ],
  },
});

const TreeNode = (props: React.ComponentProps<typeof TreeViewNode>) => {
  const { node, indexPath, ...rest } = props;

  return (
    <TreeViewNode indexPath={indexPath} node={node} {...rest}>
      {node.children ? (
        <TreeViewBranch>
          <TreeViewBranchItem>{node.name}</TreeViewBranchItem>

          <TreeViewBranchContent>
            {node.children.map((child, index) => (
              <TreeNode
                indexPath={[...indexPath, index]}
                key={child.id}
                node={child}
              />
            ))}
          </TreeViewBranchContent>
        </TreeViewBranch>
      ) : (
        <TreeViewContent>
          <TreeViewItem>{node.name}</TreeViewItem>
        </TreeViewContent>
      )}
    </TreeViewNode>
  );
};

export default Example;

```

## Example: default

```tsx
"use client";

import {
  createTreeCollection,
  TreeView,
  TreeViewBranch,
  TreeViewBranchContent,
  TreeViewBranchItem,
  TreeViewContent,
  TreeViewItem,
  TreeViewNode,
  TreeViewTree,
} from "@/components/ui/tree-view";

const TreeViewDemo = () => (
  <div className="w-full max-w-40">
    <TreeView collection={collection}>
      <TreeViewTree>
        {collection.rootNode.children?.map((node, index) => (
          <TreeNode indexPath={[index]} key={node.id} node={node} />
        ))}
      </TreeViewTree>
    </TreeView>
  </div>
);

const collection = createTreeCollection({
  rootNode: {
    id: "ROOT",
    name: "",
    children: [
      {
        id: "app",
        name: "app",
        children: [
          { id: "app/page.tsx", name: "page.tsx" },
          { id: "app/layout.tsx", name: "layout.tsx" },
        ],
      },
      {
        id: "components",
        name: "components",
        children: [
          { id: "components/button.tsx", name: "button.tsx" },
          { id: "components/input.tsx", name: "input.tsx" },
        ],
      },
      { id: "package.json", name: "package.json" },
      { id: "readme.md", name: "README.md" },
    ],
  },
});

const TreeNode = (props: React.ComponentProps<typeof TreeViewNode>) => {
  const { node, indexPath, ...rest } = props;

  return (
    <TreeViewNode indexPath={indexPath} node={node} {...rest}>
      {node.children ? (
        <TreeViewBranch>
          <TreeViewBranchItem>{node.name}</TreeViewBranchItem>

          <TreeViewBranchContent>
            {node.children.map((child, index) => (
              <TreeNode
                indexPath={[...indexPath, index]}
                key={child.id}
                node={child}
              />
            ))}
          </TreeViewBranchContent>
        </TreeViewBranch>
      ) : (
        <TreeViewContent>
          <TreeViewItem>{node.name}</TreeViewItem>
        </TreeViewContent>
      )}
    </TreeViewNode>
  );
};

export default TreeViewDemo;

```

## Example: editor

```tsx
"use client";

import { XIcon } from "lucide-react";
import React from "react";
import { buttonVariants } from "@/components/ui/button";
import {
  Tabs,
  TabsContent,
  TabsList,
  TabsTrigger,
} from "@/components/ui/tabs";
import {
  createTreeCollection,
  type TreeNodeType,
  TreeView,
  TreeViewBranch,
  TreeViewBranchContent,
  TreeViewBranchItem,
  TreeViewContent,
  TreeViewItem,
  TreeViewNode,
  TreeViewTree,
} from "@/components/ui/tree-view";

const Example = () => {
  const [activeItem, setActiveItem] = React.useState("");

  const handleSelectNode = (selectedNodes: TreeNodeType[]) => {
    const selectedItem = selectedNodes.map((node) => node.name)[0];

    const isFolder = selectedNodes.every((node) => node.children?.length ?? 0);

    if (isFolder) {
      return;
    }

    const formattedName = selectedItem?.split("/").at(-1);

    setActiveItem(formattedName ?? "");
  };

  return (
    <div className="flex size-full gap-2">
      <div className="w-full max-w-48 rounded-lg border p-2">
        <TreeView
          collection={collection}
          onSelectionChange={({ selectedNodes }) =>
            handleSelectNode(selectedNodes)
          }
        >
          <TreeViewTree>
            {collection.rootNode.children?.map((node, index) => (
              <TreeNode indexPath={[index]} key={node.id} node={node} />
            ))}
          </TreeViewTree>
        </TreeView>
      </div>

      <div className="flex flex-1 flex-col rounded-lg border p-0.5">
        {activeItem && (
          <Tabs className="flex-1" value={activeItem}>
            <TabsList variant="underline">
              <TabsTrigger value={activeItem}>
                {activeItem}

                <div
                  className={buttonVariants({
                    variant: "ghost",
                    size: "icon-xs",
                  })}
                  onClick={() => setActiveItem("")}
                  role="button"
                  tabIndex={0}
                >
                  <XIcon />
                </div>
              </TabsTrigger>
            </TabsList>
            <TabsContent
              className="p-2 text-muted-foreground text-sm"
              value={activeItem}
            >
              {"// File content"}
            </TabsContent>
          </Tabs>
        )}
      </div>
    </div>
  );
};

const collection = createTreeCollection({
  rootNode: {
    id: "ROOT",
    name: "",
    children: [
      {
        id: "app",
        name: "app",
        children: [
          { id: "app/page.tsx", name: "page.tsx" },
          { id: "app/layout.tsx", name: "layout.tsx" },
        ],
      },
      {
        id: "components",
        name: "components",
        children: [
          { id: "components/button.tsx", name: "button.tsx" },
          { id: "components/input.tsx", name: "input.tsx" },
        ],
      },
      { id: "package.json", name: "package.json" },
      { id: "readme.md", name: "README.md" },
    ],
  },
});

const TreeNode = (props: React.ComponentProps<typeof TreeViewNode>) => {
  const { node, indexPath, ...rest } = props;

  return (
    <TreeViewNode indexPath={indexPath} node={node} {...rest}>
      {node.children ? (
        <TreeViewBranch>
          <TreeViewBranchItem>{node.name}</TreeViewBranchItem>

          <TreeViewBranchContent>
            {node.children.map((child, index) => (
              <TreeNode
                indexPath={[...indexPath, index]}
                key={child.id}
                node={child}
              />
            ))}
          </TreeViewBranchContent>
        </TreeViewBranch>
      ) : (
        <TreeViewContent>
          <TreeViewItem>{node.name}</TreeViewItem>
        </TreeViewContent>
      )}
    </TreeViewNode>
  );
};

export default Example;

```

## Example: links

```tsx
"use client";

import { ExternalLinkIcon, Link } from "lucide-react";
import {
  createTreeCollection,
  type NodeProviderProps,
  type TreeNodeType,
  TreeView,
  TreeViewBranch,
  TreeViewBranchContent,
  TreeViewBranchItem,
  TreeViewContent,
  TreeViewItem,
  TreeViewLabel,
  TreeViewNode,
  TreeViewTree,
} from "@/components/ui/tree-view";

interface TreeNodeWithLinks extends TreeNodeType<unknown> {
  href?: string;
}

const Example = () => (
  <div className="w-full max-w-48">
    <TreeView collection={collection}>
      <TreeViewLabel>Docs</TreeViewLabel>
      <TreeViewTree>
        {collection.rootNode.children?.map((node, index) => (
          <TreeNode indexPath={[index]} key={node.id} node={node} />
        ))}
      </TreeViewTree>
    </TreeView>
  </div>
);

const collection = createTreeCollection({
  rootNode: {
    id: "ROOT",
    name: "",
    children: [
      {
        id: "docs",
        name: "Documentation",
        children: [
          {
            id: "docs/introduction",
            name: "Introduction",
            href: "/docs",
          },
          {
            id: "docs/components",
            name: "Components",
            href: "/docs/components",
          },
        ],
      },
      {
        id: "external",
        name: "External Links",
        children: [
          {
            id: "external/github",
            name: "GitHub Repository",
            href: "https://github.com/vinihvc/shark-ui",
          },
        ],
      },
      { id: "llms.txt", name: "llms.txt", href: "/llms.txt" },
    ],
  },
});

const TreeNode = (props: NodeProviderProps<TreeNodeWithLinks>) => {
  const { node, indexPath } = props;

  return (
    <TreeViewNode indexPath={indexPath} node={node}>
      {node.children ? (
        <TreeViewBranch>
          <TreeViewBranchItem icon={null}>{node.name}</TreeViewBranchItem>
          <TreeViewBranchContent>
            {node.children.map((child, index) => (
              <TreeNode
                indexPath={[...indexPath, index]}
                key={child.id}
                node={child}
              />
            ))}
          </TreeViewBranchContent>
        </TreeViewBranch>
      ) : (
        <TreeViewContent asChild>
          <a
            href={node.href ?? "#"}
            rel={
              node.href?.startsWith("http") ? "noopener noreferrer" : undefined
            }
            target={node.href?.startsWith("http") ? "_blank" : undefined}
          >
            <TreeViewItem icon={Link}>
              {node.name}
              {node.href?.startsWith("http") && <ExternalLinkIcon />}
            </TreeViewItem>
          </a>
        </TreeViewContent>
      )}
    </TreeViewNode>
  );
};

export default Example;

```

## Example: multiple-selection

```tsx
"use client";

import {
  createTreeCollection,
  TreeView,
  TreeViewBranch,
  TreeViewBranchContent,
  TreeViewBranchItem,
  TreeViewContent,
  TreeViewItem,
  TreeViewNode,
  TreeViewTree,
} from "@/components/ui/tree-view";

const Example = () => (
  <div className="w-full max-w-40">
    <TreeView collection={collection} selectionMode="multiple">
      <TreeViewTree>
        {collection.rootNode.children?.map((node, index) => (
          <TreeNode indexPath={[index]} key={node.id} node={node} />
        ))}
      </TreeViewTree>
    </TreeView>
  </div>
);

const collection = createTreeCollection({
  rootNode: {
    id: "ROOT",
    name: "",
    children: [
      {
        id: "app",
        name: "app",
        children: [
          { id: "app/page.tsx", name: "page.tsx" },
          { id: "app/layout.tsx", name: "layout.tsx" },
        ],
      },
      {
        id: "components",
        name: "components",
        children: [
          { id: "components/button.tsx", name: "button.tsx" },
          { id: "components/input.tsx", name: "input.tsx" },
        ],
      },
      { id: "package.json", name: "package.json" },
      { id: "readme.md", name: "README.md" },
    ],
  },
});

const TreeNode = (props: React.ComponentProps<typeof TreeViewNode>) => {
  const { node, indexPath, ...rest } = props;

  return (
    <TreeViewNode indexPath={indexPath} node={node} {...rest}>
      {node.children ? (
        <TreeViewBranch>
          <TreeViewBranchItem>{node.name}</TreeViewBranchItem>

          <TreeViewBranchContent>
            {node.children.map((child, index) => (
              <TreeNode
                indexPath={[...indexPath, index]}
                key={child.id}
                node={child}
              />
            ))}
          </TreeViewBranchContent>
        </TreeViewBranch>
      ) : (
        <TreeViewContent>
          <TreeViewItem>{node.name}</TreeViewItem>
        </TreeViewContent>
      )}
    </TreeViewNode>
  );
};

export default Example;

```

## Example: rename

```tsx
"use client";

import React from "react";
import {
  createTreeCollection,
  TreeView,
  TreeViewBranch,
  TreeViewBranchContent,
  TreeViewBranchItem,
  TreeViewContent,
  TreeViewItem,
  TreeViewNode,
  TreeViewTree,
} from "@/components/ui/tree-view";

const Example = () => {
  const [collection, setCollection] = React.useState(initialCollection);

  return (
    <div className="w-full max-w-40">
      <TreeView
        canRename={() => true}
        collection={collection}
        onRenameComplete={(details) => {
          setCollection((prev) => {
            const node = prev.at(details.indexPath);
            if (!node) {
              return prev;
            }
            return prev.replace(details.indexPath, {
              ...node,
              name: details.label,
            });
          });
        }}
      >
        <TreeViewTree>
          {collection.rootNode.children?.map((node, index) => (
            <TreeNode indexPath={[index]} key={node.id} node={node} />
          ))}
        </TreeViewTree>
      </TreeView>
    </div>
  );
};

const initialCollection = createTreeCollection({
  rootNode: {
    id: "ROOT",
    name: "",
    children: [
      {
        id: "app",
        name: "app",
        children: [
          { id: "app/page.tsx", name: "page.tsx" },
          { id: "app/layout.tsx", name: "layout.tsx" },
        ],
      },
      {
        id: "components",
        name: "components",
        children: [
          { id: "components/button.tsx", name: "button.tsx" },
          { id: "components/input.tsx", name: "input.tsx" },
        ],
      },
      { id: "package.json", name: "package.json" },
      { id: "readme.md", name: "README.md" },
    ],
  },
});

const TreeNode = (props: React.ComponentProps<typeof TreeViewNode>) => {
  const { node, indexPath, ...rest } = props;

  return (
    <TreeViewNode indexPath={indexPath} node={node} {...rest}>
      {node.children ? (
        <TreeViewBranch>
          <TreeViewBranchItem>{node.name}</TreeViewBranchItem>

          <TreeViewBranchContent>
            {node.children.map((child, index) => (
              <TreeNode
                indexPath={[...indexPath, index]}
                key={child.id}
                node={child}
              />
            ))}
          </TreeViewBranchContent>
        </TreeViewBranch>
      ) : (
        <TreeViewContent>
          <TreeViewItem>{node.name}</TreeViewItem>
        </TreeViewContent>
      )}
    </TreeViewNode>
  );
};

export default Example;

```