# Neon — Theme for React

> A self-contained cyberpunk theme preset: electric accents on near-black, thin CRT scanlines, condensed monospace type, and hard-edged HUD chrome with corner brackets. A seeded, subtle glitch tears the heading into a chromatic split, and a built-in radio switcher swaps the accent between yellow, cyan, and magenta. Reduced motion drops the glitch for a clean static HUD.

- Page: https://crucibleui.com/components/themes/neon
- Category: [themes](https://crucibleui.com/components/themes)
- Tier: pro (one-time purchase, see https://crucibleui.com/pricing)
- Engine: motion
- npm dependencies: motion

## Install

```bash
npx shadcn@latest add @crucible/neon
```

Pro install requires adding the token-bearing `@crucible` registry to components.json (issued at https://crucibleui.com/account after purchase).

Import from `@/components/crucible/neon`.

## Props (`NeonProps`)

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `accent?` | `NeonAccentName` | — | Controlled accent name. Leave undefined for uncontrolled. |
| `defaultAccent?` | `NeonAccentName` | `"yellow"` | Initial accent when uncontrolled. |
| `onAccentChange?` | `(accent: NeonAccentName) => void` | — | Fires with the next accent whenever the switcher changes. |
| `eyebrow?` | `string` | `"// SECTOR 07"` | Small eyebrow label above the heading. |
| `title?` | `string` | `"NEON DISTRICT"` | Heading text — this line receives the seeded glitch shear. |
| `children?` | `React.ReactNode` | — | Panel body. Falls back to a sample readout when omitted. |
| `speed?` | `number` | `1` | Glitch cadence multiplier — higher fires the shear more often. |
| `intensity?` | `number` | `1` | Glitch shear magnitude (chromatic offset in px scales with this). |
| `paused?` | `boolean` | `false` | Freeze the glitch and scan sweep at a clean static frame. |
| `scanlines?` | `boolean` | `true` | Render the thin CRT scanline texture. |
| `showSwitcher?` | `boolean` | `true` | Show the built-in accent radio switcher. |
| `accentColors?` | `Partial<Record<NeonAccentName, string>>` | — | Override the primary hue of any preset (any palette reachable). |
| `seed?` | `number` | `1` | Seed for the deterministic glitch schedule. |

Also accepts: `Omit<React.HTMLAttributes<HTMLDivElement>, "onChange" | "title">`.

## Usage example

```tsx
"use client";

import * as React from "react";

import { Neon, type NeonAccentName } from "@/components/crucible/neon";

export default function NeonDemo() {
  const [accent, setAccent] = React.useState<NeonAccentName>("yellow");

  return (
    <div className="relative isolate flex h-full min-h-[360px] w-full items-center justify-center overflow-hidden rounded-xl bg-neutral-950">
      <div
        aria-hidden
        className="pointer-events-none absolute inset-0 bg-[radial-gradient(ellipse_at_center,rgba(255,255,255,0.04),transparent_70%)]"
      />
      <div className="relative z-10 flex flex-col items-center gap-5 px-6 py-8">
        <Neon accent={accent} onAccentChange={setAccent} />
        <p className="text-center text-sm text-neutral-500">
          Pick an accent — click a swatch or focus it and use the arrow keys.
        </p>
      </div>
    </div>
  );
}
```

## Accessibility & performance

Honors `prefers-reduced-motion` with a designed static frame or fade (never a blank box) and passes `className` through.