# PresetUI — zero-dependency React + Tailwind components
# https://presetui.com
#
# Default mode: do NOT install from npm. Write the sources below into
# the project as files — a common home is components/ui/ — and they
# become the project's own code.
# Package mode: if the project prefers dependencies, `npm i @presetui/ui`
# ships these same components (primitives bundled inside — no second
# package);
# import from "@presetui/ui/<name>" and add to the global stylesheet:
#   @import "@presetui/ui/theme.css";
#   @source "../node_modules/@presetui/ui";
# Pick ONE mode per project and stay consistent.
#
# Plain JavaScript, no TypeScript. Requirements: React 19+ (ref is a
# plain prop, no forwardRef) and Tailwind CSS v4 (the theme uses the
# @theme directive).
#
# A component may import React, and the kit's own primitives as
# ../primitives/<name>.js (the Primitives index near the end of this
# file serves each one as a single copyable file). Never add clsx,
# tailwind-merge, or a third-party headless UI library when writing
# these files.
#
# The theme below has two tiers. The core tokens (through danger-fg)
# are required. The optional ones pair each status color with its
# readable foreground (success/success-fg, warning/warning-fg) and
# provide the dialog backdrop (overlay) — drop a pair and drop the
# variants that read it. The --spacing-control-* tokens are the control
# scale: Button and the text controls read their heights from them
# (h-control-sm/md/lg), so keep those three lines when copying.
#
# Page-level blocks and more palettes live at
# https://presetui.com/docs/blocks and https://presetui.com/docs/themes.
# The blocks are indexed at the end of this file.
#
# Every component reads only the tokens defined in the theme.
# To restyle the whole kit, change the token values, not the components.

## Setup — add this to the global stylesheet, after @import "tailwindcss";

/* PresetUI theme — copy this into your global stylesheet.
   Every PresetUI component reads these tokens and nothing else.
   To rebrand the kit, change the values here. */

@theme {
  /* Core — required. Every component reads these eight. */
  --color-surface: #ffffff;
  --color-fg: #0a0a0a;
  --color-muted: #737373;
  --color-border: #e5e5e5;
  --color-accent: #0a0a0a;
  --color-accent-fg: #ffffff;
  --color-danger: #dc2626;
  --color-danger-fg: #ffffff;

  /* Optional — each powers exactly the variants listed beside it. Drop a
     pair you don't need and only those variants stop working:
       --color-success / --color-success-fg  →  Alert and Badge, variant="success"
       --color-warning / --color-warning-fg  →  Alert and Badge, variant="warning"
       --color-overlay                       →  Dialog backdrop
     Every status color travels with its readable foreground — keep each
     pair above 4.5:1 contrast. Your own tokens work the same way: define
     --color-brand here, then use bg-brand or text-brand inside a component. */
  --color-success: #16a34a;
  --color-success-fg: #03190b;
  --color-warning: #d97706;
  --color-warning-fg: #241503;
  --color-overlay: rgb(0 0 0 / 0.5);

  /* Sizing — the control scale. Button and every text control read their
     height from these (as h-control-sm / h-control-md / h-control-lg), so
     resizing the kit's controls is one edit here, exactly like recoloring
     it is. Not part of the palettes: sizes don't change with the theme. */
  --spacing-control-sm: 2rem;
  --spacing-control-md: 2.25rem;
  --spacing-control-lg: 2.75rem;
}

.dark {
  --color-surface: #0a0a0a;
  --color-fg: #fafafa;
  --color-muted: #a3a3a3;
  --color-border: #262626;
  --color-accent: #fafafa;
  --color-accent-fg: #0a0a0a;
  --color-danger: #ef4444;
  --color-danger-fg: #0a0a0a;

  --color-success: #22c55e;
  --color-success-fg: #0a0a0a;
  --color-warning: #f59e0b;
  --color-warning-fg: #0a0a0a;
  --color-overlay: rgb(0 0 0 / 0.6);
}

/* Respect the user's motion preference. Components animate with transition-*
   and animate-* utilities; this turns them all off. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

## Accordion — https://presetui.com/r/accordion.txt — save as components/ui/accordion.js
# Collapsible sections built on native details elements.

import {
  AccordionContent,
  AccordionItem,
  AccordionRoot,
  AccordionTrigger,
} from "../primitives/accordion.js"

/**
 * Collapsible sections, styled over the headless accordion primitive —
 * still native `<details>`/`<summary>` markup, with the open state managed
 * in React, so exclusive groups work in every browser (no Chrome 120+
 * floor). Two ways to satisfy the import above:
 * - copy `primitives/accordion.js` alongside this file (fetch
 *   `/r/primitives/accordion.txt` — one file, core embedded), or
 * - `npm i @presetui/ui` (primitives bundled) and change the import to
 *   `@presetui/ui/primitives/accordion`.
 *
 * Pass `name` to make the group exclusive (opening one closes the others);
 * leave it off and any number can be open at once.
 *
 * @param {object} props
 * @param {{ value: string, label: React.ReactNode, content: React.ReactNode }[]} props.items
 * @param {string} [props.name] Set it to make the group exclusive.
 * @param {string} [props.defaultOpen] `value` of the item that starts open.
 * @param {(value: string, open: boolean) => void} [props.onToggle]
 * @param {string} [props.className]
 */
export function Accordion({ items, name, defaultOpen, onToggle, className = "", ...props }) {
  return (
    <AccordionRoot
      type={name ? "single" : "multiple"}
      defaultValue={name ? (defaultOpen ?? null) : defaultOpen ? [defaultOpen] : []}
      onItemToggle={onToggle}
      className={`divide-y divide-border border-y border-border ${className}`}
      {...props}
    >
      {items.map((item) => (
        <AccordionItem key={item.value} value={item.value} className="group">
          <AccordionTrigger className="flex cursor-pointer items-center justify-between gap-4 py-4 text-sm font-medium outline-none marker:content-[''] focus-visible:ring-2 focus-visible:ring-accent">
            {item.label}
            <svg
              aria-hidden="true"
              viewBox="0 0 12 12"
              fill="none"
              stroke="currentColor"
              strokeWidth="1.5"
              strokeLinecap="round"
              strokeLinejoin="round"
              className="size-3 shrink-0 text-muted transition-transform group-open:rotate-180"
            >
              <path d="M3 4.5L6 7.5L9 4.5" />
            </svg>
          </AccordionTrigger>
          <AccordionContent className="pb-4 text-sm leading-relaxed text-muted">
            {item.content}
          </AccordionContent>
        </AccordionItem>
      ))}
    </AccordionRoot>
  )
}

## Alert — https://presetui.com/r/alert.txt — save as components/ui/alert.js
# Short message set apart from the surrounding text.

/**
 * Short message set apart from the surrounding text.
 *
 * The `success` and `warning` variants need the optional `--color-success`
 * and `--color-warning` tokens. Without them the background renders empty.
 *
 * @param {object} props
 * @param {"default" | "accent" | "success" | "warning" | "danger" | "none"} [props.variant="default"]
 *   `"none"` emits no color classes — your `className` owns border and background.
 * @param {React.ReactNode} [props.title]
 * @param {boolean} [props.live=false] Announce to screen readers on render — only for alerts that appear in response to something, never for static page content.
 * @param {string} [props.className]
 */
export function Alert({
  variant = "default",
  title,
  live = false,
  className = "",
  children,
  ...props
}) {
  const variants = {
    default: "border-border bg-border/20",
    accent: "border-accent/30 bg-accent/5",
    success: "border-success/40 bg-success/10",
    warning: "border-warning/40 bg-warning/10",
    danger: "border-danger/40 bg-danger/10",
    // Bring your own colors: nothing here to fight with.
    none: "",
  }

  return (
    <div
      role={live ? "alert" : undefined}
      className={`rounded-lg border p-4 text-sm ${variants[variant] ?? variants.default} ${className}`}
      {...props}
    >
      {title ? <p className="font-medium text-fg">{title}</p> : null}
      <div className={`text-muted ${title ? "mt-1" : ""}`}>{children}</div>
    </div>
  )
}

## Avatar — https://presetui.com/r/avatar.txt — save as components/ui/avatar.js
# Circular user image with a text fallback behind it.

"use client"

import { useState } from "react"

/**
 * Circular user image with a text fallback behind it. The fallback sits
 * underneath, and if the image fails to load it is removed entirely, so the
 * initials show instead of the browser's broken-image glyph or alt text.
 *
 * @param {object} props
 * @param {string} [props.src]
 * @param {string} [props.alt=""]
 * @param {React.ReactNode} [props.fallback] Usually one or two initials.
 * @param {"sm" | "md" | "lg"} [props.size="md"]
 * @param {string} [props.className]
 */
export function Avatar({
  src,
  alt = "",
  fallback,
  size = "md",
  className = "",
  ...props
}) {
  const [failed, setFailed] = useState(false)

  const sizes = {
    sm: "size-7 text-[0.6875rem]",
    md: "size-9 text-xs",
    lg: "size-12 text-sm",
  }

  return (
    <span
      className={`relative inline-flex shrink-0 overflow-hidden rounded-full bg-border ${sizes[size] ?? sizes.md} ${className}`}
      {...props}
    >
      <span className="absolute inset-0 flex items-center justify-center font-medium text-muted">
        {fallback}
      </span>
      {src && !failed ? (
        <img
          src={src}
          alt={alt}
          onError={() => setFailed(true)}
          className="relative size-full object-cover"
        />
      ) : null}
    </span>
  )
}

