NeonKit: neon UI components for React and Tailwind CSS
139 components, 60 blocks and 5 templates
MIT licensed, v1.7
Neon UI components for React and Tailwind. Calm at rest, lit when it matters. The code lands in your repo and it's yours.
Turn the knob. Every component on the site follows.
Nothing glows until it means something.
Lights
Off. Every part at rest.
Knobs, faders and a working oscilloscope.
11 instruments that set, measure and count, wired together below. Turn the knob, push the fader, flip the cover and arm it. All 11 instruments
Six layers in a 44 by 24 switch.
A native button carries the role, the keyboard and the form value. What you see is five spans on top of it, each one a class you can change in your copy.
The element
A real <button role="switch"> with aria-checked. Space and Enter toggle it.
Track
44 × 24, fully round, a white 1px border at 10%.
Halo
14px at 45%, 20px under the pointer. Light, never a border.
Tube
A 1px border at 75% over a 20% fill. Strikes twice when it turns on, then holds.
Thumb
20px, travels 20px in 180ms on an ease-out curve.
Focus ring
2px at 60%, 2px out. 4.4:1 on the page, in your current color.
The rules fit on one page.
One variable for color, one for brightness, and a habit of treating glow as light. Everything on this site, and everything you install, follows them. Read the design language
One variable.
--neon holds three RGB channels. Every component reads it, so a class or a style prop recolors anything and its children inherit it.
--neon: 34 211 238;Eleven gels by name, or any hex. The page follows whichever you pick.
A core and a halo.
Lit things get a white-hot core, colored glass and a soft halo. Nothing glows at rest. --neon-glow scales every halo in the library.
- Core
- white at 92%, a third of the tube
- Glass
- the color, full strength
- Halo
- 18px blur at 45%
--neon-glow: 1.000 is a flat dark UI. 1.5 is a bar sign at 2am.
Wide for signs, plain for reading.
Mona Sans carries the hierarchy and widens on its own axis for headlines. Fragment Mono is for values that change. Tilt Neon only goes on actual signs.
Body, Mona Sans 100%
Deploys that land at 2am.
Values, Fragment Mono
−16.2 LUFS · 0.38 s
Signs, Tilt Neon
open late
wdth 112Headlines sit at 112 and weight 620. Body stays at 100 and 400.
Ease out, strike on.
Interface moves 150 to 300ms on an ease-out curve. Lights don't fade in: they strike, flicker twice and hold, like a tube warming up.
cubic-bezier(0.23, 1, 0.32, 1), 300ms520ms of ignition412 icons, bent from glass.
Drawn for NeonKit on a 24px grid as one tube per run, with real bend radii and a blockout gap wherever a tube passes behind itself. Same names and props as lucide-react.
<PlugZap />- Stroke
- 1.75
- Runs
- –
- Bends
- –
- Radii
- –
- Blockouts
- –
- import { PlugZap } from "lucide-react"+ import { PlugZap } from "@/components/ui/icons"
139 components on 12 shelves.
Everything here is running, not a picture of it. Open any one for its source, props and examples.
Pick a shelf
18 more on this shelf. Open Forms
60 blocks and 5 templates. Whole sections and whole sites, built from the same parts.
All blocksAll templatesInstall one. Import it. It's yours.
Every component is a single file. The shadcn CLI copies it into your project, so there's no package to update and nothing to wrap. Works with React 19 and Tailwind 3.4 or 4.
Step 1: Run the command
npx shadcn@latest add https://neonkit.heyaadi.com/r/switch.json✓ Created 2 files
components/ui/switch.tsx
lib/neon.tsYour project needs a shadcn setup once. The installation guide covers it.
Step 2: Import it
import { Switch } from "@/components/ui/switch"export function Alerts() { return <Switch defaultChecked label="Alerts" />}Typed props, sensible defaults, one CSS variable for color.
Step 3: It's yours
The source lives in components/ui/switch.tsx. Change anything. Docs for switch
First time with shadcn? Read the installation guide
Take it. It's MIT.
Fork it, rename it, ship it inside something you sell. Credit is welcome and never required.