Accessible React primitives, styled from CSS variables.

import { DatePicker } from "@/components/ui/DatePicker";

// "" or an ISO calendar date, "YYYY-MM-DD". Never a Date.
const [date, setDate] = useState("");

<DatePicker
  id="appointment"
  value={date}
  onChange={setDate}
  min="2026-01-01"
/>

import { DateRangePicker } from "@/components/ui/DateRangePicker";

const [range, setRange] = useState({ from: "", to: "" });

// Two month grids by default — a range is far easier
// to place when the month it ends in is already on
// screen. They stack below the sm breakpoint.
<DateRangePicker
  startValue={range.from}
  endValue={range.to}
  onChange={(from, to) => setRange({ from, to })}
  ariaLabel="Stay"
/>

// One grid, for a sidebar or a narrow filter bar.
<DateRangePicker months={1} … />

import { TimePicker } from "@/components/ui/TimePicker";

// Always 24-hour "HH:MM", whatever the display clock says.
const [time, setTime] = useState("");

<TimePicker
  value={time}
  onChange={setTime}
  fromMin={9 * 60}   // 09:00
  toMin={18 * 60}    // 18:00
  stepMin={15}
/>

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

const [role, setRole] = useState("");

<Select value={role} onValueChange={setRole}>
  <SelectTrigger id="role">
    {/* Leave it childless: Radix portals the item's
        LABEL in here, so the trigger never shows a raw
        value. */}
    <SelectValue placeholder="Choose a role" />
  </SelectTrigger>
  <SelectContent>
    <SelectItem value="owner">Owner</SelectItem>
    <SelectItem value="editor">Editor</SelectItem>
  </SelectContent>
</Select>

import { Combobox } from "@/components/ui/Combobox";

const [client, setClient] = useState("");

<Combobox
  value={client}
  onChange={setClient}
  options={CLIENTS}              // { id, name, email? }
  onSelectOption={(o) => setEmail(o.email ?? "")}
  placeholder="Search clients…"
  ariaLabel="Client"
/>

import {
  DropdownMenu, DropdownMenuTrigger, DropdownMenuContent,
  DropdownMenuItem, DropdownMenuSeparator,
} from "@/components/ui/DropdownMenu";

<DropdownMenu>
  {/* asChild is the default: your button, not a
      second one nested inside it. */}
  <DropdownMenuTrigger>
    <Button variant="secondary">Actions</Button>
  </DropdownMenuTrigger>

  <DropdownMenuContent align="end">
    <DropdownMenuItem onSelect={duplicate}>Duplicate</DropdownMenuItem>
    <DropdownMenuItem href="/settings">Settings</DropdownMenuItem>
    <DropdownMenuSeparator />
    <DropdownMenuItem variant="danger" onSelect={remove}>
      Delete
    </DropdownMenuItem>
  </DropdownMenuContent>
</DropdownMenu>

import { Link } from "@/components/ui/Link";

<p>
  Read the <Link href="/docs">documentation</Link>, or
  browse the <Link href="https://github.com/…" external>
    source
  </Link>.
</p>

// Body-coloured, underline kept: colour alone is not
// an accessible way to mark a link.
<Link href="/legal/terms" subtle>Terms</Link>

// It is a plain <a>: for client-side navigation wrap
// it in next/link, which owns routing, not styling.

import {
  Dialog, DialogTrigger, DialogContent, DialogClose,
} from "@/components/ui/Dialog";
import { Button } from "@/components/ui/Button";
import { Input } from "@/components/ui/Input";

const [open, setOpen] = useState(false);

<Dialog open={open} onOpenChange={setOpen}>
  {/* asChild hands the trigger's behaviour to your
      own button rather than nesting a second one. */}
  <DialogTrigger asChild>
    <Button variant="secondary">Rename</Button>
  </DialogTrigger>

  {/* title IS the accessible name — do not add your
      own heading. Omit description and the dialog
      simply has none. */}
  <DialogContent
    title="Rename project"
    description="Everyone on the team sees the new name."
  >
    <Input label="Project name" value={draft} onChange={…} />
    <DialogClose asChild>
      <Button variant="secondary">Cancel</Button>
    </DialogClose>
  </DialogContent>
</Dialog>

import { ConfirmDialog } from "@/components/ui/ConfirmDialog";
import { Button } from "@/components/ui/Button";

const [open, setOpen] = useState(false);

<Button variant="danger" onClick={() => setOpen(true)}>
  Delete
</Button>