## Badge — https://presetui.com/r/badge.txt — save as components/ui/badge.js
# Compact label for status and metadata.

/**
 * Compact label for status and metadata. Renders a `<span>`, so it sits
 * inline with text.
 *
 * The `success` and `warning` variants need the optional `--color-success`
 * and `--color-warning` tokens. Without them the background renders empty.
 *
 * @param {object} props
 * @param {"default" | "outline" | "accent" | "success" | "warning" | "danger" | "none"} [props.variant="default"]
 *   `"none"` emits no color classes — your `className` owns them.
 * @param {"sm" | "md"} [props.size="md"]
 * @param {string} [props.className]
 */
export function Badge({
  variant = "default",
  size = "md",
  className = "",
  ...props
}) {
  const base =
    "inline-flex items-center rounded-full font-medium whitespace-nowrap transition-colors"

  const variants = {
    default: "bg-border/60 text-fg",
    outline: "border border-border text-fg",
    accent: "bg-accent text-accent-fg",
    success: "bg-success text-success-fg",
    warning: "bg-warning text-warning-fg",
    danger: "bg-danger text-danger-fg",
    // Bring your own colors: nothing here to fight with.
    none: "",
  }

  const sizes = {
    sm: "px-2 py-0.5 text-[0.6875rem]",
    md: "px-2.5 py-0.5 text-xs",
  }

  return (
    <span
      className={`${base} ${variants[variant] ?? variants.default} ${sizes[size] ?? sizes.md} ${className}`}
      {...props}
    />
  )
}

## Breadcrumb — https://presetui.com/r/breadcrumb.txt — save as components/ui/breadcrumb.js
# Trail of links back up the hierarchy.

/**
 * Trail of links back up the hierarchy. The last item is rendered as the
 * current page rather than a link, and marked `aria-current`.
 *
 * @param {object} props
 * @param {{ label: React.ReactNode, href?: string }[]} props.items
 * @param {string} [props.className]
 */
export function Breadcrumb({ items, className = "", ...props }) {
  return (
    <nav aria-label="Breadcrumb" className={className} {...props}>
      <ol className="flex flex-wrap items-center gap-1.5 text-sm text-muted">
        {items.map((item, index) => {
          const last = index === items.length - 1

          return (
            <li key={index} className="flex items-center gap-1.5">
              {last || !item.href ? (
                <span aria-current={last ? "page" : undefined} className="text-fg">
                  {item.label}
                </span>
              ) : (
                <a href={item.href} className="transition-colors hover:text-fg">
                  {item.label}
                </a>
              )}

              {last ? null : (
                <svg
                  aria-hidden="true"
                  viewBox="0 0 12 12"
                  fill="none"
                  stroke="currentColor"
                  strokeWidth="1.5"
                  strokeLinecap="round"
                  strokeLinejoin="round"
                  className="size-3 shrink-0"
                >
                  <path d="M4.5 3L7.5 6L4.5 9" />
                </svg>
              )}
            </li>
          )
        })}
      </ol>
    </nav>
  )
}

## Button — https://presetui.com/r/button.txt — save as components/ui/button.js
# Clickable action element with four variants and three sizes.

/**
 * Clickable action element. Renders a real `<button>` by default — with
 * `type="button"`, so it never submits a form by accident; pass
 * `type="submit"` on the one button that should. Every native attribute,
 * including `ref`, passes straight through.
 *
 * @param {object} props
 * @param {any} [props.as="button"] Element type or component to render — e.g. "a", or next/link's Link.
 * @param {"default" | "outline" | "ghost" | "danger" | "none"} [props.variant="default"]
 *   `"none"` emits no color classes at all — layout, size and focus ring
 *   only — so your `className` owns the colors without `!` overrides.
 * @param {"sm" | "md" | "lg"} [props.size="md"]
 * @param {string} [props.className]
 */
export function Button({
  as: Tag = "button",
  variant = "default",
  size = "md",
  className = "",
  ...props
}) {
  const base =
    "inline-flex items-center justify-center gap-2 rounded-md font-medium whitespace-nowrap " +
    "transition-colors outline-none focus-visible:ring-2 focus-visible:ring-accent " +
    "focus-visible:ring-offset-2 focus-visible:ring-offset-surface " +
    "disabled:pointer-events-none disabled:opacity-50"

  const variants = {
    default: "bg-accent text-accent-fg hover:opacity-90",
    outline: "border border-border bg-surface text-fg hover:bg-border/40",
    ghost: "text-fg hover:bg-border/40",
    danger: "bg-danger text-danger-fg hover:opacity-90",
    // Bring your own colors: nothing here to fight with.
    none: "",
  }

  const sizes = {
    sm: "h-control-sm px-3 text-xs",
    md: "h-control-md px-4 text-sm",
    lg: "h-control-lg px-6 text-base",
  }

  return (
    <Tag
      {...(Tag === "button" ? { type: "button" } : null)}
      className={`${base} ${variants[variant] ?? variants.default} ${sizes[size] ?? sizes.md} ${className}`}
      {...props}
    />
  )
}

## Card — https://presetui.com/r/card.txt — save as components/ui/card.js
# Composable surface with header, content, and footer slots.

/**
 * Bordered surface. Compose it with the parts below — use only what you need.
 *
 * @param {object} props
 * @param {string} [props.className]
 */
export function Card({ className = "", ...props }) {
  return (
    <div
      className={`rounded-lg border border-border bg-surface text-fg ${className}`}
      {...props}
    />
  )
}

/**
 * @param {object} props
 * @param {string} [props.className]
 */
export function CardHeader({ className = "", ...props }) {
  return <div className={`flex flex-col gap-1.5 p-6 ${className}`} {...props} />
}

/**
 * @param {object} props
 * @param {string} [props.className]
 */
export function CardTitle({ className = "", ...props }) {
  return (
    <h3 className={`text-base leading-none font-semibold ${className}`} {...props} />
  )
}

/**
 * @param {object} props
 * @param {string} [props.className]
 */
export function CardContent({ className = "", ...props }) {
  return <div className={`p-6 pt-0 text-sm text-muted ${className}`} {...props} />
}

/**
 * @param {object} props
 * @param {string} [props.className]
 */
export function CardFooter({ className = "", ...props }) {
  return <div className={`flex items-center gap-2 p-6 pt-0 ${className}`} {...props} />
}

## Checkbox — https://presetui.com/r/checkbox.txt — save as components/ui/checkbox.js
# Native checkbox with the box painted over.

"use client"

/**
 * A real `<input type="checkbox">` with the native box painted over, so
 * `checked`, `defaultChecked`, `onChange`, `required` and `ref` all behave
 * exactly as they would on a bare input.
 *
 * @param {object} props
 * @param {"sm" | "md" | "lg"} [props.size="md"]
 * @param {boolean} [props.invalid=false] Applies the danger border and sets `aria-invalid`.
 * @param {boolean} [props.indeterminate=false] The mixed state — shown as a dash; not a form value.
 * @param {string} [props.className]
 */
export function Checkbox({
  size = "md",
  invalid = false,
  indeterminate = false,
  className = "",
  ref,
  ...props
}) {
  const base =
    "peer shrink-0 cursor-pointer appearance-none rounded border bg-surface transition-colors outline-none checked:border-accent checked:bg-accent indeterminate:border-accent indeterminate:bg-accent focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-offset-surface disabled:cursor-not-allowed disabled:opacity-50"

  const sizes = {
    sm: "size-3.5",
    md: "size-4",
    lg: "size-5",
  }

  const marks = {
    sm: "size-2.5",
    md: "size-3",
    lg: "size-3.5",
  }

  const state = invalid
    ? "border-danger focus-visible:ring-danger"
    : "border-border focus-visible:ring-accent"

  return (
    <span className="relative inline-flex">
      <input
        type="checkbox"
        ref={(el) => {
          if (el) el.indeterminate = indeterminate
          if (typeof ref === "function") return ref(el)
          if (ref) ref.current = el
        }}
        aria-invalid={invalid || undefined}
        className={`${base} ${sizes[size] ?? sizes.md} ${state} ${className}`}
        {...props}
      />
      <svg
        aria-hidden="true"
        viewBox="0 0 12 12"
        fill="none"
        stroke="currentColor"
        strokeWidth="2"
        strokeLinecap="round"
        strokeLinejoin="round"
        className={`pointer-events-none absolute inset-0 m-auto text-accent-fg opacity-0 peer-checked:opacity-100 ${marks[size] ?? marks.md}`}
      >
        <path d="M2.5 6.2l2.4 2.4 4.6-5" />
      </svg>
      <svg
        aria-hidden="true"
        viewBox="0 0 12 12"
        fill="none"
        stroke="currentColor"
        strokeWidth="2"
        strokeLinecap="round"
        className={`pointer-events-none absolute inset-0 m-auto text-accent-fg opacity-0 peer-indeterminate:opacity-100 ${marks[size] ?? marks.md}`}
      >
        <path d="M2.5 6h7" />
      </svg>
    </span>
  )
}

