NeonKit
esc
  • IntroductionGetting started
  • InstallationGetting started
  • ThemingGetting started
  • Use with AIGetting started
  • All componentsGetting started
  • ButtonSolid, outline, soft, ghost and link buttons that light up on hover.Forms
  • InputText field with an animated neon focus ring, icons, labels and error states.Forms
  • TextareaMulti-line field that grows with its content and counts characters.Forms
  • SelectKeyboard-friendly listbox with a glowing popover and typeahead.Forms
  • CheckboxCheckbox with a drawn-on checkmark and indeterminate state.Forms
  • Radio GroupSingle choice from a set, with arrow-key navigation and card layouts.Forms
  • SwitchA toggle that powers on like a neon tube.Forms
  • SliderPointer and keyboard slider with a glowing track and optional range.Forms
  • OTP InputOne-time code input with auto-advance, paste and backspace handling.Forms
  • BadgeStatus labels with optional live dot and remove button.Data Display
  • AvatarProfile image with initials fallback, status light and stacked groups.Data Display
  • CardSurface with header, content and footer slots and a lit edge.Data Display
  • KbdKeyboard keys and shortcuts that glow when pressed.Data Display
  • TabsTabbed panels with a sliding light indicator and roving focus.Data Display
  • AccordionCollapsible sections with smooth height animation.Data Display
  • ProgressLinear and circular progress with a moving highlight.Feedback
  • SpinnerRing, dots and bars loaders in any neon color.Feedback
  • SkeletonLoading placeholders with a scanning shimmer.Feedback
  • AlertInline messages for info, success, warning and errors.Feedback
  • ToastStacked notifications with a tiny toast() API. No provider needed.Feedback
  • DialogAccessible modal built on the native dialog element.Overlay
  • TooltipHover and focus hints on four sides.Overlay
  • Neon TextText rendered as a glowing tube sign, with optional power-on flicker.Effects
  • Border BeamA beam of light that travels around any element's border.Effects
  • Spotlight CardCard whose border and surface light up under the cursor.Effects
  • Retro GridSynthwave perspective grid that scrolls toward the horizon.Effects

Getting started

Use with AI

NeonKit is written to be read by coding agents as easily as by people. Point your agent at it and ask for neon UI in plain words.

llms.txt#

An index for language models: what NeonKit is, how to install it, and a link to every component. Give it to your agent as context.

/llms.txtThe short index. Start here./llms-full.txtEvery guide and component, with source, in one file.

Every component page also has a markdown version. Add .md to the URL, for example /components/button.md, or use the Copy page button at the top of it.

Namespaced registry#

Register NeonKit once in components.json. After that, you and your agent can refer to components by short names.

components.json
{
  "registries": {
    "@neonkit": "https://get-neonkit.vercel.app/r/{name}.json"
  }
}
npx shadcn@latest add @neonkit/switch @neonkit/dialog

MCP server#

The shadcn MCP server lets agents browse, search and install from any registry in your components.json, NeonKit included.

  1. Add the namespace above

    The MCP server reads registries from your project config.

  2. Connect your client

    npx shadcn@latest mcp init --client cursor

    Swap cursor for vscode, codex or whichever MCP client you use.

  3. Ask

    • Show me the components in the neonkit registry.
    • Add the NeonKit switch and slider to the settings page and color them lime.
    • Build a sign-in card with NeonKit input, checkbox and button, magenta accent.

Tell your agent to use it#

Add this to AGENTS.md or your editor's rules file, and new UI will reach for NeonKit by default.

AGENTS.md
## UI components

Use NeonKit for UI: https://get-neonkit.vercel.app/llms.txt
- Install with `npx shadcn@latest add @neonkit/<name>`
- Color with the `color` prop (palette name or hex), or wrap a section in style={neonVars("<color>")}
- Dark backgrounds only, around #05060a

Copy-paste prompt#

For tools without MCP, paste this at the start of a chat.

Read https://get-neonkit.vercel.app/llms.txt. Use NeonKit components for the UI in this project.
Install each one with: npx shadcn@latest add https://get-neonkit.vercel.app/r/<name>.json
Check the component's .md page for its props before using it.
PreviousThemingNext All components