NeonKit — neon UI components for React and Tailwind

Neon UI for React26 components · MIT

Neon UI components for React and Tailwind. Calm at rest, lit when it matters. The code lands in your repo and it's yours.

Browse components

$npx shadcn@latest add get-neonkit.vercel.app/r/switch.json

Power

Hue187°

Gels

Turn the knob. Every component on the site follows.

02Live

Lit when
it matters.

Resting UI stays quiet. Light marks focus, selection and progress, so a glance tells you what's going on. Everything below works. Try the knob again.

input · checkbox · button

Sign in to Nightshift

The night crew's dashboard.

tabs · progress · badge · border beam

nightshift-webmain · 4f2a91c

Building

Install

Build

Deploy

switch

Deploy alerts
When a build fails or ships.
Mentions
Someone tags you in a review.
Weekly digest
Mondays, 9am your time.

otp input

Check your inbox

Enter the code sent to ana@acme.dev. Try 424242.

Resend in 0:24

slider · select

Volume62%

Low cutHz

kbd · toast

Hold a key

These keys light up while you press them.

⌘Command+K·⇧Shift+Enter·Esc

avatar · tooltip

Tonight's crew

Hover a face.

4 online

03Install

One command.
Then it's yours.

NeonKit is a shadcn registry. The CLI writes the component into your project and pulls in the one helper it needs. No package to keep updated, no wrapper to fight.

~/nightshiftzsh

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

<Switch color="lime" defaultChecked />

Result

01
Add
With the shadcn CLI, or paste the source from any component page.
02
Use
Import it like your own code, because it is. Typed props, sensible defaults.
03
Bend it
Change a class, a color or a whole variant. Nothing upstream to break.

04Directory

Every floor,
one board.

26 components. Each one is a single file with its source, examples and props on its own page.

05Under the glass

Built like a sign, not a sticker.

The glow is the easy part. Underneath it you get proper focus management, real form elements and code you can read in one sitting.

One variable

Every component reads --neon. Pass a color, set it on a parent, or turn the knob up top and watch it travel.

color="#ff6a00"

Keyboard first

Native dialog, real inputs, roving focus, typeahead, ARIA wired up. Reduced motion is respected everywhere.

role="switch"

Tailwind 3 and 4

No config, no plugin, no custom theme keys. The classes compile the same in either version.

bg-[rgb(var(--neon)/0.12)]

open source

MIT licensed and built in the open. Fork it, retune the palette, ship something that glows.

Star on GitHub Read the docs

NeonKit: neon UI components for React and Tailwind CSS

Lit when it matters.