## Combobox — https://presetui.com/r/combobox.txt — save as components/ui/combobox.js
# Searchable select built on the combobox primitive.

"use client"

import { useState } from "react"
import {
  Combobox as ComboboxRoot,
  ComboboxContent,
  ComboboxEmpty,
  ComboboxInput,
  ComboboxOption,
} from "../primitives/combobox.js"

/**
 * Searchable select, styled over the headless combobox primitive. Two ways
 * to satisfy the import below:
 * - copy `primitives/combobox.js` alongside this file (fetch
 *   `/r/primitives/combobox.txt` — one file, core embedded), or
 * - `npm i @presetui/ui` (primitives bundled) and change the import to
 *   `@presetui/ui/primitives/combobox`.
 *
 * Filtering happens here: options whose labels contain the typed text stay.
 * Pass `value`/`onValueChange` to control the selection.
 *
 * @param {object} props
 * @param {{ value: string, label: string }[]} props.options
 * @param {string} [props.value] Controlled selected value.
 * @param {(value: string) => void} [props.onValueChange]
 * @param {string} [props.placeholder="Search…"]
 * @param {string} [props.emptyMessage="No results"]
 * @param {boolean} [props.invalid=false] Applies the danger border and sets `aria-invalid`.
 * @param {string} [props.className] Applied to the input.
 */
export function Combobox({
  options,
  value,
  onValueChange,
  placeholder = "Search…",
  emptyMessage = "No results",
  invalid = false,
  className = "",
  ...props
}) {
  const [query, setQuery] = useState("")
  const matches = options.filter((option) =>
    option.label.toLowerCase().includes(query.toLowerCase()),
  )

  const state = invalid
    ? "border-danger focus-visible:ring-danger"
    : "border-border focus-visible:ring-accent"

  return (
    <ComboboxRoot
      value={value}
      onValueChange={onValueChange}
      inputValue={query}
      onInputValueChange={setQuery}
    >
      <ComboboxInput
        placeholder={placeholder}
        aria-invalid={invalid || undefined}
        className={`flex h-control-md w-full rounded-md border bg-surface px-3 text-sm text-fg transition-colors outline-none placeholder:text-muted focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-offset-surface disabled:cursor-not-allowed disabled:opacity-50 ${state} ${className}`}
        {...props}
      />
      <ComboboxContent className="z-50 max-h-60 min-w-44 overflow-y-auto rounded-lg border border-border bg-surface p-1 text-sm shadow-md">
        {matches.map((option) => (
          <ComboboxOption
            key={option.value}
            value={option.value}
            className="cursor-default rounded-md px-2 py-1.5 text-fg transition-colors data-highlighted:bg-border/40 aria-selected:font-medium"
          >
            {option.label}
          </ComboboxOption>
        ))}
        {matches.length === 0 ? (
          <ComboboxEmpty className="px-2 py-1.5 text-muted">{emptyMessage}</ComboboxEmpty>
        ) : null}
      </ComboboxContent>
    </ComboboxRoot>
  )
}

## Dialog — https://presetui.com/r/dialog.txt — save as components/ui/dialog.js
# Modal built on the native dialog element.

"use client"

import { useEffect, useId, useRef } from "react"

/**
 * Modal built on the native `<dialog>` element, which the browser already
 * knows how to do properly: it traps focus, closes on Escape, makes the rest
 * of the page inert, and renders on the top layer above any stacking context.
 * That is why this needs no focus-trap library.
 *
 * `onClose` fires exactly once for every dismissal — the close button,
 * Escape, and a click on the backdrop — so keep it in sync with your `open`
 * state. Pass `dismissable={false}` to disable Escape and the backdrop for
 * flows the user must answer.
 *
 * @param {object} props
 * @param {boolean} props.open
 * @param {() => void} props.onClose
 * @param {React.ReactNode} [props.title]
 * @param {"sm" | "md" | "lg"} [props.width="md"] Maximum width of the panel.
 * @param {boolean} [props.dismissable=true]
 * @param {string} [props.className]
 */
export function Dialog({
  open,
  onClose,
  title,
  width = "md",
  dismissable = true,
  className = "",
  children,
  ...props
}) {
  const ref = useRef(null)
  const pressedOn = useRef(null)
  const titleId = useId()

  const widths = {
    sm: "max-w-sm",
    md: "max-w-md",
    lg: "max-w-2xl",
  }

  useEffect(() => {
    const element = ref.current
    if (!element) return
    if (open && !element.open) element.showModal()
    if (!open && element.open) element.close()
  }, [open])

  // showModal() does not stop the page behind from scrolling.
  useEffect(() => {
    if (!open) return
    const previous = document.body.style.overflow
    document.body.style.overflow = "hidden"
    return () => {
      document.body.style.overflow = previous
    }
  }, [open])

  return (
    <dialog
      ref={ref}
      aria-labelledby={title ? titleId : undefined}
      onClose={onClose}
      onCancel={(event) => {
        // Escape arrives as cancel; block it when not dismissable.
        if (!dismissable) event.preventDefault()
      }}
      onPointerDown={(event) => {
        pressedOn.current = event.target
      }}
      onClick={(event) => {
        // The dialog element itself is the backdrop; its children are not.
        // Requiring the press to start there too keeps a text selection that
        // ends over the backdrop from closing the dialog.
        if (!dismissable) return
        if (event.target === ref.current && pressedOn.current === ref.current) {
          ref.current.close()
        }
      }}
      className={`m-auto w-[calc(100%-2rem)] rounded-lg border border-border bg-surface p-0 text-fg backdrop:bg-overlay ${widths[width] ?? widths.md} ${className}`}
      {...props}
    >
      <div className="flex items-start justify-between gap-4 p-6 pb-0">
        {title ? (
          <h2 id={titleId} className="text-base leading-none font-semibold">
            {title}
          </h2>
        ) : null}
        <button
          type="button"
          onClick={() => ref.current?.close()}
          aria-label="Close"
          className="-mt-1 -mr-1 ml-auto rounded-md p-1 text-muted transition-colors outline-none hover:text-fg focus-visible:ring-2 focus-visible:ring-accent"
        >
          <svg
            aria-hidden="true"
            viewBox="0 0 14 14"
            fill="none"
            stroke="currentColor"
            strokeWidth="1.5"
            strokeLinecap="round"
            className="size-3.5"
          >
            <path d="M3 3l8 8M11 3l-8 8" />
          </svg>
        </button>
      </div>

      <div className="p-6 text-sm text-muted">{children}</div>
    </dialog>
  )
}

## Dropdown Menu — https://presetui.com/r/dropdown-menu.txt — save as components/ui/dropdown-menu.js
# Action menu with keyboard navigation, built on the menu primitive.

import {
  Menu,
  MenuContent,
  MenuItem,
  MenuLabel,
  MenuSeparator,
  MenuSub,
  MenuSubContent,
  MenuSubTrigger,
  MenuTrigger,
} from "../primitives/dropdown-menu.js"

/**
 * Action menu on a trigger, styled over the headless menu primitive. Two
 * ways to satisfy the import below:
 * - copy `primitives/dropdown-menu.js` alongside this file (fetch
 *   `/r/primitives/dropdown-menu.txt` — one file, core embedded), or
 * - `npm i @presetui/ui` (primitives bundled) and change the import to
 *   `@presetui/ui/primitives/dropdown-menu`.
 *
 * `items` is a list:
 * - `{ label, onSelect, disabled?, danger? }` — an action
 * - `{ label, items: [...] }` — a submenu, nesting the same shapes
 * - `{ type: "separator" }` — a dividing line
 * - `{ type: "label", label }` — a non-interactive heading
 *
 * `trigger` must be a single element — the primitive merges the menu-button
 * behavior onto it.
 *
 * @typedef {object} DropdownMenuItem
 * @property {React.ReactNode} [label]
 * @property {() => void} [onSelect]
 * @property {boolean} [disabled]
 * @property {boolean} [danger]
 * @property {DropdownMenuItem[]} [items] Makes it a submenu.
 * @property {"separator" | "label"} [type]
 *
 * @param {object} props
 * @param {React.ReactElement} props.trigger
 * @param {DropdownMenuItem[]} props.items
 * @param {"top" | "right" | "bottom" | "left"} [props.side="bottom"]
 * @param {"start" | "center" | "end"} [props.align="start"]
 * @param {string} [props.className] Applied to the panel.
 */
