# PresetUI — zero-dependency React + Tailwind components
# https://presetui.com
#
# Do not install these components from npm. There is no package.
# Write the sources below into the project as files — a common home
# is components/ui/ — and they become the project's own code.
#
# Plain JavaScript, no TypeScript. Requirements: React 19+ (ref is a
# plain prop, no forwardRef) and Tailwind CSS v4 (the theme uses the
# @theme directive).
#
# React is the only thing a component may import, and only Tabs and
# Dialog do. Never add clsx, tailwind-merge, or a headless UI library
# when writing these files.
#
# The theme below has two tiers. The core tokens are required. The
# optional ones (success, warning) are only needed by the Alert and
# Badge variants of the same name — drop them and drop those variants.
#
# Page-level templates and more palettes live at
# https://presetui.com/docs/templates and https://presetui.com/docs/themes.
#
# Every component reads only the seven 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 seven. */
  --color-surface: #ffffff;
  --color-fg: #0a0a0a;
  --color-muted: #737373;
  --color-border: #e5e5e5;
  --color-accent: #0a0a0a;
  --color-accent-fg: #ffffff;
  --color-danger: #dc2626;

  /* Optional — each powers exactly the variants listed beside it. Drop a
     line you don't need and only that variant stops working:
       --color-success  →  Alert and Badge, variant="success"
       --color-warning  →  Alert and Badge, variant="warning"
     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-warning: #d97706;
}

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

  --color-success: #22c55e;
  --color-warning: #f59e0b;
}

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

/**
 * Collapsible sections built on native `<details>`, so they open and close
 * with no JavaScript at all — including for keyboard users and before your
 * bundle has loaded.
 *
 * Pass the same `name` to make them exclusive (opening one closes the others);
 * leave it off and any number can be open at once.
 *
 * @param {object} props
 * @param {{ value: string, title: 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 {string} [props.className]
 */
export function Accordion({ items, name, defaultOpen, className = "" }) {
  return (
    <div className={`divide-y divide-border border-y border-border ${className}`}>
      {items.map((item) => (
        <details
          key={item.value}
          name={name}
          open={item.value === defaultOpen || undefined}
          className="group"
        >
          <summary 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.title}
            <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>
          </summary>
          <div className="pb-4 text-sm leading-relaxed text-muted">{item.content}</div>
        </details>
      ))}
    </div>
  )
}

## 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"} [props.variant="default"]
 * @param {React.ReactNode} [props.title]
 * @param {string} [props.className]
 */
export function Alert({
  variant = "default",
  title,
  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",
  }

  return (
    <div
      role={variant === "danger" ? "alert" : undefined}
      className={`rounded-lg border p-4 text-sm ${variants[variant]} ${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.

/**
 * Circular user image with a text fallback behind it. The fallback sits
 * underneath rather than swapping in on error, so no JavaScript is involved:
 * if the image loads it covers the initials, and if it doesn't they show.
 *
 * @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 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]} ${className}`}
      {...props}
    >
      <span className="absolute inset-0 flex items-center justify-center font-medium text-muted">
        {fallback}
      </span>
      {src ? (
        <img src={src} alt={alt} 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"} [props.variant="default"]
 * @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-white",
    warning: "bg-warning text-white",
    danger: "bg-danger text-white",
  }

  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]} ${sizes[size]} ${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>`, so every native
 * attribute — including `ref` — passes straight through.
 *
 * @param {object} props
 * @param {"default" | "outline" | "ghost" | "danger"} [props.variant="default"]
 * @param {"sm" | "md" | "lg"} [props.size="md"]
 * @param {string} [props.className]
 */
export function 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-white hover:opacity-90",
  }

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

  return (
    <button
      className={`${base} ${variants[variant]} ${sizes[size]} ${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.

/**
 * 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 {string} [props.className]
 */
export function Checkbox({
  size = "md",
  invalid = false,
  className = "",
  ...props
}) {
  const base =
    "peer shrink-0 cursor-pointer appearance-none rounded border bg-surface transition-colors outline-none checked:border-accent checked: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"
        aria-invalid={invalid || undefined}
        className={`${base} ${sizes[size]} ${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]}`}
      >
        <path d="M2.5 6.2l2.4 2.4 4.6-5" />
      </svg>
    </span>
  )
}

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

"use client"

import { useEffect, 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 for every dismissal — the close button, Escape, and a click
 * on the backdrop — so keep it in sync with your `open` state.
 *
 * @param {object} props
 * @param {boolean} props.open
 * @param {() => void} props.onClose
 * @param {React.ReactNode} [props.title]
 * @param {"sm" | "md" | "lg"} [props.size="md"]
 * @param {string} [props.className]
 */
export function Dialog({
  open,
  onClose,
  title,
  size = "md",
  className = "",
  children,
}) {
  const ref = useRef(null)

  const sizes = {
    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])

  return (
    <dialog
      ref={ref}
      onClose={onClose}
      onClick={(event) => {
        // The dialog element itself is the backdrop; its children are not.
        if (event.target === ref.current) onClose?.()
      }}
      className={`m-auto w-[calc(100%-2rem)] rounded-lg border border-border bg-surface p-0 text-fg backdrop:bg-black/50 ${sizes[size]} ${className}`}
    >
      <div className="flex items-start justify-between gap-4 p-6 pb-0">
        {title ? <h2 className="text-base leading-none font-semibold">{title}</h2> : null}
        <button
          type="button"
          onClick={onClose}
          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>
  )
}

## 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-8 px-2.5 text-xs",
    md: "h-9 px-3 text-sm",
    lg: "h-11 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]} ${state} ${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.
 * @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>
      ) : null}
    </label>
  )
}

