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

Sponsor

Keep the lights on.

NeonKit is free, MIT licensed and built by one person. If it saved you an afternoon, here's how to keep the sign lit.

Monthly

GitHub Sponsors

Recurring support funds new components and keeps the docs current as React and Tailwind move.

Sponsor on GitHub
One-off

Buy me a coffee

Most of NeonKit was built after midnight. A coffee keeps the night shift going.

Buy a coffee
Free

Star the repo

Stars are how other developers find it. It takes one click and it genuinely helps.

Star on GitHub
Free

Tell someone

Post it, drop it in your team chat, or credit it in your README. Word of mouth beats any ad.

Share on X

Meet the maker

Aaditya Chowdhury

Design engineer

I'm Aadi, a design engineer at Ownpath. Before that I worked with Philips, Hero MotoCorp and Koolio, and had one exit when Adda247 acquired Symmulate.

NeonKit started as an excuse to obsess over the small stuff: how a switch should feel when it turns on, how a focus ring can glow without shouting. It's a side project, and sponsorships are what turn evenings into new components.

heyaadi.com@AadiChowdhury7 on X AadiXC0DE

Ideas, bugs, or just saying hi?

Feedback shapes what gets built next.

Message on XRequest a component