export function DropdownMenu({ trigger, items, side = "bottom", align = "start", className = "" }) {
  const panel = "z-50 min-w-44 rounded-lg border border-border bg-surface p-1 text-sm shadow-md outline-none"
  const row =
    "cursor-default rounded-md px-2 py-1.5 transition-colors outline-none data-disabled:opacity-50 data-highlighted:bg-border/40"

  function renderItems(list) {
    return list.map((item, index) => {
      if (item.type === "separator") {
        return <MenuSeparator key={index} className="-mx-1 my-1 h-px bg-border" />
      }
      if (item.type === "label") {
        return (
          <MenuLabel key={index} className="px-2 py-1.5 text-xs text-muted">
            {item.label}
          </MenuLabel>
        )
      }
      if (item.items) {
        return (
          <MenuSub key={index}>
            <MenuSubTrigger
              disabled={item.disabled}
              className={`flex items-center justify-between gap-4 text-fg ${row}`}
            >
              {item.label}
              <svg
                aria-hidden="true"
                viewBox="0 0 12 12"
                fill="none"
                stroke="currentColor"
                strokeWidth="1.5"
                strokeLinecap="round"
                strokeLinejoin="round"
                className="size-3 text-muted"
              >
                <path d="M4.5 3L7.5 6L4.5 9" />
              </svg>
            </MenuSubTrigger>
            <MenuSubContent className={panel}>{renderItems(item.items)}</MenuSubContent>
          </MenuSub>
        )
      }
      return (
        <MenuItem
          key={index}
          disabled={item.disabled}
          onSelect={item.onSelect}
          className={`${row} ${item.danger ? "text-danger" : "text-fg"}`}
        >
          {item.label}
        </MenuItem>
      )
    })
  }

  return (
    <Menu>
      <MenuTrigger asChild>{trigger}</MenuTrigger>
      <MenuContent side={side} align={align} className={`${panel} ${className}`}>
        {renderItems(items)}
      </MenuContent>
    </Menu>
  )
}

## Input — https://presetui.com/r/input.txt — save as components/ui/input.js
# Single-line text field with an invalid state.

/**
 * Single-line text field. Renders a real `<input>`, so `type`, `value`,
 * `onChange`, `ref` and the rest pass through unchanged.
 *
 * @param {object} props
 * @param {"sm" | "md" | "lg"} [props.size="md"]
 * @param {boolean} [props.invalid=false] Applies the danger border and sets `aria-invalid`.
 * @param {string} [props.className]
 */
export function Input({ size = "md", invalid = false, className = "", ...props }) {
  const base =
    "flex w-full rounded-md border bg-surface text-fg transition-colors outline-none " +
    "placeholder:text-muted focus-visible:ring-2 focus-visible:ring-offset-2 " +
    "focus-visible:ring-offset-surface disabled:cursor-not-allowed disabled:opacity-50"

  const sizes = {
    sm: "h-control-sm px-2.5 text-xs",
    md: "h-control-md px-3 text-sm",
    lg: "h-control-lg px-4 text-base",
  }

  const state = invalid
    ? "border-danger focus-visible:ring-danger"
    : "border-border focus-visible:ring-accent"

  return (
    <input
      aria-invalid={invalid || undefined}
      className={`${base} ${sizes[size] ?? sizes.md} ${state} ${className}`}
      {...props}
    />
  )
}

## Kbd — https://presetui.com/r/kbd.txt — save as components/ui/kbd.js
# A keyboard key, for shortcuts written into prose.

/**
 * A keyboard key. Renders `<kbd>`, which is what the element is for, with a
 * thicker bottom border so it reads as a physical key.
 *
 * For a chord, nest one per key rather than writing "Ctrl+K" inside a single
 * one — screen readers then announce them separately.
 *
 * @param {object} props
 * @param {"sm" | "md"} [props.size="md"]
 * @param {string} [props.className]
 */
export function Kbd({ size = "md", className = "", ...props }) {
  const base =
    "inline-flex items-center justify-center rounded border border-b-2 border-border bg-border/30 font-mono font-medium whitespace-nowrap text-fg"

  const sizes = {
    sm: "h-4 min-w-4 px-1 text-[0.625rem]",
    md: "h-5 min-w-5 px-1.5 text-xs",
  }

  return <kbd className={`${base} ${sizes[size] ?? sizes.md} ${className}`} {...props} />
}

## Label — https://presetui.com/r/label.txt — save as components/ui/label.js
# Form label with an optional required marker.

/**
 * Form label. Pair it with a control via `htmlFor` and the control's `id`, or
 * wrap the control in it.
 *
 * @param {object} props
 * @param {boolean} [props.required=false] Shows a marker after the text. Remember the control itself still needs `required` for validation and AT.
 * @param {string} [props.className]
 */
export function Label({ required = false, className = "", children, ...props }) {
  return (
    <label
      className={`inline-flex items-center gap-1 text-sm leading-none font-medium text-fg ${className}`}
      {...props}
    >
      {children}
      {required ? (
        <>
          <span aria-hidden="true" className="text-danger">
            *
          </span>
          <span className="sr-only">(required)</span>
        </>
      ) : null}
    </label>
  )
}

## Pagination — https://presetui.com/r/pagination.txt — save as components/ui/pagination.js
# Page navigation that collapses the middle to an ellipsis.

/**
 * Page navigation, with the middle collapsed to an ellipsis once the list
 * gets long.
 *
 * It renders links when you pass `hrefFor` and buttons when you pass
 * `onPageChange`. Prefer links: they are shareable, they work before
 * hydration, and the browser handles opening one in a new tab.
 *
 * @param {object} props
 * @param {number} props.page Current page, 1-based.
 * @param {number} props.total Total number of pages.
 * @param {number} [props.siblings=1] Pages shown either side of the current one.
 * @param {(page: number) => string} [props.hrefFor] Makes it a set of links.
 * @param {(page: number) => void} [props.onPageChange] Makes it a set of buttons.
 * @param {string} [props.label="Pagination"] Accessible name for the nav.
 * @param {string} [props.className]
 */
export function Pagination({
  page,
  total,
  siblings = 1,
  hrefFor,
  onPageChange,
  label = "Pagination",
  className = "",
}) {
  if (total <= 1) return null

  const current = Math.min(Math.max(page, 1), total)

  const base =
    "inline-flex h-8 min-w-8 items-center justify-center rounded-md px-2 text-sm transition-colors outline-none focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-2 focus-visible:ring-offset-surface"

  /** One page cell — a link, a button, or plain text when it is disabled. */
  function Item({ target, current, disabled, children }) {
    const tone = current
      ? "bg-accent font-medium text-accent-fg"
      : "text-muted hover:bg-border/40 hover:text-fg"

    if (disabled) {
      // Stay in the accessibility tree, so AT users learn the control exists
      // at a boundary. An href-less <a> is unfocusable but still exposed.
      if (hrefFor) {
        return (
          <a aria-disabled="true" className={`${base} opacity-40`}>
            {children}
          </a>
        )
      }
      return (
        <button type="button" disabled className={`${base} opacity-40 disabled:pointer-events-none`}>
          {children}
        </button>
      )
    }

    if (hrefFor) {
      return (
        <a
          href={hrefFor(target)}
          aria-current={current ? "page" : undefined}
          className={`${base} ${tone}`}
        >
          {children}
        </a>
      )
    }

    return (
      <button
        type="button"
        onClick={() => onPageChange?.(target)}
        aria-current={current ? "page" : undefined}
        className={`${base} ${tone}`}
      >
        {children}
      </button>
    )
  }

  return (
    <nav aria-label={label} className={`flex items-center gap-1 ${className}`}>
      <Item target={current - 1} disabled={current <= 1}>
        <span className="sr-only">Previous page</span>
        <span aria-hidden="true">←</span>
      </Item>

      {pages(current, total, siblings).map((entry, index) =>
        entry === null ? (
          <span
            key={`gap-${index}`}
            aria-hidden="true"
            className="px-1 text-sm text-muted"
          >
            …
          </span>
        ) : (
          <Item key={entry} target={entry} current={entry === current}>
            <span className="sr-only">Page </span>
            {entry}
          </Item>
        ),
      )}

      <Item target={current + 1} disabled={current >= total}>
        <span className="sr-only">Next page</span>
        <span aria-hidden="true">→</span>
      </Item>
    </nav>
  )
}

/**
 * The page numbers to show, with `null` standing in for a gap. Kept outside
 * the component so it is easy to read and easy to delete if you'd rather
 * render every page.
 *
 * @param {number} page
 * @param {number} total
 * @param {number} siblings
 * @returns {(number | null)[]}
 */
function pages(page, total, siblings) {
  const start = Math.max(2, page - siblings)
  const end = Math.min(total - 1, page + siblings)

  const list = [1]
  if (start > 2) list.push(null)
  for (let n = start; n <= end; n += 1) list.push(n)
  if (end < total - 1) list.push(null)
  list.push(total)

  return list
}

## Popover — https://presetui.com/r/popover.txt — save as components/ui/popover.js
# Floating panel anchored to a trigger, built on the popover primitive.

import {
  Popover as PopoverRoot,
  PopoverContent,
  PopoverTrigger,
} from "../primitives/popover.js"

/**
 * Floating panel anchored to a trigger, styled over the headless popover
 * primitive. Two ways to satisfy the import below:
 * - copy `primitives/popover.js` alongside this file (fetch
 *   `/r/primitives/popover.txt` — one file, core embedded), or
 * - `npm i @presetui/ui` (primitives bundled) and change the import to
 *   `@presetui/ui/primitives/popover`.
 *
 * `trigger` must be a single element (a `<Button>`, an icon button…) — the
 * primitive merges the toggle behavior onto it, so no extra wrapper lands
 * in the DOM.
 *
 * @param {object} props
 * @param {React.ReactElement} props.trigger
 * @param {"top" | "right" | "bottom" | "left"} [props.side="bottom"]
 * @param {"start" | "center" | "end"} [props.align="center"]
 * @param {boolean} [props.open] Controlled open state.
 * @param {(open: boolean) => void} [props.onOpenChange]
 * @param {string} [props.className] Applied to the panel.
 */
