Theming

To retune the whole palette, the glow, the corners and the page surface at once, use the Theme Studio. It exports your globals.css, lib/neon.ts and a one-line shadcn install.

Per component

Pass a palette name or any hex value.

<Button color="lime">Approve</Button>
<Badge color="#ff6a00">Beta</Badge>

Per section

Components that are not given a color inherit --neon-accent from the nearest parent that sets it. neonVars sets it for you.

import { neonVars } from "@/lib/neon"

<section style={neonVars("violet")}>
  <Tabs>…</Tabs>      {/* violet */}
  <Switch />          {/* violet */}
  <Button color="red">Delete</Button> {/* still red */}
</section>

App-wide

Set the accent once in your global CSS. The value is three space-separated RGB channels, which lets components apply their own alpha.

:root {
  --neon-accent: 255 95 162; /* pink */
}

Palette

Eleven tuned colors. Each keeps 4.5:1 contrast with dark text when used as a solid fill.

• cyan#22d3ee
• blue#4f8bff
• violet#a855f7
• magenta#f046eb
• pink#ff5fa2
• red#ff4d5e
• orange#ff8a3d
• amber#fbbf24
• lime#a3e635
• green#34d399
• white#e6edf7

Changing the palette

The palette lives in lib/neon.ts. Rename, add or retune entries and the color prop picks them up, types included.

export const neonColors = {
  brand: "0 255 170", // your color, as r g b
  cyan: "34 211 238",
  // …
} as const