# NeonKit

> Neon UI components for React and Tailwind CSS. 26 accessible, copy-paste components with a glow, one CSS variable for color, installable with the shadcn CLI.

NeonKit is a shadcn-compatible registry of 26 React components with neon glow effects, for dark interfaces. Components are copied into the user's project (not imported from a package). Notes for agents:

- Install: `npx shadcn@latest add https://get-neonkit.vercel.app/r/<name>.json`, or `npx shadcn@latest add @neonkit/<name>` after adding `"@neonkit": "https://get-neonkit.vercel.app/r/{name}.json"` to `registries` in components.json.
- Files land in `components/ui/<name>.tsx` and import `cn` from `@/lib/utils` and `neonVars` from `@/lib/neon`.
- Color: pass `color` (a palette name like "cyan" or "magenta", or any hex). Omit it to inherit `--neon-accent` from an ancestor, set with `style={neonVars("lime")}` or in CSS. Default is cyan.
- Works with Tailwind CSS 3.4 and 4 and React 18 and 19. Dark backgrounds only (around #05060a).
- Each component page below has a markdown version with install, usage, examples, props and full source.

## Docs

- [Introduction](https://get-neonkit.vercel.app/docs): what NeonKit is and how it works
- [Installation](https://get-neonkit.vercel.app/docs/installation): shadcn CLI, namespaced registry, manual setup
- [Theming](https://get-neonkit.vercel.app/docs/theming): the --neon variable, palette and custom colors
- [Use with AI](https://get-neonkit.vercel.app/docs/ai): MCP, Cursor, Copilot, v0 and prompts

## Forms

- [Button](https://get-neonkit.vercel.app/components/button.md): Solid, outline, soft, ghost and link buttons that light up on hover.
- [Input](https://get-neonkit.vercel.app/components/input.md): Text field with an animated neon focus ring, icons, labels and error states.
- [Textarea](https://get-neonkit.vercel.app/components/textarea.md): Multi-line field that grows with its content and counts characters.
- [Select](https://get-neonkit.vercel.app/components/select.md): Keyboard-friendly listbox with a glowing popover and typeahead.
- [Checkbox](https://get-neonkit.vercel.app/components/checkbox.md): Checkbox with a drawn-on checkmark and indeterminate state.
- [Radio Group](https://get-neonkit.vercel.app/components/radio-group.md): Single choice from a set, with arrow-key navigation and card layouts.
- [Switch](https://get-neonkit.vercel.app/components/switch.md): A toggle that powers on like a neon tube.
- [Slider](https://get-neonkit.vercel.app/components/slider.md): Pointer and keyboard slider with a glowing track and optional range.
- [OTP Input](https://get-neonkit.vercel.app/components/otp-input.md): One-time code input with auto-advance, paste and backspace handling.

## Data Display

- [Badge](https://get-neonkit.vercel.app/components/badge.md): Status labels with optional live dot and remove button.
- [Avatar](https://get-neonkit.vercel.app/components/avatar.md): Profile image with initials fallback, status light and stacked groups.
- [Card](https://get-neonkit.vercel.app/components/card.md): Surface with header, content and footer slots and a lit edge.
- [Kbd](https://get-neonkit.vercel.app/components/kbd.md): Keyboard keys and shortcuts that glow when pressed.
- [Tabs](https://get-neonkit.vercel.app/components/tabs.md): Tabbed panels with a sliding light indicator and roving focus.
- [Accordion](https://get-neonkit.vercel.app/components/accordion.md): Collapsible sections with smooth height animation.

## Feedback

- [Progress](https://get-neonkit.vercel.app/components/progress.md): Linear and circular progress with a moving highlight.
- [Spinner](https://get-neonkit.vercel.app/components/spinner.md): Ring, dots and bars loaders in any neon color.
- [Skeleton](https://get-neonkit.vercel.app/components/skeleton.md): Loading placeholders with a scanning shimmer.
- [Alert](https://get-neonkit.vercel.app/components/alert.md): Inline messages for info, success, warning and errors.
- [Toast](https://get-neonkit.vercel.app/components/toast.md): Stacked notifications with a tiny toast() API. No provider needed.

## Overlay

- [Dialog](https://get-neonkit.vercel.app/components/dialog.md): Accessible modal built on the native dialog element.
- [Tooltip](https://get-neonkit.vercel.app/components/tooltip.md): Hover and focus hints on four sides.

## Effects

- [Neon Text](https://get-neonkit.vercel.app/components/neon-text.md): Text rendered as a glowing tube sign, with optional power-on flicker.
- [Border Beam](https://get-neonkit.vercel.app/components/border-beam.md): A beam of light that travels around any element's border.
- [Spotlight Card](https://get-neonkit.vercel.app/components/spotlight-card.md): Card whose border and surface light up under the cursor.
- [Retro Grid](https://get-neonkit.vercel.app/components/retro-grid.md): Synthwave perspective grid that scrolls toward the horizon.

## Optional

- [Full documentation](https://get-neonkit.vercel.app/llms-full.txt): every guide and component, including source, in one file
- [Registry index](https://get-neonkit.vercel.app/r/registry.json): machine-readable list of registry items
- [GitHub](https://github.com/AadiXC0DE/NeonKit): source, issues and component requests