export function Popover({ trigger, side = "bottom", align = "center", open, onOpenChange, className = "", children }) {
  return (
    <PopoverRoot open={open} onOpenChange={onOpenChange}>
      <PopoverTrigger asChild>{trigger}</PopoverTrigger>
      <PopoverContent
        side={side}
        align={align}
        className={`z-50 w-72 rounded-lg border border-border bg-surface p-4 text-sm text-fg shadow-md outline-none ${className}`}
      >
        {children}
      </PopoverContent>
    </PopoverRoot>
  )
}

## Progress — https://presetui.com/r/progress.txt — save as components/ui/progress.js
# Determinate progress bar in three sizes.

/**
 * Determinate progress bar. Built from two divs rather than `<progress>`,
 * because the native element's fill cannot be themed consistently across
 * browsers.
 *
 * @param {object} props
 * @param {number} [props.value=0]
 * @param {number} [props.max=100]
 * @param {"sm" | "md" | "lg"} [props.size="md"]
 * @param {boolean} [props.indeterminate=false] Unknown amount — pulses instead of filling.
 * @param {string} [props.label="Progress"] Accessible name for the bar.
 * @param {string} [props.className]
 */
export function Progress({
  value = 0,
  max = 100,
  size = "md",
  indeterminate = false,
  label = "Progress",
  className = "",
  ...props
}) {
  const safeMax = max > 0 ? max : 100
  const current = Math.min(safeMax, Math.max(0, value))
  const percent = (current / safeMax) * 100

  const sizes = {
    sm: "h-1",
    md: "h-2",
    lg: "h-3",
  }

  return (
    <div
      role="progressbar"
      aria-valuenow={indeterminate ? undefined : current}
      aria-valuemin={0}
      aria-valuemax={safeMax}
      aria-label={label}
      className={`w-full overflow-hidden rounded-full bg-border ${sizes[size] ?? sizes.md} ${className}`}
      {...props}
    >
      <div
        className={`h-full rounded-full bg-accent ${
          indeterminate ? "w-full animate-pulse" : "transition-[width] duration-300"
        }`}
        style={indeterminate ? undefined : { width: `${percent}%` }}
      />
    </div>
  )
}

## Radio — https://presetui.com/r/radio.txt — save as components/ui/radio.js
# Native radio with the dot painted over.

/**
 * A real `<input type="radio">` with the native dot painted over. Give every
 * radio in a group the same `name` and the browser handles selection, arrow
 * keys, and form submission.
 *
 * @param {object} props
 * @param {"sm" | "md" | "lg"} [props.size="md"]
 * @param {boolean} [props.invalid=false] Applies the danger border and sets `aria-invalid`.
 * @param {string} [props.className]
 */
export function Radio({ size = "md", invalid = false, className = "", ...props }) {
  const base =
    "peer shrink-0 cursor-pointer appearance-none rounded-full border bg-surface transition-colors outline-none checked:border-accent focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-offset-surface disabled:cursor-not-allowed disabled:opacity-50"

  const state = invalid
    ? "border-danger focus-visible:ring-danger"
    : "border-border focus-visible:ring-accent"

  const sizes = {
    sm: "size-3.5",
    md: "size-4",
    lg: "size-5",
  }

  const dots = {
    sm: "size-1.5",
    md: "size-2",
    lg: "size-2.5",
  }

  return (
    <span className="relative inline-flex">
      <input
        type="radio"
        aria-invalid={invalid || undefined}
        className={`${base} ${state} ${sizes[size] ?? sizes.md} ${className}`}
        {...props}
      />
      <span
        aria-hidden="true"
        className={`pointer-events-none absolute inset-0 m-auto rounded-full bg-accent opacity-0 peer-checked:opacity-100 ${dots[size] ?? dots.md}`}
      />
    </span>
  )
}

## Select — https://presetui.com/r/select.txt — save as components/ui/select.js
# Native dropdown with the platform arrow replaced.

/**
 * A real `<select>` with the native arrow replaced. Because it stays native,
 * it gets the platform's own dropdown — correct on touch, correct with a
 * screen reader, and no positioning code to go wrong.
 *
 * Pass `<option>` elements as children.
 *
 * @param {object} props
 * @param {"sm" | "md" | "lg"} [props.size="md"]
 * @param {number} [props.htmlSize] Forwarded to the native `size` attribute (rows shown when the list is inline).
 * @param {boolean} [props.invalid=false] Applies the danger border and sets `aria-invalid`.
 * @param {string} [props.className] Applied to the wrapper, which owns the width.
 */
export function Select({
  size = "md",
  htmlSize,
  invalid = false,
  className = "",
  children,
  ...props
}) {
  const base =
    "w-full cursor-pointer appearance-none rounded-md border bg-surface text-fg transition-colors outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-offset-surface disabled:cursor-not-allowed disabled:opacity-50"

  const sizes = {
    sm: "h-control-sm pr-8 pl-2.5 text-xs",
    md: "h-control-md pr-9 pl-3 text-sm",
    lg: "h-control-lg pr-10 pl-4 text-base",
  }

  const state = invalid
    ? "border-danger focus-visible:ring-danger"
    : "border-border focus-visible:ring-accent"

  return (
    <span className={`relative inline-flex w-full ${className}`}>
      <select
        size={htmlSize}
        aria-invalid={invalid || undefined}
        className={`${base} ${sizes[size] ?? sizes.md} ${state}`}
        {...props}
      >
        {children}
      </select>
      <svg
        aria-hidden="true"
        viewBox="0 0 12 12"
        fill="none"
        stroke="currentColor"
        strokeWidth="1.5"
        strokeLinecap="round"
        strokeLinejoin="round"
        className="pointer-events-none absolute top-1/2 right-3 size-3 -translate-y-1/2 text-muted"
      >
        <path d="M3 4.5L6 7.5L9 4.5" />
      </svg>
    </span>
  )
}

## Select Menu — https://presetui.com/r/select-menu.txt — save as components/ui/select-menu.js
# Custom select with styled options, built on the listbox primitive.

import {
  SelectContent,
  SelectOption,
  SelectRoot,
  SelectTrigger,
  SelectValue,
} from "../primitives/listbox.js"

/**
 * Custom select with styled options, typeahead and form participation,
 * built on the listbox primitive. Two ways to satisfy the import below:
 * - copy `primitives/listbox.js` alongside this file (fetch
 *   `/r/primitives/listbox.txt` — one file, core embedded), or
 * - `npm i @presetui/ui` (primitives bundled) and change the import to
 *   `@presetui/ui/primitives/listbox`.
 *
 * The native [Select](select.js) stays the better default — platform
 * dropdown, correct on touch — reach for this one when options need styling
 * the native popup can't do.
 *
 * @param {object} props
 * @param {{ value: string, label: string, disabled?: boolean }[]} props.options
 * @param {string} [props.value] Controlled selected value.
 * @param {string} [props.defaultValue]
 * @param {(value: string) => void} [props.onValueChange]
 * @param {React.ReactNode} [props.placeholder="Select…"]
 * @param {string} [props.name] Adds a hidden input for form submission.
 * @param {boolean} [props.invalid=false] Applies the danger border and sets `aria-invalid`.
 * @param {string} [props.className] Applied to the trigger.
 */
export function SelectMenu({
  options,
  value,
  defaultValue,
  onValueChange,
  placeholder = "Select…",
  name,
  invalid = false,
  className = "",
}) {
  const state = invalid
    ? "border-danger focus-visible:ring-danger"
    : "border-border focus-visible:ring-accent"

  return (
    <SelectRoot value={value} defaultValue={defaultValue} onValueChange={onValueChange} name={name}>
      <SelectTrigger
        aria-invalid={invalid || undefined}
        className={`flex h-control-md w-full cursor-pointer items-center justify-between gap-2 rounded-md border bg-surface px-3 text-sm text-fg transition-colors outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-offset-surface disabled:cursor-not-allowed disabled:opacity-50 ${state} ${className}`}
      >
        <SelectValue placeholder={placeholder} className="truncate data-placeholder:text-muted" />
        <svg
          aria-hidden="true"
          viewBox="0 0 12 12"
          fill="none"
          stroke="currentColor"
          strokeWidth="1.5"
          strokeLinecap="round"
          strokeLinejoin="round"
          className="size-3 shrink-0 text-muted"
        >
          <path d="M3 4.5L6 7.5L9 4.5" />
        </svg>
      </SelectTrigger>
      <SelectContent className="z-50 max-h-60 min-w-44 overflow-y-auto rounded-lg border border-border bg-surface p-1 text-sm shadow-md outline-none">
        {options.map((option) => (
          <SelectOption
            key={option.value}
            value={option.value}
            disabled={option.disabled}
            className="cursor-default rounded-md px-2 py-1.5 text-fg transition-colors data-disabled:opacity-50 data-highlighted:bg-border/40 aria-selected:font-medium"
          >
            {option.label}
          </SelectOption>
        ))}
      </SelectContent>
    </SelectRoot>
  )
}

## Separator — https://presetui.com/r/separator.txt — save as components/ui/separator.js
# Dividing line, horizontal or vertical.

