Getting started

Introduction

NeonKit is 26 React components for dark interfaces, lit like signage after hours. You don't install it as a dependency. You add the files you want and they become part of your project.

You own the code

There is no package to update and no wrapper to fight. Each component is one file in your repo. Change anything.

One variable sets the color

Every component reads --neon. Pass color, set it on a parent, or leave it and get cyan.

Glow means something

Resting UI stays calm. Light shows up for focus, selection, hover and progress, so it carries meaning.

Works where you are

React 18 or 19, Tailwind 3.4 or 4, Next.js, Vite, Remix. Native elements and keyboard support come first.

How it works#

Add a component with the shadcn CLI or paste its source. It lands in components/ui next to two tiny helpers: cn for merging classes and neonVars for color.

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

export function Settings() {
  return (
    <div className="flex items-center gap-4">
      <Switch defaultChecked />           {/* cyan, the default */}
      <Button color="magenta">Save</Button> {/* a palette name */}
      <Button color="#ff6a00">Export</Button> {/* or any hex */}
    </div>
  )
}

UI libraries tend to end up as a pile of overrides. When the code lives in your repo, you edit the component itself, and you can see every class it ships with. It's the same idea as shadcn/ui, and NeonKit plugs into its CLI, so the two sit side by side.

InstallCLI or copy and paste Browse components26 and counting

Next Installation

You own the code

One variable sets the color

Glow means something

Works where you are

How it works#

Why not a package?#