## 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 {string} [props.label="Progress"] Accessible name for the bar.
 * @param {string} [props.className]
 */
export function Progress({
  value = 0,
  max = 100,
  size = "md",
  label = "Progress",
  className = "",
  ...props
}) {
  const percent = Math.min(100, Math.max(0, (value / max) * 100))

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

  return (
    <div
      role="progressbar"
      aria-valuenow={value}
      aria-valuemin={0}
      aria-valuemax={max}
      aria-label={label}
      className={`w-full overflow-hidden rounded-full bg-border ${sizes[size]} ${className}`}
      {...props}
    >
      <div
        className="h-full rounded-full bg-accent transition-[width] duration-300"
        style={{ 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 {string} [props.className]
 */
export function Radio({ size = "md", className = "", ...props }) {
  const base =
    "peer shrink-0 cursor-pointer appearance-none rounded-full border border-border bg-surface transition-colors outline-none checked:border-accent focus-visible:ring-2 focus-visible:ring-accent 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 dots = {
    sm: "size-1.5",
    md: "size-2",
    lg: "size-2.5",
  }

  return (
    <span className="relative inline-flex">
      <input
        type="radio"
        className={`${base} ${sizes[size]} ${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]}`}
      />
    </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 {boolean} [props.invalid=false] Applies the danger border and sets `aria-invalid`.
 * @param {string} [props.className]
 */
export function Select({
  size = "md",
  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-8 pr-8 pl-2.5 text-xs",
    md: "h-9 pr-9 pl-3 text-sm",
    lg: "h-11 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">
      <select
        aria-invalid={invalid || undefined}
        className={`${base} ${sizes[size]} ${state} ${className}`}
        {...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>
  )
}

## 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}
    />
  )
}

## 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}
    />
  )
}

## 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.
 *
 * @param {object} props
 * @param {"sm" | "md" | "lg"} [props.size="md"]
 * @param {string} [props.className]
 */
export function Switch({ size = "md", className = "", ...props }) {
  const base =
    "relative 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-accent 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",
  }

  return (
    <label className={`inline-flex cursor-pointer items-center ${className}`}>
      <input type="checkbox" className="peer sr-only" {...props} />
      <span className={`${base} ${sizes[size]}`} />
    </label>
  )
}

## 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
      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.

"use client"

import { useState } from "react"

/**
 * Tabbed panels with arrow-key navigation, following the WAI-ARIA tabs
 * pattern. Give it the panels as data rather than composing four separate
 * components — it keeps the whole thing in one file with no context.
 *
 * @param {object} props
 * @param {{ value: string, label: React.ReactNode, content: React.ReactNode }[]} props.items
 * @param {string} [props.defaultValue] Defaults to the first item.
 * @param {"line" | "pill"} [props.variant="line"]
 * @param {string} [props.className]
 */
export function Tabs({ items, defaultValue, variant = "line", className = "" }) {
  const [active, setActive] = useState(defaultValue ?? items[0]?.value)
  const activeIndex = items.findIndex((item) => item.value === active)

  const lists = {
    line: "flex gap-1 border-b border-border",
    pill: "inline-flex gap-1 rounded-lg border border-border p-1",
  }

  const triggers = {
    line: {
      base: "-mb-px border-b-2 px-3 py-2",
      on: "border-accent text-fg",
      off: "border-transparent text-muted hover:text-fg",
    },
    pill: {
      base: "rounded-md px-3 py-1.5",
      on: "bg-accent text-accent-fg",
      off: "text-muted hover:text-fg",
    },
  }

  const trigger = triggers[variant]

  function onKeyDown(event) {
    const step = event.key === "ArrowRight" ? 1 : event.key === "ArrowLeft" ? -1 : 0
    if (step === 0) return
    event.preventDefault()
    const next = (activeIndex + step + items.length) % items.length
    setActive(items[next].value)
    event.currentTarget.querySelectorAll("[role=tab]")[next]?.focus()
  }

  return (
    <div className={className}>
      <div role="tablist" onKeyDown={onKeyDown} className={lists[variant]}>
        {items.map((item) => {
          const selected = item.value === active
          return (
            <button
              key={item.value}
              type="button"
              role="tab"
              id={`tab-${item.value}`}
              aria-selected={selected}
              aria-controls={`panel-${item.value}`}
              tabIndex={selected ? 0 : -1}
              onClick={() => setActive(item.value)}
              className={`text-sm font-medium transition-colors outline-none focus-visible:ring-2 focus-visible:ring-accent ${trigger.base} ${selected ? trigger.on : trigger.off}`}
            >
              {item.label}
            </button>
          )
        })}
      </div>

      {items.map((item) =>
        item.value === active ? (
          <div
            key={item.value}
            role="tabpanel"
            id={`panel-${item.value}`}
            aria-labelledby={`tab-${item.value}`}
            className="pt-4 text-sm text-muted"
          >
            {item.content}
          </div>
        ) : null,
      )}
    </div>
  )
}

## 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}
    />
  )
}