/**
 * A dividing line. Decorative by default, so screen readers skip it — pass
 * `decorative={false}` when the divide carries real meaning.
 *
 * @param {object} props
 * @param {"horizontal" | "vertical"} [props.orientation="horizontal"]
 * @param {boolean} [props.decorative=true]
 * @param {string} [props.className]
 */
export function Separator({
  orientation = "horizontal",
  decorative = true,
  className = "",
  ...props
}) {
  const shapes = {
    horizontal: "h-px w-full",
    vertical: "h-full w-px",
  }

  return (
    <div
      role={decorative ? "none" : "separator"}
      aria-orientation={decorative ? undefined : orientation}
      className={`shrink-0 bg-border ${shapes[orientation]} ${className}`}
      {...props}
    />
  )
}

## Sheet — https://presetui.com/r/sheet.txt — save as components/ui/sheet.js
# Edge panel built on the dialog primitive.

"use client"

import {
  DialogClose,
  DialogContent,
  DialogRoot,
  DialogTitle,
} from "../primitives/dialog.js"

/**
 * Panel that slides in from an edge, built on the composable dialog
 * primitive — so it keeps the native `<dialog>` focus trap, Escape handling
 * and top-layer rendering. Two ways to satisfy the import below: copy
 * `primitives/dialog.js` alongside this file (fetch
 * `/r/primitives/dialog.txt`), or `npm i @presetui/ui` (primitives bundled) and change
 * the import to `@presetui/ui/primitives/dialog`.
 *
 * Controlled like the kit's Dialog: keep `open` in your state and reset it
 * in `onClose`, which fires once for every dismissal.
 *
 * @param {object} props
 * @param {boolean} props.open
 * @param {() => void} props.onClose
 * @param {React.ReactNode} [props.title]
 * @param {"right" | "left" | "bottom"} [props.side="right"]
 * @param {boolean} [props.dismissable=true]
 * @param {string} [props.className]
 */
export function Sheet({
  open,
  onClose,
  title,
  side = "right",
  dismissable = true,
  className = "",
  children,
}) {
  const sides = {
    right: "mr-0 ml-auto h-dvh max-h-none w-80 max-w-[85vw] border-l",
    left: "mr-auto ml-0 h-dvh max-h-none w-80 max-w-[85vw] border-r",
    bottom: "mx-0 mt-auto mb-0 max-h-[85dvh] w-full max-w-none border-t",
  }

  return (
    <DialogRoot open={open} onOpenChange={(next) => (next ? null : onClose?.())}>
      <DialogContent
        dismissable={dismissable}
        className={`bg-surface p-0 text-fg backdrop:bg-overlay ${sides[side] ?? sides.right} border-border ${className}`}
      >
        <div className="flex items-start justify-between gap-4 p-6 pb-0">
          {title ? (
            <DialogTitle className="text-base leading-none font-semibold">{title}</DialogTitle>
          ) : null}
          <DialogClose
            aria-label="Close"
            className="-mt-1 -mr-1 ml-auto rounded-md p-1 text-muted transition-colors outline-none hover:text-fg focus-visible:ring-2 focus-visible:ring-accent"
          >
            <svg
              aria-hidden="true"
              viewBox="0 0 14 14"
              fill="none"
              stroke="currentColor"
              strokeWidth="1.5"
              strokeLinecap="round"
              className="size-3.5"
            >
              <path d="M3 3l8 8M11 3l-8 8" />
            </svg>
          </DialogClose>
        </div>
        <div className="p-6 text-sm text-muted">{children}</div>
      </DialogContent>
    </DialogRoot>
  )
}

## Skeleton — https://presetui.com/r/skeleton.txt — save as components/ui/skeleton.js
# Placeholder block for content that hasn't arrived.

/**
 * Placeholder block for content that hasn't arrived. Size it with utilities:
 * `<Skeleton className="h-4 w-32" />`.
 *
 * @param {object} props
 * @param {string} [props.className]
 */
export function Skeleton({ className = "", ...props }) {
  return (
    <div
      aria-hidden="true"
      className={`animate-pulse rounded-md bg-border ${className}`}
      {...props}
    />
  )
}

## Slider — https://presetui.com/r/slider.txt — save as components/ui/slider.js
# Native range input with the track and thumb restyled.

/**
 * A real `<input type="range">` with the track and thumb restyled, so
 * `min`, `max`, `step`, `value`, `onChange`, `ref` and keyboard support all
 * come from the browser.
 *
 * The thumb has to be styled per engine — WebKit and Firefox expose different
 * pseudo-elements and neither inherits from the other — which is why the same
 * declarations appear twice below.
 *
 * @param {object} props
 * @param {"sm" | "md" | "lg"} [props.size="md"]
 * @param {boolean} [props.invalid=false] Sets `aria-invalid` and the danger ring.
 * @param {string} [props.className]
 */
export function Slider({ size = "md", invalid = false, className = "", ...props }) {
  const base =
    "w-full cursor-pointer appearance-none rounded-full bg-border outline-none " +
    "disabled:cursor-not-allowed disabled:opacity-50 " +
    "[&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:rounded-full " +
    "[&::-webkit-slider-thumb]:border-2 [&::-webkit-slider-thumb]:border-surface " +
    "[&::-webkit-slider-thumb]:bg-accent [&::-webkit-slider-thumb]:transition-transform " +
    "active:[&::-webkit-slider-thumb]:scale-110 " +
    "[&::-moz-range-thumb]:rounded-full [&::-moz-range-thumb]:border-2 " +
    "[&::-moz-range-thumb]:border-surface [&::-moz-range-thumb]:bg-accent " +
    "focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-offset-surface"

  const state = invalid ? "focus-visible:ring-danger" : "focus-visible:ring-accent"

  const sizes = {
    sm: "h-1 [&::-webkit-slider-thumb]:size-3.5 [&::-moz-range-thumb]:size-3.5",
    md: "h-1.5 [&::-webkit-slider-thumb]:size-4 [&::-moz-range-thumb]:size-4",
    lg: "h-2 [&::-webkit-slider-thumb]:size-5 [&::-moz-range-thumb]:size-5",
  }

  return (
    <input
      type="range"
      aria-invalid={invalid || undefined}
      className={`${base} ${state} ${sizes[size] ?? sizes.md} ${className}`}
      {...props}
    />
  )
}

## Spinner — https://presetui.com/r/spinner.txt — save as components/ui/spinner.js
# Indeterminate loading indicator in three sizes.

/**
 * Indeterminate loading indicator. It is an SVG with one animated class, so
 * there is no keyframe to add to your stylesheet — `animate-spin` ships with
 * Tailwind.
 *
 * The element carries `role="status"`, so assistive technology announces it.
 * Inside a button that already says "Saving…", pass `label=""` to keep it
 * from being announced twice.
 *
 * @param {object} props
 * @param {"sm" | "md" | "lg"} [props.size="md"]
 * @param {string} [props.label="Loading"] Accessible name. Empty string hides it.
 * @param {string} [props.className]
 */
export function Spinner({ size = "md", label = "Loading", className = "", ...props }) {
  const sizes = {
    sm: "size-3.5",
    md: "size-5",
    lg: "size-8",
  }

  return (
    <span
      role={label ? "status" : undefined}
      aria-label={label || undefined}
      aria-hidden={label ? undefined : "true"}
      className={`inline-flex text-muted ${className}`}
      {...props}
    >
      <svg
        viewBox="0 0 24 24"
        fill="none"
        aria-hidden="true"
        className={`animate-spin ${sizes[size] ?? sizes.md}`}
      >
        <circle
          cx="12"
          cy="12"
          r="9"
          stroke="currentColor"
          strokeWidth="2.5"
          className="opacity-25"
        />
        <path
          d="M21 12a9 9 0 0 0-9-9"
          stroke="currentColor"
          strokeWidth="2.5"
          strokeLinecap="round"
        />
      </svg>
    </span>
  )
}

## Switch — https://presetui.com/r/switch.txt — save as components/ui/switch.js
# On/off control built on a hidden checkbox.

/**
 * On/off control built on a visually hidden checkbox, so it is keyboard
 * operable and form-serializable without any JavaScript of its own.
 *
 * It renders no label: give it an `aria-label`, or wrap it (with its text)
 * in a `<label>` of your own.
 *
 * @param {object} props
 * @param {"sm" | "md" | "lg"} [props.size="md"]
 * @param {boolean} [props.invalid=false] Sets `aria-invalid` and the danger ring.
 * @param {string} [props.className]
 */
export function Switch({ size = "md", invalid = false, className = "", ...props }) {
  const base =
    "rounded-full bg-border transition-colors after:absolute after:rounded-full after:bg-surface after:transition-transform after:content-[''] peer-checked:bg-accent peer-focus-visible:ring-2 peer-focus-visible:ring-offset-2 peer-focus-visible:ring-offset-surface peer-disabled:cursor-not-allowed peer-disabled:opacity-50"

  const sizes = {
    sm: "h-4 w-7 after:top-0.5 after:left-0.5 after:size-3 peer-checked:after:translate-x-3",
    md: "h-5 w-9 after:top-0.5 after:left-0.5 after:size-4 peer-checked:after:translate-x-4",
    lg: "h-6 w-11 after:top-0.5 after:left-0.5 after:size-5 peer-checked:after:translate-x-5",
  }

  const ring = invalid ? "peer-focus-visible:ring-danger" : "peer-focus-visible:ring-accent"

  return (
    <span className={`relative inline-flex ${className}`}>
      {/* The input covers the control invisibly, so clicks land on it with
          no label element involved. */}
      <input
        type="checkbox"
        role="switch"
        aria-invalid={invalid || undefined}
        className="peer absolute inset-0 z-10 cursor-pointer opacity-0 disabled:cursor-not-allowed"
        {...props}
      />
      <span aria-hidden="true" className={`relative ${base} ${ring} ${sizes[size] ?? sizes.md}`} />
    </span>
  )
}