<ConfirmDialog
  open={open}
  onOpenChange={setOpen}
  destructive
  title="Delete 3 records?"
  description="This cannot be undone."
  labels={{ confirm: "Delete" }}
  onConfirm={() => remove()}
/>

import { Tooltip, TooltipProvider } from "@/components/ui/Tooltip";

// A lone Tooltip provides for itself; wrap a GROUP so
// moving between them skips the delay.
<TooltipProvider>
  <Tooltip label="Calendar" side="top">
    {/* A tooltip is a description, not a name —
        an icon button still needs its own label. */}
    <button aria-label="Calendar">…</button>
  </Tooltip>
</TooltipProvider>

import { Input } from "@/components/ui/Input";

const [email, setEmail] = useState("");
const bad = email.length > 3 && !email.includes("@");

<Input
  label="Work email"
  type="email"
  required
  value={email}
  onChange={(e) => setEmail(e.target.value)}
  description="Only ever used for the receipt."
  // A node, not a boolean: the message and the
  // invalid state cannot drift apart.
  error={bad ? "That address is missing an @." : undefined}
/>

// Slots sit INSIDE the box. leading/trailing, not
// prefix/suffix — prefix is a real HTML attribute
// typed string, so the name is already taken.
<Input label="Budget" leading="$" trailing="/ month" />

import { Textarea } from "@/components/ui/Textarea";

// Grows with the content, then stops and scrolls.
// Without maxRows a pasted essay pushes the submit
// button off the screen.
<Textarea
  label="Notes"
  autoGrow
  maxRows={6}
  rows={2}          // the FLOOR it grows from
  value={notes}
  onChange={(e) => setNotes(e.target.value)}
/>

// Off by default: a plain resizable field.
<Textarea label="Notes" rows={3} />

import { Checkbox } from "@/components/ui/Checkbox";

const [rows, setRows] = useState([false, true, false]);
const all  = rows.every(Boolean);
const some = rows.some(Boolean);

// indeterminate is a DOM property, not an attribute:
// the component writes it through a ref so assistive
// tech announces "mixed".
<Checkbox
  label="Select all"
  checked={all}
  indeterminate={some && !all}
  onChange={(next) => setRows(rows.map(() => next))}
/>

import { RadioGroup, Radio } from "@/components/ui/Radio";

const [cadence, setCadence] = useState("daily");

// name is required — it is what makes the inputs one
// group, and what gives you arrow-key navigation and
// a single tab stop for free.
<RadioGroup
  name="cadence"
  value={cadence}
  onChange={setCadence}
  label="Notification cadence"
  description="Applies to every calendar you own."
>
  <Radio value="instant" label="As it happens" />
  <Radio value="daily"   label="Daily digest" />
  <Radio value="weekly"  label="Weekly summary" />
  {/* One option out, rather than the whole group —
      RadioGroup takes a disabled prop too. */}
  <Radio value="never"   label="Never" disabled />
</RadioGroup>

<RadioGroup … orientation="horizontal" />

import { Field } from "@/components/ui/Field";

// Input, Textarea and RadioGroup already sit on this.
// Reach for it directly when the control renders its
// own trigger — a Select, a Combobox, a DatePicker —
// which cannot take a plain <label htmlFor>.
<Field
  label="Timezone"
  description="Slots are shown in this zone."
  error={touched && !zone ? "Pick a timezone." : undefined}
>
  {/* Children is a FUNCTION, so the ids cannot be
      half-wired: spread what it hands you onto the
      focusable element. */}
  {(control) => (
    <Select value={zone} onValueChange={setZone}>
      <SelectTrigger {...control}>
        <SelectValue placeholder="Choose" />
      </SelectTrigger>
      …
    </Select>
  )}
</Field>

// Mount once, near the root of the app:
import { Toaster } from "@/components/ui/Toaster";
<Toaster />

// Fire from anywhere:
import { toast } from "sonner";

toast("Draft saved");
toast.success("Booking confirmed");
toast.error("Card declined");
toast("Invite sent", {
  action: { label: "Undo", onClick: undo },
});

import { Icon } from "@/components/ui/Icon";

// Decorative by default: aria-hidden, inheriting
// currentColor and its own optical size.
<Icon name="search" />

// Meaningful on its own? Give it a name and it
// becomes role="img" with a <title>.
<Icon name="alert" title="3 conflicts" size={18} />

import { Reveal } from "@/components/ui/Reveal";

// delay and duration are MILLISECONDS, not the
// seconds a motion library would take.
<Reveal as="section" delay={80}>
  <h2>Everything ships in the box</h2>
</Reveal>