Ark UI Component Patterns

# Ark UI Component Patterns for Google Antigravity IDE

Build accessible UI components with Ark UI using Google Antigravity IDE. This guide covers headless component patterns, state machines, and accessibility features.

## Dropdown Menu Component

```typescript
// src/components/ui/menu.tsx
import { Menu } from "@ark-ui/react/menu";
import { Portal } from "@ark-ui/react/portal";
import { cn } from "@/lib/utils";

interface MenuItemProps {
  value: string;
  label: string;
  icon?: React.ReactNode;
  shortcut?: string;
  disabled?: boolean;
}

export function DropdownMenu({
  trigger,
  items,
  onSelect,
  align = "end",
}: {
  trigger: React.ReactNode;
  items: MenuItemProps[];
  onSelect?: (value: string) => void;
  align?: "start" | "center" | "end";
}) {
  return (
    <Menu.Root onSelect={(details) => onSelect?.(details.value)} positioning={{ placement: `bottom-${align}` }}>
      <Menu.Trigger asChild>{trigger}</Menu.Trigger>
      <Portal>
        <Menu.Positioner>
          <Menu.Content className={cn("z-50 min-w-[180px] rounded-md border bg-popover p-1 shadow-md animate-in fade-in-0")}>
            {items.map((item) => (
              <Menu.Item
                key={item.value}
                value={item.value}
                disabled={item.disabled}
                className={cn("flex cursor-pointer items-center rounded-sm px-2 py-1.5 text-sm hover:bg-accent")}
              >
                {item.icon && <span className="mr-2 h-4 w-4">{item.icon}</span>}
                <span className="flex-1">{item.label}</span>
                {item.shortcut && <span className="ml-auto text-xs text-muted-foreground">{item.shortcut}</span>}
              </Menu.Item>
            ))}
          </Menu.Content>
        </Menu.Positioner>
      </Portal>
    </Menu.Root>
  );
}
```

## Dialog Component

```typescript
// src/components/ui/dialog.tsx
import { Dialog } from "@ark-ui/react/dialog";
import { Portal } from "@ark-ui/react/portal";
import { X } from "lucide-react";
import { cn } from "@/lib/utils";

export function CustomDialog({
  open,
  onOpenChange,
  trigger,
  title,
  description,
  children,
  footer,
}: {
  open?: boolean;
  onOpenChange?: (open: boolean) => void;
  trigger?: React.ReactNode;
  title: string;
  description?: string;
  children: React.ReactNode;
  footer?: React.ReactNode;
}) {
  return (
    <Dialog.Root open={open} onOpenChange={(e) => onOpenChange?.(e.open)}>
      {trigger && <Dialog.Trigger asChild>{trigger}</Dialog.Trigger>}
      <Portal>
        <Dialog.Backdrop className="fixed inset-0 z-50 bg-black/50 animate-in fade-in-0" />
        <Dialog.Positioner className="fixed inset-0 z-50 flex items-center justify-center p-4">
          <Dialog.Content className="relative w-full max-w-md rounded-lg bg-background shadow-lg animate-in fade-in-0 zoom-in-95">
            <div className="flex flex-col space-y-1.5 p-6">
              <Dialog.Title className="text-lg font-semibold">{title}</Dialog.Title>
              {description && <Dialog.Description className="text-sm text-muted-foreground">{description}</Dialog.Description>}
            </div>
            <div className="p-6 pt-0">{children}</div>
            {footer && <div className="flex justify-end gap-2 border-t p-6">{footer}</div>}
            <Dialog.CloseTrigger className="absolute right-4 top-4 rounded-sm opacity-70 hover:opacity-100">
              <X className="h-4 w-4" />
              <span className="sr-only">Close</span>
            </Dialog.CloseTrigger>
          </Dialog.Content>
        </Dialog.Positioner>
      </Portal>
    </Dialog.Root>
  );
}
```

## Combobox with Search

```typescript
// src/components/ui/combobox.tsx
import { Combobox } from "@ark-ui/react/combobox";
import { Portal } from "@ark-ui/react/portal";
import { Check, ChevronsUpDown } from "lucide-react";
import { useState, useMemo } from "react";

export function SearchableCombobox({
  items,
  value,
  onChange,
  placeholder = "Select...",
}: {
  items: Array<{ value: string; label: string }>;
  value?: string;
  onChange?: (value: string) => void;
  placeholder?: string;
}) {
  const [inputValue, setInputValue] = useState("");

  const filteredItems = useMemo(() => {
    if (!inputValue) return items;
    return items.filter((item) => item.label.toLowerCase().includes(inputValue.toLowerCase()));
  }, [items, inputValue]);

  return (
    <Combobox.Root
      items={filteredItems}
      value={value ? [value] : []}
      onValueChange={(details) => onChange?.(details.value[0])}
      onInputValueChange={(details) => setInputValue(details.inputValue)}
    >
      <Combobox.Control className="relative">
        <Combobox.Input placeholder={placeholder} className="flex h-10 w-full rounded-md border bg-background px-3 py-2 text-sm" />
        <Combobox.Trigger className="absolute right-2 top-2.5">
          <ChevronsUpDown className="h-4 w-4 opacity-50" />
        </Combobox.Trigger>
      </Combobox.Control>
      <Portal>
        <Combobox.Positioner>
          <Combobox.Content className="z-50 max-h-60 w-full overflow-auto rounded-md border bg-popover shadow-md">
            {filteredItems.map((item) => (
              <Combobox.Item key={item.value} item={item} className="flex cursor-pointer items-center px-2 py-1.5 hover:bg-accent">
                <Combobox.ItemIndicator className="mr-2"><Check className="h-4 w-4" /></Combobox.ItemIndicator>
                <Combobox.ItemText>{item.label}</Combobox.ItemText>
              </Combobox.Item>
            ))}
          </Combobox.Content>
        </Combobox.Positioner>
      </Portal>
    </Combobox.Root>
  );
}
```

## Best Practices for Google Antigravity IDE

When using Ark UI with Google Antigravity, leverage the headless architecture for full styling control. Use state machine props for complex interactions. Implement proper ARIA attributes automatically. Let Gemini 3 generate accessible component variants.

Google Antigravity excels at building custom design systems on top of Ark UI primitives.