## Table — https://presetui.com/r/table.txt — save as components/ui/table.js
# Data table composed from the real table elements.

/**
 * Data table. Composed from the real table elements, so semantics, keyboard
 * navigation and screen-reader support come from the browser.
 *
 * `Table` wraps itself in a scroll container — a table is the one thing that
 * genuinely cannot reflow on a narrow screen.
 *
 * @param {object} props
 * @param {string} [props.className]
 */
export function Table({ className = "", ...props }) {
  return (
    <div className="w-full overflow-x-auto">
      <table
        className={`w-full caption-bottom border-collapse text-sm ${className}`}
        {...props}
      />
    </div>
  )
}

/**
 * @param {object} props
 * @param {string} [props.className]
 */
export function TableHeader({ className = "", ...props }) {
  return <thead className={`border-b border-border ${className}`} {...props} />
}

/**
 * @param {object} props
 * @param {string} [props.className]
 */
export function TableBody({ className = "", ...props }) {
  return <tbody className={`divide-y divide-border ${className}`} {...props} />
}

/**
 * @param {object} props
 * @param {string} [props.className]
 */
export function TableRow({ className = "", ...props }) {
  return <tr className={`transition-colors hover:bg-border/20 ${className}`} {...props} />
}

/**
 * @param {object} props
 * @param {string} [props.className]
 */
export function TableHead({ className = "", ...props }) {
  return (
    <th
      scope="col"
      className={`px-3 py-2.5 text-left font-medium text-fg ${className}`}
      {...props}
    />
  )
}

/**
 * Row header — a `<th scope="row">`, for the first cell of data rows whose
 * value names the row.
 *
 * @param {object} props
 * @param {string} [props.className]
 */
export function TableRowHead({ className = "", ...props }) {
  return (
    <th
      scope="row"
      className={`px-3 py-2.5 text-left font-medium text-fg ${className}`}
      {...props}
    />
  )
}

/**
 * @param {object} props
 * @param {string} [props.className]
 */
export function TableCell({ className = "", ...props }) {
  return <td className={`px-3 py-2.5 text-muted ${className}`} {...props} />
}

/**
 * @param {object} props
 * @param {string} [props.className]
 */
export function TableCaption({ className = "", ...props }) {
  return <caption className={`mt-3 text-xs text-muted ${className}`} {...props} />
}

## Tabs — https://presetui.com/r/tabs.txt — save as components/ui/tabs.js
# Tabbed panels with arrow-key navigation.

import { TabsContent, TabsList, TabsRoot, TabsTrigger } from "../primitives/tabs.js"

/**
 * Tabbed panels with arrow-key navigation, styled over the headless tabs
 * primitive (WAI-ARIA pattern, unique ids, Home/End, selection follows
 * focus). Two ways to satisfy the import above:
 * - copy `primitives/tabs.js` alongside this file (fetch
 *   `/r/primitives/tabs.txt` — one file, core embedded), or
 * - `npm i @presetui/ui` (primitives bundled) and change the import to
 *   `@presetui/ui/primitives/tabs`.
 *
 * Give it the panels as data; uncontrolled by default, controlled via
 * `value` + `onValueChange` (e.g. to sync the active tab to the URL).
 *
 * @param {object} props
 * @param {{ value: string, label: React.ReactNode, content: React.ReactNode }[]} props.items
 * @param {string} [props.value] Controlled active tab.
 * @param {string} [props.defaultValue] Defaults to the first item.
 * @param {(value: string) => void} [props.onValueChange]
 * @param {"line" | "pill" | "none"} [props.variant="line"]
 *   `"none"` emits no decorative classes on the list or triggers — style
 *   them from `className` via the primitive's `data-state` hooks.
 * @param {string} [props.className]
 */
export function Tabs({
  items,
  value,
  defaultValue,
  onValueChange,
  variant = "line",
  className = "",
  ...props
}) {
  const lists = {
    line: "flex gap-1 border-b border-border",
    pill: "inline-flex gap-1 rounded-lg border border-border p-1",
    none: "flex gap-1",
  }

  const triggers = {
    line: "-mb-px border-b-2 px-3 py-2 data-[state=active]:border-accent data-[state=active]:text-fg data-[state=inactive]:border-transparent data-[state=inactive]:text-muted data-[state=inactive]:hover:text-fg",
    pill: "rounded-md px-3 py-1.5 data-[state=active]:bg-accent data-[state=active]:text-accent-fg data-[state=inactive]:text-muted data-[state=inactive]:hover:text-fg",
    // Bring your own styling via data-[state=active] / data-[state=inactive].
    none: "",
  }

  return (
    <TabsRoot
      value={value}
      defaultValue={defaultValue ?? items[0]?.value}
      onValueChange={onValueChange}
    >
      <div className={className} {...props}>
        <TabsList className={lists[variant] ?? lists.line}>
          {items.map((item) => (
            <TabsTrigger
              key={item.value}
              value={item.value}
              className={`text-sm font-medium transition-colors outline-none focus-visible:ring-2 focus-visible:ring-accent ${triggers[variant] ?? triggers.line}`}
            >
              {item.label}
            </TabsTrigger>
          ))}
        </TabsList>

        {items.map((item) => (
          <TabsContent key={item.value} value={item.value} className="pt-4 text-sm text-muted">
            {item.content}
          </TabsContent>
        ))}
      </div>
    </TabsRoot>
  )
}

## Textarea — https://presetui.com/r/textarea.txt — save as components/ui/textarea.js
# Multi-line text field with an invalid state.

/**
 * Multi-line text field. Renders a real `<textarea>`, so `rows`, `value`,
 * `onChange`, `maxLength` and `ref` pass straight through.
 *
 * @param {object} props
 * @param {boolean} [props.invalid=false] Applies the danger border and sets `aria-invalid`.
 * @param {string} [props.className]
 */
export function Textarea({ invalid = false, className = "", ...props }) {
  const base =
    "flex min-h-20 w-full rounded-md border bg-surface px-3 py-2 text-sm text-fg " +
    "transition-colors outline-none placeholder:text-muted " +
    "focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-offset-surface " +
    "disabled:cursor-not-allowed disabled:opacity-50"

  const state = invalid
    ? "border-danger focus-visible:ring-danger"
    : "border-border focus-visible:ring-accent"

  return (
    <textarea
      aria-invalid={invalid || undefined}
      className={`${base} ${state} ${className}`}
      {...props}
    />
  )
}

## Toast — https://presetui.com/r/toast.txt — save as components/ui/toast.js
# Notification queue built on the toast primitive.

"use client"

import { Toaster as ToasterPrimitive, toast } from "../primitives/toast.js"

export { toast }

/**
 * Notification viewport, styled over the headless toast primitive. Two ways
 * to satisfy the import below: copy `primitives/toast.js` alongside this
 * file (fetch `/r/primitives/toast.txt`), or `npm i @presetui/ui`
 * (primitives bundled) and change the import to
 * `@presetui/ui/primitives/toast`.
 *
 * Mount `<Toaster />` once near the root, then call `toast("Saved")` — or
 * `toast({ title, message, duration })` — from anywhere.
 *
 * @param {object} props
 * @param {string} [props.className] Applied to the viewport.
 */
export function Toaster({ className = "", ...props }) {
  return (
    <ToasterPrimitive
      className={`pointer-events-none fixed right-4 bottom-4 z-50 flex w-80 max-w-[calc(100vw-2rem)] flex-col gap-2 ${className}`}
      render={(item, dismiss) => (
        <div className="pointer-events-auto flex items-start justify-between gap-3 rounded-lg border border-border bg-surface p-4 text-sm shadow-md">
          <div className="min-w-0">
            {item.title ? <p className="font-medium text-fg">{item.title}</p> : null}
            <p className="text-muted">{item.message}</p>
          </div>
          <button
            type="button"
            onClick={dismiss}
            aria-label="Dismiss"
            className="-mt-1 -mr-1 shrink-0 rounded-md p-1 text-muted transition-colors outline-none hover:text-fg focus-visible:ring-2 focus-visible:ring-accent"
          >
            <svg
              aria-hidden="true"
              viewBox="0 0 14 14"
              fill="none"
              stroke="currentColor"
              strokeWidth="1.5"
              strokeLinecap="round"
              className="size-3.5"
            >
              <path d="M3 3l8 8M11 3l-8 8" />
            </svg>
          </button>
        </div>
      )}
      {...props}
    />
  )
}

## Tooltip — https://presetui.com/r/tooltip.txt — save as components/ui/tooltip.js
# Hover and focus label, positioned with CSS alone.

