# NeonKit

---

> Neon UI components for React and Tailwind CSS. 26 accessible, copy-paste components with a glow, one CSS variable for color, installable with the shadcn CLI.

---

## Installation

NeonKit needs React 18+ and Tailwind CSS 3.4 or 4. Components are published as a shadcn registry.

Add one with the shadcn CLI (run `npx shadcn@latest init` first in a new project):

```bash
npx shadcn@latest add https://get-neonkit.vercel.app/r/switch.json
```

Or register the namespace once in `components.json` and use short names:

```json
{
  "registries": {
    "@neonkit": "https://get-neonkit.vercel.app/r/{name}.json"
  }
}
```

```bash
npx shadcn@latest add @neonkit/switch @neonkit/tabs @neonkit/toast
```

The CLI writes `components/ui/<name>.tsx`, installs npm dependencies and adds `lib/neon.ts`. Use `--overwrite` to replace an existing shadcn file with the same name.

Manual install: `npm install clsx tailwind-merge`, add `lib/utils.ts` (exports `cn`) and `lib/neon.ts`, then paste a component's source into `components/ui`. Components import from `@/lib/utils` and `@/lib/neon`.

NeonKit is dark only. Glows are tuned for backgrounds near `#05060a`.

---

### lib/utils.ts

```ts
import { type ClassValue, clsx } from "clsx";
import { twMerge } from "tailwind-merge";

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs));
}
```

---

### lib/neon.ts

```ts
import type * as React from "react";

/**
 * The NeonKit palette, stored as space-separated RGB channels so components
 * can apply any alpha with `rgb(var(--neon) / 0.4)`.
 */
export const neonColors = {
  cyan: "34 211 238",
  blue: "79 139 255",
  violet: "168 85 247",
  magenta: "240 70 235",
  pink: "255 95 162",
  red: "255 77 94",
  orange: "255 138 61",
  amber: "251 191 36",
  lime: "163 230 53",
  green: "52 211 153",
  white: "230 237 247",
} as const;

export type NeonColorName = keyof typeof neonColors;

/** A palette name or any hex color (`#0ff`, `#ff00aa`). */
export type NeonColor = NeonColorName | (string & {});

export const neonColorNames = Object.keys(neonColors) as NeonColorName[];

/** Resolves a palette name or hex string to `"r g b"` channels. */
export function toNeonRgb(color: NeonColor): string {
  if (color in neonColors) return neonColors[color as NeonColorName];

  let hex = color.trim().replace(/^#/, "");
  if (hex.length === 3) hex = hex.replace(/./g, (c) => c + c);
  if (!/^[0-9a-f]{6}$/i.test(hex)) return neonColors.cyan;

  const value = parseInt(hex, 16);
  return `${(value >> 16) & 255} ${(value >> 8) & 255} ${value & 255}`;
}

/**
 * Inline style that sets a component's neon color.
 *
 * Components read `--neon`. Leave `color` undefined and they inherit
 * `--neon-accent` from any ancestor, falling back to cyan.
 */
export function neonVars(
  color?: NeonColor,
  style?: React.CSSProperties,
): React.CSSProperties | undefined {
  if (!color) return style;
  const rgb = toNeonRgb(color);
  return { "--neon": rgb, "--neon-accent": rgb, ...style } as React.CSSProperties;
}
```

---

## Theming

Every component reads its color from one CSS variable, `--neon`, holding space-separated RGB channels.

- Per component: `<Button color="magenta">` or any hex, `<Badge color="#ff6a00">`.
- Per section: components without a `color` inherit `--neon-accent` from the nearest ancestor. `neonVars(color)` from `@/lib/neon` returns the style object: `<section style={neonVars("lime")}>`.
- App-wide: `:root { --neon-accent: 255 95 162; }` in global CSS.
- Default when nothing is set: cyan.

Palette names: cyan, blue, violet, magenta, pink, red, orange, amber, lime, green, white. Edit `neonColors` in `lib/neon.ts` to change or add colors.

---

## Conventions

- Props: `color`, `variant`, `size` ("sm" | "md" | "lg"), `disabled`. Controlled/uncontrolled pairs use `checked`/`defaultChecked`/`onCheckedChange` and `value`/`defaultValue`/`onValueChange`.
- Components forward refs, spread native props onto the root and accept `className`.
- Motion comes from the `motion` package (`motion/react`); icons from `lucide-react`.
- Everything respects `prefers-reduced-motion` and is keyboard accessible.

---

# Component: Button

> Solid, outline, soft, ghost and link buttons that light up on hover.

Category: Forms. Docs: https://get-neonkit.vercel.app/components/button

## Installation

```bash
npx shadcn@latest add https://get-neonkit.vercel.app/r/button.json
```

With the `@neonkit` namespace configured: `npx shadcn@latest add @neonkit/button`.

npm dependencies: `@radix-ui/react-slot`, `lucide-react`. Also needs `lib/utils.ts` (`cn`) and `lib/neon.ts` (`neonVars`), which the CLI adds.

## Usage

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

<Button color="magenta" variant="solid">Ship it</Button>
```

## Examples

### Variants

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

export default function ButtonDemo() {
  return (
    <div className="flex flex-wrap items-center justify-center gap-3">
      <Button variant="solid">
        Deploy <ArrowRight />
      </Button>
      <Button>Outline</Button>
      <Button variant="soft">Soft</Button>
      <Button variant="ghost">Ghost</Button>
      <Button variant="link">Link</Button>
    </div>
  );
}
```

### Colors

Pass a palette name or any hex value to color.

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

const colors = ["cyan", "blue", "violet", "magenta", "pink", "red", "orange", "amber", "lime", "green"] as const;

export default function ButtonColors() {
  return (
    <div className="grid w-full max-w-xl gap-3">
      <div className="flex flex-wrap justify-center gap-2">
        {colors.map((color) => (
          <Button key={color} color={color} size="sm" className="capitalize">
            {color}
          </Button>
        ))}
      </div>
      <div className="flex flex-wrap justify-center gap-2">
        {colors.map((color) => (
          <Button key={color} color={color} variant="solid" size="sm" className="capitalize">
            {color}
          </Button>
        ))}
      </div>
      <div className="flex justify-center">
        <Button color="#ff6a00" variant="solid" size="sm">
          Any hex works · #ff6a00
        </Button>
      </div>
    </div>
  );
}
```

### Sizes

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

export default function ButtonSizes() {
  return (
    <div className="flex flex-wrap items-center justify-center gap-3">
      <Button size="sm">Small</Button>
      <Button size="md">Medium</Button>
      <Button size="lg">Large</Button>
      <Button size="icon" aria-label="Add item">
        <Plus />
      </Button>
    </div>
  );
}
```

### Loading and disabled

loading swaps in a spinner and blocks clicks until it clears.

```tsx
"use client";

import * as React from "react";
import { Button } from "@/components/ui/button";

export default function ButtonLoading() {
  const [loading, setLoading] = React.useState(false);

  function save() {
    setLoading(true);
    setTimeout(() => setLoading(false), 1800);
  }

  return (
    <div className="flex flex-wrap items-center justify-center gap-3">
      <Button variant="solid" color="lime" loading={loading} onClick={save}>
        {loading ? "Saving" : "Save changes"}
      </Button>
      <Button disabled>Disabled</Button>
    </div>
  );
}
```

### As a link

asChild hands the styles to its child, so links keep their semantics.

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

export default function ButtonAsLink() {
  return (
    <Button asChild color="magenta">
      <a href="https://github.com/AadiXC0DE/NeonKit" target="_blank" rel="noreferrer">
        Star on GitHub <ArrowUpRight />
      </a>
    </Button>
  );
}
```

## API reference

### Button

Also accepts every native button attribute.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `variant` | `"solid" \| "outline" \| "soft" \| "ghost" \| "link"` | `"outline"` | Visual style. |
| `color` | `NeonColor` | `inherited` | Palette name or hex. Falls back to --neon-accent, then cyan. |
| `size` | `"sm" \| "md" \| "lg" \| "icon"` | `"md"` | Height and padding. |
| `loading` | `boolean` | `false` | Shows a spinner and disables the button. |
| `asChild` | `boolean` | `false` | Merges props onto the single child element instead of rendering a button. |

## Accessibility

- Icon-only buttons need an aria-label.
- loading sets aria-busy so screen readers announce the pending state.

## Source

`components/ui/button.tsx`

```tsx
"use client";

import * as React from "react";
import { Slot } from "@radix-ui/react-slot";
import { LoaderCircle } from "lucide-react";

import { cn } from "@/lib/utils";
import { neonVars, type NeonColor } from "@/lib/neon";

const variants = {
  solid:
    "bg-[rgb(var(--neon))] text-[#05060a] shadow-[0_0_0_1px_rgb(var(--neon)),0_0_18px_rgb(var(--neon)/0.45),inset_0_1px_0_rgb(255_255_255/0.45)] hover:shadow-[0_0_0_1px_rgb(var(--neon)),0_0_32px_rgb(var(--neon)/0.7),inset_0_1px_0_rgb(255_255_255/0.45)] hover:brightness-110",
  outline:
    "border border-[rgb(var(--neon)/0.7)] bg-[rgb(var(--neon)/0.06)] text-[rgb(var(--neon))] shadow-[0_0_12px_rgb(var(--neon)/0.25),inset_0_0_12px_rgb(var(--neon)/0.12)] [text-shadow:0_0_10px_rgb(var(--neon)/0.6)] hover:border-[rgb(var(--neon))] hover:bg-[rgb(var(--neon)/0.12)] hover:shadow-[0_0_24px_rgb(var(--neon)/0.5),inset_0_0_16px_rgb(var(--neon)/0.2)]",
  soft:
    "bg-[rgb(var(--neon)/0.12)] text-[rgb(var(--neon))] hover:bg-[rgb(var(--neon)/0.2)]",
  ghost:
    "text-white/70 hover:bg-[rgb(var(--neon)/0.1)] hover:text-[rgb(var(--neon))]",
  link: "h-auto px-0 text-[rgb(var(--neon))] underline-offset-4 hover:underline hover:[text-shadow:0_0_12px_rgb(var(--neon)/0.7)]",
} as const;

const sizes = {
  sm: "h-8 gap-1.5 rounded-md px-3 text-xs",
  md: "h-10 gap-2 rounded-lg px-4 text-sm",
  lg: "h-12 gap-2.5 rounded-xl px-6 text-base",
  icon: "size-10 rounded-lg",
} as const;

export interface ButtonProps
  extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "color"> {
  /** Palette name or any hex color. Inherits `--neon-accent` when omitted. */
  color?: NeonColor;
  variant?: keyof typeof variants;
  size?: keyof typeof sizes;
  /** Shows a spinner and disables the button. */
  loading?: boolean;
  /** Render the child element (e.g. a link) with button styles. */
  asChild?: boolean;
}

const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
  (
    {
      className,
      style,
      color,
      variant = "outline",
      size = "md",
      loading = false,
      asChild = false,
      disabled,
      children,
      ...props
    },
    ref,
  ) => {
    const Comp = asChild ? Slot : "button";

    return (
      <Comp
        ref={ref}
        style={neonVars(color, style)}
        disabled={disabled || loading}
        aria-busy={loading || undefined}
        className={cn(
          "[--neon:var(--neon-accent,34_211_238)]",
          "relative inline-flex shrink-0 cursor-pointer select-none items-center justify-center whitespace-nowrap font-medium outline-none",
          "transition-[background-color,border-color,color,box-shadow,filter,transform] duration-200 ease-out active:scale-[0.97]",
          "focus-visible:ring-2 focus-visible:ring-[rgb(var(--neon)/0.6)] focus-visible:ring-offset-2 focus-visible:ring-offset-[#05060a]",
          "disabled:pointer-events-none disabled:opacity-50",
          "[&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
          sizes[size],
          variants[variant],
          className,
        )}
        {...props}
      >
        {asChild ? (
          children
        ) : (
          <>
            {loading && <LoaderCircle className="animate-spin" aria-hidden />}
            {children}
          </>
        )}
      </Comp>
    );
  },
);
Button.displayName = "Button";

export { Button };
```


---

# Component: Input

> Text field with an animated neon focus ring, icons, labels and error states.

Category: Forms. Docs: https://get-neonkit.vercel.app/components/input

## Installation

```bash
npx shadcn@latest add https://get-neonkit.vercel.app/r/input.json
```

With the `@neonkit` namespace configured: `npx shadcn@latest add @neonkit/input`.

npm dependencies: none. Also needs `lib/utils.ts` (`cn`) and `lib/neon.ts` (`neonVars`), which the CLI adds.

## Usage

```tsx
import { Input } from "@/components/ui/input"

<Input label="Email" type="email" placeholder="you@company.com" />
```

## Examples

### Sign in

```tsx
"use client";

import * as React from "react";
import { Eye, EyeOff, LockKeyhole, Mail } from "lucide-react";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";

export default function InputDemo() {
  const [visible, setVisible] = React.useState(false);

  return (
    <form className="grid w-full max-w-sm gap-4" onSubmit={(event) => event.preventDefault()}>
      <Input
        type="email"
        label="Email"
        placeholder="you@company.com"
        autoComplete="email"
        leading={<Mail />}
      />
      <Input
        type={visible ? "text" : "password"}
        label="Password"
        placeholder="Enter your password"
        autoComplete="current-password"
        leading={<LockKeyhole />}
        trailing={
          <button
            type="button"
            aria-label="Show password"
            aria-pressed={visible}
            onClick={() => setVisible((v) => !v)}
            className="-mr-1.5 grid size-7 cursor-pointer place-items-center rounded-md text-white/40 outline-none transition-colors hover:text-white/80 focus-visible:bg-[rgb(var(--neon)/0.12)] focus-visible:text-[rgb(var(--neon))]"
          >
            {visible ? <EyeOff /> : <Eye />}
          </button>
        }
      />
      <Button type="submit" variant="solid" className="mt-1 w-full">
        Sign in
      </Button>
    </form>
  );
}
```

### Search with a shortcut

trailing holds hints and small buttons. Press / to focus this one.

```tsx
"use client";

import * as React from "react";
import { Search } from "lucide-react";
import { Input } from "@/components/ui/input";

export default function InputSearch() {
  const ref = React.useRef<HTMLInputElement>(null);
  const [focused, setFocused] = React.useState(false);

  React.useEffect(() => {
    function onKeyDown(event: KeyboardEvent) {
      if (event.defaultPrevented || event.key !== "/") return;
      const target = event.target as HTMLElement;
      // Let people type a slash into other fields.
      if (target.isContentEditable || /^(INPUT|TEXTAREA|SELECT)$/.test(target.tagName)) return;
      event.preventDefault();
      ref.current?.focus();
    }
    window.addEventListener("keydown", onKeyDown);
    return () => window.removeEventListener("keydown", onKeyDown);
  }, []);

  return (
    <Input
      ref={ref}
      type="search"
      aria-label="Search documentation"
      placeholder="Search components and props"
      leading={<Search />}
      trailing={
        <kbd className="pointer-events-none rounded-md border border-white/10 bg-white/[0.04] px-1.5 py-0.5 font-sans text-[11px] font-medium leading-4 text-white/45">
          {focused ? "Esc" : "/"}
        </kbd>
      }
      onFocus={() => setFocused(true)}
      onBlur={() => setFocused(false)}
      onKeyDown={(event) => {
        if (event.key === "Escape") event.currentTarget.blur();
      }}
      containerClassName="max-w-sm"
    />
  );
}
```

### Validation

error turns the field red, sets aria-invalid and takes the description's place. leading also takes text addons.

```tsx
"use client";

import * as React from "react";
import { Check } from "lucide-react";
import { Input } from "@/components/ui/input";

const taken = ["aadi", "admin", "neon", "support"];

function validate(handle: string) {
  if (!handle) return "Pick a handle for your profile link.";
  if (!/^[a-z0-9-]+$/.test(handle)) return "Use lowercase letters, numbers and dashes.";
  if (handle.length < 3) return "Handles are at least 3 characters.";
  if (taken.includes(handle)) return `That one is taken. Try ${handle}-dev.`;
  return undefined;
}

export default function InputValidation() {
  const [handle, setHandle] = React.useState("aadi");
  const error = validate(handle);

  return (
    <Input
      label="Profile URL"
      description="Your public page. You can change it once every 30 days."
      value={handle}
      onChange={(event) => setHandle(event.target.value.trim())}
      error={error}
      spellCheck={false}
      autoCapitalize="none"
      leading={<span className="-mr-1.5 select-none">neonkit.dev/</span>}
      trailing={error ? null : <Check className="text-[#34d399]" aria-hidden />}
      containerClassName="max-w-sm"
    />
  );
}
```

### Read-only and disabled

Read-only fields keep a quieter focus state so they don't read as editable.

```tsx
"use client";

import * as React from "react";
import { Check, Copy } from "lucide-react";
import { Input } from "@/components/ui/input";

const apiKey = "nk_live_51Hx9Q2eZvKYlo2C8Nf3";

export default function InputStates() {
  const [copied, setCopied] = React.useState(false);

  async function copy() {
    await navigator.clipboard.writeText(apiKey);
    setCopied(true);
    setTimeout(() => setCopied(false), 1500);
  }

  return (
    <div className="grid w-full max-w-sm gap-5">
      <Input
        label="Secret key"
        description="Read-only. Roll the key from the dashboard if it leaks."
        value={apiKey}
        readOnly
        className="font-mono"
        onFocus={(event) => event.currentTarget.select()}
        trailing={
          <button
            type="button"
            onClick={copy}
            aria-label={copied ? "Copied" : "Copy secret key"}
            className="-mr-1.5 grid size-7 cursor-pointer place-items-center rounded-md text-white/40 outline-none transition-colors hover:text-white/80 focus-visible:bg-[rgb(var(--neon)/0.12)] focus-visible:text-[rgb(var(--neon))]"
          >
            {copied ? <Check className="text-[#34d399]" /> : <Copy />}
          </button>
        }
      />
      <Input
        label="Billing email"
        description="Managed by your organization owner."
        defaultValue="billing@northwind.io"
        disabled
      />
    </div>
  );
}
```

### Sizes

Heights match Button: 32, 40 and 48px.

```tsx
import { Search } from "lucide-react";
import { Input } from "@/components/ui/input";

export default function InputSizes() {
  return (
    <div className="grid w-full max-w-sm gap-3">
      <Input size="sm" aria-label="Small" placeholder="Small" leading={<Search />} />
      <Input size="md" aria-label="Medium" placeholder="Medium" leading={<Search />} />
      <Input size="lg" aria-label="Large" placeholder="Large" leading={<Search />} />
    </div>
  );
}
```

## API reference

### Input

Also accepts every native input attribute, and the ref points at the <input>. className and style go to the field box around it.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `label` | `ReactNode` | — | Visible label, linked to the input. |
| `description` | `ReactNode` | — | Helper text under the field. |
| `error` | `ReactNode` | — | Red invalid state and message. Replaces description. Pass true for the state without a message. |
| `leading` | `ReactNode` | — | Icon or text addon before the value. Icons light up on focus. |
| `trailing` | `ReactNode` | — | Icon, hint or small button after the value. |
| `color` | `NeonColor` | `inherited` | Palette name or hex. Falls back to --neon-accent, then cyan. |
| `size` | `"sm" \| "md" \| "lg"` | `"md"` | Height, padding and text size. |
| `className` | `string` | — | Classes for the field box: border, background, height. |
| `containerClassName` | `string` | — | Classes for the outer block with the label and message. Use it for width and margins. |

## Accessibility

- The label is a native <label>, and the description or error is linked with aria-describedby.
- Clicking the padding or the leading icon focuses the input, like a native field.
- Fields without a visible label need an aria-label.
- Buttons inside trailing need their own aria-label and stay in the tab order after the input.

## Source

`components/ui/input.tsx`

```tsx
"use client";

import * as React from "react";

import { cn } from "@/lib/utils";
import { neonVars, type NeonColor } from "@/lib/neon";

const INVALID = "#ff4d5e";

const sizes = {
  sm: {
    field: "h-8 rounded-md text-xs",
    input: "px-2.5",
    leading: "pl-2.5 [&_svg]:size-3.5",
    trailing: "pr-2.5 [&_svg]:size-3.5",
    afterLeading: "pl-1.5",
    beforeTrailing: "pr-1.5",
    label: "text-xs",
  },
  md: {
    field: "h-10 rounded-lg text-sm",
    input: "px-3",
    leading: "pl-3 [&_svg]:size-4",
    trailing: "pr-3 [&_svg]:size-4",
    afterLeading: "pl-2",
    beforeTrailing: "pr-2",
    label: "text-sm",
  },
  lg: {
    field: "h-12 rounded-xl text-base",
    input: "px-4",
    leading: "pl-4 [&_svg]:size-[18px]",
    trailing: "pr-4 [&_svg]:size-[18px]",
    afterLeading: "pl-2.5",
    beforeTrailing: "pr-2.5",
    label: "text-sm",
  },
} as const;

export interface InputProps
  extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "color" | "size"> {
  /** Palette name or any hex color. Inherits `--neon-accent` when omitted. */
  color?: NeonColor;
  size?: keyof typeof sizes;
  /** Icon or text addon inside the field, before the value. */
  leading?: React.ReactNode;
  /** Icon, hint or small button inside the field, after the value. */
  trailing?: React.ReactNode;
  label?: React.ReactNode;
  /** Helper text under the field. Hidden while `error` is set. */
  description?: React.ReactNode;
  /** Marks the field invalid and shows this message. Pass `true` for the red state alone. */
  error?: React.ReactNode;
  /** Classes for the field box: the bordered wrapper around the input. */
  className?: string;
  /** Classes for the outer block holding the label, field and message. */
  containerClassName?: string;
}

const Input = React.forwardRef<HTMLInputElement, InputProps>(
  (
    {
      className,
      containerClassName,
      style,
      color,
      size = "md",
      leading,
      trailing,
      label,
      description,
      error,
      id: idProp,
      disabled,
      readOnly,
      "aria-describedby": ariaDescribedBy,
      ...props
    },
    ref,
  ) => {
    const inputRef = React.useRef<HTMLInputElement>(null);
    React.useImperativeHandle(ref, () => inputRef.current as HTMLInputElement);

    const autoId = React.useId();
    const id = idProp ?? autoId;
    const invalid = Boolean(error);
    const message = invalid ? (error === true ? null : error) : description;
    const messageId = message ? `${id}-${invalid ? "error" : "description"}` : undefined;
    const s = sizes[size];

    // Clicks on the padding or icons land in the input, like a native field.
    function handleMouseDown(event: React.MouseEvent<HTMLDivElement>) {
      const target = event.target as HTMLElement;
      if (target === inputRef.current) return;
      if (target.closest("button, a, input, select, textarea, [tabindex]")) return;
      event.preventDefault();
      inputRef.current?.focus();
    }

    return (
      <div className={cn("grid w-full gap-1.5", containerClassName)}>
        {label && (
          <label htmlFor={id} className={cn("w-fit font-medium text-white/80", s.label)}>
            {label}
          </label>
        )}
        <div
          style={neonVars(invalid ? INVALID : color, style)}
          onMouseDown={handleMouseDown}
          className={cn(
            "[--neon:var(--neon-accent,34_211_238)]",
            "group/field relative flex w-full cursor-text items-center border border-white/10 bg-white/[0.03] text-white/90",
            "transition-[border-color,background-color,box-shadow] ease-[cubic-bezier(0.23,1,0.32,1)] duration-[150ms,150ms,320ms]",
            "focus-within:border-[rgb(var(--neon)/0.8)] focus-within:bg-[rgb(var(--neon)/0.04)] focus-within:shadow-[0_0_0_1px_rgb(var(--neon)/0.2),0_0_20px_-4px_rgb(var(--neon)/0.5),inset_0_0_12px_-2px_rgb(var(--neon)/0.14)]",
            !disabled && "hover:[&:not(:focus-within)]:border-white/20",
            invalid && "border-[rgb(var(--neon)/0.55)] hover:[&:not(:focus-within)]:border-[rgb(var(--neon)/0.75)]",
            readOnly &&
              "border-white/[0.08] bg-transparent text-white/70 focus-within:border-[rgb(var(--neon)/0.45)] focus-within:bg-transparent focus-within:shadow-none",
            disabled && "cursor-not-allowed opacity-50",
            s.field,
            className,
          )}
        >
          {leading && (
            <span
              className={cn(
                "flex shrink-0 items-center text-white/40 [&_svg]:transition-colors [&_svg]:duration-200 group-focus-within/field:[&_svg]:text-[rgb(var(--neon)/0.9)]",
                s.leading,
              )}
            >
              {leading}
            </span>
          )}
          <input
            ref={inputRef}
            id={id}
            disabled={disabled}
            readOnly={readOnly}
            aria-invalid={invalid || undefined}
            aria-describedby={[ariaDescribedBy, messageId].filter(Boolean).join(" ") || undefined}
            className={cn(
              "h-full w-full min-w-0 flex-1 bg-transparent text-inherit outline-none placeholder:text-white/30",
              "disabled:cursor-not-allowed [&::-webkit-search-cancel-button]:appearance-none",
              "[&:-webkit-autofill]:[-webkit-text-fill-color:rgb(255_255_255/0.9)] [&:-webkit-autofill]:[transition:background-color_9999s_ease-out]",
              s.input,
              leading && s.afterLeading,
              trailing && s.beforeTrailing,
            )}
            {...props}
          />
          {trailing && (
            <span className={cn("flex shrink-0 items-center text-white/40", s.trailing)}>
              {trailing}
            </span>
          )}
        </div>
        {message && (
          <p
            id={messageId}
            className={cn("text-xs leading-5", invalid ? "text-[#ff4d5e]" : "text-white/55")}
          >
            {message}
          </p>
        )}
      </div>
    );
  },
);
Input.displayName = "Input";

export { Input };
```


---

# Component: Textarea

> Multi-line field that grows with its content and counts characters.

Category: Forms. Docs: https://get-neonkit.vercel.app/components/textarea

## Installation

```bash
npx shadcn@latest add https://get-neonkit.vercel.app/r/textarea.json
```

With the `@neonkit` namespace configured: `npx shadcn@latest add @neonkit/textarea`.

npm dependencies: none. Also needs `lib/utils.ts` (`cn`) and `lib/neon.ts` (`neonVars`), which the CLI adds.

## Usage

```tsx
import { Textarea } from "@/components/ui/textarea"

<Textarea label="Feedback" maxLength={280} showCount />
```

## Examples

### Feedback

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

export default function TextareaDemo() {
  return (
    <div className="grid w-full max-w-md gap-3">
      <Textarea
        label="Feedback"
        description="Goes straight to the team. We read every one."
        placeholder="What should we build next?"
        maxLength={280}
        showCount
      />
      <div className="flex justify-end">
        <Button variant="solid" size="sm">
          Send feedback
        </Button>
      </div>
    </div>
  );
}
```

### Auto-resize

The field grows with its content between minRows and maxRows, then scrolls.

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

const review = `Looks good overall. Two things before we merge:

1. The popover clips inside overflow-hidden parents.
2. Typeahead should reset after 500ms, not on blur.

Happy to pair on either.`;

export default function TextareaAutoResize() {
  return (
    <div className="grid w-full max-w-md gap-3">
      <Textarea
        aria-label="Review comment"
        placeholder="Leave a review comment"
        defaultValue={review}
        minRows={2}
        maxRows={8}
        description="Grows with each line up to 8, then scrolls."
      />
      <div className="flex justify-end gap-2">
        <Button variant="ghost" size="sm">
          Cancel
        </Button>
        <Button variant="solid" size="sm">
          Comment
        </Button>
      </div>
    </div>
  );
}
```

### Character limit

With maxLength, the count turns amber in the last 10% and red at the limit.

```tsx
import { Textarea } from "@/components/ui/textarea";

const bio =
  "Design engineer at a small studio in Lisbon. I build component libraries, tinker with shaders and collect old synths.";

export default function TextareaLimit() {
  return (
    <Textarea
      label="Bio"
      defaultValue={bio}
      maxLength={120}
      showCount
      minRows={2}
      description="Shown on your public profile."
      containerClassName="max-w-md"
    />
  );
}
```

### Error and disabled

```tsx
import { Textarea } from "@/components/ui/textarea";

export default function TextareaStates() {
  return (
    <div className="grid w-full max-w-md gap-5">
      <Textarea
        label="Release notes"
        placeholder="What changed in 3.0?"
        error="Major releases need release notes before they can ship."
        minRows={2}
      />
      <Textarea
        label="Commit message"
        defaultValue="chore: bump motion to 14.1.0"
        description="Generated from the merge commit."
        minRows={1}
        disabled
      />
    </div>
  );
}
```

## API reference

### Textarea

Also accepts every native textarea attribute, and the ref points at the <textarea>. className and style go to the field box around it.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `label` | `ReactNode` | — | Visible label, linked to the textarea. |
| `description` | `ReactNode` | — | Helper text under the field. |
| `error` | `ReactNode` | — | Red invalid state and message. Replaces description. Pass true for the state without a message. |
| `autoResize` | `boolean` | `true` | Grow with the content. When off, rows applies and the field resizes by hand. |
| `minRows` | `number` | `3` | Starting height in lines. |
| `maxRows` | `number` | `10` | Height in lines before the field scrolls. |
| `showCount` | `boolean` | `false` | Character count in the corner, as count / maxLength when maxLength is set. |
| `color` | `NeonColor` | `inherited` | Palette name or hex. Falls back to --neon-accent, then cyan. |
| `size` | `"sm" \| "md" \| "lg"` | `"md"` | Padding, text size and line height. |
| `className` | `string` | — | Classes for the field box: border, background, radius. |
| `containerClassName` | `string` | — | Classes for the outer block with the label and message. |

## Accessibility

- The count is linked with aria-describedby, so screen readers read it when the field gets focus.
- maxLength is the native attribute, so typing and pasting stop at the limit.
- Auto-resize re-measures when the value changes and when the field's width changes.

## Source

`components/ui/textarea.tsx`

```tsx
"use client";

import * as React from "react";

import { cn } from "@/lib/utils";
import { neonVars, type NeonColor } from "@/lib/neon";

const INVALID = "#ff4d5e";

const useIsomorphicLayoutEffect =
  typeof window !== "undefined" ? React.useLayoutEffect : React.useEffect;

const sizes = {
  sm: {
    field: "rounded-md text-xs",
    textarea: "px-2.5 py-1.5 leading-5",
    count: "px-2.5 pb-1.5 text-[10px]",
    label: "text-xs",
  },
  md: {
    field: "rounded-lg text-sm",
    textarea: "px-3 py-2 leading-6",
    count: "px-3 pb-2 text-[11px]",
    label: "text-sm",
  },
  lg: {
    field: "rounded-xl text-base",
    textarea: "px-4 py-3 leading-7",
    count: "px-4 pb-3 text-xs",
    label: "text-sm",
  },
} as const;

export interface TextareaProps
  extends Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, "color"> {
  /** Palette name or any hex color. Inherits `--neon-accent` when omitted. */
  color?: NeonColor;
  size?: keyof typeof sizes;
  label?: React.ReactNode;
  /** Helper text under the field. Hidden while `error` is set. */
  description?: React.ReactNode;
  /** Marks the field invalid and shows this message. Pass `true` for the red state alone. */
  error?: React.ReactNode;
  /** Grow with the content between `minRows` and `maxRows`. */
  autoResize?: boolean;
  minRows?: number;
  maxRows?: number;
  /** Show a character count, or `count / maxLength` when `maxLength` is set. */
  showCount?: boolean;
  /** Classes for the field box: the bordered wrapper around the textarea. */
  className?: string;
  /** Classes for the outer block holding the label, field and message. */
  containerClassName?: string;
}

const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
  (
    {
      className,
      containerClassName,
      style,
      color,
      size = "md",
      label,
      description,
      error,
      autoResize = true,
      minRows = 3,
      maxRows = 10,
      showCount = false,
      id: idProp,
      value,
      defaultValue,
      maxLength,
      rows,
      disabled,
      readOnly,
      onChange,
      "aria-describedby": ariaDescribedBy,
      ...props
    },
    ref,
  ) => {
    const textareaRef = React.useRef<HTMLTextAreaElement>(null);
    React.useImperativeHandle(ref, () => textareaRef.current as HTMLTextAreaElement);

    const autoId = React.useId();
    const id = idProp ?? autoId;
    const invalid = Boolean(error);
    const message = invalid ? (error === true ? null : error) : description;
    const messageId = message ? `${id}-${invalid ? "error" : "description"}` : undefined;
    const countId = showCount ? `${id}-count` : undefined;
    const s = sizes[size];

    const [uncontrolledLength, setUncontrolledLength] = React.useState(
      () => String(defaultValue ?? "").length,
    );
    const length = value !== undefined ? String(value).length : uncontrolledLength;
    const tone =
      maxLength === undefined
        ? "idle"
        : length >= maxLength
          ? "limit"
          : length >= maxLength * 0.9
            ? "near"
            : "idle";

    const resize = React.useCallback(() => {
      const el = textareaRef.current;
      if (!el) return;
      if (!autoResize) {
        el.style.height = "";
        el.style.overflowY = "";
        return;
      }
      const styles = window.getComputedStyle(el);
      const lineHeight =
        parseFloat(styles.lineHeight) || parseFloat(styles.fontSize) * 1.5;
      const chrome = parseFloat(styles.paddingTop) + parseFloat(styles.paddingBottom);
      const min = lineHeight * minRows + chrome;
      const max = lineHeight * Math.max(maxRows, minRows) + chrome;

      // Collapse to the minimum first so scrollHeight reports the content, not the old box.
      el.style.height = `${min}px`;
      const next = Math.min(Math.max(el.scrollHeight, min), max);
      el.style.height = `${next}px`;
      el.style.overflowY = el.scrollHeight > max ? "auto" : "hidden";
    }, [autoResize, minRows, maxRows]);

    useIsomorphicLayoutEffect(() => {
      resize();
    }, [resize, value]);

    // Re-measure when the width changes, since line wrapping changes with it.
    React.useEffect(() => {
      const el = textareaRef.current;
      if (!el || !autoResize || typeof ResizeObserver === "undefined") return;
      let width = el.offsetWidth;
      const observer = new ResizeObserver(() => {
        if (el.offsetWidth === width) return;
        width = el.offsetWidth;
        resize();
      });
      observer.observe(el);
      return () => observer.disconnect();
    }, [autoResize, resize]);

    function handleChange(event: React.ChangeEvent<HTMLTextAreaElement>) {
      onChange?.(event);
      if (value === undefined) setUncontrolledLength(event.target.value.length);
      resize();
    }

    function handleMouseDown(event: React.MouseEvent<HTMLDivElement>) {
      if (event.target === textareaRef.current) return;
      event.preventDefault();
      textareaRef.current?.focus();
    }

    return (
      <div className={cn("grid w-full gap-1.5", containerClassName)}>
        {label && (
          <label htmlFor={id} className={cn("w-fit font-medium text-white/80", s.label)}>
            {label}
          </label>
        )}
        <div
          style={neonVars(invalid ? INVALID : color, style)}
          onMouseDown={handleMouseDown}
          className={cn(
            "[--neon:var(--neon-accent,34_211_238)]",
            "group/field relative flex w-full cursor-text flex-col border border-white/10 bg-white/[0.03] text-white/90",
            "transition-[border-color,background-color,box-shadow] ease-[cubic-bezier(0.23,1,0.32,1)] duration-[150ms,150ms,320ms]",
            "focus-within:border-[rgb(var(--neon)/0.8)] focus-within:bg-[rgb(var(--neon)/0.04)] focus-within:shadow-[0_0_0_1px_rgb(var(--neon)/0.2),0_0_20px_-4px_rgb(var(--neon)/0.5),inset_0_0_12px_-2px_rgb(var(--neon)/0.14)]",
            !disabled && "hover:[&:not(:focus-within)]:border-white/20",
            invalid && "border-[rgb(var(--neon)/0.55)] hover:[&:not(:focus-within)]:border-[rgb(var(--neon)/0.75)]",
            readOnly &&
              "border-white/[0.08] bg-transparent text-white/70 focus-within:border-[rgb(var(--neon)/0.45)] focus-within:bg-transparent focus-within:shadow-none",
            disabled && "cursor-not-allowed opacity-50",
            s.field,
            className,
          )}
        >
          <textarea
            ref={textareaRef}
            id={id}
            value={value}
            defaultValue={defaultValue}
            maxLength={maxLength}
            rows={autoResize ? minRows : (rows ?? minRows)}
            disabled={disabled}
            readOnly={readOnly}
            onChange={handleChange}
            aria-invalid={invalid || undefined}
            aria-describedby={
              [ariaDescribedBy, messageId, countId].filter(Boolean).join(" ") || undefined
            }
            className={cn(
              "block w-full min-w-0 bg-transparent text-inherit outline-none placeholder:text-white/30",
              "[scrollbar-color:rgb(255_255_255/0.15)_transparent] [scrollbar-width:thin] disabled:cursor-not-allowed",
              autoResize ? "resize-none overflow-hidden" : "resize-y",
              s.textarea,
            )}
            {...props}
          />
          {showCount && (
            <div
              id={countId}
              className={cn(
                "pointer-events-none flex select-none justify-end font-medium tabular-nums",
                s.count,
              )}
            >
              <span
                className={cn(
                  "transition-colors duration-200",
                  tone === "idle" && "text-white/35",
                  tone === "near" && "text-[#fbbf24]",
                  tone === "limit" && "text-[#ff4d5e]",
                )}
              >
                {length}
                {maxLength !== undefined && (
                  <span className={tone === "limit" ? undefined : "text-white/25"}>
                    {" / "}
                    {maxLength}
                  </span>
                )}
                <span className="sr-only"> characters</span>
              </span>
            </div>
          )}
        </div>
        {message && (
          <p
            id={messageId}
            className={cn("text-xs leading-5", invalid ? "text-[#ff4d5e]" : "text-white/55")}
          >
            {message}
          </p>
        )}
      </div>
    );
  },
);
Textarea.displayName = "Textarea";

export { Textarea };
```


---

# Component: Select

> Keyboard-friendly listbox with a glowing popover and typeahead.

Category: Forms. Docs: https://get-neonkit.vercel.app/components/select

## Installation

```bash
npx shadcn@latest add https://get-neonkit.vercel.app/r/select.json
```

With the `@neonkit` namespace configured: `npx shadcn@latest add @neonkit/select`.

npm dependencies: `motion`, `lucide-react`. Also needs `lib/utils.ts` (`cn`) and `lib/neon.ts` (`neonVars`), which the CLI adds.

## Usage

```tsx
import { Select } from "@/components/ui/select"

<Select
  label="Region"
  defaultValue="fra1"
  options={[
    { value: "fra1", label: "Frankfurt" },
    { value: "iad1", label: "Washington, D.C." },
  ]}
/>
```

## Examples

### Region picker

Options can carry a second line. Disabled options are skipped by the keyboard.

```tsx
import { Select } from "@/components/ui/select";

const regions = [
  { value: "fra1", label: "Frankfurt", description: "eu-central-1 · 12 ms" },
  { value: "lhr1", label: "London", description: "eu-west-2 · 18 ms" },
  { value: "iad1", label: "Washington, D.C.", description: "us-east-1 · 84 ms" },
  { value: "sfo1", label: "San Francisco", description: "us-west-1 · 142 ms" },
  { value: "gru1", label: "São Paulo", description: "sa-east-1 · 196 ms" },
  { value: "hnd1", label: "Tokyo", description: "ap-northeast-1 · 228 ms" },
  { value: "syd1", label: "Sydney", description: "ap-southeast-2 · At capacity", disabled: true },
];

export default function SelectDemo() {
  return (
    <Select
      label="Region"
      description="Where your functions run. Pick the one closest to your database."
      options={regions}
      defaultValue="fra1"
      containerClassName="max-w-xs"
    />
  );
}
```

### In a form

Give it a name and the value submits with the form through a hidden input.

```tsx
"use client";

import * as React from "react";
import { GitBranch, GitPullRequest, Rocket, Tag } from "lucide-react";
import { Button } from "@/components/ui/button";
import { Select } from "@/components/ui/select";

const refs = [
  { value: "main", label: "main", icon: <GitBranch />, description: "Production · deployed 2 hours ago" },
  { value: "release/2.4", label: "release/2.4", icon: <GitBranch />, description: "Release candidate" },
  { value: "feat/otp-input", label: "feat/otp-input", icon: <GitPullRequest />, description: "#128 · Preview ready" },
  { value: "fix/select-typeahead", label: "fix/select-typeahead", icon: <GitPullRequest />, description: "#131 · Checks failing", disabled: true },
  { value: "v2.3.1", label: "v2.3.1", icon: <Tag />, description: "Tag · last stable" },
];

export default function SelectDeployBranch() {
  const [status, setStatus] = React.useState("");

  function deploy(event: React.FormEvent<HTMLFormElement>) {
    event.preventDefault();
    const branch = new FormData(event.currentTarget).get("branch");
    setStatus(`Queued ${branch} for production.`);
  }

  return (
    <form onSubmit={deploy} className="grid w-full max-w-sm gap-2">
      <div className="flex items-end gap-2">
        <Select
          name="branch"
          label="Deploy branch"
          options={refs}
          defaultValue="main"
          onValueChange={() => setStatus("")}
          containerClassName="flex-1"
        />
        <Button type="submit" variant="solid">
          <Rocket /> Deploy
        </Button>
      </div>
      <p aria-live="polite" className="h-5 text-xs leading-5 text-white/55">
        {status}
      </p>
    </form>
  );
}
```

### Sizes

```tsx
import { Select } from "@/components/ui/select";

const sorts = [
  { value: "updated", label: "Recently updated" },
  { value: "created", label: "Newest first" },
  { value: "stars", label: "Most stars" },
  { value: "name", label: "Name" },
];

export default function SelectSizes() {
  return (
    <div className="grid w-full max-w-xs gap-3">
      <Select size="sm" aria-label="Sort repositories" options={sorts} defaultValue="updated" />
      <Select size="md" aria-label="Sort repositories" options={sorts} defaultValue="created" />
      <Select size="lg" aria-label="Sort repositories" options={sorts} defaultValue="stars" />
    </div>
  );
}
```

### Error and disabled

```tsx
import { Select } from "@/components/ui/select";

const plans = [
  { value: "hobby", label: "Hobby" },
  { value: "pro", label: "Pro" },
  { value: "enterprise", label: "Enterprise" },
];

const timezones = [
  { value: "America/Los_Angeles", label: "Pacific Time", description: "Los Angeles · UTC−8" },
  { value: "America/New_York", label: "Eastern Time", description: "New York · UTC−5" },
  { value: "Europe/London", label: "Greenwich Mean Time", description: "London · UTC+0" },
  { value: "Europe/Berlin", label: "Central European Time", description: "Berlin · UTC+1" },
  { value: "Asia/Kolkata", label: "India Standard Time", description: "Kolkata · UTC+5:30" },
  { value: "Asia/Tokyo", label: "Japan Standard Time", description: "Tokyo · UTC+9" },
];

export default function SelectStates() {
  return (
    <div className="grid w-full max-w-xs gap-5">
      <Select
        label="Timezone"
        placeholder="Choose a timezone"
        options={timezones}
        error="Pick a timezone so the weekly report lands on Monday morning."
      />
      <Select
        label="Plan"
        options={plans}
        defaultValue="pro"
        description="Only workspace owners can change the plan."
        disabled
      />
    </div>
  );
}
```

## API reference

### Select

Also accepts native button attributes, and the ref points at the trigger. className and style go to the trigger.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `options` | `SelectOption[]` | — | The choices, in order. |
| `value` | `string` | — | Controlled value. |
| `defaultValue` | `string` | — | Initial value when uncontrolled. |
| `onValueChange` | `(value: string) => void` | — | Called when the user picks a different option. |
| `placeholder` | `ReactNode` | `"Select…"` | Shown while nothing is selected. |
| `name` | `string` | — | Submits the value with a surrounding form. |
| `label` | `ReactNode` | — | Visible label. Names both the trigger and the list. |
| `description` | `ReactNode` | — | Helper text under the trigger. |
| `error` | `ReactNode` | — | Red invalid state and message. Replaces description. Pass true for the state without a message. |
| `disabled` | `boolean` | `false` | Blocks opening and leaves the value out of form data. |
| `color` | `NeonColor` | `inherited` | Palette name or hex. Falls back to --neon-accent, then cyan. |
| `size` | `"sm" \| "md" \| "lg"` | `"md"` | Trigger height and option padding. |
| `containerClassName` | `string` | — | Classes for the outer block with the label, list and message. |

### SelectOption

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `value` | `string` | — | Unique value, also the React key. |
| `label` | `string` | — | Shown in the list and the trigger. Typeahead matches against it. |
| `description` | `string` | — | Second line, shown in the list only. |
| `icon` | `ReactNode` | — | Shown before the label in the list and the trigger. |
| `disabled` | `boolean` | `false` | Visible but can't be picked. |

## Accessibility

- Follows the WAI-ARIA select-only combobox pattern: focus stays on the trigger and aria-activedescendant tracks the highlighted option.
- Enter, Space and the arrow keys open the list. Arrows move, Home and End jump, Enter or Space picks, Escape and Tab close.
- Typing letters jumps to the first matching option. Pressing the same letter again cycles through matches.
- Without a visible label, pass aria-label. It names both the trigger and the list.
- The list is positioned below the trigger, so an overflow-hidden ancestor will clip it.

## Source

`components/ui/select.tsx`

```tsx
"use client";

import * as React from "react";
import { AnimatePresence, motion, useReducedMotion } from "motion/react";
import { Check, ChevronDown } from "lucide-react";

import { cn } from "@/lib/utils";
import { neonVars, type NeonColor } from "@/lib/neon";

const INVALID = "#ff4d5e";
const EASE_OUT = [0.23, 1, 0.32, 1] as const;

const useIsomorphicLayoutEffect =
  typeof window !== "undefined" ? React.useLayoutEffect : React.useEffect;

const sizes = {
  sm: {
    trigger: "h-8 gap-2 rounded-md px-2.5 text-xs [&_svg]:size-3.5",
    list: "rounded-lg",
    option: "gap-2 rounded-md px-2 py-1.5 text-xs [&_svg]:size-3.5",
    hint: "text-[11px]",
    label: "text-xs",
  },
  md: {
    trigger: "h-10 gap-2 rounded-lg px-3 text-sm [&_svg]:size-4",
    list: "rounded-xl",
    option: "gap-2.5 rounded-lg px-2.5 py-2 text-sm [&_svg]:size-4",
    hint: "text-xs",
    label: "text-sm",
  },
  lg: {
    trigger: "h-12 gap-2.5 rounded-xl px-4 text-base [&_svg]:size-[18px]",
    list: "rounded-xl",
    option: "gap-3 rounded-lg px-3 py-2.5 text-base [&_svg]:size-[18px]",
    hint: "text-sm",
    label: "text-sm",
  },
} as const;

export interface SelectOption {
  value: string;
  label: string;
  /** Second line under the label, inside the list only. */
  description?: string;
  icon?: React.ReactNode;
  disabled?: boolean;
}

export interface SelectProps
  extends Omit<
    React.ButtonHTMLAttributes<HTMLButtonElement>,
    "color" | "value" | "defaultValue" | "onChange" | "children" | "type"
  > {
  options: SelectOption[];
  value?: string;
  defaultValue?: string;
  onValueChange?: (value: string) => void;
  placeholder?: React.ReactNode;
  /** Palette name or any hex color. Inherits `--neon-accent` when omitted. */
  color?: NeonColor;
  size?: keyof typeof sizes;
  /** Submits the value under this name with a surrounding form. */
  name?: string;
  label?: React.ReactNode;
  /** Helper text under the trigger. Hidden while `error` is set. */
  description?: React.ReactNode;
  /** Marks the select invalid and shows this message. Pass `true` for the red state alone. */
  error?: React.ReactNode;
  /** Classes for the trigger button. */
  className?: string;
  /** Classes for the outer block holding the label, trigger, list and message. */
  containerClassName?: string;
}

const Select = React.forwardRef<HTMLButtonElement, SelectProps>(
  (
    {
      options,
      value,
      defaultValue,
      onValueChange,
      placeholder = "Select…",
      color,
      size = "md",
      name,
      label,
      description,
      error,
      disabled,
      id: idProp,
      className,
      containerClassName,
      style,
      onClick,
      onKeyDown,
      onKeyUp,
      onMouseDown,
      onBlur,
      "aria-label": ariaLabel,
      "aria-labelledby": ariaLabelledBy,
      "aria-describedby": ariaDescribedBy,
      ...props
    },
    ref,
  ) => {
    const triggerRef = React.useRef<HTMLButtonElement>(null);
    const listRef = React.useRef<HTMLDivElement>(null);
    React.useImperativeHandle(ref, () => triggerRef.current as HTMLButtonElement);

    const autoId = React.useId();
    const id = idProp ?? autoId;
    const labelId = `${id}-label`;
    const listboxId = `${id}-listbox`;
    const optionId = (index: number) => `${id}-option-${index}`;

    const invalid = Boolean(error);
    const message = invalid ? (error === true ? null : error) : description;
    const messageId = message ? `${id}-${invalid ? "error" : "description"}` : undefined;
    const s = sizes[size];
    const reduceMotion = useReducedMotion();

    const [uncontrolledValue, setUncontrolledValue] = React.useState(defaultValue);
    const selectedValue = value !== undefined ? value : uncontrolledValue;
    const selectedIndex = options.findIndex((option) => option.value === selectedValue);
    const selected = selectedIndex >= 0 ? options[selectedIndex] : undefined;

    const [open, setOpen] = React.useState(false);
    const [listWidth, setListWidth] = React.useState<number>();
    const [activeIndex, setActiveIndex] = React.useState(-1);
    const isOpen = open && !disabled;

    const typeahead = React.useRef({ query: "", timer: 0 });
    // Only keyboard moves scroll the list; hover never yanks it under the cursor.
    const scrollToActive = React.useRef(false);

    React.useEffect(() => {
      const state = typeahead.current;
      return () => window.clearTimeout(state.timer);
    }, []);

    useIsomorphicLayoutEffect(() => {
      const list = listRef.current;
      if (!isOpen || !list || activeIndex < 0 || !scrollToActive.current) return;
      scrollToActive.current = false;
      const option = document.getElementById(`${id}-option-${activeIndex}`);
      if (!option) return;
      const top = option.offsetTop - 4;
      const bottom = option.offsetTop + option.offsetHeight + 4;
      if (top < list.scrollTop) list.scrollTop = top;
      else if (bottom > list.scrollTop + list.clientHeight) {
        list.scrollTop = bottom - list.clientHeight;
      }
    }, [isOpen, activeIndex, id]);

    function step(from: number, direction: 1 | -1) {
      for (let i = from; i >= 0 && i < options.length; i += direction) {
        if (!options[i].disabled) return i;
      }
      return -1;
    }

    function highlight(index: number) {
      if (index < 0) return;
      scrollToActive.current = true;
      setActiveIndex(index);
    }

    function openList(fallback: "first" | "last" = "first") {
      if (disabled) return;
      const index =
        selected && !selected.disabled
          ? selectedIndex
          : fallback === "first"
            ? step(0, 1)
            : step(options.length - 1, -1);
      scrollToActive.current = true;
      setActiveIndex(index);
      // Match the trigger, which may be narrower than the field's container.
      setListWidth(triggerRef.current?.offsetWidth);
      setOpen(true);
    }

    function close() {
      setOpen(false);
      typeahead.current.query = "";
    }

    function commit(index: number) {
      const option = options[index];
      if (option && !option.disabled && option.value !== selectedValue) {
        if (value === undefined) setUncontrolledValue(option.value);
        onValueChange?.(option.value);
      }
      close();
      triggerRef.current?.focus();
    }

    function matchTypeahead(char: string) {
      const state = typeahead.current;
      window.clearTimeout(state.timer);
      state.timer = window.setTimeout(() => {
        state.query = "";
      }, 500);
      state.query += char.toLowerCase();

      // Pressing the same letter repeatedly cycles through options that start with it.
      const repeated = state.query.split("").every((c) => c === state.query[0]);
      const query = repeated ? state.query[0] : state.query;
      const from = isOpen ? activeIndex : selectedIndex;
      const offset = repeated ? 1 : 0;
      for (let n = 0; n < options.length; n++) {
        const index = (((from + offset + n) % options.length) + options.length) % options.length;
        const option = options[index];
        if (!option.disabled && option.label.toLowerCase().startsWith(query)) return index;
      }
      return -1;
    }

    function handleKeyDown(event: React.KeyboardEvent<HTMLButtonElement>) {
      onKeyDown?.(event);
      if (event.defaultPrevented || disabled) return;
      const { key } = event;
      const printable = key.length === 1 && !event.ctrlKey && !event.metaKey && !event.altKey;

      if (!isOpen) {
        if (key === "Enter" || key === " " || key === "ArrowDown") {
          event.preventDefault();
          openList("first");
        } else if (key === "ArrowUp") {
          event.preventDefault();
          openList("last");
        } else if (key === "Home" || key === "End") {
          event.preventDefault();
          highlight(key === "Home" ? step(0, 1) : step(options.length - 1, -1));
          setOpen(true);
        } else if (printable) {
          const index = matchTypeahead(key);
          if (index >= 0) {
            highlight(index);
            setOpen(true);
          }
        }
        return;
      }

      switch (key) {
        case "ArrowDown":
          event.preventDefault();
          highlight(step(activeIndex + 1, 1));
          break;
        case "ArrowUp":
          event.preventDefault();
          if (event.altKey) commit(activeIndex);
          else highlight(step(activeIndex - 1, -1));
          break;
        case "Home":
          event.preventDefault();
          highlight(step(0, 1));
          break;
        case "End":
          event.preventDefault();
          highlight(step(options.length - 1, -1));
          break;
        case "Enter":
          event.preventDefault();
          commit(activeIndex);
          break;
        case "Escape":
          event.preventDefault();
          event.stopPropagation();
          close();
          triggerRef.current?.focus();
          break;
        case "Tab":
          close();
          break;
        default:
          if (key === " " && !typeahead.current.query) {
            event.preventDefault();
            commit(activeIndex);
          } else if (printable) {
            event.preventDefault();
            highlight(matchTypeahead(key));
          }
      }
    }

    return (
      <div
        style={neonVars(color)}
        className={cn("[--neon:var(--neon-accent,34_211_238)]", "grid w-full gap-1.5", containerClassName)}
      >
        {label && (
          <label
            id={labelId}
            htmlFor={id}
            onClick={(event) => {
              // Focus the trigger like a native select label, without opening the list.
              event.preventDefault();
              triggerRef.current?.focus();
            }}
            className={cn("w-fit font-medium text-white/80", s.label)}
          >
            {label}
          </label>
        )}
        <div className="relative">
          <button
            ref={triggerRef}
            id={id}
            type="button"
            role="combobox"
            disabled={disabled}
            aria-haspopup="listbox"
            aria-expanded={isOpen}
            aria-controls={isOpen ? listboxId : undefined}
            aria-activedescendant={isOpen && activeIndex >= 0 ? optionId(activeIndex) : undefined}
            aria-label={ariaLabel}
            aria-labelledby={label ? labelId : ariaLabelledBy}
            aria-describedby={[ariaDescribedBy, messageId].filter(Boolean).join(" ") || undefined}
            aria-invalid={invalid || undefined}
            data-state={isOpen ? "open" : "closed"}
            data-placeholder={selected ? undefined : ""}
            style={invalid ? neonVars(INVALID, style) : style}
            className={cn(
              "flex w-full cursor-pointer select-none items-center border border-white/10 bg-white/[0.03] text-left text-white/90 outline-none",
              "transition-[border-color,background-color,box-shadow] ease-[cubic-bezier(0.23,1,0.32,1)] duration-[150ms,150ms,320ms]",
              "focus-visible:border-[rgb(var(--neon)/0.8)] focus-visible:bg-[rgb(var(--neon)/0.04)] focus-visible:shadow-[0_0_0_1px_rgb(var(--neon)/0.2),0_0_20px_-4px_rgb(var(--neon)/0.5),inset_0_0_12px_-2px_rgb(var(--neon)/0.14)]",
              "disabled:cursor-not-allowed disabled:opacity-50",
              "[&_svg]:pointer-events-none [&_svg]:shrink-0",
              !isOpen && "hover:border-white/20",
              invalid && "border-[rgb(var(--neon)/0.55)]",
              invalid && !isOpen && "hover:border-[rgb(var(--neon)/0.75)]",
              isOpen &&
                "border-[rgb(var(--neon)/0.8)] bg-[rgb(var(--neon)/0.04)] shadow-[0_0_0_1px_rgb(var(--neon)/0.2),0_0_20px_-4px_rgb(var(--neon)/0.5),inset_0_0_12px_-2px_rgb(var(--neon)/0.14)]",
              s.trigger,
              className,
            )}
            {...props}
            onMouseDown={(event) => {
              onMouseDown?.(event);
              // Focus is set on click instead, so Safari (which never focuses buttons) behaves.
              if (event.button === 0) event.preventDefault();
            }}
            onClick={(event) => {
              onClick?.(event);
              if (event.defaultPrevented) return;
              triggerRef.current?.focus();
              if (isOpen) close();
              else openList("first");
            }}
            onKeyDown={handleKeyDown}
            onKeyUp={(event) => {
              onKeyUp?.(event);
              // Space is handled on keydown; cancel the native click it would fire on keyup.
              if (event.key === " ") event.preventDefault();
            }}
            onBlur={(event) => {
              onBlur?.(event);
              close();
            }}
          >
            {selected?.icon && (
              <span className="flex shrink-0 items-center text-white/50">{selected.icon}</span>
            )}
            <span className={cn("min-w-0 flex-1 truncate", !selected && "text-white/30")}>
              {selected ? selected.label : placeholder}
            </span>
            <ChevronDown
              aria-hidden
              className={cn(
                "text-white/40 transition-[transform,color] duration-200 ease-[cubic-bezier(0.23,1,0.32,1)] motion-reduce:transition-none",
                isOpen && "rotate-180 text-[rgb(var(--neon))]",
              )}
            />
          </button>

          <AnimatePresence>
            {isOpen && (
              <motion.div
                ref={listRef}
                id={listboxId}
                role="listbox"
                aria-labelledby={label ? labelId : ariaLabelledBy}
                aria-label={label ? undefined : ariaLabel}
                initial={reduceMotion ? { opacity: 0 } : { opacity: 0, y: -4, scale: 0.98 }}
                animate={{ opacity: 1, y: 0, scale: 1 }}
                exit={reduceMotion ? { opacity: 0 } : { opacity: 0, y: -4, scale: 0.98 }}
                transition={{ duration: 0.16, ease: EASE_OUT }}
                // Keep focus on the trigger so aria-activedescendant stays in charge.
                onMouseDown={(event) => event.preventDefault()}
                style={{ width: listWidth }}
                className={cn(
                  "absolute left-0 top-full z-50 w-full mt-1.5 max-h-64 origin-top overflow-y-auto overscroll-contain border border-white/10 bg-[#0a0b11] p-1",
                  "shadow-[0_18px_48px_-12px_rgb(0_0_0/0.85),0_0_0_1px_rgb(var(--neon)/0.06),0_0_28px_-10px_rgb(var(--neon)/0.45)]",
                  "[scrollbar-color:rgb(255_255_255/0.15)_transparent] [scrollbar-width:thin]",
                  s.list,
                )}
              >
                {options.map((option, index) => {
                  const active = index === activeIndex;
                  const isSelected = index === selectedIndex;
                  return (
                    <div
                      key={option.value}
                      id={optionId(index)}
                      role="option"
                      aria-selected={isSelected}
                      aria-disabled={option.disabled || undefined}
                      data-active={active || undefined}
                      onPointerMove={() => {
                        if (!option.disabled && !active) setActiveIndex(index);
                      }}
                      onClick={() => {
                        if (!option.disabled) commit(index);
                      }}
                      className={cn(
                        "flex cursor-pointer select-none items-center text-white/75 transition-colors duration-100",
                        s.option,
                        active && "bg-[rgb(var(--neon)/0.1)] text-white",
                        isSelected && "text-[rgb(var(--neon))]",
                        option.disabled && "cursor-not-allowed opacity-40",
                      )}
                    >
                      {option.icon && (
                        <span
                          className={cn(
                            "flex shrink-0 items-center",
                            isSelected ? "text-[rgb(var(--neon))]" : "text-white/45",
                          )}
                        >
                          {option.icon}
                        </span>
                      )}
                      <span className="flex min-w-0 flex-1 flex-col">
                        <span className="truncate">{option.label}</span>
                        {option.description && (
                          <span
                            className={cn(
                              "truncate",
                              s.hint,
                              active ? "text-white/55" : "text-white/40",
                            )}
                          >
                            {option.description}
                          </span>
                        )}
                      </span>
                      <Check
                        aria-hidden
                        className={cn(
                          "shrink-0 text-[rgb(var(--neon))] [filter:drop-shadow(0_0_6px_rgb(var(--neon)/0.7))]",
                          !isSelected && "invisible",
                        )}
                      />
                    </div>
                  );
                })}
              </motion.div>
            )}
          </AnimatePresence>
        </div>
        {name && <input type="hidden" name={name} value={selectedValue ?? ""} disabled={disabled} />}
        {message && (
          <p
            id={messageId}
            className={cn("text-xs leading-5", invalid ? "text-[#ff4d5e]" : "text-white/55")}
          >
            {message}
          </p>
        )}
      </div>
    );
  },
);
Select.displayName = "Select";

export { Select };
```


---

# Component: Checkbox

> Checkbox with a drawn-on checkmark and indeterminate state.

Category: Forms. Docs: https://get-neonkit.vercel.app/components/checkbox

## Installation

```bash
npx shadcn@latest add https://get-neonkit.vercel.app/r/checkbox.json
```

With the `@neonkit` namespace configured: `npx shadcn@latest add @neonkit/checkbox`.

npm dependencies: none. Also needs `lib/utils.ts` (`cn`) and `lib/neon.ts` (`neonVars`), which the CLI adds.

## Usage

```tsx
import { Checkbox } from "@/components/ui/checkbox"

<Checkbox label="Accept terms and conditions" />
```

## Examples

### With description

```tsx
import { Checkbox } from "@/components/ui/checkbox";

export default function CheckboxDemo() {
  return (
    <div className="flex w-full max-w-sm flex-col gap-5">
      <Checkbox
        defaultChecked
        label="Accept terms and conditions"
        description="You agree to our Terms of Service and Privacy Policy."
      />
      <Checkbox
        label="Send me product updates"
        description="One email a month about new components."
      />
    </div>
  );
}
```

### Select all

indeterminate shows a dash on the parent while only some children are checked.

```tsx
"use client";

import * as React from "react";
import { Checkbox } from "@/components/ui/checkbox";

const channels = [
  { value: "email", label: "Email" },
  { value: "push", label: "Push notifications" },
  { value: "sms", label: "Text message" },
];

export default function CheckboxSelectAll() {
  const id = React.useId();
  const [selected, setSelected] = React.useState<string[]>(["email", "push"]);

  const all = selected.length === channels.length;
  const some = selected.length > 0 && !all;

  function toggle(value: string, checked: boolean) {
    setSelected((current) =>
      checked ? [...current, value] : current.filter((item) => item !== value),
    );
  }

  return (
    <fieldset className="w-full max-w-xs">
      <legend className="mb-4 text-sm text-white/55">Notify me about mentions by</legend>
      <Checkbox
        checked={all}
        indeterminate={some}
        onCheckedChange={(checked) => setSelected(checked ? channels.map((c) => c.value) : [])}
        aria-controls={channels.map((c) => `${id}-${c.value}`).join(" ")}
        label="All channels"
      />
      <div className="mt-3 flex flex-col gap-3 pl-8">
        {channels.map((channel) => (
          <Checkbox
            key={channel.value}
            id={`${id}-${channel.value}`}
            checked={selected.includes(channel.value)}
            onCheckedChange={(checked) => toggle(channel.value, checked)}
            label={channel.label}
          />
        ))}
      </div>
    </fieldset>
  );
}
```

### Sizes

```tsx
import { Checkbox } from "@/components/ui/checkbox";

export default function CheckboxSizes() {
  return (
    <div className="flex flex-col gap-4">
      <Checkbox size="sm" defaultChecked label="Small" />
      <Checkbox size="md" defaultChecked label="Medium" />
      <Checkbox size="lg" defaultChecked label="Large" />
    </div>
  );
}
```

### Colors

Pass a palette name or any hex value to color.

```tsx
import { Checkbox } from "@/components/ui/checkbox";

const colors = ["cyan", "blue", "violet", "magenta", "pink", "red", "orange", "amber", "lime", "green"] as const;

export default function CheckboxColors() {
  return (
    <div className="grid w-full max-w-md gap-5">
      <div className="flex flex-wrap justify-center gap-x-6 gap-y-3">
        {colors.map((color) => (
          <Checkbox key={color} color={color} defaultChecked label={color} className="capitalize" />
        ))}
      </div>
      <div className="flex justify-center">
        <Checkbox color="#ff6a00" defaultChecked label="Any hex works · #ff6a00" />
      </div>
    </div>
  );
}
```

### Disabled

```tsx
import { Checkbox } from "@/components/ui/checkbox";

export default function CheckboxDisabled() {
  return (
    <div className="flex w-full max-w-sm flex-col gap-5">
      <Checkbox
        disabled
        label="Sync over cellular"
        description="Available on the Pro plan."
      />
      <Checkbox
        disabled
        defaultChecked
        label="Encrypt backups"
        description="Required by your organization's security policy."
      />
    </div>
  );
}
```

## API reference

### Checkbox

Renders a native checkbox input. className and style go to the outer label; every other native input attribute goes to the input, which also receives the ref.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `checked` | `boolean` | — | Controlled checked state. |
| `defaultChecked` | `boolean` | `false` | Initial state when uncontrolled. |
| `onCheckedChange` | `(checked: boolean) => void` | — | Called with the new state on every toggle. |
| `indeterminate` | `boolean` | `false` | Shows a dash and reports a mixed state. Takes priority over checked visually. |
| `label` | `ReactNode` | — | Text beside the box. Clicking anywhere on the row toggles it. |
| `description` | `ReactNode` | — | Secondary text under the label, linked with aria-describedby. |
| `color` | `NeonColor` | `inherited` | Palette name or hex. Falls back to --neon-accent, then cyan. |
| `size` | `"sm" \| "md" \| "lg"` | `"md"` | Box of 16, 20 or 24px with matching text. |
| `disabled` | `boolean` | `false` | Blocks interaction and dims the row. |

## Accessibility

- It is a real input, so Space toggles it, forms submit it and name, value and required work as usual.
- The label is wired with aria-labelledby, so the description is announced as a description rather than as part of the name.
- Indeterminate sets the native indeterminate property, which screen readers announce as mixed.
- Without a label, pass an aria-label.

## Source

`components/ui/checkbox.tsx`

```tsx
"use client";

import * as React from "react";

import { cn } from "@/lib/utils";
import { neonVars, type NeonColor } from "@/lib/neon";

// Each box is as tall as its label's line-height (or offset to its center),
// so box and first line of text share a center.
const sizes = {
  sm: {
    root: "gap-2.5",
    control: "mt-0.5 size-4",
    box: "rounded-[5px]",
    stroke: 2,
    label: "text-[13px] leading-5",
    description: "text-xs leading-4",
  },
  md: {
    root: "gap-3",
    control: "size-5",
    box: "rounded-md",
    stroke: 1.75,
    label: "text-sm leading-5",
    description: "mt-0.5 text-[13px] leading-[18px]",
  },
  lg: {
    root: "gap-3",
    control: "size-6",
    box: "rounded-[7px]",
    stroke: 1.6,
    label: "text-base leading-6",
    description: "mt-0.5 text-sm leading-5",
  },
} as const;

export interface CheckboxProps
  extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "color" | "size" | "type"> {
  /** Palette name or any hex color. Inherits `--neon-accent` when omitted. */
  color?: NeonColor;
  size?: keyof typeof sizes;
  onCheckedChange?: (checked: boolean) => void;
  /** Shows a dash and reports "mixed" to assistive tech. */
  indeterminate?: boolean;
  label?: React.ReactNode;
  description?: React.ReactNode;
}

const Checkbox = React.forwardRef<HTMLInputElement, CheckboxProps>(
  (
    {
      className,
      style,
      color,
      size = "md",
      checked: checkedProp,
      defaultChecked = false,
      onCheckedChange,
      onChange,
      indeterminate = false,
      label,
      description,
      disabled,
      id: idProp,
      "aria-describedby": describedBy,
      ...props
    },
    ref,
  ) => {
    const inputRef = React.useRef<HTMLInputElement>(null);
    React.useImperativeHandle(ref, () => inputRef.current as HTMLInputElement, []);

    const autoId = React.useId();
    const id = idProp ?? autoId;
    const labelId = `${id}-label`;
    const descriptionId = `${id}-description`;

    const [uncontrolled, setUncontrolled] = React.useState(defaultChecked);
    const isControlled = checkedProp !== undefined;
    const checked = isControlled ? checkedProp : uncontrolled;

    // A click clears the native flag, so re-apply it after every render.
    React.useEffect(() => {
      if (inputRef.current) inputRef.current.indeterminate = indeterminate;
    });

    const state = indeterminate ? "indeterminate" : checked ? "checked" : "unchecked";
    const on = state !== "unchecked";
    const s = sizes[size];

    function handleChange(event: React.ChangeEvent<HTMLInputElement>) {
      onChange?.(event);
      if (!isControlled) setUncontrolled(event.target.checked);
      onCheckedChange?.(event.target.checked);
    }

    return (
      <label
        data-state={state}
        data-disabled={disabled ? "" : undefined}
        style={neonVars(color, style)}
        className={cn(
          "[--neon:var(--neon-accent,34_211_238)]",
          "group/checkbox inline-flex cursor-pointer select-none items-start",
          disabled && "cursor-not-allowed opacity-50",
          s.root,
          className,
        )}
      >
        <span className={cn("relative inline-flex shrink-0", s.control)}>
          <input
            ref={inputRef}
            type="checkbox"
            id={id}
            checked={checked}
            disabled={disabled}
            onChange={handleChange}
            aria-labelledby={label ? labelId : undefined}
            aria-describedby={
              [describedBy, description && descriptionId].filter(Boolean).join(" ") ||
              undefined
            }
            className="peer absolute inset-0 m-0 size-full cursor-[inherit] appearance-none opacity-0"
            {...props}
          />
          <span
            aria-hidden
            className={cn(
              "pointer-events-none flex size-full items-center justify-center border text-[#05060a]",
              "transition-[background-color,border-color,box-shadow,transform] duration-150 ease-out motion-reduce:transition-none",
              "peer-focus-visible:ring-2 peer-focus-visible:ring-[rgb(var(--neon)/0.6)] peer-focus-visible:ring-offset-2 peer-focus-visible:ring-offset-[#05060a]",
              !disabled && "group-active/checkbox:scale-[0.92]",
              s.box,
              on
                ? "border-[rgb(var(--neon))] bg-[rgb(var(--neon))] shadow-[0_0_14px_rgb(var(--neon)/0.45),inset_0_1px_0_rgb(255_255_255/0.35)]"
                : "border-white/20 bg-white/[0.03]",
              !disabled &&
                (on
                  ? "group-hover/checkbox:shadow-[0_0_20px_rgb(var(--neon)/0.6),inset_0_1px_0_rgb(255_255_255/0.35)]"
                  : "group-hover/checkbox:border-[rgb(var(--neon)/0.55)]"),
            )}
          >
            <svg
              viewBox="0 0 16 16"
              fill="none"
              stroke="currentColor"
              strokeWidth={s.stroke}
              strokeLinecap="round"
              strokeLinejoin="round"
              className="size-full"
            >
              <Stroke d="M3.75 8.25 6.5 11l5.75-6" visible={state === "checked"} />
              <Stroke d="M4.5 8h7" visible={state === "indeterminate"} />
            </svg>
          </span>
        </span>

        {(label || description) && (
          <span className="grid min-w-0">
            {label && (
              <span
                id={labelId}
                className={cn("text-white/90", description && "font-medium", s.label)}
              >
                {label}
              </span>
            )}
            {description && (
              <span id={descriptionId} className={cn("text-white/55", s.description)}>
                {description}
              </span>
            )}
          </span>
        )}
      </label>
    );
  },
);
Checkbox.displayName = "Checkbox";

/** A path that draws itself on. Hidden instantly so no round cap lingers. */
function Stroke({ d, visible }: { d: string; visible: boolean }) {
  return (
    <path
      d={d}
      pathLength={1}
      strokeDasharray={1}
      className={cn(
        "transition-[stroke-dashoffset] ease-[cubic-bezier(0.23,1,0.32,1)] motion-reduce:transition-none",
        visible
          ? "opacity-100 delay-[40ms] duration-200 [stroke-dashoffset:0]"
          : "opacity-0 duration-0 [stroke-dashoffset:1]",
      )}
    />
  );
}

export { Checkbox };
```


---

# Component: Radio Group

> Single choice from a set, with arrow-key navigation and card layouts.

Category: Forms. Docs: https://get-neonkit.vercel.app/components/radio-group

## Installation

```bash
npx shadcn@latest add https://get-neonkit.vercel.app/r/radio-group.json
```

With the `@neonkit` namespace configured: `npx shadcn@latest add @neonkit/radio-group`.

npm dependencies: none. Also needs `lib/utils.ts` (`cn`) and `lib/neon.ts` (`neonVars`), which the CLI adds.

## Usage

```tsx
import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group"

<RadioGroup defaultValue="express" aria-label="Shipping speed">
  <RadioGroupItem value="standard" label="Standard" />
  <RadioGroupItem value="express" label="Express" />
</RadioGroup>
```

## Examples

### With descriptions

```tsx
import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";

export default function RadioGroupDemo() {
  return (
    <div className="w-full max-w-xs">
      <p id="shipping-speed" className="mb-4 text-sm font-medium text-white/90">
        Shipping speed
      </p>
      <RadioGroup defaultValue="express" aria-labelledby="shipping-speed" className="gap-4">
        <RadioGroupItem value="standard" label="Standard" description="4–6 business days · Free" />
        <RadioGroupItem value="express" label="Express" description="2–3 business days · $9.00" />
        <RadioGroupItem value="overnight" label="Overnight" description="Next business day · $24.00" />
      </RadioGroup>
    </div>
  );
}
```

### Card variant

variant="card" turns each option into a tile. icon sits above the label and children render below it.

```tsx
import { Leaf, Users, Zap } from "lucide-react";
import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";

const plans = [
  { value: "hobby", name: "Hobby", icon: <Leaf />, price: "$0", detail: "For side projects" },
  { value: "pro", name: "Pro", icon: <Zap />, price: "$20", detail: "Unlimited projects" },
  { value: "team", name: "Team", icon: <Users />, price: "$48", detail: "10 seats and SSO" },
];

export default function RadioGroupPlanPicker() {
  return (
    <RadioGroup
      variant="card"
      orientation="horizontal"
      defaultValue="pro"
      aria-label="Plan"
      className="w-full max-w-xl"
    >
      {plans.map((plan) => (
        <RadioGroupItem key={plan.value} value={plan.value} label={plan.name} icon={plan.icon}>
          <span className="block text-2xl font-semibold tracking-tight text-white">
            {plan.price}
            <span className="text-sm font-normal tracking-normal text-white/55"> / month</span>
          </span>
          <span className="mt-1 block text-[13px] leading-[18px] text-white/55">{plan.detail}</span>
        </RadioGroupItem>
      ))}
    </RadioGroup>
  );
}
```

### Horizontal

```tsx
import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";

export default function RadioGroupHorizontal() {
  return (
    <div className="flex flex-col items-center gap-4">
      <p id="row-density" className="text-sm text-white/55">
        Row density
      </p>
      <RadioGroup orientation="horizontal" defaultValue="default" aria-labelledby="row-density">
        <RadioGroupItem value="compact" label="Compact" />
        <RadioGroupItem value="default" label="Default" />
        <RadioGroupItem value="comfortable" label="Comfortable" />
      </RadioGroup>
    </div>
  );
}
```

### Disabled option

Disabled options are skipped by arrow keys.

```tsx
import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";

export default function RadioGroupDisabled() {
  return (
    <div className="w-full max-w-xs">
      <p id="backup-frequency" className="mb-4 text-sm font-medium text-white/90">
        Backup frequency
      </p>
      <RadioGroup defaultValue="daily" aria-labelledby="backup-frequency" className="gap-4">
        <RadioGroupItem
          value="hourly"
          label="Hourly"
          description="Available on the Team plan."
          disabled
        />
        <RadioGroupItem value="daily" label="Daily" description="Every night at 02:00 UTC." />
        <RadioGroupItem value="weekly" label="Weekly" description="Sundays at 02:00 UTC." />
      </RadioGroup>
    </div>
  );
}
```

## API reference

### RadioGroup

Renders a div with role="radiogroup" and accepts its attributes.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `value` | `string` | — | Controlled selected value. |
| `defaultValue` | `string` | — | Initial value when uncontrolled. |
| `onValueChange` | `(value: string) => void` | — | Called when the selection changes. |
| `name` | `string` | `generated` | Shared name of the native radios. Set it to submit the value with a form. |
| `orientation` | `"vertical" \| "horizontal"` | `"vertical"` | Stacks options or lays them out in a row (a responsive grid for cards). |
| `variant` | `"default" \| "card"` | `"default"` | Classic radios, or bordered tiles with a corner indicator. |
| `color` | `NeonColor` | `inherited` | Palette name or hex. Falls back to --neon-accent, then cyan. |
| `size` | `"sm" \| "md" \| "lg"` | `"md"` | Radio, text and card padding. |
| `disabled` | `boolean` | `false` | Disables every option. |
| `required` | `boolean` | `false` | Requires a selection before a form can submit. |

### RadioGroupItem

className and style go to the outer label; other native input attributes go to the radio input, which also receives the ref.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `value` | `string` | — | Value reported when this option is selected. Required. |
| `label` | `ReactNode` | — | Option name, used as the accessible name. |
| `description` | `ReactNode` | — | Secondary text, linked with aria-describedby. |
| `icon` | `ReactNode` | — | Card variant only. Shown above the label and lit when selected. |
| `children` | `ReactNode` | — | Extra content below the description, such as a price. Also announced as a description. |
| `disabled` | `boolean` | `false` | Disables this option only. |

## Accessibility

- Options are native radio inputs sharing one name, so the group is a single tab stop and arrow keys move and select.
- Give the group an accessible name with aria-label or aria-labelledby.
- Each label is wired with aria-labelledby, so descriptions and card content are read as descriptions, not as part of the name.

## Source

`components/ui/radio-group.tsx`

```tsx
"use client";

import * as React from "react";

import { cn } from "@/lib/utils";
import { neonVars, type NeonColor } from "@/lib/neon";

// Controls and card indicators are offset so their center meets the
// center of the label's first line.
const sizes = {
  sm: {
    item: "gap-2.5",
    control: "mt-0.5 size-4",
    dot: "size-1.5",
    label: "text-[13px] leading-5",
    description: "text-xs leading-4",
    card: "p-3",
    cardLabel: "pr-6",
    cardIcon: "mb-2.5 h-5 [&_svg]:size-4",
    indicator: "right-3 top-[15px] size-3.5",
    indicatorDot: "size-1",
  },
  md: {
    item: "gap-3",
    control: "size-5",
    dot: "size-2",
    label: "text-sm leading-5",
    description: "mt-0.5 text-[13px] leading-[18px]",
    card: "p-4",
    cardLabel: "pr-7",
    cardIcon: "mb-3 h-5 [&_svg]:size-5",
    indicator: "right-4 top-[18px] size-4",
    indicatorDot: "size-1.5",
  },
  lg: {
    item: "gap-3",
    control: "size-6",
    dot: "size-2.5",
    label: "text-base leading-6",
    description: "mt-0.5 text-sm leading-5",
    card: "p-5",
    cardLabel: "pr-8",
    cardIcon: "mb-3.5 h-6 [&_svg]:size-6",
    indicator: "right-5 top-[23px] size-[18px]",
    indicatorDot: "size-2",
  },
} as const;

type RadioGroupSize = keyof typeof sizes;
type RadioGroupVariant = "default" | "card";

type RadioGroupContextValue = {
  name: string;
  value: string | undefined;
  select: (value: string) => void;
  variant: RadioGroupVariant;
  size: RadioGroupSize;
  disabled: boolean;
  required: boolean;
};

const RadioGroupContext = React.createContext<RadioGroupContextValue | null>(null);

function useRadioGroup() {
  const context = React.useContext(RadioGroupContext);
  if (!context) throw new Error("RadioGroupItem must be used inside a RadioGroup.");
  return context;
}

export interface RadioGroupProps
  extends Omit<React.HTMLAttributes<HTMLDivElement>, "color" | "defaultValue" | "onChange"> {
  /** Palette name or any hex color. Inherits `--neon-accent` when omitted. */
  color?: NeonColor;
  value?: string;
  defaultValue?: string;
  onValueChange?: (value: string) => void;
  /** Shared by the native radios. Defaults to a generated id. */
  name?: string;
  orientation?: "vertical" | "horizontal";
  variant?: RadioGroupVariant;
  size?: RadioGroupSize;
  disabled?: boolean;
  required?: boolean;
}

const RadioGroup = React.forwardRef<HTMLDivElement, RadioGroupProps>(
  (
    {
      className,
      style,
      color,
      value: valueProp,
      defaultValue,
      onValueChange,
      name,
      orientation = "vertical",
      variant = "default",
      size = "md",
      disabled = false,
      required = false,
      children,
      ...props
    },
    ref,
  ) => {
    const autoName = React.useId();
    const [uncontrolled, setUncontrolled] = React.useState(defaultValue);
    const isControlled = valueProp !== undefined;
    const value = isControlled ? valueProp : uncontrolled;

    const context = React.useMemo<RadioGroupContextValue>(
      () => ({
        name: name ?? autoName,
        value,
        select: (next) => {
          if (!isControlled) setUncontrolled(next);
          onValueChange?.(next);
        },
        variant,
        size,
        disabled,
        required,
      }),
      [name, autoName, value, isControlled, onValueChange, variant, size, disabled, required],
    );

    const horizontal = orientation === "horizontal";

    return (
      <RadioGroupContext.Provider value={context}>
        <div
          ref={ref}
          role="radiogroup"
          aria-required={required || undefined}
          aria-disabled={disabled || undefined}
          data-orientation={orientation}
          style={neonVars(color, style)}
          className={cn(
            "[--neon:var(--neon-accent,34_211_238)]",
            variant === "card"
              ? horizontal
                ? "grid grid-cols-[repeat(auto-fit,minmax(8.5rem,1fr))] gap-3"
                : "grid gap-2.5"
              : horizontal
                ? "flex flex-wrap gap-x-6 gap-y-3"
                : "flex flex-col gap-3",
            className,
          )}
          {...props}
        >
          {children}
        </div>
      </RadioGroupContext.Provider>
    );
  },
);
RadioGroup.displayName = "RadioGroup";

export interface RadioGroupItemProps
  extends Omit<
    React.InputHTMLAttributes<HTMLInputElement>,
    "color" | "size" | "type" | "value" | "name" | "checked" | "defaultChecked"
  > {
  value: string;
  label?: React.ReactNode;
  description?: React.ReactNode;
  /** Card variant only: shown above the label. */
  icon?: React.ReactNode;
}

const RadioGroupItem = React.forwardRef<HTMLInputElement, RadioGroupItemProps>(
  (
    {
      className,
      style,
      value,
      label,
      description,
      icon,
      disabled: itemDisabled,
      children,
      id: idProp,
      onChange,
      "aria-describedby": describedBy,
      ...props
    },
    ref,
  ) => {
    const group = useRadioGroup();
    const autoId = React.useId();
    const id = idProp ?? autoId;
    const labelId = `${id}-label`;
    const descriptionId = `${id}-description`;
    const extraId = `${id}-extra`;

    const checked = group.value === value;
    const disabled = group.disabled || !!itemDisabled;
    const card = group.variant === "card";
    const s = sizes[group.size];

    const input = (
      <input
        ref={ref}
        type="radio"
        id={id}
        name={group.name}
        value={value}
        checked={checked}
        disabled={disabled}
        required={group.required}
        onChange={(event) => {
          onChange?.(event);
          if (event.target.checked) group.select(value);
        }}
        aria-labelledby={label ? labelId : undefined}
        aria-describedby={
          [describedBy, description && descriptionId, children && extraId]
            .filter(Boolean)
            .join(" ") || undefined
        }
        className={cn(
          "peer absolute inset-0 m-0 size-full cursor-[inherit] appearance-none opacity-0",
          card && "rounded-[inherit]",
        )}
        {...props}
      />
    );

    const labelEl = label && (
      <span
        id={labelId}
        className={cn(
          "block transition-colors duration-150",
          checked && card ? "text-white" : "text-white/90",
          (description || card) && "font-medium",
          s.label,
          card && s.cardLabel,
        )}
      >
        {label}
      </span>
    );

    const descriptionEl = description && (
      <span id={descriptionId} className={cn("block text-white/55", s.description)}>
        {description}
      </span>
    );

    const extraEl = children && (
      <span id={extraId} className={cn("block", card ? "mt-3" : "mt-2")}>
        {children}
      </span>
    );

    if (card) {
      return (
        <label
          data-state={checked ? "checked" : "unchecked"}
          data-disabled={disabled ? "" : undefined}
          style={style}
          className={cn(
            "group/radio relative flex cursor-pointer select-none flex-col rounded-xl border",
            "transition-[background-color,border-color,box-shadow] duration-200 ease-out motion-reduce:transition-none",
            checked
              ? "border-[rgb(var(--neon)/0.7)] bg-[rgb(var(--neon)/0.05)] shadow-[0_0_24px_-6px_rgb(var(--neon)/0.55),inset_0_0_16px_rgb(var(--neon)/0.06)]"
              : "border-white/10 bg-white/[0.03]",
            !checked && !disabled && "hover:border-white/20 hover:bg-white/[0.05]",
            disabled && "cursor-not-allowed opacity-50",
            s.card,
            className,
          )}
        >
          {input}
          <span
            aria-hidden
            className="pointer-events-none absolute -inset-px rounded-[inherit] peer-focus-visible:ring-2 peer-focus-visible:ring-[rgb(var(--neon)/0.6)] peer-focus-visible:ring-offset-2 peer-focus-visible:ring-offset-[#05060a]"
          />
          <span
            aria-hidden
            className={cn(
              "pointer-events-none absolute flex items-center justify-center rounded-full border",
              "transition-[border-color,box-shadow] duration-150 ease-out",
              checked
                ? "border-[rgb(var(--neon))] shadow-[0_0_10px_rgb(var(--neon)/0.35)]"
                : "border-white/20",
              s.indicator,
            )}
          >
            <Dot checked={checked} className={s.indicatorDot} />
          </span>
          {icon && (
            <span
              aria-hidden
              className={cn(
                "flex items-center transition-colors duration-150",
                checked ? "text-[rgb(var(--neon))]" : "text-white/55",
                s.cardIcon,
              )}
            >
              {icon}
            </span>
          )}
          {labelEl}
          {descriptionEl}
          {extraEl}
        </label>
      );
    }

    return (
      <label
        data-state={checked ? "checked" : "unchecked"}
        data-disabled={disabled ? "" : undefined}
        style={style}
        className={cn(
          "group/radio inline-flex cursor-pointer select-none items-start",
          disabled && "cursor-not-allowed opacity-50",
          s.item,
          className,
        )}
      >
        <span className={cn("relative inline-flex shrink-0", s.control)}>
          {input}
          <span
            aria-hidden
            className={cn(
              "pointer-events-none flex size-full items-center justify-center rounded-full border",
              "transition-[background-color,border-color,box-shadow,transform] duration-150 ease-out motion-reduce:transition-none",
              "peer-focus-visible:ring-2 peer-focus-visible:ring-[rgb(var(--neon)/0.6)] peer-focus-visible:ring-offset-2 peer-focus-visible:ring-offset-[#05060a]",
              checked
                ? "border-[rgb(var(--neon))] bg-[rgb(var(--neon)/0.1)] shadow-[0_0_12px_rgb(var(--neon)/0.35)]"
                : "border-white/20 bg-white/[0.03]",
              !disabled && "group-active/radio:scale-[0.92]",
              !checked && !disabled && "group-hover/radio:border-[rgb(var(--neon)/0.55)]",
            )}
          >
            <Dot checked={checked} className={s.dot} />
          </span>
        </span>

        {(label || description || children) && (
          <span className="grid min-w-0">
            {labelEl}
            {descriptionEl}
            {extraEl}
          </span>
        )}
      </label>
    );
  },
);
RadioGroupItem.displayName = "RadioGroupItem";

function Dot({ checked, className }: { checked: boolean; className: string }) {
  return (
    <span
      className={cn(
        "rounded-full bg-[rgb(var(--neon))] shadow-[0_0_6px_rgb(var(--neon)),0_0_12px_rgb(var(--neon)/0.6)]",
        "transition-[transform,scale,opacity] duration-200 ease-[cubic-bezier(0.23,1,0.32,1)] motion-reduce:transition-none",
        checked ? "scale-100 opacity-100" : "scale-50 opacity-0",
        className,
      )}
    />
  );
}

export { RadioGroup, RadioGroupItem };
```


---

# Component: Switch

> A toggle that powers on like a neon tube.

Category: Forms. Docs: https://get-neonkit.vercel.app/components/switch

## Installation

```bash
npx shadcn@latest add https://get-neonkit.vercel.app/r/switch.json
```

With the `@neonkit` namespace configured: `npx shadcn@latest add @neonkit/switch`.

npm dependencies: none. Also needs `lib/utils.ts` (`cn`) and `lib/neon.ts` (`neonVars`), which the CLI adds.

## Usage

```tsx
import { Switch } from "@/components/ui/switch"

<Switch label="Airplane mode" />
```

## Examples

### Settings list

Turning a switch on strikes the track like a neon tube before it settles.

```tsx
"use client";

import * as React from "react";
import { BatteryLow, Plane, Wifi, type LucideIcon } from "lucide-react";
import { Switch } from "@/components/ui/switch";
import { cn } from "@/lib/utils";

type Setting = {
  id: string;
  icon: LucideIcon;
  title: string;
  description: string;
  checked: boolean;
  onCheckedChange: (checked: boolean) => void;
};

export default function SwitchDemo() {
  const [airplane, setAirplane] = React.useState(false);
  const [wifi, setWifi] = React.useState(true);
  const [lowPower, setLowPower] = React.useState(false);

  const settings: Setting[] = [
    {
      id: "setting-airplane",
      icon: Plane,
      title: "Airplane mode",
      description: "Turns off cellular, Wi-Fi and Bluetooth.",
      checked: airplane,
      onCheckedChange: (on) => {
        setAirplane(on);
        if (on) setWifi(false);
      },
    },
    {
      id: "setting-wifi",
      icon: Wifi,
      title: "Wi-Fi",
      description: wifi ? "Connected to Studio 5G" : "Not connected",
      checked: wifi,
      onCheckedChange: setWifi,
    },
    {
      id: "setting-low-power",
      icon: BatteryLow,
      title: "Low power mode",
      description: "Pauses downloads and background refresh until you charge.",
      checked: lowPower,
      onCheckedChange: setLowPower,
    },
  ];

  return (
    <div className="w-full max-w-sm divide-y divide-white/[0.06] rounded-xl border border-white/10 bg-white/[0.03]">
      {settings.map(({ id, icon: Icon, title, description, checked, onCheckedChange }) => (
        <div key={id} className="flex items-center gap-3.5 px-4 py-3.5">
          <span
            className={cn(
              "flex size-8 shrink-0 items-center justify-center rounded-lg border border-white/10 bg-white/[0.04] transition-colors duration-150",
              checked ? "text-white/90" : "text-white/45",
            )}
          >
            <Icon className="size-4" />
          </span>
          <div className="min-w-0 flex-1">
            <label htmlFor={id} className="block text-sm font-medium text-white/90">
              {title}
            </label>
            <p id={`${id}-description`} className="text-[13px] leading-[18px] text-white/55">
              {description}
            </p>
          </div>
          <Switch
            id={id}
            checked={checked}
            onCheckedChange={onCheckedChange}
            aria-describedby={`${id}-description`}
          />
        </div>
      ))}
    </div>
  );
}
```

### Sizes

```tsx
import { Switch } from "@/components/ui/switch";

export default function SwitchSizes() {
  return (
    <div className="flex flex-col gap-4">
      <Switch size="sm" defaultChecked label="Small" />
      <Switch size="md" defaultChecked label="Medium" />
      <Switch size="lg" defaultChecked label="Large" />
    </div>
  );
}
```

### Colors

Pass a palette name or any hex value to color.

```tsx
import { Switch } from "@/components/ui/switch";

const colors = ["cyan", "blue", "violet", "magenta", "pink", "red", "orange", "amber", "lime", "green"] as const;

export default function SwitchColors() {
  return (
    <div className="grid w-full max-w-md gap-5">
      <div className="flex flex-wrap justify-center gap-x-6 gap-y-4">
        {colors.map((color) => (
          <Switch key={color} color={color} defaultChecked label={color} className="capitalize" />
        ))}
      </div>
      <div className="flex justify-center">
        <Switch color="#ff6a00" defaultChecked label="Any hex works · #ff6a00" />
      </div>
    </div>
  );
}
```

### Controlled

Pair checked with onCheckedChange to drive other UI from the state.

```tsx
"use client";

import * as React from "react";
import { Switch } from "@/components/ui/switch";

export default function SwitchControlled() {
  const [shared, setShared] = React.useState(false);

  return (
    <div className="w-full max-w-sm rounded-xl border border-white/10 bg-white/[0.03] p-4">
      <Switch checked={shared} onCheckedChange={setShared} label="Share with a public link" />
      <p className="mt-1.5 pl-12 text-[13px] leading-[18px] text-white/55">
        {shared
          ? "Anyone with the link can view this board."
          : "Only invited members can view this board."}
      </p>
      <div className="mt-4 flex items-center justify-between border-t border-white/[0.06] pt-3 font-mono text-xs">
        <span className="text-white/40">checked</span>
        <span className="text-white/90">{String(shared)}</span>
      </div>
    </div>
  );
}
```

## API reference

### Switch

Renders a button with role="switch" and accepts its attributes; the ref points at the button. With a label, className and style go to the wrapper around both.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `checked` | `boolean` | — | Controlled on state. |
| `defaultChecked` | `boolean` | `false` | Initial state when uncontrolled. |
| `onCheckedChange` | `(checked: boolean) => void` | — | Called with the new state on every toggle. |
| `label` | `ReactNode` | — | Clickable label after the switch, linked with aria-labelledby. |
| `name` | `string` | — | Renders a hidden input so the switch submits with a form when on. |
| `value` | `string` | `"on"` | Value submitted under name. |
| `color` | `NeonColor` | `inherited` | Palette name or hex. Falls back to --neon-accent, then cyan. |
| `size` | `"sm" \| "md" \| "lg"` | `"md"` | Track of 28, 36 or 44px wide. |
| `disabled` | `boolean` | `false` | Blocks interaction and dims the switch. |

## Accessibility

- Space and Enter toggle the switch, and aria-checked reports its state.
- Without a label, pass an aria-label or point a label element at the switch id.
- The power-on flicker is skipped when the user prefers reduced motion, and never plays for switches that are already on when they mount.

## Source

`components/ui/switch.tsx`

```tsx
"use client";

import * as React from "react";

import { cn } from "@/lib/utils";
import { neonVars, type NeonColor } from "@/lib/neon";

// Thumb travel = track width - thumb - 2px border - 2px padding.
const sizes = {
  sm: { track: "h-4 w-7", thumb: "size-3", on: "translate-x-3", root: "gap-2.5", label: "text-[13px] leading-5" },
  md: { track: "h-5 w-9", thumb: "size-4", on: "translate-x-4", root: "gap-3", label: "text-sm leading-5" },
  lg: { track: "h-6 w-11", thumb: "size-5", on: "translate-x-5", root: "gap-3", label: "text-base leading-6" },
} as const;

// A struck tube: two quick drops in brightness, then it holds.
const keyframes = `@keyframes neonkit-switch-ignite{0%{opacity:0}12%{opacity:.85}22%{opacity:.15}40%{opacity:1}52%{opacity:.4}68%,100%{opacity:1}}`;

export interface SwitchProps
  extends Omit<
    React.ButtonHTMLAttributes<HTMLButtonElement>,
    "color" | "onChange" | "value" | "defaultChecked"
  > {
  /** Palette name or any hex color. Inherits `--neon-accent` when omitted. */
  color?: NeonColor;
  size?: keyof typeof sizes;
  checked?: boolean;
  defaultChecked?: boolean;
  onCheckedChange?: (checked: boolean) => void;
  /** Submits `value` under this name when on, like a native checkbox. */
  name?: string;
  value?: string;
  /** Clickable label rendered after the switch. */
  label?: React.ReactNode;
}

const Switch = React.forwardRef<HTMLButtonElement, SwitchProps>(
  (
    {
      className,
      style,
      color,
      size = "md",
      checked: checkedProp,
      defaultChecked = false,
      onCheckedChange,
      onClick,
      disabled,
      name,
      value = "on",
      label,
      id: idProp,
      ...props
    },
    ref,
  ) => {
    const autoId = React.useId();
    const id = idProp ?? autoId;
    const labelId = `${id}-label`;

    const [uncontrolled, setUncontrolled] = React.useState(defaultChecked);
    const isControlled = checkedProp !== undefined;
    const checked = isControlled ? checkedProp : uncontrolled;

    // Count off-to-on changes. Each one remounts the glow layer so the flicker
    // replays; a switch that is already on at mount stays steady.
    const [ignitions, setIgnitions] = React.useState(0);
    const [previous, setPrevious] = React.useState(checked);
    if (previous !== checked) {
      setPrevious(checked);
      if (checked) setIgnitions((count) => count + 1);
    }

    const s = sizes[size];

    const control = (
      <button
        ref={ref}
        type="button"
        role="switch"
        id={id}
        aria-checked={checked}
        aria-labelledby={label ? labelId : undefined}
        data-state={checked ? "checked" : "unchecked"}
        disabled={disabled}
        onClick={(event) => {
          onClick?.(event);
          if (event.defaultPrevented) return;
          if (!isControlled) setUncontrolled(!checked);
          onCheckedChange?.(!checked);
        }}
        style={label ? undefined : neonVars(color, style)}
        className={cn(
          "[--neon:var(--neon-accent,34_211_238)]",
          "group/switch relative inline-flex shrink-0 cursor-pointer items-center rounded-full border border-white/10 bg-white/[0.06] p-px outline-none",
          "transition-[background-color,border-color,transform,scale] duration-150 ease-out active:scale-[0.97]",
          "focus-visible:ring-2 focus-visible:ring-[rgb(var(--neon)/0.6)] focus-visible:ring-offset-2 focus-visible:ring-offset-[#05060a]",
          "disabled:cursor-not-allowed",
          !disabled && "hover:border-white/20 hover:bg-white/[0.09]",
          !label && "disabled:opacity-50",
          s.track,
          !label && className,
        )}
        {...props}
      >
        <span
          key={ignitions}
          aria-hidden
          className={cn(
            "pointer-events-none absolute -inset-px rounded-full border border-[rgb(var(--neon)/0.75)] bg-[rgb(var(--neon)/0.2)]",
            "shadow-[0_0_14px_rgb(var(--neon)/0.45),inset_0_0_8px_rgb(var(--neon)/0.3)] transition-shadow duration-200 ease-out",
            !disabled &&
              "group-hover/switch:shadow-[0_0_20px_rgb(var(--neon)/0.6),inset_0_0_8px_rgb(var(--neon)/0.3)]",
            checked ? "opacity-100" : "opacity-0",
            checked &&
              ignitions > 0 &&
              "[animation:neonkit-switch-ignite_350ms_linear_both] motion-reduce:[animation:none]",
          )}
        />
        <span
          aria-hidden
          className={cn(
            "pointer-events-none relative block rounded-full",
            "transition-[transform,translate,background-color,box-shadow] duration-[180ms] ease-[cubic-bezier(0.23,1,0.32,1)] motion-reduce:transition-none",
            checked
              ? cn(s.on, "bg-[rgb(var(--neon))] shadow-[0_0_10px_rgb(var(--neon)/0.9),inset_0_1px_0_rgb(255_255_255/0.5)]")
              : "translate-x-0 bg-white/60 shadow-[0_1px_2px_rgb(0_0_0/0.4)]",
            s.thumb,
          )}
        />
      </button>
    );

    const extras = (
      <>
        {ignitions > 0 && <style>{keyframes}</style>}
        {name && (
          <input
            type="checkbox"
            hidden
            name={name}
            value={value}
            checked={checked}
            disabled={disabled}
            readOnly
          />
        )}
      </>
    );

    if (!label) {
      return (
        <>
          {control}
          {extras}
        </>
      );
    }

    return (
      <span
        style={neonVars(color, style)}
        className={cn(
          "[--neon:var(--neon-accent,34_211_238)]",
          "inline-flex items-center",
          disabled && "opacity-50",
          s.root,
          className,
        )}
      >
        {control}
        <label
          id={labelId}
          htmlFor={id}
          className={cn(
            "cursor-pointer select-none text-white/90",
            disabled && "cursor-not-allowed",
            s.label,
          )}
        >
          {label}
        </label>
        {extras}
      </span>
    );
  },
);
Switch.displayName = "Switch";

export { Switch };
```


---

# Component: Slider

> Pointer and keyboard slider with a glowing track and optional range.

Category: Forms. Docs: https://get-neonkit.vercel.app/components/slider

## Installation

```bash
npx shadcn@latest add https://get-neonkit.vercel.app/r/slider.json
```

With the `@neonkit` namespace configured: `npx shadcn@latest add @neonkit/slider`.

npm dependencies: none. Also needs `lib/utils.ts` (`cn`) and `lib/neon.ts` (`neonVars`), which the CLI adds.

## Usage

```tsx
import { Slider } from "@/components/ui/slider"

<Slider defaultValue={[64]} aria-label="Volume" />
```

## Examples

### Volume

showValue="hover" reveals the value while hovering, dragging or focused.

```tsx
"use client";

import { Volume, Volume2 } from "lucide-react";
import { Slider } from "@/components/ui/slider";

export default function SliderDemo() {
  return (
    <div className="flex w-full max-w-xs items-center gap-3">
      <Volume className="size-4 shrink-0 text-white/40" />
      <Slider
        defaultValue={[64]}
        aria-label="Volume"
        showValue="hover"
        formatValue={(value) => `${value}%`}
      />
      <Volume2 className="size-4 shrink-0 text-white/40" />
    </div>
  );
}
```

### Range

Pass two values for two thumbs. They stop at each other instead of crossing.

```tsx
"use client";

import * as React from "react";
import { Slider } from "@/components/ui/slider";

const price = (value: number) => `$${value.toLocaleString("en-US")}`;

export default function SliderPriceRange() {
  const [range, setRange] = React.useState([120, 480]);

  return (
    <div className="w-full max-w-sm">
      <div className="mb-4 flex items-baseline justify-between">
        <span id="price-range" className="text-sm font-medium text-white/90">
          Price
        </span>
        <span className="text-sm tabular-nums text-white/55">
          {price(range[0])} – {price(range[1])}
        </span>
      </div>
      <Slider
        value={range}
        onValueChange={setRange}
        min={0}
        max={1000}
        step={10}
        formatValue={price}
        showValue="hover"
        aria-labelledby="price-range"
        thumbLabels={["Minimum price", "Maximum price"]}
      />
    </div>
  );
}
```

### Named steps

Map a small integer range to labels with formatValue, which is also what screen readers hear.

```tsx
"use client";

import * as React from "react";
import { Slider } from "@/components/ui/slider";
import { cn } from "@/lib/utils";

const stops = ["1 min", "5 min", "15 min", "30 min", "1 hour", "Never"];

export default function SliderSteps() {
  const [index, setIndex] = React.useState(2);

  return (
    <div className="w-full max-w-sm">
      <div className="mb-4 flex items-baseline justify-between">
        <span id="auto-lock" className="text-sm font-medium text-white/90">
          Auto-lock
        </span>
        <span className="text-sm text-white/55">{stops[index]}</span>
      </div>
      <Slider
        value={[index]}
        onValueChange={([next]) => setIndex(next)}
        max={stops.length - 1}
        formatValue={(i) => stops[i]}
        aria-labelledby="auto-lock"
      />
      {/* Inset by half the 18px thumb so each label sits under its stop. */}
      <div aria-hidden className="relative mx-[9px] mt-2.5 h-6">
        {stops.map((stop, i) => (
          <span
            key={stop}
            className="absolute top-0 flex -translate-x-1/2 flex-col items-center gap-1.5"
            style={{ left: `${(i / (stops.length - 1)) * 100}%` }}
          >
            <span className="h-1 w-px bg-white/20" />
            <span
              className={cn(
                "whitespace-nowrap text-[11px] leading-none transition-colors duration-150",
                i === index ? "text-white/90" : "text-white/35",
              )}
            >
              {stop}
            </span>
          </span>
        ))}
      </div>
    </div>
  );
}
```

### Colors

Pass a palette name or any hex value to color.

```tsx
"use client";

import * as React from "react";
import { Slider } from "@/components/ui/slider";

const channels = [
  { key: "r", label: "Red", color: "red" },
  { key: "g", label: "Green", color: "green" },
  { key: "b", label: "Blue", color: "blue" },
] as const;

type Rgb = Record<(typeof channels)[number]["key"], number>;

export default function SliderColors() {
  const [rgb, setRgb] = React.useState<Rgb>({ r: 34, g: 211, b: 238 });
  const hex = `#${[rgb.r, rgb.g, rgb.b].map((n) => n.toString(16).padStart(2, "0")).join("")}`;

  return (
    <div className="flex w-full max-w-sm items-center gap-6">
      <div className="flex shrink-0 flex-col items-center gap-2">
        <div
          className="size-16 rounded-xl border border-white/10"
          style={{ backgroundColor: hex, boxShadow: `0 0 28px ${hex}55` }}
        />
        <span className="font-mono text-xs uppercase text-white/55">{hex}</span>
      </div>
      <div className="grid flex-1 gap-4">
        {channels.map((channel) => (
          <div key={channel.key} className="grid grid-cols-[2.75rem_1fr_1.75rem] items-center gap-3">
            <span className="text-xs text-white/55">{channel.label}</span>
            <Slider
              color={channel.color}
              size="sm"
              max={255}
              value={[rgb[channel.key]]}
              onValueChange={([value]) => setRgb((current) => ({ ...current, [channel.key]: value }))}
              aria-label={channel.label}
            />
            <span className="text-right text-xs tabular-nums text-white/90">{rgb[channel.key]}</span>
          </div>
        ))}
      </div>
    </div>
  );
}
```

## API reference

### Slider

Accepts every div attribute; the ref points at the root.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `value` | `number[]` | — | Controlled values. One number for a single thumb, two for a range. |
| `defaultValue` | `number[]` | `[min]` | Initial values when uncontrolled. |
| `onValueChange` | `(value: number[]) => void` | — | Called on every change while dragging or pressing keys. |
| `onValueCommit` | `(value: number[]) => void` | — | Called once when the pointer or key is released. |
| `min` | `number` | `0` | Lowest value. |
| `max` | `number` | `100` | Highest value. |
| `step` | `number` | `1` | Values snap to multiples of step from min. |
| `showValue` | `boolean \| "hover"` | `false` | Value bubble above each thumb, always or only on hover, drag and focus. |
| `formatValue` | `(value: number) => string` | — | Formats the bubble and aria-valuetext. |
| `thumbLabels` | `string[]` | — | Accessible name per thumb. Ranges default to "Minimum" and "Maximum". |
| `name` | `string` | — | Submits the values with a form, as name[] for ranges. |
| `color` | `NeonColor` | `inherited` | Palette name or hex. Falls back to --neon-accent, then cyan. |
| `size` | `"sm" \| "md" \| "lg"` | `"md"` | Track of 4, 6 or 8px high. |
| `disabled` | `boolean` | `false` | Blocks interaction and removes thumbs from the tab order. |

## Accessibility

- Each thumb has role="slider" with aria-valuemin, aria-valuemax and aria-valuenow.
- Arrow keys move by one step, Shift+Arrow and Page Up/Down by ten, Home and End jump to the ends.
- A single slider takes its name from aria-label or aria-labelledby; a range uses them to label the group and thumbLabels to name each thumb.
- Pressing the track jumps the nearest thumb there and keeps dragging; grabbing a thumb never makes it jump.

## Source

`components/ui/slider.tsx`

```tsx
"use client";

import * as React from "react";

import { cn } from "@/lib/utils";
import { neonVars, type NeonColor } from "@/lib/neon";

// Thumbs travel inside a rail inset by half their width, so they never
// hang past the ends of the track.
const sizes = {
  sm: { root: "h-4", track: "h-1", thumb: "size-3.5", rail: "inset-x-[7px]", radius: 7 },
  md: { root: "h-5", track: "h-1.5", thumb: "size-[18px]", rail: "inset-x-[9px]", radius: 9 },
  lg: { root: "h-6", track: "h-2", thumb: "size-[22px]", rail: "inset-x-[11px]", radius: 11 },
} as const;

const thumbGlow = "shadow-[0_0_18px_rgb(var(--neon)/0.8),0_1px_3px_rgb(0_0_0/0.5)]";

function clamp(value: number, lower: number, upper: number) {
  return Math.min(upper, Math.max(lower, value));
}

function decimalsOf(value: number) {
  return (String(value).split(".")[1] ?? "").length;
}

export interface SliderProps
  extends Omit<React.HTMLAttributes<HTMLDivElement>, "color" | "defaultValue" | "onChange"> {
  /** Palette name or any hex color. Inherits `--neon-accent` when omitted. */
  color?: NeonColor;
  size?: keyof typeof sizes;
  /** One number for a single thumb, two for a range. */
  value?: number[];
  defaultValue?: number[];
  onValueChange?: (value: number[]) => void;
  /** Fires once the pointer or key is released. */
  onValueCommit?: (value: number[]) => void;
  min?: number;
  max?: number;
  step?: number;
  disabled?: boolean;
  /** Accessible name per thumb. Ranges default to "Minimum" and "Maximum". */
  thumbLabels?: string[];
  /** Formats the value bubble and the value read to screen readers. */
  formatValue?: (value: number) => string;
  /** Shows a value bubble above each thumb, always or on hover, drag and focus. */
  showValue?: boolean | "hover";
  /** Submits each value under this name (`name[]` for ranges). */
  name?: string;
}

const Slider = React.forwardRef<HTMLDivElement, SliderProps>(
  (
    {
      className,
      style,
      color,
      size = "md",
      value: valueProp,
      defaultValue,
      onValueChange,
      onValueCommit,
      min = 0,
      max = 100,
      step = 1,
      disabled = false,
      thumbLabels,
      formatValue,
      showValue = false,
      name,
      "aria-label": ariaLabel,
      "aria-labelledby": ariaLabelledBy,
      onPointerDown,
      onPointerMove,
      onPointerUp,
      onPointerCancel,
      ...props
    },
    ref,
  ) => {
    const [uncontrolled, setUncontrolled] = React.useState(() => defaultValue ?? [min]);
    const isControlled = valueProp !== undefined;
    const values = isControlled ? valueProp : uncontrolled;
    const isRange = values.length > 1;

    const railRef = React.useRef<HTMLDivElement>(null);
    const thumbRefs = React.useRef<(HTMLSpanElement | null)[]>([]);
    const drag = React.useRef<{ index: number; offset: number } | null>(null);
    const keyChanged = React.useRef(false);
    const [active, setActive] = React.useState<number | null>(null);

    const s = sizes[size];
    const decimals = Math.max(decimalsOf(step), decimalsOf(min));
    const percent = (value: number) =>
      max === min ? 0 : ((clamp(value, min, max) - min) / (max - min)) * 100;

    /** Snaps, keeps the thumb between its neighbours, and reports changes. */
    function setValueAt(index: number, raw: number) {
      const snapped = Number((Math.round((raw - min) / step) * step + min).toFixed(decimals));
      const lower = index > 0 ? values[index - 1] : min;
      const upper = index < values.length - 1 ? values[index + 1] : max;
      const next = clamp(snapped, lower, upper);
      if (next === values[index]) return false;

      const nextValues = values.map((value, i) => (i === index ? next : value));
      if (!isControlled) setUncontrolled(nextValues);
      onValueChange?.(nextValues);
      return true;
    }

    function valueFromPointer(clientX: number) {
      const rect = railRef.current?.getBoundingClientRect();
      if (!rect || rect.width === 0) return min;
      return min + clamp((clientX - rect.left) / rect.width, 0, 1) * (max - min);
    }

    function closestThumb(raw: number) {
      let index = 0;
      let best = Infinity;
      values.forEach((value, i) => {
        const distance = Math.abs(value - raw);
        // On a tie (stacked thumbs), move the one on the side of the pointer.
        if (distance < best || (distance === best && raw > value)) {
          best = distance;
          index = i;
        }
      });
      return index;
    }

    function handlePointerDown(event: React.PointerEvent<HTMLDivElement>) {
      onPointerDown?.(event);
      if (disabled || event.defaultPrevented || event.button !== 0) return;
      // We move focus to the thumb ourselves.
      event.preventDefault();

      let index = thumbRefs.current.findIndex((thumb) => thumb?.contains(event.target as Node));
      let offset = 0;
      const grabbed = thumbRefs.current[index];
      if (grabbed) {
        // Grabbing a thumb off-center should not make it jump.
        const rect = grabbed.getBoundingClientRect();
        offset = event.clientX - (rect.left + rect.width / 2);
      } else {
        const raw = valueFromPointer(event.clientX);
        index = closestThumb(raw);
        setValueAt(index, raw);
      }

      event.currentTarget.setPointerCapture(event.pointerId);
      drag.current = { index, offset };
      setActive(index);
      thumbRefs.current[index]?.focus({ preventScroll: true });
    }

    function handlePointerMove(event: React.PointerEvent<HTMLDivElement>) {
      onPointerMove?.(event);
      if (!drag.current) return;
      setValueAt(drag.current.index, valueFromPointer(event.clientX - drag.current.offset));
    }

    function endDrag() {
      if (!drag.current) return;
      drag.current = null;
      setActive(null);
      onValueCommit?.(values);
    }

    function handleKeyDown(event: React.KeyboardEvent<HTMLSpanElement>, index: number) {
      if (disabled) return;
      const current = values[index];
      const page = step * 10;
      const delta: Record<string, number> = {
        ArrowRight: event.shiftKey ? page : step,
        ArrowUp: event.shiftKey ? page : step,
        ArrowLeft: event.shiftKey ? -page : -step,
        ArrowDown: event.shiftKey ? -page : -step,
        PageUp: page,
        PageDown: -page,
        Home: -Infinity,
        End: Infinity,
      };
      if (!(event.key in delta)) return;
      event.preventDefault();
      const target = clamp(current + delta[event.key], min, max);
      if (setValueAt(index, target)) keyChanged.current = true;
    }

    function handleKeyUp() {
      if (!keyChanged.current) return;
      keyChanged.current = false;
      onValueCommit?.(values);
    }

    const first = percent(values[0] ?? min);
    const last = percent(values[values.length - 1] ?? min);

    return (
      <div
        ref={ref}
        role={isRange ? "group" : undefined}
        aria-label={isRange ? ariaLabel : undefined}
        aria-labelledby={isRange ? ariaLabelledBy : undefined}
        aria-disabled={disabled || undefined}
        data-orientation="horizontal"
        data-disabled={disabled ? "" : undefined}
        style={neonVars(color, style)}
        className={cn(
          "[--neon:var(--neon-accent,34_211_238)]",
          "group/slider relative flex w-full touch-none select-none items-center",
          // Taller invisible hit area for touch.
          "before:absolute before:inset-x-0 before:-inset-y-2 before:content-['']",
          disabled ? "cursor-not-allowed opacity-50" : "cursor-pointer",
          s.root,
          className,
        )}
        {...props}
        onPointerDown={handlePointerDown}
        onPointerMove={handlePointerMove}
        onPointerUp={(event) => {
          onPointerUp?.(event);
          endDrag();
        }}
        onPointerCancel={(event) => {
          onPointerCancel?.(event);
          endDrag();
        }}
      >
        <span
          aria-hidden
          className={cn(
            "pointer-events-none absolute inset-x-0 top-1/2 -translate-y-1/2 rounded-full bg-white/10",
            s.track,
          )}
        />

        <div ref={railRef} className={cn("absolute inset-y-0", s.rail)}>
          <span
            aria-hidden
            style={{
              left: isRange ? `${first}%` : -s.radius,
              right: `${100 - last}%`,
            }}
            className={cn(
              "pointer-events-none absolute top-1/2 -translate-y-1/2 rounded-full bg-[rgb(var(--neon))] shadow-[0_0_10px_rgb(var(--neon)/0.55)]",
              s.track,
            )}
          />

          {values.map((value, i) => {
            const text = formatValue ? formatValue(value) : String(value);
            const dragging = active === i;
            const label =
              thumbLabels?.[i] ??
              (isRange ? (i === 0 ? "Minimum" : i === values.length - 1 ? "Maximum" : undefined) : ariaLabel);

            return (
              <span key={i} className="absolute inset-y-0 w-0" style={{ left: `${percent(value)}%` }}>
                <span
                  ref={(node) => {
                    thumbRefs.current[i] = node;
                  }}
                  role="slider"
                  tabIndex={disabled ? -1 : 0}
                  aria-label={label}
                  aria-labelledby={!isRange && !thumbLabels?.[i] ? ariaLabelledBy : undefined}
                  aria-valuemin={i > 0 ? values[i - 1] : min}
                  aria-valuemax={i < values.length - 1 ? values[i + 1] : max}
                  aria-valuenow={value}
                  aria-valuetext={formatValue ? text : undefined}
                  aria-orientation="horizontal"
                  aria-disabled={disabled || undefined}
                  data-active={dragging ? "" : undefined}
                  onKeyDown={(event) => handleKeyDown(event, i)}
                  onKeyUp={handleKeyUp}
                  className={cn(
                    "peer absolute left-0 top-1/2 block -translate-x-1/2 -translate-y-1/2 rounded-full border-2 border-[rgb(var(--neon))] bg-[#eef3fa] outline-none",
                    "shadow-[0_0_8px_rgb(var(--neon)/0.4),0_1px_3px_rgb(0_0_0/0.5)]",
                    "transition-[transform,scale,box-shadow] duration-150 ease-out motion-reduce:transition-none",
                    "focus-visible:scale-110 focus-visible:shadow-[0_0_18px_rgb(var(--neon)/0.8),0_1px_3px_rgb(0_0_0/0.5)]",
                    "focus-visible:ring-2 focus-visible:ring-[rgb(var(--neon)/0.6)] focus-visible:ring-offset-2 focus-visible:ring-offset-[#05060a]",
                    dragging
                      ? cn("scale-110", thumbGlow)
                      : !disabled &&
                          "hover:shadow-[0_0_12px_rgb(var(--neon)/0.6),0_1px_3px_rgb(0_0_0/0.5)]",
                    s.thumb,
                  )}
                />
                {showValue && (
                  <span
                    aria-hidden
                    className={cn(
                      "pointer-events-none absolute bottom-full left-0 mb-1.5 -translate-x-1/2 origin-bottom whitespace-nowrap rounded-md border border-white/10 bg-[#0a0b11] px-1.5 py-0.5 text-xs font-medium leading-4 tabular-nums text-white/90 shadow-[0_4px_12px_rgb(0_0_0/0.5)]",
                      "transition-[opacity,transform,scale] duration-150 ease-out motion-reduce:transition-none",
                      showValue === true || dragging
                        ? "scale-100 opacity-100"
                        : cn(
                            "scale-[0.96] opacity-0 peer-focus-visible:scale-100 peer-focus-visible:opacity-100",
                            !disabled && "group-hover/slider:scale-100 group-hover/slider:opacity-100",
                          ),
                    )}
                  >
                    {text}
                  </span>
                )}
              </span>
            );
          })}
        </div>

        {name &&
          values.map((value, i) => (
            <input key={i} type="hidden" name={isRange ? `${name}[]` : name} value={value} />
          ))}
      </div>
    );
  },
);
Slider.displayName = "Slider";

export { Slider };
```


---

# Component: OTP Input

> One-time code input with auto-advance, paste and backspace handling.

Category: Forms. Docs: https://get-neonkit.vercel.app/components/otp-input

## Installation

```bash
npx shadcn@latest add https://get-neonkit.vercel.app/r/otp-input.json
```

With the `@neonkit` namespace configured: `npx shadcn@latest add @neonkit/otp-input`.

npm dependencies: none. Also needs `lib/utils.ts` (`cn`) and `lib/neon.ts` (`neonVars`), which the CLI adds.

## Usage

```tsx
import { OTPInput } from "@/components/ui/otp-input"

<OTPInput onComplete={(code) => verify(code)} />
```

## Examples

### Verification

onComplete fires once every slot is filled. Try pasting a code.

```tsx
"use client";

import * as React from "react";
import { OTPInput } from "@/components/ui/otp-input";

type Status = "idle" | "verifying" | "verified" | "resent";

export default function OTPInputDemo() {
  const [status, setStatus] = React.useState<Status>("idle");
  const timer = React.useRef<number>(undefined);

  React.useEffect(() => () => window.clearTimeout(timer.current), []);

  function verify() {
    setStatus("verifying");
    timer.current = window.setTimeout(() => setStatus("verified"), 900);
  }

  return (
    <div className="grid justify-items-center gap-5 text-center">
      <div className="grid gap-1">
        <p className="text-sm font-medium text-white/90">Check your inbox</p>
        <p className="text-sm text-white/55">
          Enter the 6-digit code we sent to <span className="text-white/80">ada@northwind.io</span>
        </p>
      </div>
      <OTPInput
        aria-label="Verification code"
        color={status === "verified" ? "green" : undefined}
        onValueChange={() => {
          window.clearTimeout(timer.current);
          setStatus("idle");
        }}
        onComplete={verify}
      />
      <p aria-live="polite" className="h-5 text-xs leading-5 text-white/55">
        {status === "verifying" && <span className="animate-pulse">Verifying…</span>}
        {status === "verified" && <span className="text-[#34d399]">Verified. Signing you in.</span>}
        {status === "resent" && "A new code is on its way."}
        {status === "idle" && (
          <>
            Didn&apos;t get it?{" "}
            <button
              type="button"
              onClick={() => setStatus("resent")}
              className="cursor-pointer font-medium text-white/80 underline-offset-4 outline-none transition-colors hover:text-white hover:underline focus-visible:underline"
            >
              Resend code
            </button>
          </>
        )}
      </p>
    </div>
  );
}
```

### Grouped

groupSize splits the slots with a dash, so long codes are easier to read back.

```tsx
import { OTPInput } from "@/components/ui/otp-input";

export default function OTPInputGrouped() {
  return (
    <div className="grid justify-items-center gap-4 text-center">
      <div className="grid gap-1">
        <p className="text-sm font-medium text-white/90">Pair your TV</p>
        <p className="text-sm text-white/55">Type the code shown on the screen.</p>
      </div>
      <OTPInput aria-label="Pairing code" groupSize={3} size="lg" />
    </div>
  );
}
```

### Masked PIN

mask shows dots instead of digits.

```tsx
"use client";

import * as React from "react";
import { OTPInput } from "@/components/ui/otp-input";

export default function OTPInputPin() {
  const [approved, setApproved] = React.useState(false);

  return (
    <div className="grid justify-items-center gap-4 text-center">
      <div className="grid gap-1">
        <p className="text-sm font-medium text-white/90">Approve production deploy</p>
        <p className="text-sm text-white/55">Enter your 4-digit PIN to ship v2.4.0.</p>
      </div>
      <OTPInput
        aria-label="PIN"
        length={4}
        mask
        onValueChange={() => setApproved(false)}
        onComplete={() => setApproved(true)}
      />
      <p aria-live="polite" className="h-5 text-xs leading-5 text-[#34d399]">
        {approved && "Approved. Deploy started."}
      </p>
    </div>
  );
}
```

### Invalid code

The row shakes and turns red each time invalid switches on.

```tsx
"use client";

import * as React from "react";
import { OTPInput } from "@/components/ui/otp-input";

type Status = "idle" | "checking" | "invalid" | "accepted";

export default function OTPInputInvalid() {
  const [status, setStatus] = React.useState<Status>("idle");
  const timer = React.useRef<number>(undefined);
  const messageId = React.useId();

  React.useEffect(() => () => window.clearTimeout(timer.current), []);

  function check(code: string) {
    setStatus("checking");
    timer.current = window.setTimeout(() => {
      setStatus(code === "424242" ? "accepted" : "invalid");
    }, 500);
  }

  return (
    <div className="grid justify-items-center gap-4 text-center">
      <div className="grid gap-1">
        <p className="text-sm font-medium text-white/90">Two-factor authentication</p>
        <p className="text-sm text-white/55">
          Open your authenticator app. Anything but <span className="font-mono text-white/80">424242</span> fails.
        </p>
      </div>
      <OTPInput
        aria-label="Authenticator code"
        invalid={status === "invalid"}
        aria-describedby={messageId}
        onValueChange={() => {
          window.clearTimeout(timer.current);
          setStatus("idle");
        }}
        onComplete={check}
      />
      <p
        id={messageId}
        aria-live="polite"
        className={status === "accepted" ? "h-5 text-xs leading-5 text-[#34d399]" : "h-5 text-xs leading-5 text-[#ff4d5e]"}
      >
        {status === "invalid" && "That code didn’t work. Check your app and try again."}
        {status === "accepted" && "Code accepted."}
      </p>
    </div>
  );
}
```

### Letters and numbers

mode="alphanumeric" accepts letters too and brings up the full keyboard on phones.

```tsx
import { OTPInput } from "@/components/ui/otp-input";

export default function OTPInputAlphanumeric() {
  return (
    <div className="grid justify-items-center gap-4 text-center">
      <div className="grid gap-1">
        <p className="text-sm font-medium text-white/90">Use a recovery code</p>
        <p className="text-sm text-white/55">One of the 8-character codes you saved when you set up 2FA.</p>
      </div>
      <OTPInput aria-label="Recovery code" mode="alphanumeric" length={8} groupSize={4} size="sm" />
    </div>
  );
}
```

## API reference

### OTPInput

Other props and the ref go to the wrapping group element.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `length` | `number` | `6` | Number of slots. |
| `value` | `string` | — | Controlled code. |
| `defaultValue` | `string` | — | Initial code when uncontrolled. |
| `onValueChange` | `(code: string) => void` | — | Called on every change. |
| `onComplete` | `(code: string) => void` | — | Called when the last empty slot is filled. |
| `mode` | `"numeric" \| "alphanumeric"` | `"numeric"` | Characters accepted. Also picks the mobile keyboard. |
| `groupSize` | `number` | — | Puts a dash after every groupSize slots. |
| `mask` | `boolean` | `false` | Shows dots instead of characters. |
| `invalid` | `boolean` | `false` | Red state. Shakes the row when it switches on. |
| `disabled` | `boolean` | `false` | Disables every slot. |
| `autoFocus` | `boolean` | `false` | Focuses the first empty slot on mount. |
| `name` | `string` | — | Submits the code with a surrounding form. |
| `aria-label` | `string` | `"One-time code"` | Names the group of slots. |
| `color` | `NeonColor` | `inherited` | Palette name or hex. Falls back to --neon-accent, then cyan. |
| `size` | `"sm" \| "md" \| "lg"` | `"md"` | Slot size and text size. |

## Accessibility

- Each slot is a native input labelled "Digit 2 of 6" inside a named group.
- The first slot uses autocomplete="one-time-code", so codes from SMS can fill every slot in one tap.
- Pasting fills from the focused slot. A full-length code always fills from the start, and spaces or dashes are dropped.
- Only the next slot to fill is in the tab order. Arrow keys, Home and End move between slots.
- Backspace clears the focused slot, or steps back and clears the previous one when the focused slot is empty.
- Link an error message with aria-describedby when invalid is on. The shake is skipped when reduced motion is on.

## Source

`components/ui/otp-input.tsx`

```tsx
"use client";

import * as React from "react";

import { cn } from "@/lib/utils";
import { neonVars, type NeonColor } from "@/lib/neon";

const INVALID = "#ff4d5e";

const useIsomorphicLayoutEffect =
  typeof window !== "undefined" ? React.useLayoutEffect : React.useEffect;

const sizes = {
  sm: { root: "gap-1.5", slot: "h-9 w-8 rounded-md text-sm", caret: "h-3.5", dot: "size-1.5", dash: "w-2" },
  md: { root: "gap-2", slot: "h-12 w-10 rounded-lg text-lg", caret: "h-5", dot: "size-2", dash: "w-2.5" },
  lg: { root: "gap-2.5", slot: "h-14 w-12 rounded-xl text-2xl", caret: "h-6", dot: "size-2.5", dash: "w-3" },
} as const;

const SHAKE: Keyframe[] = [0, -7, 6, -4, 3, -1, 0].map((x) => ({
  transform: `translateX(${x}px)`,
}));

function sanitize(text: string, mode: "numeric" | "alphanumeric") {
  return (text.match(mode === "numeric" ? /\d/g : /[a-z0-9]/gi) ?? []).join("");
}

export interface OTPInputProps
  extends Omit<React.HTMLAttributes<HTMLDivElement>, "color" | "defaultValue" | "onChange"> {
  /** Number of slots. */
  length?: number;
  value?: string;
  defaultValue?: string;
  onValueChange?: (code: string) => void;
  /** Called once every slot is filled. */
  onComplete?: (code: string) => void;
  /** Palette name or any hex color. Inherits `--neon-accent` when omitted. */
  color?: NeonColor;
  size?: keyof typeof sizes;
  /** Which characters are accepted. Also picks the mobile keyboard. */
  mode?: "numeric" | "alphanumeric";
  /** Split the slots into groups of this size with a dash between them. */
  groupSize?: number;
  /** Show dots instead of the characters. */
  mask?: boolean;
  disabled?: boolean;
  /** Red state. The row shakes each time this turns on. */
  invalid?: boolean;
  /** Focus the first empty slot on mount. */
  autoFocus?: boolean;
  /** Submits the code under this name with a surrounding form. */
  name?: string;
}

const OTPInput = React.forwardRef<HTMLDivElement, OTPInputProps>(
  (
    {
      length = 6,
      value,
      defaultValue = "",
      onValueChange,
      onComplete,
      color,
      size = "md",
      mode = "numeric",
      groupSize,
      mask = false,
      disabled = false,
      invalid = false,
      autoFocus = false,
      name,
      className,
      style,
      "aria-label": ariaLabel = "One-time code",
      ...props
    },
    ref,
  ) => {
    const rootRef = React.useRef<HTMLDivElement>(null);
    const inputs = React.useRef<(HTMLInputElement | null)[]>([]);
    React.useImperativeHandle(ref, () => rootRef.current as HTMLDivElement);

    const [uncontrolled, setUncontrolled] = React.useState(() =>
      sanitize(defaultValue, mode).slice(0, length),
    );
    const code = sanitize(value ?? uncontrolled, mode).slice(0, length);
    const cursor = Math.min(code.length, length - 1);
    const s = sizes[size];
    const unit = mode === "numeric" ? "Digit" : "Character";

    // Handlers read the latest code from here, since focus moves before React re-renders.
    const codeRef = React.useRef(code);
    useIsomorphicLayoutEffect(() => {
      codeRef.current = code;
    });

    // Keep the focused slot's character selected so the next keystroke replaces it.
    useIsomorphicLayoutEffect(() => {
      const active = document.activeElement;
      if (active instanceof HTMLInputElement && inputs.current.includes(active)) active.select();
    }, [code]);

    const wasInvalid = React.useRef(invalid);
    React.useEffect(() => {
      if (invalid && !wasInvalid.current) {
        const reduce = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
        if (!reduce) {
          rootRef.current?.animate?.(SHAKE, {
            duration: 420,
            easing: "cubic-bezier(0.36, 0.07, 0.19, 0.97)",
          });
        }
      }
      wasInvalid.current = invalid;
    }, [invalid]);

    function focusSlot(index: number) {
      const target = Math.max(0, Math.min(index, codeRef.current.length, length - 1));
      const input = inputs.current[target];
      input?.focus();
      input?.select();
    }

    function update(next: string, focusIndex: number) {
      const previous = codeRef.current;
      codeRef.current = next;
      if (next !== previous) {
        if (value === undefined) setUncontrolled(next);
        onValueChange?.(next);
        if (next.length === length) onComplete?.(next);
      }
      focusSlot(focusIndex);
    }

    function fill(index: number, chars: string) {
      // A full code replaces everything, wherever it was pasted.
      const start = chars.length >= length ? 0 : index;
      const current = codeRef.current;
      const next = (current.slice(0, start) + chars + current.slice(start + chars.length)).slice(
        0,
        length,
      );
      update(next, start + chars.length);
    }

    function handleChange(index: number, event: React.ChangeEvent<HTMLInputElement>) {
      const current = codeRef.current;
      const raw = event.target.value;
      const previous = current[index] ?? "";
      if (!raw) {
        if (previous) update(current.slice(0, index) + current.slice(index + 1), index);
        return;
      }
      // Typing into a filled slot without a selection gives "old + new". Keep the new one.
      const typed = previous && raw.length === 2 && raw.includes(previous) ? raw.replace(previous, "") : raw;
      const chars = sanitize(typed, mode);
      if (chars) fill(index, chars);
    }

    function handleKeyDown(index: number, event: React.KeyboardEvent<HTMLInputElement>) {
      const current = codeRef.current;
      switch (event.key) {
        case "Backspace":
          event.preventDefault();
          if (current[index]) update(current.slice(0, index) + current.slice(index + 1), index);
          else if (index > 0) update(current.slice(0, index - 1) + current.slice(index), index - 1);
          break;
        case "Delete":
          event.preventDefault();
          if (current[index]) update(current.slice(0, index) + current.slice(index + 1), index);
          break;
        case "ArrowLeft":
          event.preventDefault();
          focusSlot(index - 1);
          break;
        case "ArrowRight":
          event.preventDefault();
          focusSlot(index + 1);
          break;
        case "Home":
          event.preventDefault();
          focusSlot(0);
          break;
        case "End":
          event.preventDefault();
          focusSlot(length - 1);
          break;
      }
    }

    return (
      <div
        ref={rootRef}
        role="group"
        aria-label={ariaLabel}
        aria-disabled={disabled || undefined}
        data-invalid={invalid || undefined}
        style={neonVars(invalid ? INVALID : color, style)}
        className={cn(
          "[--neon:var(--neon-accent,34_211_238)]",
          "inline-flex items-center",
          s.root,
          className,
        )}
        {...props}
      >
        {Array.from({ length }, (_, index) => {
          const char = code[index] ?? "";
          return (
            <React.Fragment key={index}>
              {groupSize && index > 0 && index % groupSize === 0 ? (
                <span
                  aria-hidden
                  className={cn("h-0.5 shrink-0 rounded-full bg-[rgb(var(--neon)/0.45)]", s.dash)}
                />
              ) : null}
              <div className="relative shrink-0">
                <input
                  ref={(node) => {
                    inputs.current[index] = node;
                  }}
                  type={mask ? "password" : "text"}
                  inputMode={mode === "numeric" ? "numeric" : "text"}
                  pattern={mode === "numeric" ? "[0-9]*" : undefined}
                  autoComplete={index === 0 ? "one-time-code" : "off"}
                  autoCapitalize="off"
                  autoCorrect="off"
                  spellCheck={false}
                  // The first slot takes a whole code so SMS autofill can land in one go.
                  maxLength={index === 0 ? length : 1}
                  value={char}
                  disabled={disabled}
                  autoFocus={autoFocus && index === cursor}
                  tabIndex={index === cursor ? 0 : -1}
                  aria-label={`${unit} ${index + 1} of ${length}`}
                  aria-invalid={invalid || undefined}
                  onChange={(event) => handleChange(index, event)}
                  onKeyDown={(event) => handleKeyDown(index, event)}
                  onPaste={(event) => {
                    event.preventDefault();
                    const chars = sanitize(event.clipboardData.getData("text"), mode);
                    if (chars) fill(index, chars);
                  }}
                  onMouseDown={(event) => {
                    // Slots fill left to right, so a click past the cursor lands on the cursor.
                    if (index > Math.min(codeRef.current.length, length - 1)) {
                      event.preventDefault();
                      focusSlot(index);
                    }
                  }}
                  onFocus={(event) => {
                    if (index > Math.min(codeRef.current.length, length - 1)) focusSlot(index);
                    else event.target.select();
                  }}
                  onClick={(event) => {
                    if (document.activeElement === event.currentTarget) event.currentTarget.select();
                  }}
                  className={cn(
                    "peer block border border-white/10 bg-white/[0.03] p-0 text-center font-medium tabular-nums text-white caret-transparent outline-none selection:bg-transparent",
                    "transition-[border-color,background-color,box-shadow] duration-200 ease-[cubic-bezier(0.23,1,0.32,1)]",
                    char
                      ? "border-[rgb(var(--neon)/0.45)] bg-[rgb(var(--neon)/0.05)] shadow-[0_0_12px_-3px_rgb(var(--neon)/0.45)]"
                      : "hover:border-white/20",
                    "focus:border-[rgb(var(--neon))] focus:bg-[rgb(var(--neon)/0.08)] focus:shadow-[0_0_0_1px_rgb(var(--neon)/0.3),0_0_22px_-2px_rgb(var(--neon)/0.6),inset_0_0_10px_rgb(var(--neon)/0.15)]",
                    "disabled:cursor-not-allowed disabled:opacity-50",
                    mask && "text-transparent",
                    s.slot,
                  )}
                />
                {!char && (
                  <span
                    aria-hidden
                    className={cn(
                      "pointer-events-none absolute left-1/2 top-1/2 hidden w-px -translate-x-1/2 -translate-y-1/2 rounded-full bg-[rgb(var(--neon))] shadow-[0_0_6px_rgb(var(--neon))]",
                      "animate-pulse [animation-duration:1.1s] peer-focus:block motion-reduce:animate-none",
                      s.caret,
                    )}
                  />
                )}
                {mask && char && (
                  <span
                    aria-hidden
                    className={cn(
                      "pointer-events-none absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 rounded-full bg-white/90",
                      s.dot,
                    )}
                  />
                )}
              </div>
            </React.Fragment>
          );
        })}
        {name && <input type="hidden" name={name} value={code} disabled={disabled} />}
      </div>
    );
  },
);
OTPInput.displayName = "OTPInput";

export { OTPInput };
```


---

# Component: Badge

> Status labels with optional live dot and remove button.

Category: Data Display. Docs: https://get-neonkit.vercel.app/components/badge

## Installation

```bash
npx shadcn@latest add https://get-neonkit.vercel.app/r/badge.json
```

With the `@neonkit` namespace configured: `npx shadcn@latest add @neonkit/badge`.

npm dependencies: `lucide-react`. Also needs `lib/utils.ts` (`cn`) and `lib/neon.ts` (`neonVars`), which the CLI adds.

## Usage

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

<Badge color="green" pulse>Live</Badge>
```

## Examples

### Deployment status

dot adds a status light; pulse makes it ping.

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

const deployments = [
  { project: "neonkit-docs", branch: "main", commit: "a41f9c2", age: "2m ago", status: "live" },
  { project: "api-gateway", branch: "feat/rate-limits", commit: "7be0d13", age: "just now", status: "building" },
  { project: "marketing-site", branch: "fix/hero-video", commit: "c93e4a8", age: "14m ago", status: "failed" },
  { project: "billing-worker", branch: "main", commit: "5d2f61b", age: "40s ago", status: "queued" },
] as const;

const statuses = {
  live: { label: "Live", color: "green", pulse: true },
  building: { label: "Building", color: "amber", pulse: false },
  failed: { label: "Failed", color: "red", pulse: false },
  queued: { label: "Queued", color: "white", pulse: false },
} as const;

export default function BadgeDemo() {
  return (
    <ul className="w-full max-w-md divide-y divide-white/[0.06] rounded-xl border border-white/10 bg-white/[0.02]">
      {deployments.map((deployment) => {
        const status = statuses[deployment.status];
        return (
          <li key={deployment.project} className="flex items-center justify-between gap-4 px-4 py-3">
            <div className="min-w-0">
              <p className="truncate text-sm font-medium text-white/90">{deployment.project}</p>
              <p className="truncate font-mono text-xs text-white/40">
                {deployment.branch} · {deployment.commit} · {deployment.age}
              </p>
            </div>
            <Badge color={status.color} dot pulse={status.pulse}>
              {status.label}
            </Badge>
          </li>
        );
      })}
    </ul>
  );
}
```

### Variants and sizes

Soft is the default. Outline and solid carry more light.

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

const variants = ["soft", "outline", "solid"] as const;
const colors = ["cyan", "violet", "magenta", "amber", "lime"] as const;

export default function BadgeVariants() {
  return (
    <div className="grid w-full max-w-lg gap-4">
      {variants.map((variant) => (
        <div key={variant} className="flex flex-wrap items-center gap-2">
          <span className="w-16 font-mono text-xs text-white/40">{variant}</span>
          {colors.map((color) => (
            <Badge key={color} variant={variant} color={color} className="capitalize">
              {color}
            </Badge>
          ))}
        </div>
      ))}
      <div className="flex flex-wrap items-center gap-2">
        <span className="w-16 font-mono text-xs text-white/40">sizes</span>
        <Badge size="sm" dot>
          v2.0.0
        </Badge>
        <Badge size="md" dot>
          v2.0.0
        </Badge>
      </div>
    </div>
  );
}
```

### Removable

onRemove renders a small close button after the label.

```tsx
"use client";

import * as React from "react";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";

const initialFilters = ["TypeScript", "MIT license", "Updated this week", "Has examples"];

export default function BadgeRemovable() {
  const [filters, setFilters] = React.useState(initialFilters);

  return (
    <div className="grid w-full max-w-md gap-3">
      <div className="flex items-center justify-between">
        <p className="text-xs font-medium text-white/45">
          {filters.length} {filters.length === 1 ? "filter" : "filters"} applied
        </p>
        <Button
          variant="ghost"
          size="sm"
          disabled={filters.length === initialFilters.length}
          onClick={() => setFilters(initialFilters)}
        >
          Reset
        </Button>
      </div>
      <div className="flex min-h-6 flex-wrap gap-2">
        {filters.map((filter) => (
          <Badge
            key={filter}
            variant="outline"
            removeLabel={`Remove ${filter} filter`}
            onRemove={() => setFilters((current) => current.filter((item) => item !== filter))}
          >
            {filter}
          </Badge>
        ))}
        {filters.length === 0 && <p className="text-sm text-white/40">No filters. Showing every component.</p>}
      </div>
    </div>
  );
}
```

## API reference

### Badge

Renders a span and accepts every native span attribute.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `variant` | `"soft" \| "outline" \| "solid"` | `"soft"` | Visual style. |
| `color` | `NeonColor` | `inherited` | Palette name or hex. Falls back to --neon-accent, then cyan. |
| `size` | `"sm" \| "md"` | `"md"` | Height, padding and type size. |
| `dot` | `boolean` | `false` | Shows a glowing status dot before the label. |
| `pulse` | `boolean` | `false` | Adds a ping ring to the dot. Implies dot. |
| `onRemove` | `() => void` | — | Renders a remove button and calls this when it is pressed. |
| `removeLabel` | `string` | `"Remove"` | Accessible name for the remove button. |

## Accessibility

- The dot is decorative, so the label text has to carry the status on its own.
- Give each remove button a specific removeLabel, such as "Remove TypeScript filter", when several badges sit together.
- The ping animation stops when the user prefers reduced motion.

## Source

`components/ui/badge.tsx`

```tsx
"use client";

import * as React from "react";
import { X } from "lucide-react";

import { cn } from "@/lib/utils";
import { neonVars, type NeonColor } from "@/lib/neon";

const variants = {
  soft: "border-[rgb(var(--neon)/0.18)] bg-[rgb(var(--neon)/0.1)] text-[rgb(var(--neon))]",
  outline:
    "border-[rgb(var(--neon)/0.55)] text-[rgb(var(--neon))] shadow-[0_0_10px_rgb(var(--neon)/0.14),inset_0_0_8px_rgb(var(--neon)/0.08)] [text-shadow:0_0_8px_rgb(var(--neon)/0.45)]",
  solid:
    "border-transparent bg-[rgb(var(--neon))] text-[#05060a] shadow-[0_0_14px_rgb(var(--neon)/0.35),inset_0_1px_0_rgb(255_255_255/0.4)]",
} as const;

// Padding next to the dot and the remove button is tuned so both sit
// concentric with the pill's rounded ends (the 1px border is included).
const sizes = {
  sm: {
    root: "h-5 gap-1.5 px-2 text-[11px]",
    dot: "pl-1.5",
    remove: "pr-0.5",
    button: "size-3.5",
    icon: "size-2.5",
  },
  md: {
    root: "h-6 gap-1.5 px-2.5 text-xs",
    dot: "pl-2",
    remove: "pr-[3px]",
    button: "size-4",
    icon: "size-3",
  },
} as const;

export interface BadgeProps extends Omit<React.HTMLAttributes<HTMLSpanElement>, "color"> {
  /** Palette name or any hex color. Inherits `--neon-accent` when omitted. */
  color?: NeonColor;
  variant?: keyof typeof variants;
  size?: keyof typeof sizes;
  /** Shows a small glowing status dot before the label. */
  dot?: boolean;
  /** Adds a ping ring to the dot. Implies `dot`. */
  pulse?: boolean;
  /** Renders a remove button after the label. */
  onRemove?: () => void;
  /** Accessible name for the remove button. */
  removeLabel?: string;
}

const Badge = React.forwardRef<HTMLSpanElement, BadgeProps>(
  (
    {
      className,
      style,
      color,
      variant = "soft",
      size = "md",
      dot = false,
      pulse = false,
      onRemove,
      removeLabel = "Remove",
      children,
      ...props
    },
    ref,
  ) => {
    const s = sizes[size];
    const showDot = dot || pulse;

    return (
      <span
        ref={ref}
        style={neonVars(color, style)}
        className={cn(
          "[--neon:var(--neon-accent,34_211_238)]",
          "inline-flex shrink-0 items-center whitespace-nowrap rounded-full border font-medium leading-none",
          "[&>svg]:size-3 [&>svg]:shrink-0",
          s.root,
          showDot && s.dot,
          onRemove && s.remove,
          variants[variant],
          className,
        )}
        {...props}
      >
        {showDot && (
          <span aria-hidden className="relative flex size-1.5 shrink-0">
            {pulse && (
              <span className="absolute inset-0 animate-ping rounded-full bg-current opacity-60 [animation-duration:1.6s] motion-reduce:animate-none" />
            )}
            <span
              className={cn(
                "relative size-1.5 rounded-full bg-current",
                variant !== "solid" && "shadow-[0_0_6px_rgb(var(--neon)/0.9)]",
              )}
            />
          </span>
        )}
        {children}
        {onRemove && (
          <button
            type="button"
            aria-label={removeLabel}
            onClick={(event) => {
              event.stopPropagation();
              onRemove();
            }}
            className={cn(
              "relative inline-flex shrink-0 cursor-pointer items-center justify-center rounded-full opacity-60 outline-none",
              "transition-[opacity,background-color] duration-150 ease-out hover:opacity-100 focus-visible:opacity-100",
              "focus-visible:ring-1 focus-visible:ring-current",
              // Grows the hit area without growing the badge.
              "after:absolute after:-inset-1",
              variant === "solid" ? "hover:bg-black/15" : "hover:bg-[rgb(var(--neon)/0.2)]",
              s.button,
            )}
          >
            <X aria-hidden strokeWidth={2.5} className={s.icon} />
          </button>
        )}
      </span>
    );
  },
);
Badge.displayName = "Badge";

export { Badge };
```


---

# Component: Avatar

> Profile image with initials fallback, status light and stacked groups.

Category: Data Display. Docs: https://get-neonkit.vercel.app/components/avatar

## Installation

```bash
npx shadcn@latest add https://get-neonkit.vercel.app/r/avatar.json
```

With the `@neonkit` namespace configured: `npx shadcn@latest add @neonkit/avatar`.

npm dependencies: none. Also needs `lib/utils.ts` (`cn`) and `lib/neon.ts` (`neonVars`), which the CLI adds.

## Usage

```tsx
import { Avatar } from "@/components/ui/avatar"

<Avatar src="/maya.jpg" alt="Maya Okafor" status="online" />
```

## Examples

### Team with status

Initials show until the image loads, and stay if it fails or there is no src.

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

const photo = (id: string) =>
  `https://images.unsplash.com/photo-${id}?auto=format&fit=facearea&facepad=2&w=128&h=128&q=80`;

const team = [
  { name: "Maya Okafor", role: "Design engineer", src: photo("1494790108377-be9c29b29330"), status: "online", note: "Online" },
  { name: "Daniel Reyes", role: "Platform lead", src: photo("1500648767791-00dcc994a43e"), status: "busy", note: "In a meeting" },
  { name: "Lena Fischer", role: "Product designer", src: photo("1438761681033-6461ffad8d80"), status: "away", note: "Away 20m" },
  { name: "Arjun Mehta", role: "Frontend engineer", src: undefined, status: "offline", note: "Seen 3h ago" },
] as const;

export default function AvatarDemo() {
  return (
    <ul className="grid w-full max-w-sm gap-1">
      {team.map((member) => (
        <li key={member.name} className="flex items-center gap-3 rounded-lg px-2 py-2 transition-colors hover:bg-white/[0.03]">
          <Avatar src={member.src} alt={member.name} status={member.status} />
          <div className="min-w-0 flex-1">
            <p className="truncate text-sm font-medium text-white/90">{member.name}</p>
            <p className="truncate text-xs text-white/45">{member.role}</p>
          </div>
          <span className="shrink-0 text-xs text-white/40">{member.note}</span>
        </li>
      ))}
    </ul>
  );
}
```

### Group

AvatarGroup overlaps its children and folds the rest into a +N chip.

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

const photo = (id: string) =>
  `https://images.unsplash.com/photo-${id}?auto=format&fit=facearea&facepad=2&w=128&h=128&q=80`;

const editors = [
  { name: "Maya Okafor", src: photo("1494790108377-be9c29b29330") },
  { name: "Daniel Reyes", src: photo("1500648767791-00dcc994a43e") },
  { name: "Lena Fischer", src: photo("1438761681033-6461ffad8d80") },
  { name: "Tom Becker", src: photo("1472099645785-5658abf4ff4e") },
  { name: "Sofia Marin", src: photo("1517841905240-472988babdf9") },
  { name: "Noah Kim", src: photo("1519244703995-f4e0f30006d5") },
  { name: "Arjun Mehta", src: undefined },
];

export default function AvatarGroupExample() {
  return (
    <div className="flex flex-col items-center gap-8">
      <div className="flex items-center gap-3">
        <AvatarGroup max={4}>
          {editors.map((person) => (
            <Avatar key={person.name} src={person.src} alt={person.name} />
          ))}
        </AvatarGroup>
        <p className="text-sm text-white/55">
          <span className="text-white/90">Maya, Daniel</span> and 5 others are editing
        </p>
      </div>
      <AvatarGroup size="sm" max={5}>
        {editors.map((person) => (
          <Avatar key={person.name} src={person.src} alt={person.name} />
        ))}
      </AvatarGroup>
    </div>
  );
}
```

### Sizes and shapes

Square suits workspaces and organisations.

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

const src =
  "https://images.unsplash.com/photo-1544005313-94ddf0286df2?auto=format&fit=facearea&facepad=2&w=128&h=128&q=80";

const sizes = ["sm", "md", "lg", "xl"] as const;
const workspaces = ["Lumen Labs", "Northwind", "Ownpath Studio", "Halcyon"];

export default function AvatarSizes() {
  return (
    <div className="flex flex-col items-center gap-8">
      <div className="flex items-end gap-5">
        {sizes.map((size) => (
          <Avatar key={size} size={size} src={src} alt="Priya Shah" status="online" />
        ))}
      </div>
      <div className="flex items-end gap-5">
        {sizes.map((size, index) => (
          <Avatar key={size} size={size} shape="square" alt={workspaces[index]} />
        ))}
      </div>
    </div>
  );
}
```

### Ring and color

ring marks the active person. color tints the initials and the ring.

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

const photo = (id: string) =>
  `https://images.unsplash.com/photo-${id}?auto=format&fit=facearea&facepad=2&w=128&h=128&q=80`;

const participants = [
  { name: "Lena Fischer", src: photo("1438761681033-6461ffad8d80"), speaking: true },
  { name: "Tom Becker", src: photo("1472099645785-5658abf4ff4e"), speaking: false },
  { name: "Sofia Marin", src: photo("1517841905240-472988babdf9"), speaking: false },
  { name: "Noah Kim", src: photo("1519244703995-f4e0f30006d5"), speaking: false },
];

const guests = [
  { name: "Ines Duarte", color: "violet" },
  { name: "Kai Nakamura", color: "magenta" },
  { name: "Ruth Adeyemi", color: "amber" },
  { name: "Elias Berg", color: "lime" },
] as const;

export default function AvatarRing() {
  return (
    <div className="flex flex-col items-center gap-8">
      <div className="flex items-start gap-6">
        {participants.map((person) => (
          <div key={person.name} className="flex w-16 flex-col items-center gap-2.5">
            <Avatar size="lg" src={person.src} alt={person.name} ring={person.speaking} />
            <span className={person.speaking ? "text-xs text-white/90" : "text-xs text-white/45"}>
              {person.name.split(" ")[0]}
            </span>
          </div>
        ))}
      </div>
      <div className="flex items-center gap-3">
        {guests.map((guest) => (
          <Avatar key={guest.name} alt={guest.name} color={guest.color} />
        ))}
        <span className="ml-1 text-xs text-white/40">Guests get their own color</span>
      </div>
    </div>
  );
}
```

## API reference

### Avatar

Renders a span and accepts every native span attribute.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `alt` | `string` | — | The person's name. Read by screen readers and used for the initials. Pass "" when decorative. |
| `src` | `string` | — | Image URL. Fades in once loaded. |
| `fallback` | `ReactNode` | — | Replaces the initials, for example with an icon. |
| `size` | `"sm" \| "md" \| "lg" \| "xl"` | `"md"` | 28, 36, 48 or 64px. |
| `shape` | `"circle" \| "square"` | `"circle"` | Outline shape. |
| `status` | `"online" \| "away" \| "busy" \| "offline"` | — | Status light in the bottom-right corner. |
| `ring` | `boolean` | `false` | Neon ring with a glow, set off by a thin dark gap. |
| `color` | `NeonColor` | `inherited` | Palette name or hex. Falls back to --neon-accent, then cyan. |

### AvatarGroup

Renders a div. Size and shape apply to every Avatar inside.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `max` | `number` | — | Avatars past this count collapse into a +N chip. |
| `size` | `"sm" \| "md" \| "lg" \| "xl"` | `"md"` | Size of every avatar and the chip. |
| `shape` | `"circle" \| "square"` | `"circle"` | Shape of every avatar and the chip. |
| `color` | `NeonColor` | `inherited` | Color for every avatar in the group. |

## Accessibility

- Each avatar is a single image to assistive tech, named by alt, with the status appended, e.g. "Maya Okafor (online)".
- The +N chip is announced as "N more".
- The status light is cut out with #05060a; change it with className if your surface is a different color.

## Source

`components/ui/avatar.tsx`

```tsx
"use client";

import * as React from "react";

import { cn } from "@/lib/utils";
import { neonVars, type NeonColor } from "@/lib/neon";

const sizes = {
  sm: { root: "size-7 text-[11px]", square: "rounded-md", dot: "size-2 bottom-0 right-0", overlap: "[&>*+*]:-ml-1.5" },
  md: { root: "size-9 text-[13px]", square: "rounded-lg", dot: "size-2.5 bottom-0 right-0", overlap: "[&>*+*]:-ml-2" },
  lg: { root: "size-12 text-base", square: "rounded-xl", dot: "size-3 bottom-px right-px", overlap: "[&>*+*]:-ml-3" },
  xl: { root: "size-16 text-xl", square: "rounded-2xl", dot: "size-3.5 bottom-0.5 right-0.5", overlap: "[&>*+*]:-ml-4" },
} as const;

// The 2px #05060a ring cuts the light out of the avatar edge.
const statuses = {
  online: "bg-[rgb(52_211_153)] shadow-[0_0_0_2px_#05060a,0_0_8px_2px_rgb(52_211_153/0.45)]",
  away: "bg-[rgb(251_191_36)] shadow-[0_0_0_2px_#05060a,0_0_8px_2px_rgb(251_191_36/0.4)]",
  busy: "bg-[rgb(255_77_94)] shadow-[0_0_0_2px_#05060a,0_0_8px_2px_rgb(255_77_94/0.45)]",
  offline: "bg-[#05060a] shadow-[0_0_0_2px_#05060a,inset_0_0_0_2px_rgb(255_255_255/0.3)]",
} as const;

type AvatarSize = keyof typeof sizes;
type AvatarShape = "circle" | "square";
type AvatarStatus = keyof typeof statuses;

const AvatarGroupContext = React.createContext<{ size: AvatarSize; shape: AvatarShape } | null>(null);

function getInitials(name: string) {
  const words = name.trim().split(/\s+/).filter(Boolean);
  if (words.length === 0) return "";
  const first = Array.from(words[0])[0];
  const last = words.length > 1 ? Array.from(words[words.length - 1])[0] : "";
  return (first + last).toUpperCase();
}

function useImageStatus(src?: string) {
  const [result, setResult] = React.useState<{ src: string; status: "loaded" | "error" } | null>(null);

  React.useEffect(() => {
    if (!src) return;
    let active = true;
    const image = new window.Image();
    image.onload = () => {
      if (active) setResult({ src, status: "loaded" });
    };
    image.onerror = () => {
      if (active) setResult({ src, status: "error" });
    };
    image.src = src;
    return () => {
      active = false;
    };
  }, [src]);

  if (!src) return "error";
  return result?.src === src ? result.status : "loading";
}

export interface AvatarProps extends Omit<React.HTMLAttributes<HTMLSpanElement>, "color"> {
  /** Palette name or any hex color. Tints the fallback and the ring. */
  color?: NeonColor;
  src?: string;
  /** The person's name. Read by screen readers and used for the initials. Pass "" when decorative. */
  alt: string;
  /** Shown instead of the initials while the image loads or when it fails. */
  fallback?: React.ReactNode;
  size?: AvatarSize;
  shape?: AvatarShape;
  /** Neon ring with a glow, separated from the avatar by a thin gap. */
  ring?: boolean;
  status?: AvatarStatus;
}

const Avatar = React.forwardRef<HTMLSpanElement, AvatarProps>(
  (
    { className, style, color, src, alt, fallback, size: sizeProp, shape: shapeProp, ring = false, status, ...props },
    ref,
  ) => {
    const group = React.useContext(AvatarGroupContext);
    const size = sizeProp ?? group?.size ?? "md";
    const shape = shapeProp ?? group?.shape ?? "circle";
    const s = sizes[size];
    const radius = shape === "circle" ? "rounded-full" : s.square;
    const imageStatus = useImageStatus(src);
    const loaded = imageStatus === "loaded";

    return (
      <span
        ref={ref}
        role={alt ? "img" : undefined}
        aria-label={alt ? (status ? `${alt} (${status})` : alt) : undefined}
        aria-hidden={alt ? undefined : true}
        style={neonVars(color, style)}
        className={cn(
          "[--neon:var(--neon-accent,34_211_238)]",
          "relative inline-flex shrink-0 select-none align-middle font-medium leading-none",
          s.root,
          radius,
          ring
            ? "shadow-[0_0_0_2px_#05060a,0_0_0_3px_rgb(var(--neon)),0_0_14px_3px_rgb(var(--neon)/0.4)]"
            : group && "shadow-[0_0_0_2px_#05060a]",
          className,
        )}
        {...props}
      >
        <span
          aria-hidden
          className={cn(
            "absolute inset-0 flex items-center justify-center overflow-hidden",
            "bg-[#0b0c12] bg-[linear-gradient(rgb(var(--neon)/0.12),rgb(var(--neon)/0.12))] text-[rgb(var(--neon))] [&_svg]:size-1/2",
            radius,
          )}
        >
          <span
            className={cn(
              "flex items-center justify-center transition-opacity duration-200 ease-out motion-reduce:transition-none",
              loaded && "opacity-0",
            )}
          >
            {fallback ?? getInitials(alt)}
          </span>
          {src && imageStatus !== "error" && (
            <span
              className={cn(
                "absolute inset-0 bg-cover bg-center transition-opacity duration-300 ease-out motion-reduce:transition-none",
                loaded ? "opacity-100" : "opacity-0",
              )}
              style={{ backgroundImage: `url(${JSON.stringify(src)})` }}
            />
          )}
          <span
            className={cn(
              "pointer-events-none absolute inset-0 rounded-[inherit] transition-shadow duration-300",
              loaded
                ? "shadow-[inset_0_0_0_1px_rgb(255_255_255/0.1)]"
                : "shadow-[inset_0_0_0_1px_rgb(var(--neon)/0.2)]",
            )}
          />
        </span>
        {status && (
          <span
            aria-hidden
            className={cn(
              "absolute rounded-full",
              s.dot,
              shape === "square" && "-bottom-0.5 -right-0.5",
              statuses[status],
            )}
          />
        )}
      </span>
    );
  },
);
Avatar.displayName = "Avatar";

export interface AvatarGroupProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "color"> {
  /** Palette name or any hex color, applied to every avatar in the group. */
  color?: NeonColor;
  /** Avatars past this count collapse into a "+N" chip. */
  max?: number;
  size?: AvatarSize;
  shape?: AvatarShape;
}

const AvatarGroup = React.forwardRef<HTMLDivElement, AvatarGroupProps>(
  ({ className, style, color, max, size = "md", shape = "circle", children, ...props }, ref) => {
    const items = React.Children.toArray(children).filter(React.isValidElement);
    const visible = max !== undefined && items.length > max ? items.slice(0, Math.max(max, 0)) : items;
    const hidden = items.length - visible.length;
    const context = React.useMemo(() => ({ size, shape }), [size, shape]);

    return (
      <AvatarGroupContext.Provider value={context}>
        <div
          ref={ref}
          style={neonVars(color, style)}
          className={cn("flex items-center", sizes[size].overlap, className)}
          {...props}
        >
          {visible}
          {hidden > 0 && (
            <span
              role="img"
              aria-label={`${hidden} more`}
              className={cn(
                "relative inline-flex shrink-0 select-none items-center justify-center bg-[#0f1118] font-medium leading-none text-white/60 tabular-nums",
                "shadow-[0_0_0_2px_#05060a,inset_0_0_0_1px_rgb(255_255_255/0.1)]",
                sizes[size].root,
                shape === "circle" ? "rounded-full" : sizes[size].square,
              )}
            >
              +{hidden}
            </span>
          )}
        </div>
      </AvatarGroupContext.Provider>
    );
  },
);
AvatarGroup.displayName = "AvatarGroup";

export { Avatar, AvatarGroup };
```


---

# Component: Card

> Surface with header, content and footer slots and a lit edge.

Category: Data Display. Docs: https://get-neonkit.vercel.app/components/card

## Installation

```bash
npx shadcn@latest add https://get-neonkit.vercel.app/r/card.json
```

With the `@neonkit` namespace configured: `npx shadcn@latest add @neonkit/card`.

npm dependencies: none. Also needs `lib/utils.ts` (`cn`) and `lib/neon.ts` (`neonVars`), which the CLI adds.

## Usage

```tsx
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"

<Card>
  <CardHeader>
    <CardTitle>Usage this month</CardTitle>
    <CardDescription>Pro plan · resets in 20 days</CardDescription>
  </CardHeader>
  <CardContent>…</CardContent>
</Card>
```

## Examples

### Usage

A 1px lit edge runs along the top, brightest in the middle.

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

const metrics = [
  { label: "Bandwidth", used: "182.4 GB", limit: "1 TB", percent: 18 },
  { label: "Edge requests", used: "1.24M", limit: "10M", percent: 12 },
  { label: "Build minutes", used: "4,410", limit: "6,000", percent: 74 },
  { label: "Image optimizations", used: "4,612", limit: "5,000", percent: 92, warn: true },
];

export default function CardDemo() {
  return (
    <Card className="w-full max-w-sm">
      <CardHeader>
        <div className="flex items-center justify-between gap-4">
          <CardTitle>Usage this month</CardTitle>
          <span className="text-xs text-white/40">Oct 1 – 31</span>
        </div>
        <CardDescription>Pro plan · resets in 20 days</CardDescription>
      </CardHeader>
      <CardContent className="grid gap-5">
        <div>
          <p className="text-3xl font-semibold tabular-nums tracking-tight text-white">$38.20</p>
          <p className="mt-1 text-xs text-white/45">Estimated bill, including $18.20 in overages</p>
        </div>
        <div className="grid gap-4">
          {metrics.map((metric) => (
            <div key={metric.label} className="grid gap-2">
              <div className="flex items-baseline justify-between gap-4 text-sm">
                <span className="text-white/55">{metric.label}</span>
                <span className="tabular-nums text-white/90">
                  {metric.used} <span className="text-white/35">/ {metric.limit}</span>
                </span>
              </div>
              <div className="h-1 overflow-hidden rounded-full bg-white/[0.06]">
                <div
                  className={
                    metric.warn
                      ? "h-full rounded-full bg-[rgb(251_191_36)] shadow-[0_0_8px_rgb(251_191_36/0.6)]"
                      : "h-full rounded-full bg-[rgb(var(--neon))] shadow-[0_0_8px_rgb(var(--neon)/0.6)]"
                  }
                  style={{ width: `${metric.percent}%` }}
                />
              </div>
            </div>
          ))}
        </div>
      </CardContent>
      <CardFooter className="justify-between border-t border-white/[0.06] pt-4">
        <span className="text-xs text-white/40">Updated 4 minutes ago</span>
        <Button variant="ghost" size="sm" className="-mr-3">
          View breakdown
        </Button>
      </CardFooter>
    </Card>
  );
}
```

### Pricing

glow adds a neon border and ambient light. Use it on one card per view.

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

const plans = [
  {
    name: "Hobby",
    price: "$0",
    period: "forever",
    description: "For side projects and trying things out.",
    features: ["3 projects", "Preview deployments", "Community support"],
    cta: "Start for free",
    featured: false,
  },
  {
    name: "Pro",
    price: "$20",
    period: "per seat / month",
    description: "For teams shipping to production every day.",
    features: ["Unlimited projects", "Preview deployments", "Password-protected previews", "Priority support"],
    cta: "Upgrade to Pro",
    featured: true,
  },
];

export default function CardPricing() {
  return (
    <div className="grid w-full max-w-2xl gap-4 sm:grid-cols-2">
      {plans.map((plan) => (
        <Card key={plan.name} variant={plan.featured ? "glow" : "default"}>
          <CardHeader>
            <div className="flex items-center justify-between gap-3">
              <CardTitle>{plan.name}</CardTitle>
              {plan.featured && (
                <span className="rounded-full border border-[rgb(var(--neon)/0.3)] bg-[rgb(var(--neon)/0.1)] px-2 py-0.5 text-[11px] font-medium text-[rgb(var(--neon))]">
                  Most popular
                </span>
              )}
            </div>
            <CardDescription>{plan.description}</CardDescription>
          </CardHeader>
          <CardContent>
            <p className="flex items-baseline gap-1.5">
              <span className="text-4xl font-semibold tabular-nums tracking-tight text-white">{plan.price}</span>
              <span className="text-sm text-white/45">{plan.period}</span>
            </p>
            <ul className="mt-6 grid gap-2.5 text-sm text-white/70">
              {plan.features.map((feature) => (
                <li key={feature} className="flex items-center gap-2.5">
                  <Check
                    aria-hidden
                    className={plan.featured ? "size-4 text-[rgb(var(--neon))]" : "size-4 text-white/35"}
                  />
                  {feature}
                </li>
              ))}
            </ul>
          </CardContent>
          <CardFooter>
            <Button variant={plan.featured ? "solid" : "outline"} className="w-full">
              {plan.cta}
            </Button>
          </CardFooter>
        </Card>
      ))}
    </div>
  );
}
```

### Link cards

interactive lifts the card on hover. A stretched link makes the whole surface clickable.

```tsx
import { ArrowUpRight, Boxes, Package, Palette, Terminal } from "lucide-react";
import { Card, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";

const links = [
  {
    title: "Installation",
    description: "Point the shadcn CLI at the registry and add your first component.",
    href: "#installation",
    icon: Terminal,
  },
  {
    title: "Theming",
    description: "Set --neon-accent once and every component follows it.",
    href: "#theming",
    icon: Palette,
  },
  {
    title: "Components",
    description: "Each one is a single file you own, edit and ship.",
    href: "#components",
    icon: Boxes,
  },
  {
    title: "Registry",
    description: "Serve your own variants as shadcn-compatible JSON.",
    href: "#registry",
    icon: Package,
  },
];

export default function CardInteractive() {
  return (
    <div className="grid w-full max-w-2xl gap-4 sm:grid-cols-2">
      {links.map(({ title, description, href, icon: Icon }) => (
        <Card key={title} interactive className="group">
          <CardHeader className="gap-2">
            <div className="mb-2 flex size-9 items-center justify-center rounded-lg border border-white/10 bg-white/[0.04] text-[rgb(var(--neon))]">
              <Icon aria-hidden className="size-4" />
            </div>
            <CardTitle className="flex items-center justify-between gap-3">
              {/* The link's ::after covers the card, so the whole surface is clickable. */}
              <a href={href} className="outline-none after:absolute after:inset-0 after:rounded-2xl">
                {title}
              </a>
              <ArrowUpRight
                aria-hidden
                className="size-4 text-white/30 transition-[color,transform] duration-200 ease-out group-hover:-translate-y-0.5 group-hover:translate-x-0.5 group-hover:text-white/70"
              />
            </CardTitle>
            <CardDescription>{description}</CardDescription>
          </CardHeader>
        </Card>
      ))}
    </div>
  );
}
```

### Variants

```tsx
import { Card, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";

const variants = [
  { variant: "default", title: "Default", description: "A raised surface with a faint lit edge. Use it for most content." },
  { variant: "glow", title: "Glow", description: "Neon border and ambient light. Save it for the one card that matters." },
  { variant: "outline", title: "Outline", description: "Border only, for dense layouts and nested groups." },
] as const;

export default function CardVariants() {
  return (
    <div className="grid w-full max-w-3xl gap-4 sm:grid-cols-3">
      {variants.map((item) => (
        <Card key={item.variant} variant={item.variant}>
          <CardHeader>
            <CardTitle>{item.title}</CardTitle>
            <CardDescription>{item.description}</CardDescription>
          </CardHeader>
        </Card>
      ))}
    </div>
  );
}
```

## API reference

### Card

Renders a div and accepts every native div attribute.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `variant` | `"default" \| "glow" \| "outline"` | `"default"` | Surface style. |
| `color` | `NeonColor` | `inherited` | Palette name or hex. Falls back to --neon-accent, then cyan. |
| `interactive` | `boolean` | `false` | Hover lift, brighter edge and a focus ring when something inside is keyboard-focused. |

### CardHeader, CardContent, CardFooter

Divs with matching 24px padding. Content and footer drop their top padding so the slots stack evenly.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `className` | `string` | — | Merged with the defaults, so p-4 or gap-3 override cleanly. |

### CardTitle, CardDescription

An h3 and a p. Swap the heading level with your own element if the outline needs it.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `className` | `string` | — | Merged with the defaults. |

## Accessibility

- Card has no role or tab stop of its own; put the link or button inside it.
- For a clickable card, stretch one link over the surface with after:absolute after:inset-0 instead of wrapping the card in an anchor.
- The hover lift is disabled when the user prefers reduced motion.

## Source

`components/ui/card.tsx`

```tsx
import * as React from "react";

import { cn } from "@/lib/utils";
import { neonVars, type NeonColor } from "@/lib/neon";

const variants = {
  default: "border-white/10 bg-white/[0.03]",
  glow: "border-[rgb(var(--neon)/0.4)] bg-[rgb(var(--neon)/0.035)] shadow-[0_0_32px_-8px_rgb(var(--neon)/0.4),inset_0_0_24px_rgb(var(--neon)/0.05)]",
  outline: "border-white/[0.12] bg-transparent",
} as const;

const interactiveVariants = {
  default:
    "hover:border-white/[0.16] hover:bg-white/[0.045] hover:shadow-[0_16px_40px_-20px_rgb(var(--neon)/0.45)]",
  glow: "hover:border-[rgb(var(--neon)/0.6)] hover:shadow-[0_0_48px_-6px_rgb(var(--neon)/0.55),inset_0_0_28px_rgb(var(--neon)/0.08)]",
  outline: "hover:border-[rgb(var(--neon)/0.35)]",
} as const;

// The lit edge: a 1px line on the top border that fades out toward the corners.
const edges = {
  default: "bg-[linear-gradient(90deg,transparent,rgb(var(--neon)/0.5)_50%,transparent)] opacity-70",
  glow: "bg-[linear-gradient(90deg,transparent,rgb(var(--neon))_50%,transparent)] opacity-80",
  outline: null,
} as const;

export interface CardProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "color"> {
  /** Palette name or any hex color. Inherits `--neon-accent` when omitted. */
  color?: NeonColor;
  variant?: keyof typeof variants;
  /** Lifts the card and brightens its light on hover. Pair with a link or button inside. */
  interactive?: boolean;
}

const Card = React.forwardRef<HTMLDivElement, CardProps>(
  ({ className, style, color, variant = "default", interactive = false, children, ...props }, ref) => {
    const edge = edges[variant];

    return (
      <div
        ref={ref}
        style={neonVars(color, style)}
        className={cn(
          "[--neon:var(--neon-accent,34_211_238)]",
          "group/card relative flex flex-col rounded-2xl border text-white/90",
          variants[variant],
          interactive && [
            "transition-[transform,border-color,background-color,box-shadow] duration-300 ease-[cubic-bezier(0.23,1,0.32,1)]",
            "hover:-translate-y-0.5 motion-reduce:transition-none motion-reduce:hover:translate-y-0",
            "has-[:focus-visible]:ring-2 has-[:focus-visible]:ring-[rgb(var(--neon)/0.6)] has-[:focus-visible]:ring-offset-2 has-[:focus-visible]:ring-offset-[#05060a]",
            interactiveVariants[variant],
          ],
          className,
        )}
        {...props}
      >
        {edge && (
          <span
            aria-hidden
            className={cn(
              "pointer-events-none absolute inset-x-0 -top-px h-px",
              edge,
              interactive && "transition-opacity duration-300 group-hover/card:opacity-100",
            )}
          />
        )}
        {children}
      </div>
    );
  },
);
Card.displayName = "Card";

const CardHeader = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
  ({ className, ...props }, ref) => (
    <div ref={ref} className={cn("flex flex-col gap-1.5 p-6", className)} {...props} />
  ),
);
CardHeader.displayName = "CardHeader";

const CardTitle = React.forwardRef<HTMLHeadingElement, React.HTMLAttributes<HTMLHeadingElement>>(
  ({ className, ...props }, ref) => (
    <h3
      ref={ref}
      className={cn("text-base font-semibold leading-tight tracking-[-0.01em] text-white/90", className)}
      {...props}
    />
  ),
);
CardTitle.displayName = "CardTitle";

const CardDescription = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLParagraphElement>>(
  ({ className, ...props }, ref) => (
    <p ref={ref} className={cn("text-sm leading-relaxed text-white/55", className)} {...props} />
  ),
);
CardDescription.displayName = "CardDescription";

const CardContent = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
  ({ className, ...props }, ref) => <div ref={ref} className={cn("p-6 pt-0", className)} {...props} />,
);
CardContent.displayName = "CardContent";

const CardFooter = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
  ({ className, ...props }, ref) => (
    <div ref={ref} className={cn("mt-auto flex items-center gap-2 p-6 pt-0", className)} {...props} />
  ),
);
CardFooter.displayName = "CardFooter";

export { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter };
```


---

# Component: Kbd

> Keyboard keys and shortcuts that glow when pressed.

Category: Data Display. Docs: https://get-neonkit.vercel.app/components/kbd

## Installation

```bash
npx shadcn@latest add https://get-neonkit.vercel.app/r/kbd.json
```

With the `@neonkit` namespace configured: `npx shadcn@latest add @neonkit/kbd`.

npm dependencies: none. Also needs `lib/utils.ts` (`cn`) and `lib/neon.ts` (`neonVars`), which the CLI adds.

## Usage

```tsx
import { Kbd, KbdCombo } from "@/components/ui/kbd"

<KbdCombo keys={["⌘", "K"]} listen />
<Kbd listen="Shift">Shift</Kbd>
```

## Examples

### Command menu hint

With listen, each key lights up while you hold the real one.

```tsx
import { Search } from "lucide-react";
import { KbdCombo } from "@/components/ui/kbd";

export default function KbdDemo() {
  return (
    <div className="flex w-full max-w-xs flex-col items-center gap-4">
      <button
        type="button"
        className="flex h-10 w-full cursor-pointer items-center gap-2.5 rounded-lg border border-white/10 bg-white/[0.03] pl-3 pr-2 text-sm text-white/40 outline-none transition-colors duration-150 hover:border-white/15 hover:text-white/60 focus-visible:ring-2 focus-visible:ring-[rgb(var(--neon-accent,34_211_238)/0.6)] focus-visible:ring-offset-2 focus-visible:ring-offset-[#05060a]"
      >
        <Search aria-hidden className="size-4" />
        <span className="flex-1 text-left">Search components…</span>
        <KbdCombo keys={["⌘", "K"]} listen separator={null} />
      </button>
      <p className="text-xs text-white/40">Hold ⌘ and press K. The keys light up as you type.</p>
    </div>
  );
}
```

### Shortcut sheet

separator accepts any node, or null for keys side by side.

```tsx
import { KbdCombo } from "@/components/ui/kbd";

const shortcuts = [
  { action: "Open command menu", keys: ["⌘", "K"] },
  { action: "Toggle sidebar", keys: ["⌘", "B"] },
  { action: "Copy component source", keys: ["⌘", "⇧", "C"] },
  { action: "Next example", keys: ["J"] },
  { action: "Previous example", keys: ["K"] },
  { action: "Go to settings", keys: ["G", "S"], then: true },
  { action: "Close dialog", keys: ["Esc"] },
];

export default function KbdShortcuts() {
  return (
    <div className="w-full max-w-sm overflow-hidden rounded-xl border border-white/10 bg-white/[0.02]">
      <table className="w-full border-collapse text-sm">
        <caption className="sr-only">Keyboard shortcuts</caption>
        <thead>
          <tr className="border-b border-white/[0.06] text-left text-xs text-white/40">
            <th scope="col" className="px-4 py-2.5 font-medium">
              Action
            </th>
            <th scope="col" className="px-4 py-2.5 text-right font-medium">
              Shortcut
            </th>
          </tr>
        </thead>
        <tbody className="divide-y divide-white/[0.06]">
          {shortcuts.map((shortcut) => (
            <tr key={shortcut.action}>
              <td className="px-4 py-2.5 text-white/70">{shortcut.action}</td>
              <td className="px-4 py-2.5 text-right">
                <KbdCombo
                  keys={shortcut.keys}
                  size="sm"
                  separator={shortcut.then ? <span className="px-0.5 text-white/40">then</span> : null}
                />
              </td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
}
```

### Listening keys

listen takes a KeyboardEvent.key value and matches it case-insensitively.

```tsx
import { Kbd } from "@/components/ui/kbd";

const keys = [
  { label: "⇧ shift", listen: "Shift", width: "w-24 justify-start" },
  { label: "⌃", listen: "Control", width: "w-11" },
  { label: "⌥", listen: "Alt", width: "w-11" },
  { label: "⌘", listen: "Meta", width: "w-14" },
  { label: "", listen: " ", width: "w-40" },
];

export default function KbdListen() {
  return (
    <div className="flex flex-col items-center gap-6">
      <div className="flex items-center gap-1.5" aria-hidden>
        {keys.map((key) => (
          <Kbd key={key.listen} size="lg" listen={key.listen} className={`h-11 ${key.width}`}>
            {key.label}
          </Kbd>
        ))}
      </div>
      <p className="text-sm text-white/45">
        Press <span className="text-white/80">Shift</span>, any modifier or the space bar.
      </p>
    </div>
  );
}
```

### Sizes and pressed state

pressed forces the lit state, for tutorials and game controls.

```tsx
import { Kbd, KbdCombo } from "@/components/ui/kbd";

export default function KbdSizes() {
  return (
    <div className="flex flex-col items-center gap-8">
      <div className="flex items-center gap-6">
        <KbdCombo keys={["⌘", "K"]} size="sm" />
        <KbdCombo keys={["⌘", "K"]} size="md" />
        <KbdCombo keys={["⌘", "K"]} size="lg" />
      </div>
      <div className="grid grid-cols-3 gap-1.5">
        <Kbd size="lg" pressed className="col-start-2">
          W
        </Kbd>
        <Kbd size="lg">A</Kbd>
        <Kbd size="lg">S</Kbd>
        <Kbd size="lg" pressed>
          D
        </Kbd>
      </div>
    </div>
  );
}
```

## API reference

### Kbd

Renders a kbd element and accepts every native attribute.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `size` | `"sm" \| "md" \| "lg"` | `"md"` | 20, 24 or 32px tall. |
| `pressed` | `boolean` | `false` | Forces the lit, pushed-down state. |
| `listen` | `string` | — | KeyboardEvent.key to watch, like "k", "Shift", "Meta" or "Enter". Lights up while held. |
| `color` | `NeonColor` | `inherited` | Palette name or hex. Falls back to --neon-accent, then cyan. |

### KbdCombo

A kbd that wraps one Kbd per key, as HTML recommends for key combinations.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `keys` | `string[]` | — | Key labels in order. ⌘ ⌥ ⇧ ⌃ ↵ and arrows get spoken names. |
| `listen` | `boolean` | `false` | Each key listens for itself. ⌘ maps to Meta, ⌥ to Alt, ⇧ to Shift, ⌃ to Control, ↵ to Enter, Esc to Escape. |
| `separator` | `ReactNode` | `"+"` | Rendered between keys. Pass null for none. |
| `size` | `"sm" \| "md" \| "lg"` | `"md"` | Size of every key. |
| `color` | `NeonColor` | `inherited` | Color of every key. |

## Accessibility

- Kbd is display only. listen never prevents default or triggers anything, so wire the real shortcut yourself.
- Symbol keys in KbdCombo carry a screen reader label, so ⌘ is read as "Command".
- Held keys clear when the window loses focus, and releasing ⌘ clears the rest because macOS drops their keyup events.

## Source

`components/ui/kbd.tsx`

```tsx
"use client";

import * as React from "react";

import { cn } from "@/lib/utils";
import { neonVars, type NeonColor } from "@/lib/neon";

const sizes = {
  sm: { key: "h-5 min-w-5 rounded-[5px] px-1 text-[11px]", combo: "gap-1 text-[11px]" },
  md: { key: "h-6 min-w-6 rounded-md px-1.5 text-xs", combo: "gap-1 text-xs" },
  lg: { key: "h-8 min-w-8 rounded-lg px-2 text-sm", combo: "gap-1.5 text-sm" },
} as const;

// Pressing lights up fast; releasing fades slowly, like a tube cooling down.
const states = {
  rest: "border-white/10 bg-white/[0.04] text-white/70 shadow-[inset_0_1px_0_rgb(255_255_255/0.06),inset_0_-2px_0_rgb(0_0_0/0.45)] duration-300",
  lit: "translate-y-px border-[rgb(var(--neon)/0.7)] bg-[rgb(var(--neon)/0.12)] text-[rgb(var(--neon))] shadow-[inset_0_1px_0_rgb(var(--neon)/0.2),inset_0_-1px_0_rgb(0_0_0/0.35),0_0_14px_rgb(var(--neon)/0.45)] [text-shadow:0_0_8px_rgb(var(--neon)/0.8)] duration-75",
} as const;

function matchesKey(event: KeyboardEvent, key: string) {
  const target = key.toLowerCase();
  if (event.key.toLowerCase() === target) return true;
  // Option on macOS rewrites event.key (⌥K is "˚"), so fall back to the physical key.
  if (/^[a-z]$/.test(target)) return event.code === `Key${target.toUpperCase()}`;
  if (/^[0-9]$/.test(target)) return event.code === `Digit${target}`;
  return false;
}

function useKeyHeld(key?: string) {
  const [held, setHeld] = React.useState(false);

  React.useEffect(() => {
    if (!key) return;
    const onKeyDown = (event: KeyboardEvent) => {
      if (matchesKey(event, key)) setHeld(true);
    };
    const onKeyUp = (event: KeyboardEvent) => {
      // macOS drops keyup for other keys while ⌘ is down, so releasing ⌘ clears them too.
      if (matchesKey(event, key) || event.key === "Meta") setHeld(false);
    };
    const release = () => setHeld(false);

    window.addEventListener("keydown", onKeyDown);
    window.addEventListener("keyup", onKeyUp);
    window.addEventListener("blur", release);
    return () => {
      window.removeEventListener("keydown", onKeyDown);
      window.removeEventListener("keyup", onKeyUp);
      window.removeEventListener("blur", release);
    };
  }, [key]);

  return Boolean(key) && held;
}

export interface KbdProps extends Omit<React.HTMLAttributes<HTMLElement>, "color"> {
  /** Palette name or any hex color. Inherits `--neon-accent` when omitted. */
  color?: NeonColor;
  size?: keyof typeof sizes;
  /** Forces the lit, pushed-down state. */
  pressed?: boolean;
  /** A KeyboardEvent.key value ("k", "Shift", "Meta"). The key lights up while it is held. */
  listen?: string;
}

const Kbd = React.forwardRef<HTMLElement, KbdProps>(
  ({ className, style, color, size = "md", pressed = false, listen, ...props }, ref) => {
    const held = useKeyHeld(listen);
    const lit = pressed || held;

    return (
      <kbd
        ref={ref}
        data-state={lit ? "pressed" : "idle"}
        style={neonVars(color, style)}
        className={cn(
          "[--neon:var(--neon-accent,34_211_238)]",
          "inline-flex shrink-0 items-center justify-center whitespace-nowrap border pb-0.5 font-sans font-medium leading-none",
          "transition-[color,background-color,border-color,box-shadow,text-shadow,transform] ease-out motion-reduce:transition-none",
          "[&>svg]:size-[1.1em] [&>svg]:shrink-0",
          sizes[size].key,
          lit ? states.lit : states.rest,
          className,
        )}
        {...props}
      />
    );
  },
);
Kbd.displayName = "Kbd";

const keyNames: Record<string, string> = {
  "⌘": "Meta",
  Cmd: "Meta",
  "⌥": "Alt",
  Option: "Alt",
  "⇧": "Shift",
  "⌃": "Control",
  Ctrl: "Control",
  "↵": "Enter",
  "⏎": "Enter",
  Esc: "Escape",
  "⌫": "Backspace",
  "⇥": "Tab",
  "↑": "ArrowUp",
  "↓": "ArrowDown",
  "←": "ArrowLeft",
  "→": "ArrowRight",
  Space: " ",
};

const keyLabels: Record<string, string> = {
  "⌘": "Command",
  "⌥": "Option",
  "⇧": "Shift",
  "⌃": "Control",
  "↵": "Enter",
  "⏎": "Enter",
  "⌫": "Backspace",
  "⇥": "Tab",
  "↑": "Up arrow",
  "↓": "Down arrow",
  "←": "Left arrow",
  "→": "Right arrow",
};

export interface KbdComboProps extends Omit<React.HTMLAttributes<HTMLElement>, "color"> {
  /** Key labels in order, e.g. ["⌘", "K"]. Symbols get a spoken name for screen readers. */
  keys: string[];
  /** Lights each key while its real key is held. */
  listen?: boolean;
  size?: keyof typeof sizes;
  /** Palette name or any hex color. Inherits `--neon-accent` when omitted. */
  color?: NeonColor;
  /** Rendered between keys. Pass null for none. */
  separator?: React.ReactNode;
}

const KbdCombo = React.forwardRef<HTMLElement, KbdComboProps>(
  ({ className, style, keys, listen = false, size = "md", color, separator = "+", ...props }, ref) => (
    <kbd
      ref={ref}
      style={neonVars(color, style)}
      className={cn("inline-flex items-center font-sans", sizes[size].combo, className)}
      {...props}
    >
      {keys.map((key, index) => (
        <React.Fragment key={`${key}-${index}`}>
          {index > 0 && separator != null && separator !== false && (
            <span className="text-white/30">{separator}</span>
          )}
          <Kbd size={size} listen={listen ? (keyNames[key] ?? key) : undefined}>
            {keyLabels[key] ? (
              <>
                <span aria-hidden>{key}</span>
                <span className="sr-only">{keyLabels[key]}</span>
              </>
            ) : (
              key
            )}
          </Kbd>
        </React.Fragment>
      ))}
    </kbd>
  ),
);
KbdCombo.displayName = "KbdCombo";

export { Kbd, KbdCombo };
```


---

# Component: Tabs

> Tabbed panels with a sliding light indicator and roving focus.

Category: Data Display. Docs: https://get-neonkit.vercel.app/components/tabs

## Installation

```bash
npx shadcn@latest add https://get-neonkit.vercel.app/r/tabs.json
```

With the `@neonkit` namespace configured: `npx shadcn@latest add @neonkit/tabs`.

npm dependencies: `motion`. Also needs `lib/utils.ts` (`cn`) and `lib/neon.ts` (`neonVars`), which the CLI adds.

## Usage

```tsx
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"

<Tabs defaultValue="account">
  <TabsList>
    <TabsTrigger value="account">Account</TabsTrigger>
    <TabsTrigger value="password">Password</TabsTrigger>
  </TabsList>
  <TabsContent value="account">…</TabsContent>
  <TabsContent value="password">…</TabsContent>
</Tabs>
```

## Examples

### Settings

The lit pill slides to the selected tab.

```tsx
import { Button } from "@/components/ui/button";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";

const field =
  "h-9 w-full rounded-lg border border-white/10 bg-white/[0.03] px-3 text-sm text-white/90 outline-none transition-[border-color,box-shadow] duration-150 placeholder:text-white/30 focus:border-[rgb(var(--neon)/0.6)] focus:shadow-[0_0_0_3px_rgb(var(--neon)/0.15)]";
const panel = "grid gap-5 rounded-xl border border-white/10 bg-white/[0.03] p-5";

const notifications = [
  { id: "deploy-failed", label: "Failed deployments", hint: "Email and in-app", checked: true },
  { id: "deploy-ready", label: "Preview ready", hint: "In-app only", checked: true },
  { id: "mentions", label: "Comments and mentions", hint: "Email and in-app", checked: true },
  { id: "usage", label: "Weekly usage report", hint: "Email every Monday", checked: false },
];

export default function TabsDemo() {
  return (
    <Tabs defaultValue="account" className="w-full max-w-md">
      <TabsList>
        <TabsTrigger value="account">Account</TabsTrigger>
        <TabsTrigger value="password">Password</TabsTrigger>
        <TabsTrigger value="notifications">Notifications</TabsTrigger>
      </TabsList>

      <TabsContent value="account" className={panel}>
        <div className="grid gap-1">
          <h3 className="text-sm font-medium text-white/90">Profile</h3>
          <p className="text-sm text-white/55">This is how your name appears on deployments and comments.</p>
        </div>
        <label className="grid gap-1.5 text-xs font-medium text-white/55">
          Display name
          <input className={field} defaultValue="Maya Okafor" />
        </label>
        <label className="grid gap-1.5 text-xs font-medium text-white/55">
          Email
          <input className={field} type="email" defaultValue="maya@lumenlabs.dev" />
        </label>
        <Button variant="solid" size="sm" className="justify-self-start">
          Save changes
        </Button>
      </TabsContent>

      <TabsContent value="password" className={panel}>
        <div className="grid gap-1">
          <h3 className="text-sm font-medium text-white/90">Password</h3>
          <p className="text-sm text-white/55">Last changed 3 months ago. You will stay signed in on this device.</p>
        </div>
        <label className="grid gap-1.5 text-xs font-medium text-white/55">
          Current password
          <input className={field} type="password" autoComplete="current-password" />
        </label>
        <label className="grid gap-1.5 text-xs font-medium text-white/55">
          New password
          <input className={field} type="password" autoComplete="new-password" placeholder="At least 12 characters" />
        </label>
        <Button variant="solid" size="sm" className="justify-self-start">
          Update password
        </Button>
      </TabsContent>

      <TabsContent value="notifications" className={panel}>
        <div className="grid gap-1">
          <h3 className="text-sm font-medium text-white/90">Notifications</h3>
          <p className="text-sm text-white/55">Choose what is worth interrupting you for.</p>
        </div>
        <div className="grid gap-3">
          {notifications.map((item) => (
            <label key={item.id} className="flex cursor-pointer items-start gap-3">
              <input
                type="checkbox"
                defaultChecked={item.checked}
                className="mt-0.5 size-4 shrink-0 cursor-pointer accent-[rgb(var(--neon))]"
              />
              <span className="grid gap-0.5">
                <span className="text-sm text-white/90">{item.label}</span>
                <span className="text-xs text-white/45">{item.hint}</span>
              </span>
            </label>
          ))}
        </div>
      </TabsContent>
    </Tabs>
  );
}
```

### Underline

variant="underline" draws a glowing line on a hairline track. Good for code.

```tsx
"use client";

import * as React from "react";
import { Check, Copy } from "lucide-react";
import { Button } from "@/components/ui/button";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";

const url = "https://get-neonkit.vercel.app/r/tabs.json";

const commands = [
  { manager: "npm", command: `npx shadcn@latest add ${url}` },
  { manager: "pnpm", command: `pnpm dlx shadcn@latest add ${url}` },
  { manager: "yarn", command: `yarn dlx shadcn@latest add ${url}` },
  { manager: "bun", command: `bunx --bun shadcn@latest add ${url}` },
];

function CopyButton({ value }: { value: string }) {
  const [copied, setCopied] = React.useState(false);

  function copy() {
    navigator.clipboard.writeText(value).then(() => {
      setCopied(true);
      setTimeout(() => setCopied(false), 1500);
    });
  }

  return (
    <Button
      variant="ghost"
      size="sm"
      onClick={copy}
      aria-label={copied ? "Copied" : "Copy command"}
      className="size-7 shrink-0 px-0 [&_svg]:size-3.5"
    >
      {copied ? <Check /> : <Copy />}
    </Button>
  );
}

export default function TabsInstall() {
  return (
    <Tabs variant="underline" defaultValue="npm" className="w-full max-w-xl gap-0 rounded-xl border border-white/10 bg-[#0a0b11]">
      <TabsList className="px-4">
        {commands.map(({ manager }) => (
          <TabsTrigger key={manager} value={manager} className="font-mono text-[13px]">
            {manager}
          </TabsTrigger>
        ))}
      </TabsList>
      {commands.map(({ manager, command }) => (
        <TabsContent key={manager} value={manager} className="flex items-center gap-3 rounded-b-xl py-3 pl-4 pr-2.5">
          <span aria-hidden className="select-none font-mono text-[13px] text-white/25">
            $
          </span>
          <code className="min-w-0 flex-1 overflow-x-auto whitespace-nowrap font-mono text-[13px] text-white/80">
            {command}
          </code>
          <CopyButton value={command} />
        </TabsContent>
      ))}
    </Tabs>
  );
}
```

### Colors

Every Tabs gets its own indicator, so several can sit side by side.

```tsx
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";

const charts = [
  {
    color: "violet",
    metric: "Visitors",
    values: { "24h": "1,284", "7d": "9,617", "30d": "41,902" },
  },
  {
    color: "lime",
    metric: "Deployments",
    values: { "24h": "38", "7d": "214", "30d": "906" },
  },
  {
    color: "pink",
    metric: "Errors",
    values: { "24h": "3", "7d": "27", "30d": "112" },
  },
] as const;

const ranges = ["24h", "7d", "30d"] as const;

export default function TabsColors() {
  return (
    <div className="flex flex-wrap justify-center gap-8">
      {charts.map((chart) => (
        <Tabs key={chart.color} color={chart.color} defaultValue="7d" className="items-center gap-5">
          <TabsList aria-label={`${chart.metric} time range`}>
            {ranges.map((range) => (
              <TabsTrigger key={range} value={range} className="tabular-nums">
                {range}
              </TabsTrigger>
            ))}
          </TabsList>
          {ranges.map((range) => (
            <TabsContent key={range} value={range} className="rounded-md text-center">
              <p className="text-2xl font-semibold tabular-nums tracking-tight text-white">{chart.values[range]}</p>
              <p className="mt-1 text-xs text-white/45">{chart.metric}</p>
            </TabsContent>
          ))}
        </Tabs>
      ))}
    </div>
  );
}
```

### Manual activation

Arrow keys move focus; Enter or Space selects. Disabled tabs are skipped.

```tsx
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";

const panels = [
  { value: "overview", label: "Overview", text: "3 projects, 12 members and 41 deployments this week." },
  { value: "deployments", label: "Deployments", text: "The last production deploy went live 2 minutes ago from main." },
  { value: "logs", label: "Logs", text: "Streaming runtime logs from 4 regions. Nothing above warning level today." },
];

export default function TabsManual() {
  return (
    <Tabs defaultValue="overview" activationMode="manual" variant="underline" className="w-full max-w-md">
      <TabsList>
        {panels.map((panel) => (
          <TabsTrigger key={panel.value} value={panel.value}>
            {panel.label}
          </TabsTrigger>
        ))}
        <TabsTrigger value="billing" disabled>
          Billing
        </TabsTrigger>
      </TabsList>
      {panels.map((panel) => (
        <TabsContent key={panel.value} value={panel.value} className="rounded-md text-sm leading-relaxed text-white/55">
          {panel.text}
        </TabsContent>
      ))}
    </Tabs>
  );
}
```

## API reference

### Tabs

Renders a div and accepts every native div attribute.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `defaultValue` | `string` | — | Initially selected tab when uncontrolled. |
| `value` | `string` | — | Selected tab when controlled. |
| `onValueChange` | `(value: string) => void` | — | Called when the selection changes. |
| `variant` | `"pill" \| "underline"` | `"pill"` | Indicator style. |
| `activationMode` | `"automatic" \| "manual"` | `"automatic"` | Select on focus, or wait for Enter and Space. |
| `color` | `NeonColor` | `inherited` | Palette name or hex. Falls back to --neon-accent, then cyan. |

### TabsTrigger

Renders a button.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `value` | `string` | — | Matches a TabsContent value. |
| `disabled` | `boolean` | `false` | Skipped by the keyboard and not clickable. |

### TabsContent

Renders a div that fades in when selected.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `value` | `string` | — | Matches a TabsTrigger value. |
| `forceMount` | `boolean` | `false` | Keeps the panel mounted but hidden while inactive, so its state survives. |

## Accessibility

- Follows the WAI-ARIA tabs pattern: tablist, tab and tabpanel roles, with aria-selected and aria-controls wired up.
- Only the selected tab is in the Tab order. Left and Right arrows move between tabs, Home and End jump to the ends.
- Panels are focusable so keyboard users can reach content without interactive elements.
- The indicator jumps instead of sliding when the user prefers reduced motion.

## Source

`components/ui/tabs.tsx`

```tsx
"use client";

import * as React from "react";
import { motion, useReducedMotion } from "motion/react";

import { cn } from "@/lib/utils";
import { neonVars, type NeonColor } from "@/lib/neon";

const ease = [0.23, 1, 0.32, 1] as const;

const lists = {
  pill: "inline-flex w-fit items-center gap-1 rounded-xl border border-white/10 bg-white/[0.03] p-1",
  underline: "flex items-center gap-6 border-b border-white/10",
} as const;

const triggers = {
  pill: "h-8 rounded-lg px-3",
  underline: "h-10 rounded-md",
} as const;

const activeTriggers = {
  pill: "text-white",
  underline: "text-[rgb(var(--neon))]",
} as const;

const indicators = {
  pill: "absolute inset-0 border border-[rgb(var(--neon)/0.45)] bg-[rgb(var(--neon)/0.1)] shadow-[0_0_16px_rgb(var(--neon)/0.25),inset_0_0_12px_rgb(var(--neon)/0.08)]",
  underline:
    "absolute inset-x-0 -bottom-px h-0.5 bg-[rgb(var(--neon))] shadow-[0_0_10px_rgb(var(--neon)/0.6),0_0_2px_rgb(var(--neon)/0.9)]",
} as const;

type TabsVariant = keyof typeof lists;

type TabsContextValue = {
  baseId: string;
  value: string | undefined;
  select: (value: string) => void;
  variant: TabsVariant;
  activationMode: "automatic" | "manual";
  reduceMotion: boolean;
  /** False until the first change, so the initial panel doesn't fade in on load. */
  interacted: boolean;
};

const TabsContext = React.createContext<TabsContextValue | null>(null);

function useTabs(component: string) {
  const context = React.useContext(TabsContext);
  if (!context) throw new Error(`<${component}> must be used inside <Tabs>.`);
  return context;
}

const makeId = (baseId: string, part: "trigger" | "content", value: string) =>
  `${baseId}-${part}-${value.replace(/\s+/g, "-")}`;

export interface TabsProps
  extends Omit<React.HTMLAttributes<HTMLDivElement>, "color" | "defaultValue" | "dir"> {
  /** Palette name or any hex color. Inherits `--neon-accent` when omitted. */
  color?: NeonColor;
  value?: string;
  defaultValue?: string;
  onValueChange?: (value: string) => void;
  variant?: TabsVariant;
  /** "automatic" selects a tab as soon as it gets focus; "manual" waits for Enter or Space. */
  activationMode?: "automatic" | "manual";
}

const Tabs = React.forwardRef<HTMLDivElement, TabsProps>(
  (
    {
      className,
      style,
      color,
      value: valueProp,
      defaultValue,
      onValueChange,
      variant = "pill",
      activationMode = "automatic",
      ...props
    },
    ref,
  ) => {
    const baseId = React.useId();
    const reduceMotion = useReducedMotion() ?? false;
    const [uncontrolled, setUncontrolled] = React.useState(defaultValue);
    const [interacted, setInteracted] = React.useState(false);
    const value = valueProp !== undefined ? valueProp : uncontrolled;

    const select = React.useCallback(
      (next: string) => {
        if (next === value) return;
        setInteracted(true);
        if (valueProp === undefined) setUncontrolled(next);
        onValueChange?.(next);
      },
      [value, valueProp, onValueChange],
    );

    const context = React.useMemo(
      () => ({ baseId, value, select, variant, activationMode, reduceMotion, interacted }),
      [baseId, value, select, variant, activationMode, reduceMotion, interacted],
    );

    return (
      <TabsContext.Provider value={context}>
        <div
          ref={ref}
          style={neonVars(color, style)}
          className={cn("[--neon:var(--neon-accent,34_211_238)]", "flex flex-col gap-4", className)}
          {...props}
        />
      </TabsContext.Provider>
    );
  },
);
Tabs.displayName = "Tabs";

const TabsList = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
  ({ className, onKeyDown, ...props }, ref) => {
    const { variant } = useTabs("TabsList");

    function handleKeyDown(event: React.KeyboardEvent<HTMLDivElement>) {
      onKeyDown?.(event);
      if (event.defaultPrevented) return;

      const tabs = Array.from(
        event.currentTarget.querySelectorAll<HTMLButtonElement>('[role="tab"]:not(:disabled)'),
      );
      const index = tabs.indexOf(event.target as HTMLButtonElement);
      if (index === -1) return;

      const last = tabs.length - 1;
      const next = (
        {
          ArrowRight: index === last ? 0 : index + 1,
          ArrowLeft: index === 0 ? last : index - 1,
          Home: 0,
          End: last,
        } as Record<string, number>
      )[event.key];
      if (next === undefined) return;

      event.preventDefault();
      tabs[next].focus();
    }

    return (
      <div
        ref={ref}
        role="tablist"
        aria-orientation="horizontal"
        onKeyDown={handleKeyDown}
        className={cn(lists[variant], className)}
        {...props}
      />
    );
  },
);
TabsList.displayName = "TabsList";

export interface TabsTriggerProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
  value: string;
}

const TabsTrigger = React.forwardRef<HTMLButtonElement, TabsTriggerProps>(
  ({ className, value, disabled, onClick, onFocus, children, ...props }, ref) => {
    const tabs = useTabs("TabsTrigger");
    const selected = tabs.value === value;

    return (
      <button
        ref={ref}
        type="button"
        role="tab"
        id={makeId(tabs.baseId, "trigger", value)}
        aria-selected={selected}
        aria-controls={makeId(tabs.baseId, "content", value)}
        // Roving focus: only the selected tab is in the Tab order. With nothing selected, all are.
        tabIndex={selected || tabs.value === undefined ? 0 : -1}
        disabled={disabled}
        data-state={selected ? "active" : "inactive"}
        onClick={(event) => {
          onClick?.(event);
          if (!event.defaultPrevented) tabs.select(value);
        }}
        onFocus={(event) => {
          onFocus?.(event);
          if (tabs.activationMode === "automatic" && !selected && !disabled) tabs.select(value);
        }}
        className={cn(
          "relative inline-flex shrink-0 cursor-pointer select-none items-center justify-center whitespace-nowrap text-sm font-medium outline-none",
          "transition-colors duration-150 ease-out",
          "focus-visible:ring-2 focus-visible:ring-[rgb(var(--neon)/0.6)] focus-visible:ring-offset-2 focus-visible:ring-offset-[#05060a]",
          "disabled:pointer-events-none disabled:opacity-40",
          triggers[tabs.variant],
          selected ? activeTriggers[tabs.variant] : "text-white/50 hover:text-white/80",
          className,
        )}
        {...props}
      >
        {selected && (
          <motion.span
            aria-hidden
            layoutId={tabs.reduceMotion ? undefined : `${tabs.baseId}-indicator`}
            initial={false}
            transition={{ duration: 0.3, ease }}
            // Set inline so motion can keep the corners round while the pill stretches.
            style={tabs.variant === "pill" ? { borderRadius: 8 } : undefined}
            className={indicators[tabs.variant]}
          />
        )}
        <span className="relative inline-flex items-center gap-2 [&_svg]:size-4 [&_svg]:shrink-0">
          {children}
        </span>
      </button>
    );
  },
);
TabsTrigger.displayName = "TabsTrigger";

export interface TabsContentProps
  extends Omit<
    React.HTMLAttributes<HTMLDivElement>,
    "onDrag" | "onDragStart" | "onDragEnd" | "onAnimationStart" | "onAnimationEnd" | "onAnimationIteration"
  > {
  value: string;
  /** Keep the panel in the DOM while inactive (hidden), e.g. to preserve form state. */
  forceMount?: boolean;
}

const TabsContent = React.forwardRef<HTMLDivElement, TabsContentProps>(
  ({ className, value, forceMount = false, ...props }, ref) => {
    const tabs = useTabs("TabsContent");
    const selected = tabs.value === value;

    if (!selected && !forceMount) return null;

    return (
      <motion.div
        ref={ref}
        role="tabpanel"
        id={makeId(tabs.baseId, "content", value)}
        aria-labelledby={makeId(tabs.baseId, "trigger", value)}
        tabIndex={0}
        hidden={!selected}
        data-state={selected ? "active" : "inactive"}
        initial={tabs.interacted && !tabs.reduceMotion ? { opacity: 0 } : false}
        animate={{ opacity: selected ? 1 : 0 }}
        transition={tabs.reduceMotion ? { duration: 0 } : { duration: 0.15, ease }}
        className={cn(
          "outline-none focus-visible:ring-2 focus-visible:ring-[rgb(var(--neon)/0.6)] focus-visible:ring-offset-2 focus-visible:ring-offset-[#05060a]",
          className,
          // Tailwind 3's preflight lets a display class like `grid` override the hidden attribute.
          !selected && "hidden",
        )}
        {...props}
      />
    );
  },
);
TabsContent.displayName = "TabsContent";

export { Tabs, TabsList, TabsTrigger, TabsContent };
```


---

# Component: Accordion

> Collapsible sections with smooth height animation.

Category: Data Display. Docs: https://get-neonkit.vercel.app/components/accordion

## Installation

```bash
npx shadcn@latest add https://get-neonkit.vercel.app/r/accordion.json
```

With the `@neonkit` namespace configured: `npx shadcn@latest add @neonkit/accordion`.

npm dependencies: `motion`, `lucide-react`. Also needs `lib/utils.ts` (`cn`) and `lib/neon.ts` (`neonVars`), which the CLI adds.

## Usage

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

<Accordion defaultValue="free">
  <AccordionItem value="free">
    <AccordionTrigger>Is NeonKit free?</AccordionTrigger>
    <AccordionContent>Yes. Every component is MIT licensed.</AccordionContent>
  </AccordionItem>
</Accordion>
```

## Examples

### FAQ

One item at a time. A thin line of light marks the open one.

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

const faqs = [
  {
    value: "free",
    question: "Is NeonKit free?",
    answer:
      "Yes. Every component is MIT licensed. Use it in personal and commercial projects, change whatever you like, and ship it without attribution.",
  },
  {
    value: "tailwind",
    question: "Do I need Tailwind CSS 4?",
    answer:
      "No. The components avoid utilities that were renamed between versions, so the same file works in Tailwind 3.4 and 4. Colors live in arbitrary values, so there is nothing to add to your config.",
  },
  {
    value: "color",
    question: "How do I change the color?",
    answer:
      "Pass color to any component, either a palette name like \"magenta\" or a hex value. To recolor a whole page or section, set --neon-accent on a parent element and every component inside follows it.",
  },
  {
    value: "shadcn",
    question: "Can I use it with shadcn/ui?",
    answer:
      "Yes. The registry is shadcn-compatible, so the shadcn CLI pulls a component and its dependencies into the same components/ui folder as your existing shadcn components.",
  },
];

export default function AccordionDemo() {
  return (
    <Accordion type="single" defaultValue="free" className="max-w-lg">
      {faqs.map((faq) => (
        <AccordionItem key={faq.value} value={faq.value}>
          <AccordionTrigger>{faq.question}</AccordionTrigger>
          <AccordionContent>{faq.answer}</AccordionContent>
        </AccordionItem>
      ))}
    </Accordion>
  );
}
```

### Multiple

type="multiple" lets any number of sections stay open, like a filter panel.

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

const groups = [
  {
    value: "type",
    title: "Job type",
    options: [
      { label: "Full-time", count: 42, checked: true },
      { label: "Contract", count: 18, checked: true },
      { label: "Part-time", count: 7, checked: false },
    ],
  },
  {
    value: "location",
    title: "Location",
    options: [
      { label: "Remote", count: 51, checked: true },
      { label: "Lisbon", count: 9, checked: false },
      { label: "Tokyo", count: 6, checked: false },
      { label: "Berlin", count: 4, checked: false },
    ],
  },
  {
    value: "level",
    title: "Level",
    options: [
      { label: "Mid", count: 21, checked: false },
      { label: "Senior", count: 33, checked: false },
      { label: "Staff", count: 8, checked: false },
    ],
  },
];

export default function AccordionMultiple() {
  return (
    <Accordion type="multiple" defaultValue={["type", "location"]} className="max-w-xs">
      {groups.map((group) => (
        <AccordionItem key={group.value} value={group.value}>
          <AccordionTrigger>{group.title}</AccordionTrigger>
          <AccordionContent className="grid gap-2.5 pr-0">
            {group.options.map((option) => (
              <label key={option.label} className="flex cursor-pointer items-center gap-2.5 text-white/70">
                <input
                  type="checkbox"
                  defaultChecked={option.checked}
                  className="size-3.5 shrink-0 cursor-pointer accent-[rgb(var(--neon))]"
                />
                <span className="flex-1">{option.label}</span>
                <span className="tabular-nums text-xs text-white/35">{option.count}</span>
              </label>
            ))}
          </AccordionContent>
        </AccordionItem>
      ))}
    </Accordion>
  );
}
```

### Controlled

Drive value from state to expand or collapse everything at once.

```tsx
"use client";

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

const steps = [
  {
    value: "dependencies",
    title: "1. Install the dependencies",
    body: "Only the packages a component imports. For Accordion that is motion and lucide-react.",
    code: "npm install motion lucide-react",
  },
  {
    value: "helper",
    title: "2. Add the cn() helper",
    body: "Every component merges classes with clsx and tailwind-merge through a tiny cn() function.",
    code: "npm install clsx tailwind-merge",
  },
  {
    value: "component",
    title: "3. Copy the component",
    body: "Paste the source into components/ui/accordion.tsx, or let the shadcn CLI do it for you.",
    code: "npx shadcn@latest add https://get-neonkit.vercel.app/r/accordion.json",
  },
];

export default function AccordionControlled() {
  const [open, setOpen] = React.useState<string[]>(["dependencies"]);
  const allOpen = open.length === steps.length;

  return (
    <div className="grid w-full max-w-lg gap-3">
      <div className="flex justify-end">
        <Button variant="ghost" size="sm" onClick={() => setOpen(allOpen ? [] : steps.map((step) => step.value))}>
          {allOpen ? "Collapse all" : "Expand all"}
        </Button>
      </div>
      <Accordion type="multiple" value={open} onValueChange={setOpen}>
        {steps.map((step) => (
          <AccordionItem key={step.value} value={step.value}>
            <AccordionTrigger>{step.title}</AccordionTrigger>
            <AccordionContent className="grid gap-3">
              <p>{step.body}</p>
              <code className="block overflow-x-auto whitespace-nowrap rounded-lg border border-white/10 bg-[#0a0b11] px-3 py-2 font-mono text-xs text-white/80">
                {step.code}
              </code>
            </AccordionContent>
          </AccordionItem>
        ))}
      </Accordion>
    </div>
  );
}
```

## API reference

### Accordion

Renders a div and accepts every native div attribute.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `type` | `"single" \| "multiple"` | `"single"` | How many items can be open at once. |
| `defaultValue` | `string \| string[]` | — | Initially open item(s) when uncontrolled. A string for single, an array for multiple. |
| `value` | `string \| string[]` | — | Open item(s) when controlled. "" means none in single mode. |
| `onValueChange` | `(value: string \| string[]) => void` | — | Called with the new value, typed to match type. |
| `collapsible` | `boolean` | `true` | Single only. Lets the open item close again. |
| `color` | `NeonColor` | `inherited` | Palette name or hex. Falls back to --neon-accent, then cyan. |

### AccordionItem

Renders a div. Items are separated by hairlines.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `value` | `string` | — | Unique id for the item. |
| `disabled` | `boolean` | `false` | Locks the item in its current state. |

### AccordionTrigger, AccordionContent

The trigger is a button inside an h3; the content is a div that animates its height.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `className` | `string` | — | Merged with the defaults. |

## Accessibility

- Each trigger is a real button with aria-expanded and aria-controls, wrapped in an h3.
- Content has role="region" and is labelled by its trigger.
- Up and Down arrows move between triggers; Home and End jump to the first and last.
- When collapsible is false, the open trigger reports aria-disabled so screen readers know it cannot close.
- Height and opacity animations are skipped when the user prefers reduced motion.

## Source

`components/ui/accordion.tsx`

```tsx
"use client";

import * as React from "react";
import { AnimatePresence, motion, useReducedMotion } from "motion/react";
import { ChevronDown } from "lucide-react";

import { cn } from "@/lib/utils";
import { neonVars, type NeonColor } from "@/lib/neon";

type AccordionContextValue = {
  open: string[];
  toggle: (value: string) => void;
  /** True for the open item of a single, non-collapsible accordion. */
  isLocked: (value: string) => boolean;
  reduceMotion: boolean;
};

type AccordionItemContextValue = {
  value: string;
  open: boolean;
  disabled: boolean;
  triggerId: string;
  contentId: string;
};

const AccordionContext = React.createContext<AccordionContextValue | null>(null);
const AccordionItemContext = React.createContext<AccordionItemContextValue | null>(null);

function useAccordion(component: string) {
  const context = React.useContext(AccordionContext);
  if (!context) throw new Error(`<${component}> must be used inside <Accordion>.`);
  return context;
}

function useAccordionItem(component: string) {
  const context = React.useContext(AccordionItemContext);
  if (!context) throw new Error(`<${component}> must be used inside <AccordionItem>.`);
  return context;
}

type AccordionBaseProps = Omit<React.HTMLAttributes<HTMLDivElement>, "color" | "defaultValue" | "dir"> & {
  /** Palette name or any hex color. Inherits `--neon-accent` when omitted. */
  color?: NeonColor;
};

export type AccordionSingleProps = AccordionBaseProps & {
  /** One item open at a time. */
  type?: "single";
  value?: string;
  defaultValue?: string;
  onValueChange?: (value: string) => void;
  /** Lets the open item close again. */
  collapsible?: boolean;
};

export type AccordionMultipleProps = AccordionBaseProps & {
  /** Any number of items open at once. */
  type: "multiple";
  value?: string[];
  defaultValue?: string[];
  onValueChange?: (value: string[]) => void;
  collapsible?: never;
};

export type AccordionProps = AccordionSingleProps | AccordionMultipleProps;

type AccordionImplProps = AccordionBaseProps & {
  type?: "single" | "multiple";
  value?: string | string[];
  defaultValue?: string | string[];
  onValueChange?: (value: never) => void;
  collapsible?: boolean;
};

const toArray = (value: string | string[]) => (Array.isArray(value) ? value : value ? [value] : []);

const Accordion = React.forwardRef<HTMLDivElement, AccordionProps>((props, ref) => {
  const {
    className,
    style,
    color,
    type = "single",
    value: valueProp,
    defaultValue,
    onValueChange,
    collapsible = true,
    onKeyDown,
    ...rest
  }: AccordionImplProps = props;

  const reduceMotion = useReducedMotion() ?? false;
  const [uncontrolled, setUncontrolled] = React.useState(() => toArray(defaultValue ?? []));
  const open = valueProp !== undefined ? toArray(valueProp) : uncontrolled;

  function toggle(item: string) {
    const isOpen = open.includes(item);
    let next: string[];
    if (type === "multiple") {
      next = isOpen ? open.filter((value) => value !== item) : [...open, item];
    } else {
      if (isOpen && !collapsible) return;
      next = isOpen ? [] : [item];
    }
    if (valueProp === undefined) setUncontrolled(next);
    (onValueChange as ((value: string | string[]) => void) | undefined)?.(
      type === "multiple" ? next : (next[0] ?? ""),
    );
  }

  const context: AccordionContextValue = {
    open,
    toggle,
    isLocked: (item) => type === "single" && !collapsible && open.includes(item),
    reduceMotion,
  };

  function handleKeyDown(event: React.KeyboardEvent<HTMLDivElement>) {
    onKeyDown?.(event);
    if (event.defaultPrevented) return;

    const root = event.currentTarget;
    const triggers = Array.from(
      root.querySelectorAll<HTMLButtonElement>("[data-accordion-trigger]:not(:disabled)"),
    ).filter((trigger) => trigger.closest("[data-accordion]") === root);
    const index = triggers.indexOf(event.target as HTMLButtonElement);
    if (index === -1) return;

    const last = triggers.length - 1;
    const next = (
      {
        ArrowDown: index === last ? 0 : index + 1,
        ArrowUp: index === 0 ? last : index - 1,
        Home: 0,
        End: last,
      } as Record<string, number>
    )[event.key];
    if (next === undefined) return;

    event.preventDefault();
    triggers[next].focus();
  }

  return (
    <AccordionContext.Provider value={context}>
      <div
        ref={ref}
        data-accordion=""
        onKeyDown={handleKeyDown}
        style={neonVars(color, style)}
        className={cn("[--neon:var(--neon-accent,34_211_238)]", "w-full", className)}
        {...rest}
      />
    </AccordionContext.Provider>
  );
});
Accordion.displayName = "Accordion";

export interface AccordionItemProps extends React.HTMLAttributes<HTMLDivElement> {
  value: string;
  disabled?: boolean;
}

const AccordionItem = React.forwardRef<HTMLDivElement, AccordionItemProps>(
  ({ className, value, disabled = false, children, ...props }, ref) => {
    const accordion = useAccordion("AccordionItem");
    const id = React.useId();
    const open = accordion.open.includes(value);
    const item = React.useMemo(
      () => ({ value, open, disabled, triggerId: `${id}-trigger`, contentId: `${id}-content` }),
      [value, open, disabled, id],
    );

    return (
      <AccordionItemContext.Provider value={item}>
        <div
          ref={ref}
          data-state={open ? "open" : "closed"}
          data-disabled={disabled ? "" : undefined}
          className={cn("relative border-b border-white/10 last:border-b-0", className)}
          {...props}
        >
          <span
            aria-hidden
            className={cn(
              "pointer-events-none absolute bottom-4 left-0 top-4 w-px rounded-full bg-[rgb(var(--neon))] shadow-[0_0_8px_rgb(var(--neon)/0.8)]",
              "transition-opacity duration-200 ease-out motion-reduce:transition-none",
              open ? "opacity-100" : "opacity-0",
            )}
          />
          {children}
        </div>
      </AccordionItemContext.Provider>
    );
  },
);
AccordionItem.displayName = "AccordionItem";

const AccordionTrigger = React.forwardRef<HTMLButtonElement, React.ButtonHTMLAttributes<HTMLButtonElement>>(
  ({ className, onClick, children, ...props }, ref) => {
    const accordion = useAccordion("AccordionTrigger");
    const item = useAccordionItem("AccordionTrigger");
    const locked = accordion.isLocked(item.value);

    return (
      <h3 className="flex">
        <button
          ref={ref}
          type="button"
          id={item.triggerId}
          aria-expanded={item.open}
          aria-controls={item.contentId}
          aria-disabled={locked || undefined}
          disabled={item.disabled}
          data-accordion-trigger=""
          data-state={item.open ? "open" : "closed"}
          onClick={(event) => {
            onClick?.(event);
            if (!event.defaultPrevented) accordion.toggle(item.value);
          }}
          className={cn(
            "group/trigger flex flex-1 cursor-pointer items-center justify-between gap-4 rounded-md py-4 pl-4 text-left text-sm font-medium text-white/90 outline-none",
            "transition-colors duration-150 ease-out hover:text-white",
            "focus-visible:ring-2 focus-visible:ring-[rgb(var(--neon)/0.6)] focus-visible:ring-offset-2 focus-visible:ring-offset-[#05060a]",
            "disabled:cursor-not-allowed disabled:opacity-40",
            locked && "cursor-default",
            className,
          )}
          {...props}
        >
          {children}
          <ChevronDown
            aria-hidden
            className={cn(
              "size-4 shrink-0 transition-[transform,color] duration-[220ms] ease-[cubic-bezier(0.23,1,0.32,1)] motion-reduce:transition-none",
              item.open ? "rotate-180 text-white/70" : "text-white/40 group-hover/trigger:text-white/70",
            )}
          />
        </button>
      </h3>
    );
  },
);
AccordionTrigger.displayName = "AccordionTrigger";

const AccordionContent = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
  ({ className, ...props }, ref) => {
    const { reduceMotion } = useAccordion("AccordionContent");
    const item = useAccordionItem("AccordionContent");

    return (
      <AnimatePresence initial={false}>
        {item.open && (
          <motion.div
            key="content"
            initial={{ height: 0, opacity: 0 }}
            animate={{ height: "auto", opacity: 1 }}
            exit={{ height: 0, opacity: 0 }}
            transition={reduceMotion ? { duration: 0 } : { duration: 0.22, ease: [0.23, 1, 0.32, 1] }}
            className="overflow-hidden"
          >
            <div
              ref={ref}
              role="region"
              id={item.contentId}
              aria-labelledby={item.triggerId}
              className={cn("pb-4 pl-4 pr-8 text-sm leading-relaxed text-white/55", className)}
              {...props}
            />
          </motion.div>
        )}
      </AnimatePresence>
    );
  },
);
AccordionContent.displayName = "AccordionContent";

export { Accordion, AccordionItem, AccordionTrigger, AccordionContent };
```


---

# Component: Progress

> Linear and circular progress with a moving highlight.

Category: Feedback. Docs: https://get-neonkit.vercel.app/components/progress

## Installation

```bash
npx shadcn@latest add https://get-neonkit.vercel.app/r/progress.json
```

With the `@neonkit` namespace configured: `npx shadcn@latest add @neonkit/progress`.

npm dependencies: none. Also needs `lib/utils.ts` (`cn`) and `lib/neon.ts` (`neonVars`), which the CLI adds.

## Usage

```tsx
import { Progress } from "@/components/ui/progress"

<Progress value={64} label="Uploading brand-assets.zip" showValue />
```

## Examples

### Upload list

The sheen stops once a bar is full, so finished work goes quiet.

```tsx
"use client";

import * as React from "react";
import { FileArchive, FileImage, FileText } from "lucide-react";
import { Progress } from "@/components/ui/progress";

const files = [
  { name: "q3-board-review.pdf", size: 8.4, icon: FileText, start: 100, rate: 0 },
  { name: "launch-hero@2x.png", size: 14.2, icon: FileImage, start: 38, rate: 6 },
  { name: "brand-assets.zip", size: 126, icon: FileArchive, start: 9, rate: 2.6 },
];

// Uneven steps so the bars move like a real network, not a metronome.
const steps = [1.4, 0.6, 1.1, 0.3, 1.6, 0.9, 0.5, 1.2];
const LOOP = 44;

function travelled(tick: number, offset: number) {
  let total = 0;
  for (let i = 0; i < tick; i++) total += steps[(i + offset) % steps.length];
  return total;
}

export default function ProgressDemo() {
  const [tick, setTick] = React.useState(0);

  React.useEffect(() => {
    const id = setInterval(() => setTick((t) => (t + 1) % LOOP), 500);
    return () => clearInterval(id);
  }, []);

  const uploads = files.map((file, i) => ({
    ...file,
    value: Math.min(100, file.start + file.rate * travelled(tick, i * 3)),
  }));
  const complete = uploads.filter((file) => file.value === 100).length;

  return (
    <div className="w-full max-w-md rounded-xl border border-white/10 bg-white/[0.03] p-5">
      <div className="mb-5 flex items-baseline justify-between gap-4">
        <h3 className="text-sm font-medium text-white/90">Uploads</h3>
        <span className="text-xs tabular-nums text-white/45">
          {complete} of {files.length} complete
        </span>
      </div>
      <ul className="grid gap-5">
        {uploads.map(({ name, size, icon: Icon, value }) => {
          const done = value === 100;
          return (
            <li key={name} className="flex items-start gap-3">
              <span className="flex size-9 shrink-0 items-center justify-center rounded-lg border border-white/10 bg-white/[0.03] text-white/50">
                <Icon className="size-4" />
              </span>
              <div className="grid min-w-0 flex-1 gap-1.5">
                <Progress
                  value={value}
                  label={name}
                  showValue
                  color={done ? "green" : undefined}
                />
                <p className="text-xs tabular-nums text-white/45">
                  {done
                    ? `${size} MB · Uploaded`
                    : `${((size * value) / 100).toFixed(1)} of ${size} MB`}
                </p>
              </div>
            </li>
          );
        })}
      </ul>
    </div>
  );
}
```

### Indeterminate

Leave value undefined when you can't measure the work yet.

```tsx
"use client";

import * as React from "react";
import { CircularProgress, Progress } from "@/components/ui/progress";

const stages = [
  "Cloning repository",
  "Installing dependencies",
  "Building",
  "Uploading build output",
  "Assigning domains",
];

function formatElapsed(seconds: number) {
  const m = String(Math.floor(seconds / 60)).padStart(2, "0");
  const s = String(seconds % 60).padStart(2, "0");
  return `${m}:${s}`;
}

export default function ProgressIndeterminate() {
  const [elapsed, setElapsed] = React.useState(0);

  React.useEffect(() => {
    const id = setInterval(() => setElapsed((s) => s + 1), 1000);
    return () => clearInterval(id);
  }, []);

  const stage = stages[Math.floor(elapsed / 3) % stages.length];

  return (
    <div className="w-full max-w-md rounded-xl border border-white/10 bg-white/[0.03] p-5">
      <div className="mb-4 flex items-center gap-2.5">
        <CircularProgress size={14} thickness={2} aria-hidden />
        <span className="text-sm font-medium text-white/90">acme-web</span>
        <span className="ml-auto text-xs tabular-nums text-white/45">
          {formatElapsed(elapsed)}
        </span>
      </div>
      <Progress label="Deploying to production" />
      <div className="mt-3 flex items-center justify-between gap-4 text-xs text-white/45">
        <span className="truncate">{stage}…</span>
        <span className="shrink-0 font-mono">main · 7f3c2a1</span>
      </div>
    </div>
  );
}
```

### Circular

CircularProgress renders children in the center, or the percentage with showValue.

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

const usage = [
  { label: "Storage", value: 72, detail: "36 of 50 GB" },
  { label: "Bandwidth", value: 41, detail: "410 GB of 1 TB" },
  { label: "Build minutes", value: 90, detail: "5,400 of 6,000", color: "amber" },
];

export default function ProgressCircular() {
  return (
    <div className="flex w-full flex-wrap justify-center gap-3">
      {usage.map(({ label, value, detail, color }) => (
        <div
          key={label}
          className="flex w-36 flex-col items-center gap-4 rounded-xl border border-white/10 bg-white/[0.03] px-3 pt-5 pb-4 text-center"
        >
          <CircularProgress value={value} size={76} color={color} aria-label={`${label} used`}>
            <span className="grid gap-1 leading-none">
              <span className="text-base">{value}%</span>
              <span className="text-[10px] font-normal text-white/45">used</span>
            </span>
          </CircularProgress>
          <div className="grid gap-0.5">
            <p className="text-sm text-white/90">{label}</p>
            <p className="text-xs tabular-nums text-white/45">{detail}</p>
          </div>
        </div>
      ))}
    </div>
  );
}
```

### Sizes

```tsx
import { CircularProgress, Progress } from "@/components/ui/progress";

export default function ProgressSizes() {
  return (
    <div className="grid w-full max-w-md gap-8">
      <div className="grid gap-5">
        <Progress size="sm" value={32} label="Small" showValue />
        <Progress size="md" value={58} label="Medium" showValue />
        <Progress size="lg" value={84} label="Large" showValue />
      </div>
      <div className="flex items-center justify-center gap-6">
        <CircularProgress size={40} thickness={4} value={32} />
        <CircularProgress size={56} thickness={5} value={58} showValue />
        <CircularProgress size={72} thickness={6} value={84} showValue />
      </div>
    </div>
  );
}
```

## API reference

### Progress

Also accepts every native div attribute.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `value` | `number` | — | Current value. Undefined renders an indeterminate bar. |
| `max` | `number` | `100` | Value that counts as complete. |
| `color` | `NeonColor` | `inherited` | Palette name or hex. Falls back to --neon-accent, then cyan. |
| `size` | `"sm" \| "md" \| "lg"` | `"md"` | Track height: 4, 8 or 12px. |
| `indeterminate` | `boolean` | `false` | Slides a segment of light instead of showing the value. |
| `label` | `ReactNode` | — | Text above the track, also used as the accessible name. |
| `showValue` | `boolean` | `false` | Shows the rounded percentage at the right of the label row. |

### CircularProgress

Also accepts every native div attribute.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `value` | `number` | — | Current value. Undefined renders a spinning arc. |
| `max` | `number` | `100` | Value that counts as complete. |
| `size` | `number` | `64` | Diameter in pixels. |
| `thickness` | `number` | `6` | Stroke width in pixels. |
| `color` | `NeonColor` | `inherited` | Palette name or hex. Falls back to --neon-accent, then cyan. |
| `showValue` | `boolean` | `false` | Renders the percentage in the center. |
| `indeterminate` | `boolean` | `false` | Spins a fixed arc instead of showing the value. |
| `children` | `ReactNode` | — | Custom center content. Replaces the percentage. |

## Accessibility

- Both components render role="progressbar" with aria-valuemin, aria-valuemax and aria-valuenow, and drop aria-valuenow while indeterminate.
- label becomes the accessible name through aria-labelledby; without one, pass aria-label or it falls back to "Progress".
- The sheen is hidden and the indeterminate animations slow down when the user prefers reduced motion.

## Source

`components/ui/progress.tsx`

```tsx
"use client";

import * as React from "react";

import { cn } from "@/lib/utils";
import { neonVars, type NeonColor } from "@/lib/neon";

const keyframes = `
@keyframes nk-progress-sheen { 0% { transform: translateX(-100%); } 60%, 100% { transform: translateX(300%); } }
@keyframes nk-progress-slide { 0% { transform: translateX(-100%); } 100% { transform: translateX(250%); } }
`;

const sizes = {
  sm: {
    track: "h-1",
    text: "text-xs",
    gap: "gap-1.5",
    glow: "shadow-[0_0_6px_rgb(var(--neon)/0.55)]",
  },
  md: {
    track: "h-2",
    text: "text-sm",
    gap: "gap-2",
    glow: "shadow-[0_0_10px_rgb(var(--neon)/0.5)]",
  },
  lg: {
    track: "h-3",
    text: "text-sm",
    gap: "gap-2.5",
    glow: "shadow-[0_0_12px_rgb(var(--neon)/0.45)]",
  },
} as const;

function toPercent(value: number, max: number) {
  if (!(max > 0)) return 0;
  return Math.min(100, Math.max(0, (value / max) * 100));
}

export interface ProgressProps
  extends Omit<React.HTMLAttributes<HTMLDivElement>, "color"> {
  /** Current value. Leave it undefined for an indeterminate bar. */
  value?: number;
  max?: number;
  /** Palette name or any hex color. Inherits `--neon-accent` when omitted. */
  color?: NeonColor;
  size?: keyof typeof sizes;
  /** Slide a segment of light instead of showing a value. */
  indeterminate?: boolean;
  /** Shown above the track and used as the accessible name. */
  label?: React.ReactNode;
  /** Show the percentage at the right of the label row. */
  showValue?: boolean;
}

const Progress = React.forwardRef<HTMLDivElement, ProgressProps>(
  (
    {
      className,
      style,
      value,
      max = 100,
      color,
      size = "md",
      indeterminate = false,
      label,
      showValue = false,
      ...props
    },
    ref,
  ) => {
    const labelId = React.useId();
    const isIndeterminate = indeterminate || value == null;
    const percent = isIndeterminate ? 0 : toPercent(value, max);
    const hasName = props["aria-label"] != null || props["aria-labelledby"] != null;
    const hasLabel = label != null && label !== false;
    const s = sizes[size];

    return (
      <div
        ref={ref}
        role="progressbar"
        aria-valuemin={0}
        aria-valuemax={max}
        aria-valuenow={isIndeterminate ? undefined : Math.min(max, Math.max(0, value))}
        aria-labelledby={!hasName && hasLabel ? labelId : undefined}
        aria-label={!hasName && !hasLabel ? "Progress" : undefined}
        data-state={isIndeterminate ? "indeterminate" : percent >= 100 ? "complete" : "loading"}
        style={neonVars(color, style)}
        className={cn(
          "[--neon:var(--neon-accent,34_211_238)]",
          "grid w-full",
          s.gap,
          className,
        )}
        {...props}
      >
        <style>{keyframes}</style>
        {(hasLabel || showValue) && (
          <div className={cn("flex items-baseline justify-between gap-3", s.text)}>
            <span id={labelId} className="min-w-0 truncate text-white/90">
              {label}
            </span>
            {showValue && !isIndeterminate && (
              <span aria-hidden className="shrink-0 tabular-nums text-white/55">
                {Math.round(percent)}%
              </span>
            )}
          </div>
        )}
        <div
          className={cn(
            "relative w-full rounded-full bg-white/[0.06] shadow-[inset_0_0_0_1px_rgb(255_255_255/0.04)]",
            s.track,
          )}
        >
          {isIndeterminate ? (
            // The mask fades the segment in and out at the ends without
            // clipping its glow above and below the track.
            <div className="absolute inset-x-0 -inset-y-4 [-webkit-mask-image:linear-gradient(90deg,transparent,#000_15%,#000_85%,transparent)] [mask-image:linear-gradient(90deg,transparent,#000_15%,#000_85%,transparent)]">
              <div
                className={cn(
                  "absolute inset-y-4 left-0 w-2/5 rounded-full bg-[rgb(var(--neon))]",
                  "[animation:nk-progress-slide_1.6s_cubic-bezier(0.65,0,0.35,1)_infinite] motion-reduce:[animation-duration:4s]",
                  s.glow,
                )}
              />
            </div>
          ) : (
            <div
              style={{ width: `${percent}%` }}
              className={cn(
                "relative h-full overflow-hidden rounded-full bg-[rgb(var(--neon))]",
                "transition-[width,opacity,background-color,box-shadow] duration-500 ease-[cubic-bezier(0.23,1,0.32,1)]",
                percent === 0 && "opacity-0",
                s.glow,
              )}
            >
              {percent < 100 && (
                <span className="absolute inset-y-0 left-0 w-1/3 bg-[linear-gradient(90deg,transparent,rgb(255_255_255/0.45),transparent)] [animation:nk-progress-sheen_2.8s_ease-in-out_infinite] motion-reduce:hidden" />
              )}
            </div>
          )}
        </div>
      </div>
    );
  },
);
Progress.displayName = "Progress";

export interface CircularProgressProps
  extends Omit<React.HTMLAttributes<HTMLDivElement>, "color"> {
  /** Current value. Leave it undefined for a spinning arc. */
  value?: number;
  max?: number;
  /** Diameter in pixels. */
  size?: number;
  /** Stroke width in pixels. */
  thickness?: number;
  /** Palette name or any hex color. Inherits `--neon-accent` when omitted. */
  color?: NeonColor;
  /** Render the percentage in the center. Children replace it. */
  showValue?: boolean;
  indeterminate?: boolean;
}

const CircularProgress = React.forwardRef<HTMLDivElement, CircularProgressProps>(
  (
    {
      className,
      style,
      value,
      max = 100,
      size = 64,
      thickness = 6,
      color,
      showValue = false,
      indeterminate = false,
      children,
      ...props
    },
    ref,
  ) => {
    const isIndeterminate = indeterminate || value == null;
    const percent = isIndeterminate ? 28 : toPercent(value, max);
    const hasName = props["aria-label"] != null || props["aria-labelledby"] != null;

    const center = size / 2;
    const radius = Math.max(0, (size - thickness) / 2);
    const circumference = 2 * Math.PI * radius;
    const content =
      children ?? (showValue && !isIndeterminate ? `${Math.round(percent)}%` : null);

    return (
      <div
        ref={ref}
        role="progressbar"
        aria-valuemin={0}
        aria-valuemax={max}
        aria-valuenow={isIndeterminate ? undefined : Math.min(max, Math.max(0, value))}
        aria-label={hasName ? undefined : "Progress"}
        data-state={isIndeterminate ? "indeterminate" : percent >= 100 ? "complete" : "loading"}
        style={neonVars(color, { width: size, height: size, ...style })}
        className={cn(
          "[--neon:var(--neon-accent,34_211_238)]",
          "relative inline-grid shrink-0 place-items-center",
          className,
        )}
        {...props}
      >
        <svg
          aria-hidden
          width={size}
          height={size}
          viewBox={`0 0 ${size} ${size}`}
          fill="none"
          className={cn(
            "absolute inset-0 -rotate-90 overflow-visible [filter:drop-shadow(0_0_5px_rgb(var(--neon)/0.6))]",
            isIndeterminate &&
              "animate-spin [animation-duration:1s] motion-reduce:[animation-duration:3s]",
          )}
        >
          <circle
            cx={center}
            cy={center}
            r={radius}
            strokeWidth={thickness}
            className="stroke-white/[0.08]"
          />
          <circle
            cx={center}
            cy={center}
            r={radius}
            strokeWidth={thickness}
            strokeLinecap="round"
            strokeDasharray={circumference}
            strokeDashoffset={circumference * (1 - percent / 100)}
            className={cn(
              "[stroke:rgb(var(--neon))] transition-[stroke-dashoffset,stroke,opacity] duration-500 ease-[cubic-bezier(0.23,1,0.32,1)]",
              percent === 0 && "opacity-0",
            )}
          />
        </svg>
        {content != null && (
          <span
            className="relative font-medium tabular-nums text-white/90"
            style={{ fontSize: Math.max(10, Math.round(size * 0.2)) }}
          >
            {content}
          </span>
        )}
      </div>
    );
  },
);
CircularProgress.displayName = "CircularProgress";

export { Progress, CircularProgress };
```


---

# Component: Spinner

> Ring, dots and bars loaders in any neon color.

Category: Feedback. Docs: https://get-neonkit.vercel.app/components/spinner

## Installation

```bash
npx shadcn@latest add https://get-neonkit.vercel.app/r/spinner.json
```

With the `@neonkit` namespace configured: `npx shadcn@latest add @neonkit/spinner`.

npm dependencies: none. Also needs `lib/utils.ts` (`cn`) and `lib/neon.ts` (`neonVars`), which the CLI adds.

## Usage

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

<Spinner variant="orbit" label="Loading invoices" />
```

## Examples

### Variants

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

const variants = ["ring", "dots", "bars", "orbit"] as const;

export default function SpinnerDemo() {
  return (
    <div className="grid grid-cols-2 gap-3 sm:grid-cols-4">
      {variants.map((variant) => (
        <div
          key={variant}
          className="flex w-28 flex-col items-center gap-4 rounded-xl border border-white/10 bg-white/[0.03] pt-7 pb-4"
        >
          <Spinner variant={variant} size="lg" />
          <span className="font-mono text-xs text-white/45">{variant}</span>
        </div>
      ))}
    </div>
  );
}
```

### Sizes

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

const variants = ["ring", "dots", "bars", "orbit"] as const;
const sizes = ["sm", "md", "lg"] as const;

export default function SpinnerSizes() {
  return (
    <div className="grid grid-cols-[auto_repeat(3,3rem)] items-center gap-x-4 gap-y-5">
      <span />
      {sizes.map((size) => (
        <span key={size} className="text-center font-mono text-xs text-white/45">
          {size}
        </span>
      ))}
      {variants.map((variant) => (
        <div key={variant} className="contents">
          <span className="pr-2 font-mono text-xs text-white/45">{variant}</span>
          {sizes.map((size) => (
            <div key={size} className="flex justify-center">
              <Spinner variant={variant} size={size} />
            </div>
          ))}
        </div>
      ))}
    </div>
  );
}
```

### In a button

The spinner picks up the button's color. Hide it from assistive tech and set aria-busy on the button.

```tsx
"use client";

import * as React from "react";
import { Button } from "@/components/ui/button";
import { Spinner } from "@/components/ui/spinner";

function usePending(ms: number) {
  const [pending, setPending] = React.useState(false);
  const start = () => {
    if (pending) return;
    setPending(true);
    setTimeout(() => setPending(false), ms);
  };
  return [pending, start] as const;
}

export default function SpinnerButton() {
  const [checking, runChecks] = usePending(2400);
  const [publishing, publish] = usePending(2000);

  return (
    <div className="flex flex-wrap items-center justify-center gap-3">
      <Button aria-busy={checking || undefined} onClick={runChecks}>
        {checking && <Spinner size="sm" aria-hidden />}
        {checking ? "Running checks" : "Run checks"}
      </Button>
      <Button
        variant="soft"
        color="violet"
        aria-busy={publishing || undefined}
        onClick={publish}
      >
        {publishing && <Spinner size="sm" variant="dots" aria-hidden />}
        {publishing ? "Publishing" : "Publish post"}
      </Button>
    </div>
  );
}
```

### Inline status

Next to visible text, the wrapper carries role="status" and the spinner is aria-hidden.

```tsx
"use client";

import * as React from "react";
import { Check } from "lucide-react";
import { Spinner } from "@/components/ui/spinner";

export default function SpinnerInline() {
  const [syncing, setSyncing] = React.useState(true);

  React.useEffect(() => {
    const id = setInterval(() => setSyncing((s) => !s), 2600);
    return () => clearInterval(id);
  }, []);

  return (
    <div className="flex w-full max-w-md items-center justify-between gap-4 rounded-xl border border-white/10 bg-white/[0.03] px-4 py-3">
      <div className="min-w-0">
        <p className="truncate text-sm font-medium text-white/90">Q4 launch plan</p>
        <p className="text-xs text-white/45">Edited by Maya Chen</p>
      </div>
      <p role="status" className="flex shrink-0 items-center gap-2 text-xs text-white/55">
        {syncing ? (
          <>
            <Spinner size="sm" variant="orbit" aria-hidden />
            Syncing…
          </>
        ) : (
          <>
            <Check className="size-4 text-white/40" aria-hidden />
            All changes saved
          </>
        )}
      </p>
    </div>
  );
}
```

## API reference

### Spinner

Also accepts every native span attribute.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `variant` | `"ring" \| "dots" \| "bars" \| "orbit"` | `"ring"` | Shape of the loader. |
| `color` | `NeonColor` | `inherited` | Palette name or hex. Falls back to --neon-accent, then cyan. |
| `size` | `"sm" \| "md" \| "lg"` | `"md"` | 16, 24 or 36px square. |
| `label` | `string` | `"Loading"` | Visually hidden text announced to screen readers. |

## Accessibility

- Spinner renders role="status" with a visually hidden label, so screen readers announce it once when it appears.
- When the spinner sits beside text that already says what is happening, pass aria-hidden so the message isn't read twice.
- With reduced motion, every variant runs three times slower instead of stopping, so it still reads as busy.

## Source

`components/ui/spinner.tsx`

```tsx
import * as React from "react";

import { cn } from "@/lib/utils";
import { neonVars, type NeonColor } from "@/lib/neon";

const keyframes = `
@keyframes nk-spinner-dot { 0%, 80%, 100% { opacity: 0.25; transform: scale(0.75); } 40% { opacity: 1; transform: scale(1); } }
@keyframes nk-spinner-bar { 0%, 100% { opacity: 0.45; transform: scaleY(0.35); } 50% { opacity: 1; transform: scaleY(1); } }
`;

const sizes = {
  sm: { box: "size-4", stroke: 3, dot: 3, gap: 2, bar: 2, orbit: 4 },
  md: { box: "size-6", stroke: 2.5, dot: 5, gap: 3, bar: 3, orbit: 5 },
  lg: { box: "size-9", stroke: 2, dot: 7, gap: 4, bar: 4, orbit: 7 },
} as const;

type SpinnerSize = keyof typeof sizes;

// Every duration is multiplied by --nk-spinner-slow, which reduced motion
// raises, so the spinner slows down and still reads as busy.
const seconds = (s: number) => `calc(${s}s * var(--nk-spinner-slow))`;

const RING_RADIUS = 9;
const RING_CIRCUMFERENCE = 2 * Math.PI * RING_RADIUS;

function Ring({ size }: { size: SpinnerSize }) {
  return (
    <svg
      aria-hidden
      viewBox="0 0 24 24"
      fill="none"
      strokeWidth={sizes[size].stroke}
      className="size-full animate-spin [animation-duration:calc(0.8s*var(--nk-spinner-slow))] [filter:drop-shadow(0_0_3px_rgb(var(--neon)/0.8))]"
    >
      <circle cx={12} cy={12} r={RING_RADIUS} className="[stroke:rgb(var(--neon)/0.15)]" />
      <circle
        cx={12}
        cy={12}
        r={RING_RADIUS}
        strokeLinecap="round"
        strokeDasharray={`${RING_CIRCUMFERENCE * 0.28} ${RING_CIRCUMFERENCE}`}
        className="[stroke:rgb(var(--neon))]"
      />
    </svg>
  );
}

function Dots({ size }: { size: SpinnerSize }) {
  const { dot, gap } = sizes[size];
  return (
    <span aria-hidden className="flex items-center" style={{ gap }}>
      {[0, 0.16, 0.32].map((delay) => (
        <span
          key={delay}
          className="rounded-full bg-[rgb(var(--neon))] shadow-[0_0_6px_rgb(var(--neon)/0.7)]"
          style={{
            width: dot,
            height: dot,
            animation: `nk-spinner-dot ${seconds(1.2)} ease-in-out ${seconds(delay)} infinite both`,
          }}
        />
      ))}
    </span>
  );
}

function Bars({ size }: { size: SpinnerSize }) {
  const { bar, gap } = sizes[size];
  return (
    <span aria-hidden className="flex h-3/4 items-center" style={{ gap }}>
      {/* Negative delays start each bar mid-cycle, so the wave is already moving on mount. */}
      {[-1, -0.85, -0.7, -0.55].map((delay) => (
        <span
          key={delay}
          className="h-full rounded-full bg-[rgb(var(--neon))] shadow-[0_0_6px_rgb(var(--neon)/0.6)]"
          style={{
            width: bar,
            animation: `nk-spinner-bar ${seconds(1)} ease-in-out ${seconds(delay)} infinite`,
          }}
        />
      ))}
    </span>
  );
}

function Orbit({ size }: { size: SpinnerSize }) {
  const { orbit } = sizes[size];
  return (
    <>
      <span
        aria-hidden
        className="absolute rounded-full border border-[rgb(var(--neon)/0.18)]"
        style={{ inset: (orbit - 1) / 2 }}
      />
      <span
        aria-hidden
        className="absolute inset-0 animate-spin [animation-duration:calc(1.1s*var(--nk-spinner-slow))]"
      >
        <span
          className="absolute top-0 left-1/2 rounded-full bg-[rgb(var(--neon))] shadow-[0_0_8px_rgb(var(--neon)/0.9)]"
          style={{ width: orbit, height: orbit, marginLeft: -orbit / 2 }}
        />
      </span>
    </>
  );
}

const variants = { ring: Ring, dots: Dots, bars: Bars, orbit: Orbit } as const;

export interface SpinnerProps
  extends Omit<React.HTMLAttributes<HTMLSpanElement>, "color"> {
  /** Palette name or any hex color. Inherits `--neon-accent` when omitted. */
  color?: NeonColor;
  variant?: keyof typeof variants;
  size?: SpinnerSize;
  /** Announced to screen readers, visually hidden. */
  label?: string;
}

const Spinner = React.forwardRef<HTMLSpanElement, SpinnerProps>(
  (
    { className, style, color, variant = "ring", size = "md", label = "Loading", ...props },
    ref,
  ) => {
    const Visual = variants[variant];

    return (
      <span
        ref={ref}
        role="status"
        style={neonVars(color, style)}
        className={cn(
          "[--neon:var(--neon-accent,34_211_238)]",
          "[--nk-spinner-slow:1] motion-reduce:[--nk-spinner-slow:3]",
          "relative inline-flex shrink-0 items-center justify-center",
          sizes[size].box,
          className,
        )}
        {...props}
      >
        <style>{keyframes}</style>
        <Visual size={size} />
        {label && <span className="sr-only">{label}</span>}
      </span>
    );
  },
);
Spinner.displayName = "Spinner";

export { Spinner };
```


---

# Component: Skeleton

> Loading placeholders with a scanning shimmer.

Category: Feedback. Docs: https://get-neonkit.vercel.app/components/skeleton

## Installation

```bash
npx shadcn@latest add https://get-neonkit.vercel.app/r/skeleton.json
```

With the `@neonkit` namespace configured: `npx shadcn@latest add @neonkit/skeleton`.

npm dependencies: none. Also needs `lib/utils.ts` (`cn`) and `lib/neon.ts` (`neonVars`), which the CLI adds.

## Usage

```tsx
import { Skeleton } from "@/components/ui/skeleton"

<Skeleton variant="circle" className="size-10" />
<Skeleton variant="text" className="w-40" />
```

## Examples

### Profile card

Mirror the real layout so nothing jumps when the content arrives.

```tsx
import { Skeleton } from "@/components/ui/skeleton";

export default function SkeletonDemo() {
  return (
    <div
      aria-busy="true"
      className="w-full max-w-sm rounded-xl border border-white/10 bg-white/[0.03] p-5"
    >
      <span className="sr-only">Loading profile</span>
      <div className="flex items-center gap-4">
        <Skeleton variant="circle" className="size-12" />
        <div className="grid flex-1 gap-2.5">
          <Skeleton variant="text" className="w-36" />
          <Skeleton variant="text" className="h-2.5 w-24" />
        </div>
      </div>
      <div className="mt-6 grid gap-2.5">
        <Skeleton variant="text" className="h-2.5" />
        <Skeleton variant="text" className="h-2.5 w-11/12" />
        <Skeleton variant="text" className="h-2.5 w-3/5" />
      </div>
      <div className="mt-6 grid grid-cols-3 gap-3 border-t border-white/[0.06] pt-5">
        {["Followers", "Following", "Projects"].map((stat) => (
          <div key={stat} className="grid gap-2">
            <Skeleton className="h-5 w-10" />
            <Skeleton variant="text" className="h-2 w-14" />
          </div>
        ))}
      </div>
      <div className="mt-6 flex gap-2">
        <Skeleton className="h-9 flex-1 rounded-lg" />
        <Skeleton className="size-9 rounded-lg" />
      </div>
    </div>
  );
}
```

### Table rows

Vary the widths. Identical bars look like a wireframe, not data.

```tsx
import { Skeleton } from "@/components/ui/skeleton";

// Varied widths read as real data; identical bars read as a wireframe.
const rows = [
  { name: "w-28", email: "w-36", amount: "w-14" },
  { name: "w-20", email: "w-32", amount: "w-12" },
  { name: "w-32", email: "w-40", amount: "w-16" },
  { name: "w-24", email: "w-28", amount: "w-12" },
  { name: "w-28", email: "w-36", amount: "w-14" },
];

export default function SkeletonTable() {
  return (
    <div
      aria-busy="true"
      className="w-full max-w-lg overflow-hidden rounded-xl border border-white/10 bg-white/[0.03]"
    >
      <span className="sr-only">Loading invoices</span>
      <div className="grid grid-cols-[1fr_auto_auto] gap-6 border-b border-white/[0.06] px-4 py-2.5 text-xs text-white/45">
        <span>Customer</span>
        <span className="w-16">Status</span>
        <span className="w-16 text-right">Amount</span>
      </div>
      <ul>
        {rows.map((row, i) => (
          <li
            key={i}
            className="grid grid-cols-[1fr_auto_auto] items-center gap-6 border-b border-white/[0.04] px-4 py-3 last:border-b-0"
          >
            <div className="flex min-w-0 items-center gap-3">
              <Skeleton variant="circle" className="size-8 shrink-0" />
              <div className="grid min-w-0 gap-2">
                <Skeleton variant="text" className={row.name} />
                <Skeleton variant="text" className={`h-2 ${row.email} max-w-full`} />
              </div>
            </div>
            <Skeleton className="h-5 w-16 rounded-full" />
            <div className="flex w-16 justify-end">
              <Skeleton variant="text" className={row.amount} />
            </div>
          </li>
        ))}
      </ul>
    </div>
  );
}
```

### Loading and loaded

Swap the skeleton for content of the same height.

```tsx
"use client";

import * as React from "react";
import { RefreshCw } from "lucide-react";
import { Button } from "@/components/ui/button";
import { Skeleton } from "@/components/ui/skeleton";

export default function SkeletonLoaded() {
  const [loading, setLoading] = React.useState(true);

  React.useEffect(() => {
    if (!loading) return;
    const id = setTimeout(() => setLoading(false), 1800);
    return () => clearTimeout(id);
  }, [loading]);

  return (
    <div className="grid w-full max-w-sm gap-4">
      <article
        aria-busy={loading}
        className="min-h-[13.5rem] rounded-xl border border-white/10 bg-white/[0.03] p-5"
      >
        {loading ? (
          <>
            <span className="sr-only">Loading article</span>
            <Skeleton variant="text" className="h-2.5 w-28" />
            <Skeleton variant="text" className="mt-4 h-4 w-4/5" />
            <div className="mt-4 grid gap-2.5">
              <Skeleton variant="text" className="h-2.5" />
              <Skeleton variant="text" className="h-2.5 w-11/12" />
              <Skeleton variant="text" className="h-2.5 w-1/2" />
            </div>
            <div className="mt-6 flex items-center gap-2.5">
              <Skeleton variant="circle" className="size-7" />
              <Skeleton variant="text" className="h-2.5 w-28" />
            </div>
          </>
        ) : (
          <>
            <p className="text-xs text-white/45">Engineering · 6 min read</p>
            <h3 className="mt-2 text-base font-medium text-white/90">
              How we cut cold starts by 40%
            </h3>
            <p className="mt-1.5 text-sm leading-relaxed text-white/55">
              Moving route handlers to the edge and trimming the server bundle
              took p95 boot time from 820 ms to 490 ms.
            </p>
            <div className="mt-4 flex items-center gap-2.5 text-xs text-white/55">
              <span className="flex size-7 items-center justify-center rounded-full border border-white/10 bg-white/[0.06] text-[10px] font-medium text-white/80">
                MC
              </span>
              Maya Chen · Oct 9
            </div>
          </>
        )}
      </article>
      <Button
        variant="ghost"
        size="sm"
        className="justify-self-center"
        disabled={loading}
        onClick={() => setLoading(true)}
      >
        <RefreshCw /> Reload
      </Button>
    </div>
  );
}
```

## API reference

### Skeleton

Size it with className. Also accepts every native div attribute.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `variant` | `"rect" \| "circle" \| "text"` | `"rect"` | rect is rounded-md, circle keeps a square ratio, text is a 12px pill. |
| `color` | `NeonColor` | `inherited` | Tints the shimmer. Falls back to --neon-accent, then cyan. |

## Accessibility

- Skeletons are aria-hidden. Put aria-busy="true" and a visually hidden "Loading…" on the container they stand in for.
- The shimmer is removed when the user prefers reduced motion; the placeholder shapes stay.

## Source

`components/ui/skeleton.tsx`

```tsx
import * as React from "react";

import { cn } from "@/lib/utils";
import { neonVars, type NeonColor } from "@/lib/neon";

// The band is a fixed 96px wide, so a 40px avatar gets a soft wash and a
// 400px row a narrow sweep. Its layer overhangs 48px on each side, so a
// ±50% translate carries the band fully in and out without clipping it.
const keyframes = `
@keyframes nk-skeleton-shimmer { 0% { transform: translateX(-50%); } 70%, 100% { transform: translateX(50%); } }
`;

const band = [
  "linear-gradient(100deg, transparent calc(50% - 28px), rgb(var(--neon) / 0.08) 50%, transparent calc(50% + 28px))",
  "linear-gradient(100deg, transparent calc(50% - 48px), rgb(255 255 255 / 0.05) 50%, transparent calc(50% + 48px))",
].join(", ");

const variants = {
  rect: "rounded-md",
  circle: "aspect-square rounded-full",
  text: "h-3 rounded-full",
} as const;

export interface SkeletonProps
  extends Omit<React.HTMLAttributes<HTMLDivElement>, "color"> {
  /** Tints the shimmer. Inherits `--neon-accent` when omitted. */
  color?: NeonColor;
  /** `text` is a 12px pill, `circle` keeps a square aspect ratio. */
  variant?: keyof typeof variants;
}

const Skeleton = React.forwardRef<HTMLDivElement, SkeletonProps>(
  ({ className, style, color, variant = "rect", children, ...props }, ref) => (
    <div
      ref={ref}
      aria-hidden
      style={neonVars(color, style)}
      className={cn(
        "[--neon:var(--neon-accent,34_211_238)]",
        "relative isolate overflow-hidden bg-white/[0.06]",
        variants[variant],
        className,
      )}
      {...props}
    >
      <style>{keyframes}</style>
      <span
        style={{ backgroundImage: band }}
        className="pointer-events-none absolute inset-y-0 -inset-x-12 -z-10 [animation:nk-skeleton-shimmer_2.4s_ease-in-out_infinite] motion-reduce:hidden"
      />
      {children}
    </div>
  ),
);
Skeleton.displayName = "Skeleton";

export { Skeleton };
```


---

# Component: Alert

> Inline messages for info, success, warning and errors.

Category: Feedback. Docs: https://get-neonkit.vercel.app/components/alert

## Installation

```bash
npx shadcn@latest add https://get-neonkit.vercel.app/r/alert.json
```

With the `@neonkit` namespace configured: `npx shadcn@latest add @neonkit/alert`.

npm dependencies: `lucide-react`. Also needs `lib/utils.ts` (`cn`) and `lib/neon.ts` (`neonVars`), which the CLI adds.

## Usage

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

<Alert status="success">
  <AlertTitle>Deployment ready</AlertTitle>
  <AlertDescription>acme-web is live on acme.dev.</AlertDescription>
</Alert>
```

## Examples

### Statuses

Each status brings its own color and icon.

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

export default function AlertDemo() {
  return (
    <div className="grid w-full max-w-lg gap-3">
      <Alert status="info">
        <AlertTitle>Your trial ends in 3 days</AlertTitle>
        <AlertDescription>
          Add a payment method to keep your projects online after October 14.
        </AlertDescription>
      </Alert>
      <Alert status="success">
        <AlertTitle>Deployment ready</AlertTitle>
        <AlertDescription>acme-web is live on acme.dev and 2 preview URLs.</AlertDescription>
      </Alert>
      <Alert status="warning">
        <AlertTitle>You’ve used 90% of your build minutes</AlertTitle>
        <AlertDescription>Builds will queue once you reach 6,000 minutes this cycle.</AlertDescription>
      </Alert>
      <Alert status="error">
        <AlertTitle>Payment failed — update your card</AlertTitle>
        <AlertDescription>
          We couldn’t charge the Visa ending in 4242. Your workspace pauses on October 18.
        </AlertDescription>
      </Alert>
      <Alert status="neutral">
        <AlertTitle>Scheduled maintenance on Sunday, 02:00–02:30 UTC</AlertTitle>
      </Alert>
    </div>
  );
}
```

### Action and dismiss

The action inherits the alert's color, so a Button in it matches without props.

```tsx
"use client";

import * as React from "react";
import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
import { Button } from "@/components/ui/button";

export default function AlertDismissible() {
  const [open, setOpen] = React.useState(true);

  if (!open) {
    return (
      <Button variant="ghost" size="sm" onClick={() => setOpen(true)}>
        Show the alert again
      </Button>
    );
  }

  return (
    <Alert
      status="error"
      className="max-w-lg"
      onDismiss={() => setOpen(false)}
      action={
        <Button size="sm" variant="soft">
          Update card
        </Button>
      }
    >
      <AlertTitle>Payment failed</AlertTitle>
      <AlertDescription>The Visa ending in 4242 was declined.</AlertDescription>
    </Alert>
  );
}
```

### Variants

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

const variants = ["soft", "outline", "solid"] as const;

export default function AlertVariants() {
  return (
    <div className="grid w-full max-w-lg gap-3">
      {variants.map((variant) => (
        <Alert key={variant} status="success" variant={variant}>
          <AlertTitle>Deployment ready</AlertTitle>
          <AlertDescription>
            Built in 38s and promoted to production.
          </AlertDescription>
        </Alert>
      ))}
    </div>
  );
}
```

### Custom color and icon

color overrides the status color. icon={false} hides the icon.

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

export default function AlertCustom() {
  return (
    <div className="grid w-full max-w-lg gap-3">
      <Alert color="violet" icon={<Sparkles />}>
        <AlertTitle>Border Beam just landed</AlertTitle>
        <AlertDescription>
          Trace any card with a moving line of light. One file, no dependencies.
        </AlertDescription>
      </Alert>
      <Alert status="neutral" variant="outline" icon={false}>
        <AlertDescription>
          You’re viewing a read-only snapshot from September 30.
        </AlertDescription>
      </Alert>
    </div>
  );
}
```

## API reference

### Alert

Also accepts every native div attribute.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `status` | `"info" \| "success" \| "warning" \| "error" \| "neutral"` | `"info"` | Sets the default color, icon and role. |
| `variant` | `"soft" \| "outline" \| "solid"` | `"soft"` | Visual style. |
| `color` | `NeonColor` | `from status` | Palette name or hex. Overrides the status color. |
| `icon` | `ReactNode \| false` | `status icon` | Replaces the icon, or hides it with false. |
| `action` | `ReactNode` | — | Right-aligned slot, usually a small Button. |
| `onDismiss` | `() => void` | — | Shows a dismiss button that calls this. Removing the alert is up to you. |

### AlertTitle

A div with the title style. Accepts every native div attribute.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |

### AlertDescription

A div with the muted body style. Accepts every native div attribute.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |

## Accessibility

- warning and error render role="alert" so they are announced immediately; the other statuses use role="status".
- Render a live alert in response to an event; one present on page load may not be announced.
- The dismiss button is a native button labelled "Dismiss", reachable with Tab.

## Source

`components/ui/alert.tsx`

```tsx
"use client";

import * as React from "react";
import { Bell, CircleCheck, Info, OctagonAlert, TriangleAlert, X } from "lucide-react";

import { cn } from "@/lib/utils";
import { neonVars, type NeonColor } from "@/lib/neon";

const statuses = {
  info: { color: "cyan", icon: Info },
  success: { color: "green", icon: CircleCheck },
  warning: { color: "amber", icon: TriangleAlert },
  error: { color: "red", icon: OctagonAlert },
  neutral: { color: "white", icon: Bell },
} as const;

const glowIcon =
  "text-[rgb(var(--neon))] [filter:drop-shadow(0_0_6px_rgb(var(--neon)/0.6))]";
const quietDismiss =
  "text-white/40 hover:bg-white/[0.06] hover:text-white/80 focus-visible:ring-[rgb(var(--neon)/0.6)]";

const variants = {
  soft: {
    root: "border-[rgb(var(--neon)/0.25)] bg-[rgb(var(--neon)/0.06)] text-white/90",
    icon: glowIcon,
    title: "text-white/90",
    description: "text-white/60",
    dismiss: quietDismiss,
  },
  outline: {
    root: "border-[rgb(var(--neon)/0.6)] bg-transparent text-white/90 shadow-[0_0_16px_rgb(var(--neon)/0.16),inset_0_0_16px_rgb(var(--neon)/0.06)]",
    icon: glowIcon,
    title: "text-white/90",
    description: "text-white/60",
    dismiss: quietDismiss,
  },
  solid: {
    root: "border-[rgb(var(--neon))] bg-[rgb(var(--neon))] text-[#05060a] shadow-[0_0_24px_rgb(var(--neon)/0.35),inset_0_1px_0_rgb(255_255_255/0.35)]",
    icon: "text-[#05060a]",
    title: "text-[#05060a]",
    description: "text-[#05060a]/70",
    dismiss: "text-[#05060a]/55 hover:bg-black/10 hover:text-[#05060a] focus-visible:ring-[#05060a]/40",
  },
} as const;

type AlertVariant = keyof typeof variants;

const AlertContext = React.createContext<AlertVariant>("soft");

export interface AlertProps
  extends Omit<React.HTMLAttributes<HTMLDivElement>, "color"> {
  /** Sets the default color, icon and live-region role. */
  status?: keyof typeof statuses;
  /** Palette name or any hex color. Overrides the status color. */
  color?: NeonColor;
  variant?: AlertVariant;
  /** Replaces the status icon. Pass `false` to hide it. */
  icon?: React.ReactNode | false;
  /** Shows a dismiss button that calls this. */
  onDismiss?: () => void;
  /** Right-aligned slot, usually a small Button. */
  action?: React.ReactNode;
}

const Alert = React.forwardRef<HTMLDivElement, AlertProps>(
  (
    {
      className,
      style,
      status = "info",
      color,
      variant = "soft",
      icon,
      onDismiss,
      action,
      children,
      ...props
    },
    ref,
  ) => {
    const StatusIcon = statuses[status].icon;
    const iconNode = icon === undefined ? <StatusIcon /> : icon;
    const v = variants[variant];

    return (
      <AlertContext.Provider value={variant}>
        <div
          ref={ref}
          role={status === "warning" || status === "error" ? "alert" : "status"}
          style={neonVars(color ?? statuses[status].color, style)}
          className={cn(
            "[--neon:var(--neon-accent,34_211_238)]",
            "relative flex w-full items-start gap-3 rounded-xl border px-4 py-3.5 text-sm",
            v.root,
            className,
          )}
          {...props}
        >
          {variant === "soft" && (
            <span
              aria-hidden
              className="absolute top-3.5 bottom-3.5 -left-px w-0.5 rounded-full bg-[rgb(var(--neon))] shadow-[0_0_10px_rgb(var(--neon)/0.8)]"
            />
          )}
          <div className="flex min-w-0 flex-1 items-start gap-3 self-center">
            {iconNode !== false && iconNode != null && (
              <span
                aria-hidden
                className={cn("flex h-5 shrink-0 items-center [&_svg]:size-4", v.icon)}
              >
                {iconNode}
              </span>
            )}
            <div className="grid min-w-0 flex-1 gap-1">{children}</div>
          </div>
          {(action != null || onDismiss) && (
            // With an action the controls center on the whole alert; without
            // one the close button lines up with the first line of text.
            <div
              className={cn(
                "flex shrink-0 items-center gap-2",
                action != null ? "self-center" : "self-start",
              )}
            >
              {action}
              {onDismiss && (
                <button
                  type="button"
                  aria-label="Dismiss"
                  onClick={onDismiss}
                  className={cn(
                    "-my-0.5 -mr-1.5 inline-flex size-6 shrink-0 cursor-pointer items-center justify-center rounded-md outline-none",
                    "transition-[background-color,color] duration-150 ease-out focus-visible:ring-2",
                    "[&_svg]:size-4",
                    v.dismiss,
                  )}
                >
                  <X aria-hidden />
                </button>
              )}
            </div>
          )}
        </div>
      </AlertContext.Provider>
    );
  },
);
Alert.displayName = "Alert";

const AlertTitle = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
  ({ className, ...props }, ref) => {
    const variant = React.useContext(AlertContext);
    return (
      <div
        ref={ref}
        className={cn("font-medium leading-5", variants[variant].title, className)}
        {...props}
      />
    );
  },
);
AlertTitle.displayName = "AlertTitle";

const AlertDescription = React.forwardRef<
  HTMLDivElement,
  React.HTMLAttributes<HTMLDivElement>
>(({ className, ...props }, ref) => {
  const variant = React.useContext(AlertContext);
  return (
    <div
      ref={ref}
      className={cn("leading-5", variants[variant].description, className)}
      {...props}
    />
  );
});
AlertDescription.displayName = "AlertDescription";

export { Alert, AlertTitle, AlertDescription };
```


---

# Component: Toast

> Stacked notifications with a tiny toast() API. No provider needed.

Category: Feedback. Docs: https://get-neonkit.vercel.app/components/toast

## Installation

```bash
npx shadcn@latest add https://get-neonkit.vercel.app/r/toast.json
```

With the `@neonkit` namespace configured: `npx shadcn@latest add @neonkit/toast`.

npm dependencies: `motion`, `lucide-react`. Also needs `lib/utils.ts` (`cn`) and `lib/neon.ts` (`neonVars`), which the CLI adds.

## Usage

```tsx
import { Toaster, toast } from "@/components/ui/toast"

// Once, near the root of your app
<Toaster />

// Anywhere, even outside React
toast.success("Invite sent to ana@acme.dev")
```

## Examples

### Toast

Hover the stack to fan it out. Every timer pauses until you leave.

```tsx
"use client";

import { Button } from "@/components/ui/button";
import { Toaster, toast } from "@/components/ui/toast";

export default function ToastDemo() {
  return (
    <div className="flex flex-wrap items-center justify-center gap-3">
      <Button
        variant="soft"
        onClick={() => toast("Saved to drafts", { description: "Q4 launch plan · edited just now" })}
      >
        Save draft
      </Button>
      <Button
        variant="soft"
        onClick={() =>
          toast.success("Invite sent to ana@acme.dev", {
            description: "She'll get a link to join the Acme workspace.",
          })
        }
      >
        Send invite
      </Button>
      <Button
        variant="soft"
        onClick={() =>
          toast.error("Deployment failed", {
            description: "Build exited with code 1 on main@4f2a9c1.",
            duration: 8000,
            action: {
              label: "View logs",
              onClick: () => toast.info("Streaming logs for build #1284"),
            },
          })
        }
      >
        Deploy
      </Button>
      <Toaster />
    </div>
  );
}
```

### Status

Each status brings its own icon and color. Reuse an id to turn a loading toast into a result.

```tsx
"use client";

import { Button } from "@/components/ui/button";
import { Toaster, toast } from "@/components/ui/toast";

function upload() {
  const id = toast.loading("Uploading 3 files…");
  setTimeout(() => toast.success("3 files uploaded", { id, description: "Added to Brand assets." }), 2200);
}

const statuses = [
  {
    label: "Success",
    run: () => toast.success("Payment received", { description: "$1,240.00 from Northwind Traders." }),
  },
  {
    label: "Error",
    run: () =>
      toast.error("Card declined", { description: "The card ending in 4242 was declined." }),
  },
  {
    label: "Warning",
    run: () =>
      toast.warning("Storage almost full", { description: "9.2 GB of 10 GB used on the Hobby plan." }),
  },
  {
    label: "Info",
    run: () =>
      toast.info("Scheduled maintenance", {
        description: "The API is read-only Sunday 02:00–02:30 UTC.",
      }),
  },
  { label: "Loading", run: upload },
];

export default function ToastStatus() {
  return (
    <div className="flex flex-wrap items-center justify-center gap-2">
      {statuses.map(({ label, run }) => (
        <Button key={label} size="sm" variant="ghost" onClick={run}>
          {label}
        </Button>
      ))}
      <Toaster />
    </div>
  );
}
```

### Promise

toast.promise shows one toast that follows the promise from pending to settled.

```tsx
"use client";

import { Button } from "@/components/ui/button";
import { Toaster, toast } from "@/components/ui/toast";

type Post = { title: string };

function publishPost() {
  return new Promise<Post>((resolve) =>
    setTimeout(() => resolve({ title: "Designing for dark mode" }), 1800),
  );
}

function schedulePost() {
  return new Promise<Post>((_, reject) =>
    setTimeout(() => reject(new Error("Scheduling is available on the Pro plan.")), 1400),
  );
}

export default function ToastPromise() {
  return (
    <div className="flex flex-wrap items-center justify-center gap-3">
      <Button
        variant="solid"
        onClick={() => {
          toast.promise(publishPost(), {
            loading: "Publishing…",
            success: (post) => `Published “${post.title}”`,
            error: "Couldn't publish. Try again.",
          });
        }}
      >
        Publish
      </Button>
      <Button
        onClick={() => {
          toast.promise(schedulePost(), {
            loading: "Scheduling for Monday, 9:00…",
            success: "Scheduled",
            error: (error) => (error instanceof Error ? error.message : "Couldn't schedule the post."),
          });
        }}
      >
        Schedule
      </Button>
      <Toaster />
    </div>
  );
}
```

### Positions

Set position on the Toaster. Top positions enter from above.

```tsx
"use client";

import * as React from "react";
import { Button } from "@/components/ui/button";
import { Toaster, toast, type ToastPosition } from "@/components/ui/toast";

const positions: { value: ToastPosition; label: string }[] = [
  { value: "top-left", label: "Top left" },
  { value: "top-center", label: "Top center" },
  { value: "top-right", label: "Top right" },
  { value: "bottom-left", label: "Bottom left" },
  { value: "bottom-center", label: "Bottom center" },
  { value: "bottom-right", label: "Bottom right" },
];

export default function ToastPositions() {
  const [position, setPosition] = React.useState<ToastPosition>("bottom-right");

  function show(next: ToastPosition) {
    toast.dismiss();
    setPosition(next);
    toast("Reminder set", { description: "Design review · Thursday at 10:00" });
  }

  return (
    <div className="grid w-full max-w-sm grid-cols-3 gap-1.5 rounded-xl border border-white/10 bg-white/[0.02] p-1.5">
      {positions.map(({ value, label }) => (
        <Button
          key={value}
          size="sm"
          variant={value === position ? "soft" : "ghost"}
          aria-pressed={value === position}
          onClick={() => show(value)}
          className="w-full"
        >
          {label}
        </Button>
      ))}
      <Toaster position={position} />
    </div>
  );
}
```

## API reference

### Toaster

Renders the toasts. Mount one per app; if several are mounted, the most recent one shows them. Also accepts native section attributes.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `position` | `"top-left" \| "top-center" \| "top-right" \| "bottom-left" \| "bottom-center" \| "bottom-right"` | `"bottom-right"` | Corner or edge of the viewport, 16px from it. |
| `max` | `number` | `3` | Toasts visible at once. Older ones stay hidden until their timers run out. |
| `color` | `NeonColor` | `inherited` | Color of default and loading toasts. Falls back to --neon-accent, then cyan. |

### toast(title, options?)

Shows a toast and returns its id. title can be any React node.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `description` | `ReactNode` | — | Secondary line under the title. |
| `status` | `"default" \| "success" \| "error" \| "warning" \| "info" \| "loading"` | `"default"` | Sets the icon and color. |
| `color` | `NeonColor` | — | Overrides the status color. |
| `duration` | `number` | `4000` | Milliseconds on screen. Infinity keeps it until dismissed. Loading toasts default to Infinity. |
| `action` | `{ label: string; onClick: () => void }` | — | A button inside the toast. Clicking it also dismisses the toast. |
| `id` | `string` | — | Pass the id of a visible toast to replace its content in place and restart its timer. |

### Methods

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `toast.success / error / warning / info / loading` | `(title, options?) => string` | — | Shorthands that set status. |
| `toast.dismiss` | `(id?: string) => void` | — | Dismisses one toast, or all of them when called without an id. |
| `toast.promise` | `(promise, { loading, success, error }, options?) => Promise<T>` | — | Shows loading, then success or error on the same toast. success and error can be functions of the result or error. Returns the original promise. |

## Accessibility

- The stack is a labelled region; toasts are announced politely, and errors use role="alert" so they interrupt.
- Hovering the stack or tabbing into it expands it and pauses every timer; timers also pause while the tab is hidden.
- Swipe a toast sideways to dismiss it. On touch screens the close button stays visible.
- Toasts disappear, so never make one the only way to reach an action.

## Source

`components/ui/toast.tsx`

```tsx
"use client";

import * as React from "react";
import {
  AnimatePresence,
  animate,
  motion,
  useMotionValue,
  useReducedMotion,
  useTransform,
  type PanInfo,
} from "motion/react";
import {
  CircleAlert,
  CircleCheck,
  Info,
  LoaderCircle,
  TriangleAlert,
  X,
  type LucideIcon,
} from "lucide-react";

import { cn } from "@/lib/utils";
import { neonVars, type NeonColor } from "@/lib/neon";

export type ToastStatus = "default" | "success" | "error" | "warning" | "info" | "loading";

export type ToastPosition =
  | "top-left"
  | "top-center"
  | "top-right"
  | "bottom-left"
  | "bottom-center"
  | "bottom-right";

export interface ToastAction {
  label: string;
  onClick: () => void;
}

export interface ToastOptions {
  /** Pass the id of a visible toast to update it in place. */
  id?: string;
  description?: React.ReactNode;
  status?: ToastStatus;
  /** Palette name or hex. Overrides the status color. */
  color?: NeonColor;
  /** Milliseconds on screen. `Infinity` keeps it until dismissed. */
  duration?: number;
  action?: ToastAction;
}

export interface ToastPromiseMessages<T> {
  loading: React.ReactNode;
  success: React.ReactNode | ((data: T) => React.ReactNode);
  error: React.ReactNode | ((error: unknown) => React.ReactNode);
}

interface ToastRecord {
  id: string;
  title: React.ReactNode;
  description?: React.ReactNode;
  status: ToastStatus;
  color?: NeonColor;
  duration: number;
  action?: ToastAction;
  /** Bumped on every update so the timer restarts. */
  version: number;
}

const EASE = [0.23, 1, 0.32, 1] as const;
const DEFAULT_DURATION = 4000;
const STACK_OFFSET = 10;
const GAP = 8;
const ENTER_OFFSET = 16;
const SWIPE_DISTANCE = 72;

const statusColors: Partial<Record<ToastStatus, NeonColor>> = {
  success: "green",
  error: "red",
  warning: "amber",
  info: "cyan",
};

const statusIcons: Partial<Record<ToastStatus, LucideIcon>> = {
  success: CircleCheck,
  error: CircleAlert,
  warning: TriangleAlert,
  info: Info,
  loading: LoaderCircle,
};

let toasts: ToastRecord[] = [];
let toasters: string[] = [];
let count = 0;
const listeners = new Set<() => void>();
const noToasts: ToastRecord[] = [];

function emit() {
  listeners.forEach((listener) => listener());
}

function subscribe(listener: () => void) {
  listeners.add(listener);
  return () => {
    listeners.delete(listener);
  };
}

const getToasts = () => toasts;
const getServerToasts = () => noToasts;
const getActiveToaster = () => toasters[toasters.length - 1] ?? null;
const getServerToaster = () => null;

// Only the most recently mounted Toaster renders, so a second one never doubles every toast.
function registerToaster(id: string) {
  toasters = [...toasters, id];
  emit();
  return () => {
    toasters = toasters.filter((toaster) => toaster !== id);
    emit();
  };
}

function subscribeVisibility(callback: () => void) {
  document.addEventListener("visibilitychange", callback);
  return () => document.removeEventListener("visibilitychange", callback);
}

const getPageHidden = () => document.hidden;
const getServerPageHidden = () => false;

function show(title: React.ReactNode, options: ToastOptions = {}): string {
  const { id = `toast-${++count}`, status = "default", duration, ...rest } = options;
  const existing = toasts.find((item) => item.id === id);
  const record: ToastRecord = {
    ...rest,
    id,
    title,
    status,
    duration: duration ?? (status === "loading" ? Infinity : DEFAULT_DURATION),
    version: existing ? existing.version + 1 : 0,
  };

  toasts = existing
    ? toasts.map((item) => (item.id === id ? record : item))
    : [record, ...toasts];
  emit();
  return id;
}

function dismiss(id?: string) {
  toasts = id === undefined ? [] : toasts.filter((item) => item.id !== id);
  emit();
}

type StatusOptions = Omit<ToastOptions, "status">;

function withStatus(status: ToastStatus) {
  return (title: React.ReactNode, options?: StatusOptions) => show(title, { ...options, status });
}

function resolveMessage<A>(message: React.ReactNode | ((arg: A) => React.ReactNode), arg: A) {
  return typeof message === "function" ? message(arg) : message;
}

function promise<T>(
  task: Promise<T> | (() => Promise<T>),
  messages: ToastPromiseMessages<T>,
  options: StatusOptions = {},
): Promise<T> {
  const id = show(messages.loading, { ...options, status: "loading", duration: Infinity });
  const pending = typeof task === "function" ? task() : task;

  pending.then(
    (data) => {
      show(resolveMessage(messages.success, data), { ...options, id, status: "success" });
    },
    (error: unknown) => {
      show(resolveMessage(messages.error, error), { ...options, id, status: "error" });
    },
  );

  return pending;
}

const toast = Object.assign(show, {
  success: withStatus("success"),
  error: withStatus("error"),
  warning: withStatus("warning"),
  info: withStatus("info"),
  loading: withStatus("loading"),
  dismiss,
  promise,
});

const positions: Record<ToastPosition, string> = {
  "top-left": "left-4 top-4",
  "top-center": "inset-x-0 top-4 mx-auto",
  "top-right": "right-4 top-4",
  "bottom-left": "bottom-4 left-4",
  "bottom-center": "inset-x-0 bottom-4 mx-auto",
  "bottom-right": "bottom-4 right-4",
};

type StackTarget = {
  y: number;
  scaleX: number;
  scaleY: number;
  opacity: number;
};

export interface ToasterProps extends Omit<React.HTMLAttributes<HTMLElement>, "color"> {
  position?: ToastPosition;
  /** Toasts visible at once. Older ones keep their timers but stay hidden. */
  max?: number;
  /** Color of default and loading toasts. Inherits `--neon-accent` when omitted. */
  color?: NeonColor;
}

const Toaster = React.forwardRef<HTMLElement, ToasterProps>(
  ({ position = "bottom-right", max = 3, color, className, style, ...props }, ref) => {
    const id = React.useId();
    const items = React.useSyncExternalStore(subscribe, getToasts, getServerToasts);
    const activeId = React.useSyncExternalStore(subscribe, getActiveToaster, getServerToaster);
    const pageHidden = React.useSyncExternalStore(
      subscribeVisibility,
      getPageHidden,
      getServerPageHidden,
    );
    const reduceMotion = useReducedMotion() ?? false;
    const sectionRef = React.useRef<HTMLElement>(null);
    const returnFocus = React.useRef<HTMLElement | null>(null);
    const [heights, setHeights] = React.useState<Record<string, number>>({});
    const [hovered, setHovered] = React.useState(false);
    const [focused, setFocused] = React.useState(false);

    React.useImperativeHandle(ref, () => sectionRef.current as HTMLElement);
    React.useEffect(() => registerToaster(id), [id]);

    const measure = React.useCallback((toastId: string, height: number) => {
      setHeights((prev) => (prev[toastId] === height ? prev : { ...prev, [toastId]: height }));
    }, []);

    const releaseFocus = React.useCallback(() => {
      const target = returnFocus.current;
      returnFocus.current = null;
      setFocused(false);
      if (target?.isConnected) target.focus({ preventScroll: true });
    }, []);

    if (activeId !== id) return null;

    // A removed toast never fires pointerleave or blur, so re-check once exits settle.
    const syncInteraction = () => {
      const node = sectionRef.current;
      if (!node) return;
      setHovered(node.matches(":hover"));
      if (!node.contains(document.activeElement)) setFocused(false);
    };

    const fromTop = position.startsWith("top");
    const dir = fromTop ? 1 : -1;
    const limit = Math.max(1, max);
    const expanded = (hovered || focused) && items.length > 0;
    const frontHeight = items.length > 0 ? (heights[items[0].id] ?? 0) : 0;

    const targets: StackTarget[] = [];
    let offset = 0;

    for (let index = 0; index < items.length; index++) {
      const height = heights[items[index].id] ?? 0;
      const visible = index < limit;
      const slot = Math.min(index, limit);

      if (expanded && visible) {
        targets.push({ y: dir * offset, scaleX: 1, scaleY: 1, opacity: 1 });
      } else if (slot === 0) {
        targets.push({ y: 0, scaleX: 1, scaleY: 1, opacity: 1 });
      } else {
        const edge = frontHeight + STACK_OFFSET * slot;
        const scale = 1 - 0.05 * slot;
        targets.push({
          y: dir * (edge - height),
          scaleX: scale,
          // Squash taller toasts so they never poke out past the front one.
          scaleY: height > 0 ? Math.min(scale, edge / height) : scale,
          opacity: visible ? 1 - 0.18 * slot : 0,
        });
      }

      offset += height + GAP;
    }

    return (
      <section
        ref={sectionRef}
        aria-label="Notifications"
        style={neonVars(color, style)}
        className={cn(
          "[--neon:var(--neon-accent,34_211_238)]",
          "fixed z-[100] w-[min(356px,calc(100vw_-_32px))]",
          positions[position],
          className,
        )}
        {...props}
        onPointerEnter={(event) => {
          if (event.pointerType !== "touch") setHovered(true);
        }}
        onPointerLeave={() => setHovered(false)}
        onFocus={(event) => {
          if (focused || !(event.target as HTMLElement).matches(":focus-visible")) return;
          const from = event.relatedTarget;
          returnFocus.current =
            from instanceof HTMLElement && !event.currentTarget.contains(from) ? from : null;
          setFocused(true);
        }}
        onBlur={(event) => {
          if (!event.currentTarget.contains(event.relatedTarget as Node | null)) setFocused(false);
        }}
      >
        <ol className="relative m-0 list-none p-0">
          <AnimatePresence onExitComplete={syncInteraction}>
            {items.map((item, index) => (
              <ToastItem
                key={item.id}
                toast={item}
                target={targets[index]}
                active={index === 0 || (expanded && index < limit)}
                paused={expanded || pageHidden}
                dir={dir}
                closeSide={position.endsWith("left") ? "left" : "right"}
                zIndex={items.length - index}
                reduceMotion={reduceMotion}
                onMeasure={measure}
                onReleaseFocus={releaseFocus}
              />
            ))}
          </AnimatePresence>
        </ol>
      </section>
    );
  },
);
Toaster.displayName = "Toaster";

interface ToastItemProps {
  toast: ToastRecord;
  target: StackTarget;
  /** Content is readable and the toast can be swiped. */
  active: boolean;
  paused: boolean;
  dir: 1 | -1;
  closeSide: "left" | "right";
  zIndex: number;
  reduceMotion: boolean;
  onMeasure: (id: string, height: number) => void;
  onReleaseFocus: () => void;
}

function ToastItem({
  toast: item,
  target,
  active,
  paused,
  dir,
  closeSide,
  zIndex,
  reduceMotion,
  onMeasure,
  onReleaseFocus,
}: ToastItemProps) {
  const { id, status, duration, version } = item;
  const ref = React.useRef<HTMLLIElement>(null);
  const remaining = React.useRef(duration);
  const [dragging, setDragging] = React.useState(false);
  const x = useMotionValue(0);
  const swipeOpacity = useTransform(x, [-220, 0, 220], [0, 1, 0]);
  const Icon = statusIcons[status];
  const isError = status === "error";
  const hidden = target.opacity === 0;

  React.useLayoutEffect(() => {
    const node = ref.current;
    if (!node) return;
    const report = () => onMeasure(id, node.offsetHeight);
    report();
    const observer = new ResizeObserver(report);
    observer.observe(node);
    return () => observer.disconnect();
  }, [id, onMeasure]);

  React.useEffect(() => {
    remaining.current = duration;
  }, [duration, version]);

  React.useEffect(() => {
    if (paused || dragging || !Number.isFinite(duration)) return;
    const startedAt = Date.now();
    const timer = window.setTimeout(() => dismiss(id), Math.max(0, remaining.current));
    return () => {
      window.clearTimeout(timer);
      remaining.current -= Date.now() - startedAt;
    };
  }, [id, duration, version, paused, dragging]);

  function remove() {
    if (ref.current?.contains(document.activeElement)) onReleaseFocus();
    dismiss(id);
  }

  function handleDragEnd(_: MouseEvent | TouchEvent | PointerEvent, info: PanInfo) {
    setDragging(false);
    const flick = Math.abs(info.velocity.x) > 500 && Math.abs(info.offset.x) > 16;
    if (!flick && Math.abs(info.offset.x) < SWIPE_DISTANCE) return;

    const direction = flick ? Math.sign(info.velocity.x) : Math.sign(info.offset.x);
    const width = ref.current?.offsetWidth ?? 356;
    animate(x, direction * (width + 32), { duration: 0.2, ease: EASE });
    remove();
  }

  return (
    <motion.li
      ref={ref}
      role={isError ? "alert" : "status"}
      aria-live={isError ? undefined : "polite"}
      aria-atomic="true"
      aria-hidden={hidden || undefined}
      initial={reduceMotion ? { opacity: 0 } : { opacity: 0, y: -dir * ENTER_OFFSET }}
      animate={target}
      exit={{
        opacity: 0,
        scale: reduceMotion ? 1 : 0.96,
        transition: { duration: 0.2, ease: EASE },
      }}
      transition={
        reduceMotion ? { duration: 0, opacity: { duration: 0.15 } } : { duration: 0.26, ease: EASE }
      }
      style={{
        ...neonVars(item.color ?? statusColors[status]),
        zIndex,
        transformOrigin: dir === -1 ? "50% 0%" : "50% 100%",
      }}
      className={cn(
        "absolute inset-x-0",
        dir === -1 ? "bottom-0" : "top-0",
        hidden && "pointer-events-none",
      )}
    >
      {/* Bridges the gap between expanded toasts so the stack doesn't collapse mid-move. */}
      <div aria-hidden className={cn("absolute inset-x-0 h-2", dir === -1 ? "bottom-full" : "top-full")} />

      <motion.div
        drag={active && !hidden ? "x" : false}
        dragSnapToOrigin
        onDragStart={() => setDragging(true)}
        onDragEnd={handleDragEnd}
        style={{ x, opacity: swipeOpacity }}
        className={cn(
          "group relative rounded-xl border border-white/10 bg-[#0a0b11] text-white/90",
          "shadow-[0_18px_40px_-14px_rgb(0_0_0/0.9),0_4px_12px_-6px_rgb(0_0_0/0.7),inset_0_1px_0_rgb(255_255_255/0.04)]",
        )}
      >
        <span
          aria-hidden
          className="pointer-events-none absolute -left-px bottom-3.5 top-3.5 w-px rounded-full bg-[rgb(var(--neon))] shadow-[0_0_8px_rgb(var(--neon)/0.7)]"
        />

        <motion.div
          initial={false}
          animate={{ opacity: active ? 1 : 0 }}
          transition={{ duration: reduceMotion ? 0 : 0.2, ease: EASE }}
          className="relative flex items-start gap-3 p-4"
        >
          {Icon && (
            <motion.span
              key={status}
              initial={version > 0 && !reduceMotion ? { opacity: 0, scale: 0.9 } : false}
              animate={{ opacity: 1, scale: 1 }}
              transition={{ duration: 0.2, ease: EASE }}
              className="mt-0.5 flex shrink-0 text-[rgb(var(--neon))] [filter:drop-shadow(0_0_6px_rgb(var(--neon)/0.6))]"
            >
              <Icon className={cn("size-4", status === "loading" && "animate-spin")} aria-hidden />
            </motion.span>
          )}

          <div className="min-w-0 flex-1">
            <div className="text-sm font-medium leading-5 text-white/90">{item.title}</div>
            {item.description && (
              <div className="mt-0.5 text-[13px] leading-5 text-white/55">{item.description}</div>
            )}
          </div>

          {item.action && (
            <button
              type="button"
              tabIndex={hidden ? -1 : undefined}
              onClick={() => {
                item.action?.onClick();
                remove();
              }}
              className={cn(
                "h-7 shrink-0 self-center rounded-md bg-[rgb(var(--neon)/0.12)] px-2.5 text-xs font-medium text-[rgb(var(--neon))] outline-none",
                "transition-[background-color,transform] duration-150 ease-out hover:bg-[rgb(var(--neon)/0.2)] active:scale-[0.97]",
                "focus-visible:ring-2 focus-visible:ring-[rgb(var(--neon)/0.6)] focus-visible:ring-offset-2 focus-visible:ring-offset-[#0a0b11]",
              )}
            >
              {item.action.label}
            </button>
          )}

          <button
            type="button"
            aria-label="Close"
            tabIndex={hidden ? -1 : undefined}
            onClick={remove}
            className={cn(
              "absolute -top-2 flex size-5 items-center justify-center rounded-full border border-white/15 bg-[#0a0b11] text-white/55 outline-none",
              "shadow-[0_2px_6px_rgb(0_0_0/0.5)] transition-[opacity,color,background-color] duration-150 ease-out",
              "opacity-0 hover:bg-[#151722] hover:text-white/90 group-focus-within:opacity-100 group-hover:opacity-100 [@media(hover:none)]:opacity-100",
              "focus-visible:ring-2 focus-visible:ring-[rgb(var(--neon)/0.6)] focus-visible:ring-offset-2 focus-visible:ring-offset-[#05060a]",
              "after:absolute after:-inset-2 after:content-['']",
              closeSide === "left" ? "-left-2" : "-right-2",
              !active && "pointer-events-none",
            )}
          >
            <X className="size-3" strokeWidth={2.5} aria-hidden />
          </button>
        </motion.div>
      </motion.div>
    </motion.li>
  );
}

export { Toaster, toast };
```


---

# Component: Dialog

> Accessible modal built on the native dialog element.

Category: Overlay. Docs: https://get-neonkit.vercel.app/components/dialog

## Installation

```bash
npx shadcn@latest add https://get-neonkit.vercel.app/r/dialog.json
```

With the `@neonkit` namespace configured: `npx shadcn@latest add @neonkit/dialog`.

npm dependencies: `motion`, `lucide-react`. Also needs `lib/utils.ts` (`cn`) and `lib/neon.ts` (`neonVars`), which the CLI adds.

## Usage

```tsx
import {
  Dialog,
  DialogClose,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "@/components/ui/dialog"

<Dialog>
  <DialogTrigger asChild>
    <Button>Edit profile</Button>
  </DialogTrigger>
  <DialogContent>
    <DialogHeader>
      <DialogTitle>Edit profile</DialogTitle>
      <DialogDescription>This is how teammates see you.</DialogDescription>
    </DialogHeader>
    <DialogFooter>
      <DialogClose asChild>
        <Button variant="ghost">Cancel</Button>
      </DialogClose>
    </DialogFooter>
  </DialogContent>
</Dialog>
```

## Examples

### Form

Control open to close the dialog once the form submits.

```tsx
"use client";

import * as React from "react";
import { Button } from "@/components/ui/button";
import {
  Dialog,
  DialogClose,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "@/components/ui/dialog";

const field =
  "h-10 w-full rounded-lg border border-white/10 bg-white/[0.03] px-3 text-sm text-white/90 outline-none transition-[border-color,box-shadow] duration-150 placeholder:text-white/30 focus:border-[rgb(var(--neon)/0.6)] focus:shadow-[0_0_0_3px_rgb(var(--neon)/0.15)]";

export default function DialogDemo() {
  const [open, setOpen] = React.useState(false);

  return (
    <Dialog open={open} onOpenChange={setOpen}>
      <DialogTrigger asChild>
        <Button>Edit profile</Button>
      </DialogTrigger>
      <DialogContent>
        <form
          onSubmit={(event) => {
            event.preventDefault();
            setOpen(false);
          }}
        >
          <DialogHeader>
            <DialogTitle>Edit profile</DialogTitle>
            <DialogDescription>This is how teammates see you across Acme.</DialogDescription>
          </DialogHeader>

          <div className="mt-6 grid gap-4">
            <label className="grid gap-1.5">
              <span className="text-xs font-medium text-white/55">Name</span>
              <input name="name" defaultValue="Ana Lima" autoComplete="name" className={field} />
            </label>
            <label className="grid gap-1.5">
              <span className="text-xs font-medium text-white/55">Username</span>
              <div className="relative">
                <span className="pointer-events-none absolute inset-y-0 left-3 flex items-center text-sm text-white/30">
                  acme.dev/
                </span>
                <input
                  name="username"
                  defaultValue="ana"
                  autoComplete="username"
                  spellCheck={false}
                  className={`${field} pl-[78px]`}
                />
              </div>
            </label>
            <label className="grid gap-1.5">
              <span className="text-xs font-medium text-white/55">Role</span>
              <input name="role" defaultValue="Design engineer" className={field} />
            </label>
          </div>

          <DialogFooter>
            <DialogClose asChild>
              <Button variant="ghost">Cancel</Button>
            </DialogClose>
            <Button type="submit" variant="solid">
              Save changes
            </Button>
          </DialogFooter>
        </form>
      </DialogContent>
    </Dialog>
  );
}
```

### Destructive

color tints the panel, its glow and every button inside. Typing the name unlocks the action.

```tsx
"use client";

import * as React from "react";
import { Trash2 } from "lucide-react";
import { Button } from "@/components/ui/button";
import {
  Dialog,
  DialogClose,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "@/components/ui/dialog";

const PROJECT = "acme-web";

export default function DialogDestructive() {
  const [open, setOpen] = React.useState(false);
  const [confirmation, setConfirmation] = React.useState("");
  const [deleting, setDeleting] = React.useState(false);

  function handleOpenChange(next: boolean) {
    if (next) setConfirmation("");
    setOpen(next);
  }

  function handleSubmit(event: React.FormEvent<HTMLFormElement>) {
    event.preventDefault();
    setDeleting(true);
    setTimeout(() => {
      setDeleting(false);
      setOpen(false);
    }, 1200);
  }

  return (
    <Dialog color="red" open={open} onOpenChange={handleOpenChange}>
      <DialogTrigger asChild>
        <Button color="red" variant="soft">
          <Trash2 /> Delete project
        </Button>
      </DialogTrigger>
      <DialogContent size="sm">
        <form onSubmit={handleSubmit}>
          <DialogHeader>
            <DialogTitle>Delete project</DialogTitle>
            <DialogDescription>
              This permanently deletes <span className="text-white/80">{PROJECT}</span>, its 14
              deployments and every environment variable. This can&apos;t be undone.
            </DialogDescription>
          </DialogHeader>

          <label className="mt-5 grid gap-2">
            <span className="text-xs text-white/55">
              Type <span className="font-mono text-white/80">{PROJECT}</span> to confirm
            </span>
            <input
              value={confirmation}
              onChange={(event) => setConfirmation(event.target.value)}
              autoComplete="off"
              spellCheck={false}
              className="h-10 w-full rounded-lg border border-white/10 bg-white/[0.03] px-3 font-mono text-sm text-white/90 outline-none transition-[border-color,box-shadow] duration-150 focus:border-[rgb(var(--neon)/0.6)] focus:shadow-[0_0_0_3px_rgb(var(--neon)/0.15)]"
            />
          </label>

          <DialogFooter>
            <DialogClose asChild>
              <Button variant="ghost" color="white">
                Cancel
              </Button>
            </DialogClose>
            <Button
              type="submit"
              variant="solid"
              disabled={confirmation !== PROJECT}
              loading={deleting}
            >
              {deleting ? "Deleting" : "Delete project"}
            </Button>
          </DialogFooter>
        </form>
      </DialogContent>
    </Dialog>
  );
}
```

### Sizes

```tsx
"use client";

import * as React from "react";
import { Button } from "@/components/ui/button";
import {
  Dialog,
  DialogClose,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "@/components/ui/dialog";

const SHARE_URL = "https://acme.dev/docs/q4-launch-plan";

const changes = [
  { title: "Preview comments", body: "Leave feedback on preview deployments, pinned to the element." },
  { title: "Faster cold starts", body: "Functions now boot 40% faster in every region." },
  { title: "Audit log export", body: "Download every workspace event from the last 90 days as CSV." },
  { title: "Custom roles", body: "Decide exactly what Viewers, Editors and Billing admins can change." },
];

function CopyLink() {
  const [copied, setCopied] = React.useState(false);

  async function copy() {
    try {
      await navigator.clipboard.writeText(SHARE_URL);
    } catch {
      return;
    }
    setCopied(true);
    setTimeout(() => setCopied(false), 1600);
  }

  return (
    <Button size="sm" variant="soft" onClick={copy} className="w-[84px]">
      {copied ? "Copied" : "Copy link"}
    </Button>
  );
}

export default function DialogSizes() {
  return (
    <div className="flex flex-wrap items-center justify-center gap-3">
      <Dialog>
        <DialogTrigger asChild>
          <Button size="sm">Small</Button>
        </DialogTrigger>
        <DialogContent size="sm">
          <DialogHeader>
            <DialogTitle>Sign out everywhere?</DialogTitle>
            <DialogDescription>
              You&apos;ll be signed out on 3 other devices, including the MacBook in Lisbon.
            </DialogDescription>
          </DialogHeader>
          <DialogFooter>
            <DialogClose asChild>
              <Button variant="ghost">Cancel</Button>
            </DialogClose>
            <DialogClose asChild>
              <Button variant="solid">Sign out</Button>
            </DialogClose>
          </DialogFooter>
        </DialogContent>
      </Dialog>

      <Dialog>
        <DialogTrigger asChild>
          <Button size="sm">Medium</Button>
        </DialogTrigger>
        <DialogContent>
          <DialogHeader>
            <DialogTitle>Share “Q4 launch plan”</DialogTitle>
            <DialogDescription>Anyone at Acme with the link can comment.</DialogDescription>
          </DialogHeader>
          <div className="mt-5 flex items-center gap-2 rounded-lg border border-white/10 bg-white/[0.03] py-1 pl-3 pr-1">
            <span className="min-w-0 flex-1 truncate font-mono text-xs text-white/70">{SHARE_URL}</span>
            <CopyLink />
          </div>
          <DialogFooter>
            <DialogClose asChild>
              <Button variant="ghost">Done</Button>
            </DialogClose>
          </DialogFooter>
        </DialogContent>
      </Dialog>

      <Dialog>
        <DialogTrigger asChild>
          <Button size="sm">Large</Button>
        </DialogTrigger>
        <DialogContent size="lg">
          <DialogHeader>
            <DialogTitle>What&apos;s new in 2.4</DialogTitle>
            <DialogDescription>Released October 9 · 4 changes</DialogDescription>
          </DialogHeader>
          <ul className="mt-6 grid gap-3 sm:grid-cols-2">
            {changes.map((change) => (
              <li key={change.title} className="rounded-xl border border-white/10 bg-white/[0.03] p-4">
                <p className="text-sm font-medium text-white/90">{change.title}</p>
                <p className="mt-1 text-sm leading-6 text-white/55">{change.body}</p>
              </li>
            ))}
          </ul>
          <DialogFooter>
            <DialogClose asChild>
              <Button variant="solid">Got it</Button>
            </DialogClose>
          </DialogFooter>
        </DialogContent>
      </Dialog>
    </div>
  );
}
```

## API reference

### Dialog

Holds the open state. Renders no element of its own.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `open` | `boolean` | — | Controlled open state. |
| `defaultOpen` | `boolean` | `false` | Initial state when uncontrolled. |
| `onOpenChange` | `(open: boolean) => void` | — | Called when the trigger, a close button, Escape or the overlay asks to change state. |
| `color` | `NeonColor` | `inherited` | Palette name or hex. Falls back to --neon-accent, then cyan. |

### DialogTrigger

Renders a button that opens the dialog. Also accepts every native button attribute.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `asChild` | `boolean` | `false` | Merges trigger behaviour onto its single child element instead of rendering a button. |

### DialogContent

The overlay and panel, rendered in a native <dialog> on the top layer. Other props go to the panel.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `size` | `"sm" \| "md" \| "lg"` | `"md"` | Maximum panel width: 384, 512 or 672px. |
| `showClose` | `boolean` | `true` | Shows the X button in the top-right corner. |

### DialogClose

Renders a button that closes the dialog. Also accepts every native button attribute.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `asChild` | `boolean` | `false` | Merges close behaviour onto its single child element instead of rendering a button. |

### DialogHeader, DialogTitle, DialogDescription, DialogFooter

Layout and text parts. Each accepts the native attributes of its element.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `DialogTitle` | `h2` | — | Labels the dialog through aria-labelledby. |
| `DialogDescription` | `p` | — | Describes the dialog through aria-describedby, only while it's rendered. |
| `DialogFooter` | `div` | — | Stacks actions on small screens and right-aligns them from sm up. |

## Accessibility

- Opens with showModal(), so the browser traps focus, makes the page inert and moves focus to the first focusable element.
- Escape and clicks on the overlay close the dialog after its exit animation.
- Focus returns to the element that opened the dialog, and page scroll is locked while it's open.
- Always include a DialogTitle, even a visually hidden one, so the dialog has an accessible name.

## Source

`components/ui/dialog.tsx`

```tsx
"use client";

import * as React from "react";
import { AnimatePresence, motion, useReducedMotion } from "motion/react";
import { X } from "lucide-react";

import { cn } from "@/lib/utils";
import { neonVars, type NeonColor } from "@/lib/neon";

const EASE = [0.23, 1, 0.32, 1] as const;

interface DialogContextValue {
  open: boolean;
  setOpen: (open: boolean) => void;
  color?: NeonColor;
  contentId: string;
  titleId: string;
  descriptionId: string;
  hasDescription: boolean;
  setHasDescription: (value: boolean) => void;
  triggerRef: { current: HTMLElement | null };
}

const DialogContext = React.createContext<DialogContextValue | null>(null);

function useDialog(component: string) {
  const context = React.useContext(DialogContext);
  if (!context) throw new Error(`<${component}> must be rendered inside <Dialog>.`);
  return context;
}

/** Merges props onto its single child element, chaining the child's own onClick. */
const Slot = React.forwardRef<HTMLElement, React.HTMLAttributes<HTMLElement>>(
  ({ children, className, onClick, ...props }, ref) => {
    if (!React.isValidElement<React.HTMLAttributes<HTMLElement>>(children)) return null;
    const child = children;

    return React.cloneElement(child, {
      ...props,
      className: cn(child.props.className, className),
      onClick: (event: React.MouseEvent<HTMLElement>) => {
        child.props.onClick?.(event);
        if (!event.defaultPrevented) onClick?.(event);
      },
      ...(ref ? { ref } : null),
    } as React.HTMLAttributes<HTMLElement>);
  },
);
Slot.displayName = "DialogSlot";

export interface DialogProps {
  open?: boolean;
  defaultOpen?: boolean;
  onOpenChange?: (open: boolean) => void;
  /** Palette name or hex. Inherits `--neon-accent` when omitted. */
  color?: NeonColor;
  children?: React.ReactNode;
}

function Dialog({ open: openProp, defaultOpen = false, onOpenChange, color, children }: DialogProps) {
  const [uncontrolledOpen, setUncontrolledOpen] = React.useState(defaultOpen);
  const [hasDescription, setHasDescription] = React.useState(false);
  const triggerRef = React.useRef<HTMLElement | null>(null);
  const id = React.useId();
  const isControlled = openProp !== undefined;
  const open = isControlled ? openProp : uncontrolledOpen;

  const setOpen = React.useCallback(
    (next: boolean) => {
      if (next === open) return;
      if (!isControlled) setUncontrolledOpen(next);
      onOpenChange?.(next);
    },
    [open, isControlled, onOpenChange],
  );

  const value = React.useMemo<DialogContextValue>(
    () => ({
      open,
      setOpen,
      color,
      contentId: `${id}-content`,
      titleId: `${id}-title`,
      descriptionId: `${id}-description`,
      hasDescription,
      setHasDescription,
      triggerRef,
    }),
    [open, setOpen, color, id, hasDescription],
  );

  return <DialogContext.Provider value={value}>{children}</DialogContext.Provider>;
}
Dialog.displayName = "Dialog";

export interface DialogTriggerProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
  /** Merge trigger behaviour onto the single child element instead of rendering a button. */
  asChild?: boolean;
}

const DialogTrigger = React.forwardRef<HTMLButtonElement, DialogTriggerProps>(
  ({ asChild = false, onClick, children, ...props }, ref) => {
    const { open, setOpen, contentId, triggerRef } = useDialog("DialogTrigger");

    const handleClick = (event: React.MouseEvent<HTMLElement>) => {
      onClick?.(event as React.MouseEvent<HTMLButtonElement>);
      if (event.defaultPrevented) return;
      triggerRef.current = event.currentTarget;
      setOpen(true);
    };

    const triggerProps = {
      ...props,
      "aria-haspopup": "dialog" as const,
      "aria-expanded": open,
      "aria-controls": open ? contentId : undefined,
    };

    if (asChild) {
      return (
        <Slot ref={ref} {...triggerProps} onClick={handleClick}>
          {children}
        </Slot>
      );
    }

    return (
      <button ref={ref} type="button" {...triggerProps} onClick={handleClick}>
        {children}
      </button>
    );
  },
);
DialogTrigger.displayName = "DialogTrigger";

const sizes = {
  sm: "max-w-sm",
  md: "max-w-lg",
  lg: "max-w-2xl",
} as const;

export interface DialogContentProps
  extends Omit<
    React.HTMLAttributes<HTMLDivElement>,
    "color" | "onAnimationStart" | "onDrag" | "onDragStart" | "onDragEnd"
  > {
  size?: keyof typeof sizes;
  /** Renders the X button in the top-right corner. */
  showClose?: boolean;
}

const DialogContent = React.forwardRef<HTMLDivElement, DialogContentProps>(
  ({ size = "md", showClose = true, className, children, ...props }, ref) => {
    const { open, setOpen, color, contentId, titleId, descriptionId, hasDescription, triggerRef } =
      useDialog("DialogContent");
    const reduceMotion = useReducedMotion();
    const dialogRef = React.useRef<HTMLDialogElement>(null);
    const saved = React.useRef<{ overflow: string; focus: HTMLElement | null } | null>(null);

    React.useLayoutEffect(() => {
      const dialog = dialogRef.current;
      if (!open || !dialog || dialog.open) return;

      // Safari doesn't focus buttons on click, so fall back to the trigger that was pressed.
      const active = document.activeElement;
      saved.current = {
        overflow: document.documentElement.style.overflow,
        focus: active instanceof HTMLElement && active !== document.body ? active : triggerRef.current,
      };
      triggerRef.current = null;
      document.documentElement.style.overflow = "hidden";
      dialog.showModal();
    }, [open, triggerRef]);

    React.useEffect(
      () => () => {
        if (saved.current) document.documentElement.style.overflow = saved.current.overflow;
      },
      [],
    );

    // The <dialog> stays open while the panel animates out, then closes for real here.
    const finish = () => {
      const dialog = dialogRef.current;
      if (dialog?.open) dialog.close();
      const restore = saved.current;
      saved.current = null;
      if (!restore) return;
      document.documentElement.style.overflow = restore.overflow;
      if (restore.focus?.isConnected) restore.focus.focus({ preventScroll: true });
    };

    const enter = { duration: reduceMotion ? 0.15 : 0.22, ease: EASE };
    const exit = { duration: reduceMotion ? 0.12 : 0.16, ease: EASE };
    const hiddenPanel = reduceMotion ? { opacity: 0 } : { opacity: 0, scale: 0.96, y: 8 };

    return (
      <dialog
        ref={dialogRef}
        id={contentId}
        aria-labelledby={titleId}
        aria-describedby={hasDescription ? descriptionId : undefined}
        onCancel={(event) => {
          // Escape: let the exit animation run instead of closing instantly.
          event.preventDefault();
          setOpen(false);
        }}
        onClose={() => {
          if (!dialogRef.current?.open) setOpen(false);
        }}
        style={neonVars(color)}
        className={cn(
          "[--neon:var(--neon-accent,34_211_238)]",
          "fixed inset-0 m-0 h-dvh max-h-none w-screen max-w-none overflow-hidden border-0 bg-transparent p-0 text-white/90 outline-none backdrop:bg-transparent",
        )}
      >
        <AnimatePresence onExitComplete={finish}>
          {open && (
            <motion.div
              key="overlay"
              aria-hidden
              initial={{ opacity: 0 }}
              animate={{ opacity: 1 }}
              exit={{ opacity: 0, transition: exit }}
              transition={enter}
              onClick={() => setOpen(false)}
              className="absolute inset-0 bg-black/60 backdrop-blur-md"
            />
          )}
          {open && (
            <div
              key="viewport"
              className="pointer-events-none absolute inset-0 overflow-y-auto overscroll-contain"
            >
              <div className="flex min-h-full items-center justify-center p-4 sm:p-6">
                <motion.div
                  ref={ref}
                  initial={hiddenPanel}
                  animate={{ opacity: 1, scale: 1, y: 0 }}
                  exit={{ ...hiddenPanel, transition: exit }}
                  transition={enter}
                  className={cn(
                    "pointer-events-auto relative w-full rounded-2xl border border-[rgb(var(--neon)/0.18)] bg-[#0a0b11] p-6 text-white/90",
                    "shadow-[0_0_0_1px_rgb(0_0_0/0.5),0_24px_64px_-16px_rgb(0_0_0/0.9),0_0_80px_-24px_rgb(var(--neon)/0.35)]",
                    sizes[size],
                    className,
                  )}
                  {...props}
                >
                  <span
                    aria-hidden
                    className="pointer-events-none absolute inset-x-10 -top-px h-px bg-[linear-gradient(90deg,transparent,rgb(var(--neon)/0.8),transparent)]"
                  />
                  {children}
                  {showClose && (
                    <button
                      type="button"
                      aria-label="Close"
                      onClick={() => setOpen(false)}
                      className={cn(
                        "absolute right-3.5 top-3.5 flex size-8 items-center justify-center rounded-lg text-white/45 outline-none",
                        "transition-[background-color,color,transform] duration-150 ease-out hover:bg-white/[0.06] hover:text-white/90 active:scale-[0.97]",
                        "focus-visible:ring-2 focus-visible:ring-[rgb(var(--neon)/0.6)] focus-visible:ring-offset-2 focus-visible:ring-offset-[#0a0b11]",
                      )}
                    >
                      <X className="size-4" aria-hidden />
                    </button>
                  )}
                </motion.div>
              </div>
            </div>
          )}
        </AnimatePresence>
      </dialog>
    );
  },
);
DialogContent.displayName = "DialogContent";

const DialogHeader = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
  ({ className, ...props }, ref) => (
    <div ref={ref} className={cn("flex flex-col gap-1.5 pr-8", className)} {...props} />
  ),
);
DialogHeader.displayName = "DialogHeader";

const DialogFooter = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
  ({ className, ...props }, ref) => (
    <div
      ref={ref}
      className={cn("mt-6 flex flex-col-reverse gap-2 sm:flex-row sm:justify-end", className)}
      {...props}
    />
  ),
);
DialogFooter.displayName = "DialogFooter";

const DialogTitle = React.forwardRef<HTMLHeadingElement, React.HTMLAttributes<HTMLHeadingElement>>(
  ({ className, ...props }, ref) => {
    const { titleId } = useDialog("DialogTitle");
    return (
      <h2
        ref={ref}
        className={cn("text-base font-semibold leading-6 tracking-[-0.01em] text-white/90", className)}
        {...props}
        id={titleId}
      />
    );
  },
);
DialogTitle.displayName = "DialogTitle";

const DialogDescription = React.forwardRef<
  HTMLParagraphElement,
  React.HTMLAttributes<HTMLParagraphElement>
>(({ className, ...props }, ref) => {
  const { descriptionId, setHasDescription } = useDialog("DialogDescription");

  React.useLayoutEffect(() => {
    setHasDescription(true);
    return () => setHasDescription(false);
  }, [setHasDescription]);

  return (
    <p
      ref={ref}
      className={cn("text-sm leading-6 text-white/55", className)}
      {...props}
      id={descriptionId}
    />
  );
});
DialogDescription.displayName = "DialogDescription";

export interface DialogCloseProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
  /** Merge close behaviour onto the single child element instead of rendering a button. */
  asChild?: boolean;
}

const DialogClose = React.forwardRef<HTMLButtonElement, DialogCloseProps>(
  ({ asChild = false, onClick, children, ...props }, ref) => {
    const { setOpen } = useDialog("DialogClose");

    const handleClick = (event: React.MouseEvent<HTMLElement>) => {
      onClick?.(event as React.MouseEvent<HTMLButtonElement>);
      if (!event.defaultPrevented) setOpen(false);
    };

    if (asChild) {
      return (
        <Slot ref={ref} {...props} onClick={handleClick}>
          {children}
        </Slot>
      );
    }

    return (
      <button ref={ref} type="button" {...props} onClick={handleClick}>
        {children}
      </button>
    );
  },
);
DialogClose.displayName = "DialogClose";

export {
  Dialog,
  DialogTrigger,
  DialogContent,
  DialogHeader,
  DialogFooter,
  DialogTitle,
  DialogDescription,
  DialogClose,
};
```


---

# Component: Tooltip

> Hover and focus hints on four sides.

Category: Overlay. Docs: https://get-neonkit.vercel.app/components/tooltip

## Installation

```bash
npx shadcn@latest add https://get-neonkit.vercel.app/r/tooltip.json
```

With the `@neonkit` namespace configured: `npx shadcn@latest add @neonkit/tooltip`.

npm dependencies: `motion`. Also needs `lib/utils.ts` (`cn`) and `lib/neon.ts` (`neonVars`), which the CLI adds.

## Usage

```tsx
import { Tooltip } from "@/components/ui/tooltip"

<Tooltip content="Bold ⌘B">
  <Button size="icon" aria-label="Bold"><Bold /></Button>
</Tooltip>
```

## Examples

### Toolbar

After the first tooltip opens, moving to a neighbour shows its tooltip instantly.

```tsx
import { Bold, Code, Italic, Link, Strikethrough, Underline } from "lucide-react";
import { Button } from "@/components/ui/button";
import { Tooltip } from "@/components/ui/tooltip";

const groups = [
  [
    { label: "Bold", shortcut: "⌘B", icon: Bold },
    { label: "Italic", shortcut: "⌘I", icon: Italic },
    { label: "Underline", shortcut: "⌘U", icon: Underline },
    { label: "Strikethrough", shortcut: "⌘⇧X", icon: Strikethrough },
  ],
  [
    { label: "Link", shortcut: "⌘K", icon: Link },
    { label: "Inline code", shortcut: "⌘E", icon: Code },
  ],
];

export default function TooltipDemo() {
  return (
    <div
      role="group"
      aria-label="Text formatting"
      className="flex items-center gap-0.5 rounded-xl border border-white/10 bg-white/[0.03] p-1"
    >
      {groups.map((tools, index) => (
        <div key={index} className="flex items-center gap-0.5">
          {index > 0 && <span aria-hidden className="mx-1 h-4 w-px bg-white/10" />}
          {tools.map(({ label, shortcut, icon: Icon }) => (
            <Tooltip
              key={label}
              content={
                <span className="flex items-center gap-2">
                  {label}
                  <kbd className="font-sans text-[11px] tracking-wide text-white/45">{shortcut}</kbd>
                </span>
              }
            >
              <Button variant="ghost" size="icon" aria-label={label} className="size-8 rounded-lg">
                <Icon />
              </Button>
            </Tooltip>
          ))}
        </div>
      ))}
    </div>
  );
}
```

### Sides

```tsx
import { ArrowDown, ArrowLeft, ArrowRight, ArrowUp } from "lucide-react";
import { Button } from "@/components/ui/button";
import { Tooltip } from "@/components/ui/tooltip";

const nudges = [
  { side: "top", label: "Nudge up", key: "↑", icon: ArrowUp, cell: "col-start-2 row-start-1" },
  { side: "left", label: "Nudge left", key: "←", icon: ArrowLeft, cell: "col-start-1 row-start-2" },
  { side: "right", label: "Nudge right", key: "→", icon: ArrowRight, cell: "col-start-3 row-start-2" },
  { side: "bottom", label: "Nudge down", key: "↓", icon: ArrowDown, cell: "col-start-2 row-start-3" },
] as const;

export default function TooltipSides() {
  return (
    <div className="grid grid-cols-3 grid-rows-3 place-items-center gap-1.5">
      <span
        aria-hidden
        className="col-start-2 row-start-2 size-9 rounded-lg border border-dashed border-white/20 bg-white/[0.03]"
      />
      {nudges.map(({ side, label, key, icon: Icon, cell }) => (
        <div key={side} className={cell}>
          <Tooltip
            side={side}
            content={
              <span className="flex items-center gap-2">
                {label}
                <kbd className="font-sans text-white/45">{key}</kbd>
              </span>
            }
          >
            <Button variant="ghost" size="icon" aria-label={label} className="size-9">
              <Icon />
            </Button>
          </Tooltip>
        </div>
      ))}
    </div>
  );
}
```

### Colors

Pass a palette name or any hex value to color.

```tsx
import { Tooltip } from "@/components/ui/tooltip";

const services = [
  { name: "API", color: "green", hex: "#34d399", detail: "Operational · 99.99% uptime this month" },
  { name: "Webhooks", color: "amber", hex: "#fbbf24", detail: "Degraded · p95 latency 1.8s in eu-west-1" },
  { name: "Edge network", color: "red", hex: "#ff4d5e", detail: "Outage · investigating 503s in ap-south-1" },
  { name: "Builds", color: "blue", hex: "#4f8bff", detail: "Maintenance · queue paused until 14:00 UTC" },
] as const;

export default function TooltipColors() {
  return (
    <div className="flex flex-wrap items-center justify-center gap-2">
      {services.map((service) => (
        <Tooltip key={service.name} color={service.color} content={service.detail}>
          <button
            type="button"
            className="inline-flex h-8 items-center gap-2 rounded-full border border-white/10 bg-white/[0.03] px-3 text-xs text-white/70 outline-none transition-colors duration-150 hover:border-white/20 hover:text-white/90 focus-visible:ring-2 focus-visible:ring-white/40 focus-visible:ring-offset-2 focus-visible:ring-offset-[#05060a]"
          >
            <span
              aria-hidden
              className="size-1.5 rounded-full"
              style={{ backgroundColor: service.hex, boxShadow: `0 0 8px ${service.hex}` }}
            />
            {service.name}
          </button>
        </Tooltip>
      ))}
    </div>
  );
}
```

### On a disabled button

Disabled buttons get no pointer or focus events, so wrap them in a focusable span.

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

export default function TooltipDisabled() {
  return (
    <div className="flex items-center gap-3">
      <Button variant="ghost">Save draft</Button>
      <Tooltip content="Add a title before publishing">
        {/* Disabled buttons ignore the pointer and can't take focus, so the span does both. */}
        <span
          tabIndex={0}
          className="inline-flex rounded-lg outline-none focus-visible:ring-2 focus-visible:ring-[rgb(var(--neon-accent,34_211_238)/0.6)] focus-visible:ring-offset-2 focus-visible:ring-offset-[#05060a]"
        >
          <Button variant="solid" disabled>
            Publish
          </Button>
        </span>
      </Tooltip>
    </div>
  );
}
```

### Longer text

Tooltips stay on one line by default. Set a max width and whitespace-normal through className to wrap.

```tsx
import { Info } from "lucide-react";
import { Tooltip } from "@/components/ui/tooltip";

export default function TooltipWrapping() {
  return (
    <div className="flex items-center gap-1.5 text-sm text-white/70">
      Usage-based billing
      <Tooltip
        side="right"
        content="Billed per 1,000 requests at the end of each cycle. The first 50,000 requests every month are free."
        className="max-w-[240px] whitespace-normal leading-5"
      >
        <button
          type="button"
          aria-label="How usage-based billing works"
          className="flex size-6 items-center justify-center rounded-full text-white/40 outline-none transition-colors duration-150 hover:text-white/80 focus-visible:ring-2 focus-visible:ring-[rgb(var(--neon-accent,34_211_238)/0.6)] focus-visible:ring-offset-2 focus-visible:ring-offset-[#05060a]"
        >
          <Info className="size-4" aria-hidden />
        </button>
      </Tooltip>
    </div>
  );
}
```

## API reference

### Tooltip

Other props, including className, go to the tooltip bubble.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `content` | `ReactNode` | — | What the tooltip says. Keep it short and non-interactive. |
| `children` | `ReactElement` | — | The trigger. A single element that accepts focus and aria-describedby. |
| `side` | `"top" \| "right" \| "bottom" \| "left"` | `"top"` | Side of the trigger the tooltip appears on. |
| `align` | `"start" \| "center" \| "end"` | `"center"` | Alignment along that side. |
| `delay` | `number` | `300` | Milliseconds before opening on hover. Focus opens immediately and closing is always immediate. |
| `color` | `NeonColor` | `inherited` | Palette name or hex. Falls back to --neon-accent, then cyan. |
| `disabled` | `boolean` | `false` | Never opens. |
| `open` | `boolean` | — | Controlled open state. |
| `defaultOpen` | `boolean` | `false` | Initial state when uncontrolled. |
| `onOpenChange` | `(open: boolean) => void` | — | Called when the tooltip wants to open or close. |

## Accessibility

- The trigger gets aria-describedby pointing at the tooltip while it's open.
- Opens on mouse hover and keyboard focus, never on touch, so don't put anything essential in a tooltip.
- Escape, blur, pointer down and leaving the trigger all close it; you can move the pointer onto the tooltip without it closing.
- Positioned with CSS, not measured: it won't flip at the viewport edge and an overflow-hidden ancestor will clip it.

## Source

`components/ui/tooltip.tsx`

```tsx
"use client";

import * as React from "react";
import { AnimatePresence, motion, useReducedMotion } from "motion/react";

import { cn } from "@/lib/utils";
import { neonVars, type NeonColor } from "@/lib/neon";

type Side = "top" | "right" | "bottom" | "left";
type Align = "start" | "center" | "end";

const EASE = [0.23, 1, 0.32, 1] as const;
const SKIP_DELAY_WINDOW = 300;

// Shared by every tooltip: once one has been open, the next opens without a delay.
let lastClosedAt = 0;

function markClosed() {
  lastClosedAt = Date.now();
}

function closedRecently() {
  return Date.now() - lastClosedAt < SKIP_DELAY_WINDOW;
}

function isFocusVisible(element: Element) {
  try {
    return element.matches(":focus-visible");
  } catch {
    return true;
  }
}

const sides: Record<Side, string> = {
  top: "bottom-full pb-2",
  bottom: "top-full pt-2",
  left: "right-full pr-2",
  right: "left-full pl-2",
};

const aligns: Record<"x" | "y", Record<Align, string>> = {
  x: { start: "left-0", center: "left-1/2 -translate-x-1/2", end: "right-0" },
  y: { start: "top-0", center: "top-1/2 -translate-y-1/2", end: "bottom-0" },
};

const arrowSides: Record<Side, string> = {
  top: "-bottom-1 border-b border-r",
  bottom: "-top-1 border-l border-t",
  left: "-right-1 border-r border-t",
  right: "-left-1 border-b border-l",
};

const arrowAligns: Record<"x" | "y", Record<Align, string>> = {
  x: { start: "left-2.5", center: "left-1/2 -ml-1", end: "right-2.5" },
  y: { start: "top-2.5", center: "top-1/2 -mt-1", end: "bottom-2.5" },
};

// Where the arrow sits, so the bubble grows out of it.
const origins: Record<Align, string> = {
  start: "14px",
  center: "50%",
  end: "calc(100% - 14px)",
};

// The bubble starts nudged toward the trigger and settles outward.
const nudges: Record<Side, { x?: number; y?: number }> = {
  top: { y: 4 },
  bottom: { y: -4 },
  left: { x: 4 },
  right: { x: -4 },
};

export interface TooltipProps
  extends Omit<
    React.HTMLAttributes<HTMLSpanElement>,
    "content" | "color" | "children" | "onAnimationStart" | "onDrag" | "onDragStart" | "onDragEnd"
  > {
  content: React.ReactNode;
  /** The trigger. A single element that accepts focus and ARIA props. */
  children: React.ReactElement;
  side?: Side;
  align?: Align;
  /** Milliseconds before opening on hover. Closing is immediate. */
  delay?: number;
  /** Palette name or hex. Inherits `--neon-accent` when omitted. */
  color?: NeonColor;
  disabled?: boolean;
  open?: boolean;
  defaultOpen?: boolean;
  onOpenChange?: (open: boolean) => void;
}

const Tooltip = React.forwardRef<HTMLSpanElement, TooltipProps>(
  (
    {
      content,
      children,
      side = "top",
      align = "center",
      delay = 300,
      color,
      disabled = false,
      open: openProp,
      defaultOpen = false,
      onOpenChange,
      className,
      style,
      ...props
    },
    ref,
  ) => {
    const id = React.useId();
    const reduceMotion = useReducedMotion();
    const [uncontrolledOpen, setUncontrolledOpen] = React.useState(defaultOpen);
    const [instant, setInstant] = React.useState(false);
    const timer = React.useRef<number | undefined>(undefined);
    const isControlled = openProp !== undefined;
    const open = !disabled && (isControlled ? openProp : uncontrolledOpen);

    const setOpen = React.useCallback(
      (next: boolean) => {
        if (next === open) return;
        if (!next) markClosed();
        if (!isControlled) setUncontrolledOpen(next);
        onOpenChange?.(next);
      },
      [open, isControlled, onOpenChange],
    );

    React.useEffect(() => () => window.clearTimeout(timer.current), []);

    React.useEffect(() => {
      if (!open) return;
      const onKeyDown = (event: KeyboardEvent) => {
        if (event.key !== "Escape") return;
        // Close the tooltip first, not the dialog or menu it sits in.
        event.preventDefault();
        setOpen(false);
      };
      document.addEventListener("keydown", onKeyDown);
      return () => document.removeEventListener("keydown", onKeyDown);
    }, [open, setOpen]);

    const show = (immediate: boolean) => {
      if (disabled) return;
      window.clearTimeout(timer.current);
      const sequential = closedRecently();
      if (immediate || sequential || delay <= 0) {
        setInstant(sequential);
        setOpen(true);
        return;
      }
      timer.current = window.setTimeout(() => {
        setInstant(false);
        setOpen(true);
      }, delay);
    };

    const hide = () => {
      window.clearTimeout(timer.current);
      setOpen(false);
    };

    const child = children as React.ReactElement<React.HTMLAttributes<HTMLElement>>;
    const describedBy =
      [child.props["aria-describedby"], open ? id : undefined].filter(Boolean).join(" ") ||
      undefined;

    const trigger = React.cloneElement(child, {
      "aria-describedby": describedBy,
      onFocus: (event: React.FocusEvent<HTMLElement>) => {
        child.props.onFocus?.(event);
        if (!event.defaultPrevented && isFocusVisible(event.currentTarget)) show(true);
      },
      onBlur: (event: React.FocusEvent<HTMLElement>) => {
        child.props.onBlur?.(event);
        hide();
      },
    });

    const axis = side === "top" || side === "bottom" ? "x" : "y";
    const along = origins[align];
    const transformOrigin = {
      top: `${along} 100%`,
      bottom: `${along} 0%`,
      left: `100% ${along}`,
      right: `0% ${along}`,
    }[side];

    return (
      <span
        className="relative inline-flex"
        onPointerEnter={(event) => {
          if (event.pointerType === "mouse") show(false);
        }}
        onPointerLeave={hide}
        onPointerDown={hide}
      >
        {trigger}
        <AnimatePresence>
          {open && (
            <span key="tooltip" className={cn("absolute z-50", sides[side], aligns[axis][align])}>
              <motion.span
                ref={ref}
                id={id}
                role="tooltip"
                initial={
                  instant
                    ? false
                    : reduceMotion
                      ? { opacity: 0 }
                      : { opacity: 0, scale: 0.96, ...nudges[side] }
                }
                animate={{ opacity: 1, scale: 1, x: 0, y: 0 }}
                exit={
                  reduceMotion
                    ? { opacity: 0, transition: { duration: 0.1 } }
                    : { opacity: 0, scale: 0.96, transition: { duration: 0.1, ease: EASE } }
                }
                transition={{ duration: 0.15, ease: EASE }}
                style={{ ...neonVars(color, style), transformOrigin }}
                className={cn(
                  "[--neon:var(--neon-accent,34_211_238)]",
                  "relative block w-max whitespace-nowrap rounded-lg border border-[rgb(var(--neon)/0.4)] bg-[#0a0b11] px-2.5 py-1.5 text-xs leading-4 text-white/90",
                  "shadow-[0_0_14px_-2px_rgb(var(--neon)/0.35),0_8px_20px_-8px_rgb(0_0_0/0.8)]",
                  className,
                )}
                {...props}
              >
                <span
                  aria-hidden
                  className={cn(
                    "absolute size-2 rotate-45 border-[rgb(var(--neon)/0.4)] bg-[#0a0b11]",
                    arrowSides[side],
                    arrowAligns[axis][align],
                  )}
                />
                {content}
              </motion.span>
            </span>
          )}
        </AnimatePresence>
      </span>
    );
  },
);
Tooltip.displayName = "Tooltip";

export { Tooltip };
```


---

# Component: Neon Text

> Text rendered as a glowing tube sign, with optional power-on flicker.

Category: Effects. Docs: https://get-neonkit.vercel.app/components/neon-text

## Installation

```bash
npx shadcn@latest add https://get-neonkit.vercel.app/r/neon-text.json
```

With the `@neonkit` namespace configured: `npx shadcn@latest add @neonkit/neon-text`.

npm dependencies: `motion`. Also needs `lib/utils.ts` (`cn`) and `lib/neon.ts` (`neonVars`), which the CLI adds.

## Usage

```tsx
import { NeonText } from "@/components/ui/neon-text"

<NeonText as="h1" color="magenta" buzz>open late</NeonText>
```

## Examples

### Sign

```tsx
import { NeonText } from "@/components/ui/neon-text";

export default function NeonTextDemo() {
  return (
    <div className="flex flex-col items-center gap-1 text-center">
      <NeonText as="p" color="magenta" buzz className="text-6xl font-light tracking-tight">
        open late
      </NeonText>
      <NeonText as="p" color="cyan" className="text-sm uppercase tracking-[0.5em]">
        arcade · noodles · karaoke
      </NeonText>
    </div>
  );
}
```

### Power switch

Flip on to replay the power-on flicker. Off leaves the glass tube visible.

```tsx
"use client";

import * as React from "react";
import { Power } from "lucide-react";
import { NeonText } from "@/components/ui/neon-text";

export default function NeonTextPower() {
  const [on, setOn] = React.useState(true);

  return (
    <div className="flex flex-col items-center gap-8">
      <NeonText on={on} color="lime" className="text-5xl font-semibold tracking-tight">
        VACANCY
      </NeonText>
      <button
        type="button"
        onClick={() => setOn((v) => !v)}
        aria-pressed={on}
        className="inline-flex items-center gap-2 rounded-full border border-white/10 bg-white/[0.03] px-4 py-2 text-xs uppercase tracking-[0.2em] text-white/60 transition-colors hover:border-white/20 hover:text-white/90"
      >
        <Power className="size-3.5" /> {on ? "Switch off" : "Switch on"}
      </button>
    </div>
  );
}
```

### Colors

```tsx
import { NeonText } from "@/components/ui/neon-text";

const signs = [
  { text: "Bar", color: "pink" },
  { text: "24h", color: "amber" },
  { text: "Taxi", color: "lime" },
  { text: "Hotel", color: "red" },
  { text: "Live", color: "blue" },
] as const;

export default function NeonTextColors() {
  return (
    <div className="flex flex-wrap items-baseline justify-center gap-x-10 gap-y-4">
      {signs.map((sign) => (
        <NeonText key={sign.text} color={sign.color} flicker={false} className="text-4xl font-medium">
          {sign.text}
        </NeonText>
      ))}
    </div>
  );
}
```

## API reference

### NeonText

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `as` | `"span" \| "p" \| "div" \| "h1" \| "h2" \| "h3" \| "h4"` | `"span"` | Element to render. |
| `color` | `NeonColor` | `inherited` | Tube color. |
| `on` | `boolean` | `true` | Lit or dark. Turning it on replays the flicker. |
| `flicker` | `boolean` | `true` | Letters stutter on one at a time when lit. |
| `buzz` | `boolean` | `false` | A random letter buzzes every few seconds. |

## Accessibility

- String children are split into letters for the flicker; screen readers get the whole word once.
- Flicker and buzz are skipped when the user prefers reduced motion.

## Source

`components/ui/neon-text.tsx`

```tsx
"use client";

import * as React from "react";
import { motion, useReducedMotion } from "motion/react";

import { cn } from "@/lib/utils";
import { neonVars, type NeonColor } from "@/lib/neon";

const lit =
  "[color:color-mix(in_srgb,rgb(var(--neon))_30%,white)] [text-shadow:0_0_1px_rgb(255_255_255/0.9),0_0_6px_rgb(var(--neon)),0_0_16px_rgb(var(--neon)),0_0_38px_rgb(var(--neon)/0.75),0_0_80px_rgb(var(--neon)/0.45)]";
const unlit = "text-[rgb(var(--neon)/0.16)] [text-shadow:0_1px_0_rgb(255_255_255/0.06)]";

// Opacity keyframes for a tube catching: a couple of stutters, then steady.
const powerOn = [0, 1, 0.1, 0.9, 0.25, 1, 1];
const powerOnTimes = [0, 0.1, 0.18, 0.3, 0.38, 0.55, 1];

export interface NeonTextProps
  extends Omit<React.HTMLAttributes<HTMLElement>, "color"> {
  /** Palette name or any hex color. Inherits `--neon-accent` when omitted. */
  color?: NeonColor;
  /** Element to render. */
  as?: "span" | "p" | "div" | "h1" | "h2" | "h3" | "h4";
  /** Lit or dark. Flipping to true replays the power-on flicker. */
  on?: boolean;
  /** Letters stutter on one by one when the sign lights up. */
  flicker?: boolean;
  /** Every few seconds a random letter buzzes, like an ageing tube. */
  buzz?: boolean;
}

const NeonText = React.forwardRef<HTMLElement, NeonTextProps>(
  (
    {
      className,
      style,
      color,
      as: Tag = "span",
      on = true,
      flicker = true,
      buzz = false,
      children,
      ...props
    },
    ref,
  ) => {
    const reduceMotion = useReducedMotion();
    const [buzzing, setBuzzing] = React.useState(-1);
    const [settled, setSettled] = React.useState(false);
    const text = typeof children === "string" ? children : null;
    const letters = React.useMemo(() => (text ? Array.from(text) : []), [text]);

    // Stable pseudo-random stagger per letter, so SSR and client agree.
    const delays = React.useMemo(
      () => letters.map((_, i) => ((i * 7919) % 11) / 22),
      [letters],
    );

    React.useEffect(() => {
      setSettled(false);
      if (!on) return;
      const timeout = setTimeout(() => setSettled(true), 1600);
      return () => clearTimeout(timeout);
    }, [on]);

    React.useEffect(() => {
      if (!buzz || !settled || reduceMotion || letters.length === 0) return;
      let timeout: ReturnType<typeof setTimeout>;
      const schedule = () => {
        timeout = setTimeout(() => {
          const candidates = letters
            .map((char, i) => (char.trim() ? i : -1))
            .filter((i) => i >= 0);
          setBuzzing(candidates[Math.floor(Math.random() * candidates.length)]);
          timeout = setTimeout(() => {
            setBuzzing(-1);
            schedule();
          }, 700);
        }, 2600 + Math.random() * 4200);
      };
      schedule();
      return () => clearTimeout(timeout);
    }, [buzz, settled, reduceMotion, letters]);

    const animateLetter = (i: number) => {
      if (buzzing === i) return { opacity: [1, 0.3, 1, 0.55, 1] };
      if (!on || settled || reduceMotion || !flicker) return { opacity: 1 };
      return { opacity: powerOn };
    };

    return (
      <Tag
        ref={ref as React.Ref<HTMLHeadingElement>}
        style={neonVars(color, style)}
        className={cn(
          "[--neon:var(--neon-accent,34_211_238)]",
          "transition-[color,text-shadow] duration-150",
          on ? lit : unlit,
          className,
        )}
        {...props}
      >
        {text ? (
          <>
            <span className="sr-only">{text}</span>
            <span aria-hidden>
              {letters.map((char, i) => (
                <motion.span
                  key={`${i}-${on}`}
                  className="inline-block whitespace-pre"
                  initial={on && flicker && !reduceMotion ? { opacity: 0 } : false}
                  animate={animateLetter(i)}
                  transition={
                    buzzing === i
                      ? { duration: 0.6, ease: "linear" }
                      : {
                          duration: 0.9,
                          delay: delays[i],
                          times: powerOnTimes,
                          ease: "linear",
                        }
                  }
                >
                  {char}
                </motion.span>
              ))}
            </span>
          </>
        ) : (
          children
        )}
      </Tag>
    );
  },
);
NeonText.displayName = "NeonText";

export { NeonText };
```


---

# Component: Border Beam

> A beam of light that travels around any element's border.

Category: Effects. Docs: https://get-neonkit.vercel.app/components/border-beam

## Installation

```bash
npx shadcn@latest add https://get-neonkit.vercel.app/r/border-beam.json
```

With the `@neonkit` namespace configured: `npx shadcn@latest add @neonkit/border-beam`.

npm dependencies: none. Also needs `lib/utils.ts` (`cn`) and `lib/neon.ts` (`neonVars`), which the CLI adds.

## Usage

```tsx
import { BorderBeam } from "@/components/ui/border-beam"

<BorderBeam colorTo="magenta" className="rounded-2xl border border-white/10 p-6">
  Anything
</BorderBeam>
```

## Examples

### Card

```tsx
import { BorderBeam } from "@/components/ui/border-beam";

export default function BorderBeamDemo() {
  return (
    <BorderBeam colorTo="magenta" className="w-full max-w-sm rounded-2xl border border-white/10 bg-white/[0.02]">
      <div className="space-y-4 p-6">
        <div className="flex items-center justify-between">
          <p className="text-sm text-white/55">Build #2841</p>
          <span className="font-mono text-xs text-white/40">main · 4f2a91c</span>
        </div>
        <p className="text-lg font-medium text-white/90">Compiling 214 modules</p>
        <div className="h-1 overflow-hidden rounded-full bg-white/10">
          <div className="h-full w-2/3 rounded-full bg-[rgb(var(--neon-accent,34_211_238))]" />
        </div>
        <p className="text-xs text-white/40">Started 38s ago by @aadi</p>
      </div>
    </BorderBeam>
  );
}
```

### Around a button

The beam takes its radius from the wrapper, so round it to match.

```tsx
import { ArrowRight } from "lucide-react";
import { BorderBeam } from "@/components/ui/border-beam";

export default function BorderBeamButton() {
  return (
    <BorderBeam color="lime" duration={3} size={120} className="rounded-full">
      <a
        href="#"
        className="inline-flex h-11 items-center gap-2 rounded-full border border-white/10 bg-[#0a0b11] px-5 text-sm font-medium text-white/90 transition-colors hover:text-white"
      >
        Claim your handle <ArrowRight className="size-4" />
      </a>
    </BorderBeam>
  );
}
```

### Speed, length, direction

```tsx
import { BorderBeam } from "@/components/ui/border-beam";

export default function BorderBeamSettings() {
  return (
    <div className="grid w-full max-w-lg gap-4 sm:grid-cols-2">
      <BorderBeam color="cyan" duration={8} className="rounded-xl border border-white/10 p-5">
        <p className="text-xs uppercase tracking-[0.2em] text-white/40">Slow</p>
        <p className="mt-2 text-sm text-white/80">duration 8 · size 90</p>
      </BorderBeam>
      <BorderBeam color="pink" colorTo="violet" duration={2.5} size={160} reverse borderWidth={2} className="rounded-xl border border-white/10 p-5">
        <p className="text-xs uppercase tracking-[0.2em] text-white/40">Fast, reversed</p>
        <p className="mt-2 text-sm text-white/80">duration 2.5 · size 160 · 2px</p>
      </BorderBeam>
    </div>
  );
}
```

## API reference

### BorderBeam

A div wrapper. Give it the same rounding as your content.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `color` | `NeonColor` | `inherited` | Head of the beam. |
| `colorTo` | `NeonColor` | `color` | Tail of the beam. |
| `duration` | `number` | `6` | Seconds per lap. |
| `size` | `number` | `90` | Beam length in degrees. |
| `borderWidth` | `number` | `1` | Thickness in pixels. |
| `reverse` | `boolean` | `false` | Run counter-clockwise. |

## Accessibility

- The beam is decorative and hidden from assistive tech.
- Uses CSS @property, supported in every current browser. With reduced motion the beam holds still.

## Source

`components/ui/border-beam.tsx`

```tsx
"use client";

import * as React from "react";

import { cn } from "@/lib/utils";
import { neonVars, toNeonRgb, type NeonColor } from "@/lib/neon";

// @property lets the browser interpolate the angle, so the conic gradient
// can rotate without rotating (and clipping) a real element.
const css = `
@property --nk-beam-angle { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@keyframes nk-beam { to { --nk-beam-angle: 360deg; } }
.nk-beam {
  background: conic-gradient(from var(--nk-beam-angle), transparent 0deg, transparent calc(360deg - var(--nk-beam-size)), rgb(var(--nk-beam-to) / 0.9), rgb(var(--neon)) 360deg);
  animation: nk-beam var(--nk-beam-duration) linear infinite;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
@media (prefers-reduced-motion: reduce) { .nk-beam { animation: none; --nk-beam-angle: 135deg; } }
`;

export interface BorderBeamProps
  extends Omit<React.HTMLAttributes<HTMLDivElement>, "color"> {
  /** Head of the beam. Inherits `--neon-accent` when omitted. */
  color?: NeonColor;
  /** Tail of the beam. Defaults to the head color. */
  colorTo?: NeonColor;
  /** Seconds per lap. */
  duration?: number;
  /** Beam length, in degrees of the lap. */
  size?: number;
  /** Border thickness in pixels. */
  borderWidth?: number;
  /** Run counter-clockwise. */
  reverse?: boolean;
}

const BorderBeam = React.forwardRef<HTMLDivElement, BorderBeamProps>(
  (
    {
      className,
      style,
      color,
      colorTo,
      duration = 6,
      size = 90,
      borderWidth = 1,
      reverse = false,
      children,
      ...props
    },
    ref,
  ) => {
    const beamStyle = {
      "--nk-beam-to": colorTo ? toNeonRgb(colorTo) : "var(--neon)",
      "--nk-beam-size": `${size}deg`,
      "--nk-beam-duration": `${duration}s`,
      padding: borderWidth,
      animationDirection: reverse ? "reverse" : undefined,
    } as React.CSSProperties;

    return (
      <div
        ref={ref}
        style={neonVars(color, style)}
        className={cn(
          "[--neon:var(--neon-accent,34_211_238)]",
          "relative rounded-2xl",
          className,
        )}
        {...props}
      >
        <style>{css}</style>
        {children}
        <span
          aria-hidden
          style={beamStyle}
          className="nk-beam pointer-events-none absolute inset-0 rounded-[inherit]"
        />
        <span
          aria-hidden
          style={{ ...beamStyle, padding: borderWidth + 2 }}
          className="nk-beam pointer-events-none absolute -inset-0.5 rounded-[inherit] opacity-60 blur-[6px]"
        />
      </div>
    );
  },
);
BorderBeam.displayName = "BorderBeam";

export { BorderBeam };
```


---

# Component: Spotlight Card

> Card whose border and surface light up under the cursor.

Category: Effects. Docs: https://get-neonkit.vercel.app/components/spotlight-card

## Installation

```bash
npx shadcn@latest add https://get-neonkit.vercel.app/r/spotlight-card.json
```

With the `@neonkit` namespace configured: `npx shadcn@latest add @neonkit/spotlight-card`.

npm dependencies: none. Also needs `lib/utils.ts` (`cn`) and `lib/neon.ts` (`neonVars`), which the CLI adds.

## Usage

```tsx
import { SpotlightCard } from "@/components/ui/spotlight-card"

<SpotlightCard className="p-6">Hover me</SpotlightCard>
```

## Examples

### Feature grid

```tsx
import { Gauge, Layers, ShieldCheck } from "lucide-react";
import { SpotlightCard } from "@/components/ui/spotlight-card";

const features = [
  { icon: Gauge, title: "Edge cached", body: "Static pages ship from 300 locations. Median TTFB 41ms." },
  { icon: ShieldCheck, title: "Signed builds", body: "Every artifact is checksummed and traceable to a commit." },
  { icon: Layers, title: "Preview per branch", body: "Push a branch, get a URL. Delete the branch, it's gone." },
];

export default function SpotlightCardDemo() {
  return (
    <div className="grid w-full max-w-3xl gap-3 sm:grid-cols-3">
      {features.map(({ icon: Icon, title, body }) => (
        <SpotlightCard key={title} className="p-5">
          <Icon className="size-5 text-white/60" />
          <h3 className="mt-6 text-sm font-medium text-white/90">{title}</h3>
          <p className="mt-1.5 text-sm leading-relaxed text-white/50">{body}</p>
        </SpotlightCard>
      ))}
    </div>
  );
}
```

### Wider light

radius sets the size of the pool of light.

```tsx
import { SpotlightCard } from "@/components/ui/spotlight-card";

export default function SpotlightCardProfile() {
  return (
    <SpotlightCard color="violet" radius={480} className="w-full max-w-sm p-6">
      <p className="font-mono text-xs uppercase tracking-[0.2em] text-white/40">Now playing</p>
      <p className="mt-4 text-2xl font-medium tracking-tight text-white/90">Midnight City</p>
      <p className="text-sm text-white/50">M83 · Hurry Up, We&apos;re Dreaming</p>
      <div className="mt-6 flex items-center gap-3 text-xs tabular-nums text-white/40">
        <span>1:42</span>
        <div className="h-1 flex-1 rounded-full bg-white/10">
          <div className="h-full w-[42%] rounded-full bg-[rgb(168_85_247)] shadow-[0_0_10px_rgb(168_85_247/0.7)]" />
        </div>
        <span>4:03</span>
      </div>
    </SpotlightCard>
  );
}
```

## API reference

### SpotlightCard

Also accepts every div attribute.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `color` | `NeonColor` | `inherited` | Light color. |
| `radius` | `number` | `360` | Diameter of the light in pixels. |

## Accessibility

- The pointer position is written to CSS variables directly, so moving the cursor never re-renders React.
- The light also appears when something inside the card has keyboard focus.

## Source

`components/ui/spotlight-card.tsx`

```tsx
"use client";

import * as React from "react";

import { cn } from "@/lib/utils";
import { neonVars, type NeonColor } from "@/lib/neon";

export interface SpotlightCardProps
  extends Omit<React.HTMLAttributes<HTMLDivElement>, "color"> {
  /** Palette name or any hex color. Inherits `--neon-accent` when omitted. */
  color?: NeonColor;
  /** Diameter of the light in pixels. */
  radius?: number;
}

const SpotlightCard = React.forwardRef<HTMLDivElement, SpotlightCardProps>(
  (
    { className, style, color, radius = 360, children, onPointerMove, ...props },
    forwardedRef,
  ) => {
    const ref = React.useRef<HTMLDivElement>(null);
    React.useImperativeHandle(forwardedRef, () => ref.current as HTMLDivElement);

    // Write the pointer position straight to CSS variables: no re-renders.
    const handlePointerMove = (event: React.PointerEvent<HTMLDivElement>) => {
      onPointerMove?.(event);
      const node = ref.current;
      if (!node) return;
      const rect = node.getBoundingClientRect();
      node.style.setProperty("--x", `${event.clientX - rect.left}px`);
      node.style.setProperty("--y", `${event.clientY - rect.top}px`);
    };

    return (
      <div
        ref={ref}
        onPointerMove={handlePointerMove}
        style={neonVars(color, { "--r": `${radius / 2}px`, ...style } as React.CSSProperties)}
        className={cn(
          "[--neon:var(--neon-accent,34_211_238)] [--x:50%] [--y:50%]",
          "group/spotlight relative isolate overflow-hidden rounded-2xl border border-white/10 bg-white/[0.03]",
          className,
        )}
        {...props}
      >
        {/* Light on the surface */}
        <div
          aria-hidden
          className="pointer-events-none absolute inset-0 -z-10 opacity-0 transition-opacity duration-300 group-hover/spotlight:opacity-100 group-focus-within/spotlight:opacity-100 [background:radial-gradient(var(--r)_circle_at_var(--x)_var(--y),rgb(var(--neon)/0.12),transparent_70%)]"
        />
        {/* Light caught by the border */}
        <div
          aria-hidden
          className="pointer-events-none absolute inset-0 rounded-[inherit] p-px opacity-0 transition-opacity duration-300 group-hover/spotlight:opacity-100 group-focus-within/spotlight:opacity-100 [background:radial-gradient(calc(var(--r)*0.75)_circle_at_var(--x)_var(--y),rgb(var(--neon)),transparent_70%)] [mask:linear-gradient(#000_0_0)_content-box_exclude,linear-gradient(#000_0_0)]"
        />
        {children}
      </div>
    );
  },
);
SpotlightCard.displayName = "SpotlightCard";

export { SpotlightCard };
```


---

# Component: Retro Grid

> Synthwave perspective grid that scrolls toward the horizon.

Category: Effects. Docs: https://get-neonkit.vercel.app/components/retro-grid

## Installation

```bash
npx shadcn@latest add https://get-neonkit.vercel.app/r/retro-grid.json
```

With the `@neonkit` namespace configured: `npx shadcn@latest add @neonkit/retro-grid`.

npm dependencies: none. Also needs `lib/utils.ts` (`cn`) and `lib/neon.ts` (`neonVars`), which the CLI adds.

## Usage

```tsx
import { RetroGrid } from "@/components/ui/retro-grid"

<section className="relative overflow-hidden">
  <RetroGrid color="magenta" />
  <h1 className="relative">Hello</h1>
</section>
```

## Examples

### Hero background

```tsx
import { RetroGrid } from "@/components/ui/retro-grid";

export default function RetroGridDemo() {
  return (
    <div className="relative flex h-80 w-full items-start justify-center overflow-hidden rounded-xl bg-[#05060a] pt-14">
      <RetroGrid color="magenta" />
      <p className="relative text-center text-4xl font-semibold tracking-tight text-white/90">
        Drive
        <span className="block text-sm font-normal tracking-[0.4em] text-white/40 uppercase">
          into the night
        </span>
      </p>
    </div>
  );
}
```

### Angle, cell size and speed

```tsx
import { RetroGrid } from "@/components/ui/retro-grid";

export default function RetroGridSettings() {
  return (
    <div className="grid w-full gap-3 sm:grid-cols-2">
      <div className="relative h-56 overflow-hidden rounded-xl border border-white/10 bg-[#05060a]">
        <RetroGrid color="cyan" angle={60} cellSize={40} speed={0.8} />
        <p className="absolute left-4 top-4 font-mono text-xs text-white/50">angle 60 · cell 40 · speed 0.8</p>
      </div>
      <div className="relative h-56 overflow-hidden rounded-xl border border-white/10 bg-[#05060a]">
        <RetroGrid color="amber" angle={78} cellSize={80} speed={0} horizon={false} opacity={0.35} />
        <p className="absolute left-4 top-4 font-mono text-xs text-white/50">angle 78 · cell 80 · still</p>
      </div>
    </div>
  );
}
```

## API reference

### RetroGrid

Fills its nearest positioned parent. The horizon sits halfway down.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `color` | `NeonColor` | `inherited` | Line color. |
| `angle` | `number` | `70` | Floor tilt in degrees. |
| `cellSize` | `number` | `56` | Grid square size in pixels. |
| `speed` | `number` | `1.2` | Seconds to travel one cell. 0 stops it. |
| `opacity` | `number` | `0.55` | Line opacity. |
| `horizon` | `boolean` | `true` | Glowing horizon line. |

## Accessibility

- Decorative: rendered with aria-hidden and no pointer events. Stops moving under reduced motion.

## Source

`components/ui/retro-grid.tsx`

```tsx
"use client";

import * as React from "react";

import { cn } from "@/lib/utils";
import { neonVars, type NeonColor } from "@/lib/neon";

const css = `
@keyframes nk-retro-grid { from { transform: translateY(calc(var(--cell) * -1)); } to { transform: translateY(0); } }
.nk-retro-grid { animation: nk-retro-grid var(--speed) linear infinite; }
@media (prefers-reduced-motion: reduce) { .nk-retro-grid { animation: none; } }
`;

export interface RetroGridProps
  extends Omit<React.HTMLAttributes<HTMLDivElement>, "color"> {
  /** Line color. Inherits `--neon-accent` when omitted. */
  color?: NeonColor;
  /** Tilt of the floor in degrees. */
  angle?: number;
  /** Size of one grid square in pixels. */
  cellSize?: number;
  /** Seconds for the floor to travel one cell. 0 stops it. */
  speed?: number;
  /** Line opacity, 0 to 1. */
  opacity?: number;
  /** Glowing line where the floor meets the sky. */
  horizon?: boolean;
}

/**
 * A background layer. Place it inside a `relative` parent; it fills it.
 */
const RetroGrid = React.forwardRef<HTMLDivElement, RetroGridProps>(
  (
    {
      className,
      style,
      color,
      angle = 70,
      cellSize = 56,
      speed = 1.2,
      opacity = 0.55,
      horizon = true,
      ...props
    },
    ref,
  ) => {
    const vars = {
      "--cell": `${cellSize}px`,
      "--speed": `${speed}s`,
      "--line": `${opacity}`,
      ...style,
    } as React.CSSProperties;

    return (
      <div
        ref={ref}
        aria-hidden
        style={neonVars(color, vars)}
        className={cn(
          "[--neon:var(--neon-accent,34_211_238)]",
          "pointer-events-none absolute inset-0 overflow-hidden",
          className,
        )}
        {...props}
      >
        <style>{css}</style>
        <div className="absolute inset-x-0 bottom-0 top-1/2 [perspective-origin:50%_0%] [perspective:220px] [mask-image:linear-gradient(to_bottom,transparent,#000_40%)]">
          <div
            className="absolute inset-x-[-50%] top-0 h-full origin-top overflow-hidden"
            style={{ transform: `rotateX(${angle}deg)` }}
          >
            <div
              className={cn(
                "absolute inset-x-0 top-0 h-[calc(100%+var(--cell))] [background-size:var(--cell)_var(--cell)] [background-image:linear-gradient(to_right,rgb(var(--neon)/var(--line))_1px,transparent_0),linear-gradient(to_bottom,rgb(var(--neon)/var(--line))_1px,transparent_0)]",
                speed > 0 && "nk-retro-grid",
              )}
            />
          </div>
        </div>
        {horizon && (
          <div className="absolute inset-x-0 top-1/2 h-px -translate-y-px bg-[linear-gradient(to_right,transparent,rgb(var(--neon))_20%,rgb(var(--neon))_80%,transparent)] shadow-[0_0_14px_1px_rgb(var(--neon)/0.55),0_0_60px_6px_rgb(var(--neon)/0.3)]" />
        )}
      </div>
    );
  },
);
RetroGrid.displayName = "RetroGrid";

export { RetroGrid };
```