/**
 * Supplementary label shown on hover and on keyboard focus. It is CSS only —
 * no positioning library, no state, and it works in a server component.
 *
 * The trade-offs of having no JavaScript (WCAG 1.4.13): the bubble does not
 * flip when it would leave the viewport, cannot be dismissed with Escape,
 * and never shows on touch. Pick the `side` that has room, and reserve it
 * for genuinely supplementary text — anything essential belongs in visible
 * copy, or in a JS tooltip.
 *
 * Accessibility: a tooltip is *extra* information. The trigger must already
 * have its own accessible name — an icon-only button needs `aria-label`. To
 * associate the bubble as a description, pass an `id` and put the same value
 * in the trigger's `aria-describedby`.
 *
 * @param {object} props
 * @param {React.ReactNode} props.content What the bubble says.
 * @param {"top" | "bottom" | "left" | "right"} [props.side="top"]
 * @param {string} [props.id] Wire this to the trigger's `aria-describedby`.
 * @param {string} [props.className] Applied to the wrapper, not the bubble.
 */
export function Tooltip({ content, side = "top", id, className = "", children }) {
  const sides = {
    top: "bottom-full left-1/2 mb-2 -translate-x-1/2",
    bottom: "top-full left-1/2 mt-2 -translate-x-1/2",
    left: "top-1/2 right-full mr-2 -translate-y-1/2",
    right: "top-1/2 left-full ml-2 -translate-y-1/2",
  }

  return (
    <span className={`group/tooltip relative inline-flex ${className}`}>
      {children}
      <span
        id={id}
        role="tooltip"
        className={`pointer-events-none absolute z-50 w-max max-w-56 rounded-md bg-fg px-2 py-1 text-xs leading-snug text-surface opacity-0 transition-opacity duration-150 group-hover/tooltip:opacity-100 group-focus-within/tooltip:opacity-100 ${sides[side] ?? sides.top}`}
      >
        {content}
      </span>
    </span>
  )
}

## Tooltip (JS) — https://presetui.com/r/tooltip-js.txt — save as components/ui/tooltip-js.js
# Viewport-aware, Escape-dismissable tooltip on the tooltip primitive.

import { TooltipContent, TooltipRoot, TooltipTrigger } from "../primitives/tooltip.js"

/**
 * Positioned tooltip on the tooltip primitive: it flips to stay in the
 * viewport, opens after a delay on hover and instantly on keyboard focus,
 * dismisses with Escape, and never opens on touch (WCAG 1.4.13). Two ways
 * to satisfy the import below:
 * - copy `primitives/tooltip.js` alongside this file (fetch
 *   `/r/primitives/tooltip.txt` — one file, core embedded), or
 * - `npm i @presetui/ui` (primitives bundled) and change the import to
 *   `@presetui/ui/primitives/tooltip`.
 *
 * The CSS-only [Tooltip](tooltip.js) stays the zero-JS default; use this
 * one when the bubble must survive viewport edges or be dismissible.
 *
 * `children` must be a single focusable element with its own accessible
 * name — the trigger behavior merges onto it, and `aria-describedby` is
 * wired automatically.
 *
 * @param {object} props
 * @param {React.ReactNode} props.content What the bubble says.
 * @param {"top" | "bottom" | "left" | "right"} [props.side="top"]
 * @param {number} [props.delay=400] Hover delay before opening, in ms.
 * @param {string} [props.className] Applied to the bubble.
 */
export function Tooltip({ content, side = "top", delay = 400, className = "", children }) {
  return (
    <TooltipRoot delayDuration={delay}>
      <TooltipTrigger asChild>{children}</TooltipTrigger>
      <TooltipContent
        side={side}
        className={`z-50 w-max max-w-56 rounded-md bg-fg px-2 py-1 text-xs leading-snug text-surface ${className}`}
      >
        {content}
      </TooltipContent>
    </TooltipRoot>
  )
}

## Primitives — headless behavior layer, fetched individually
# Unstyled compound components (Radix-style): state, keyboard, ARIA and
# positioning only; style them via data-state / data-side / data-highlighted.
# Two install modes — pick ONE per project and be consistent:
#   A) Copy: save each file below as primitives/<name>.js; components that
#      need one import it as ../primitives/<name>.js (their file-head
#      comment says which).
#   B) npm: `npm i @presetui/ui` bundles every primitive (with .d.ts
#      types) — then in each component change that import to
#      "@presetui/ui/primitives/<name>" and skip the primitives/
#      directory. (Behavior-only, no Tailwind? `npm i @presetui/primitives`
#      is the same source standalone.)

https://presetui.com/r/primitives/accordion.txt — Accordion: Collapsible sections on native details/summary, with exclusivity handled in JS.
https://presetui.com/r/primitives/combobox.txt — Combobox: Text input with a filtered suggestion list; focus never leaves the input.
https://presetui.com/r/primitives/dialog.txt — Dialog: Composable modal on the native dialog element.
https://presetui.com/r/primitives/dropdown-menu.txt — Dropdown Menu: WAI-ARIA menu button: roving focus, typeahead, onSelect.
https://presetui.com/r/primitives/listbox.txt — Listbox: The custom-select pattern via aria-activedescendant, with form participation.
https://presetui.com/r/primitives/popover.txt — Popover: Floating panel anchored to a trigger; flips and shifts to stay in the viewport.
https://presetui.com/r/primitives/tabs.txt — Tabs: WAI-ARIA tabs where selection follows focus.
https://presetui.com/r/primitives/toast.txt — Toast: Notification queue living outside React, with a polite live-region viewport.
https://presetui.com/r/primitives/tooltip.txt — Tooltip: Delay-gated, Escape-dismissable label that never opens on touch.
https://presetui.com/r/primitives/core.txt — Core alone, for the shared-file layout when copying several.

## Blocks — whole page sections, fetched individually
# Each imports the components above from @/components/ui/. Adjust the
# import paths to wherever you wrote them — or, in package mode, change
# them to "@presetui/ui/<name>".

# Header: Site navigation and the first call to action.
https://presetui.com/r/blocks/header-nav.txt — With navigation, Logo and links on the left, actions on the right.
https://presetui.com/r/blocks/header-centered.txt — Centered logo, Links split either side of the wordmark.

# Hero: The first screen: what this is and what to do about it.
https://presetui.com/r/blocks/hero-centered.txt — Centered with capture, Eyebrow badge, headline, and an inline email form.
https://presetui.com/r/blocks/hero-split.txt — Split with terminal, Copy on one side, a product artifact on the other.
https://presetui.com/r/blocks/hero-minimal.txt — Minimal, Headline, one paragraph, one action. Nothing else.

# Features: What the product does, once the hero has your attention.
https://presetui.com/r/blocks/features-grid.txt — Icon grid, Six short capabilities, three to a row.
https://presetui.com/r/blocks/features-alternating.txt — Alternating rows, One feature at a time, image and copy swapping sides.
https://presetui.com/r/blocks/features-list.txt — Checklist, A dense list for buyers scanning for one specific thing.

# Stats: Numbers that make the claim above them concrete.
https://presetui.com/r/blocks/stats-row.txt — Inline row, Four figures on one line, no chrome.
https://presetui.com/r/blocks/stats-cards.txt — Cards with trend, Dashboard-style tiles with a change indicator.

# Logo cloud: Who else already uses it.
https://presetui.com/r/blocks/logos-row.txt — Single row, Wordmarks in a row under a quiet caption.

# Testimonials: The same claims, in somebody else's words.
https://presetui.com/r/blocks/testimonials-grid.txt — Three quotes, Short quotes with an avatar and a role.
https://presetui.com/r/blocks/testimonials-quote.txt — Single pull quote, One long quote, given the whole width.

# Pricing: Plans, presented either as cards or as a comparison.
https://presetui.com/r/blocks/pricing-cards.txt — Three cards, One card per plan, the middle one highlighted.
https://presetui.com/r/blocks/pricing-table.txt — Comparison table, Feature-by-feature, for buyers who want the detail.

# FAQ: The objections, answered before they're raised.
https://presetui.com/r/blocks/faq-accordion.txt — Accordion, Collapsed answers, for a long list.
https://presetui.com/r/blocks/faq-columns.txt — Two columns, Everything open, for a short one.

# Call to action: The last ask, after the argument is made.
https://presetui.com/r/blocks/cta-banner.txt — Tinted band, One headline, two buttons, set apart from the page.
https://presetui.com/r/blocks/cta-newsletter.txt — Newsletter capture, A single field and a promise about frequency.

# Auth: Sign in and sign up, as whole centered screens.
https://presetui.com/r/blocks/auth-signin.txt — Sign in, Email, password, remember me, and a recovery link.
https://presetui.com/r/blocks/auth-signup.txt — Create account, Name, email, password, and the terms checkbox.

# App shell: The inside of the product, not the page selling it.
https://presetui.com/r/blocks/app-dashboard.txt — Dashboard, Summary figures, a filter row, and the table under them.
https://presetui.com/r/blocks/app-settings.txt — Settings panel, Grouped rows of switches and fields, with a save bar.

# Footer: The last row: links, legal, and the wordmark again.
https://presetui.com/r/blocks/footer-columns.txt — Link columns, Grouped links with a description and a legal row.
https://presetui.com/r/blocks/footer-minimal.txt — Single row, One line of links, for small sites.