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

Components/Data Display

Badge

Status labels with optional live dot and remove button.

Useslucide-react

  • neonkit-docs

    main · a41f9c2 · 2m ago

    Live

  • api-gateway

    feat/rate-limits · 7be0d13 · just now

    Building

  • marketing-site

    fix/hero-video · c93e4a8 · 14m ago

    Failed

  • billing-worker

    main · 5d2f61b · 40s ago

    Queued

Installation#

npx shadcn@latest add https://get-neonkit.vercel.app/r/badge.json

Usage#

import { Badge } from "@/components/ui/badge"

<Badge color="green" pulse>Live</Badge>

Examples#

Variants and sizes

Soft is the default. Outline and solid carry more light.

softcyanvioletmagentaamberlime
outlinecyanvioletmagentaamberlime
solidcyanvioletmagentaamberlime
sizesv2.0.0v2.0.0

Removable

onRemove renders a small close button after the label.

4 filters applied

TypeScriptMIT licenseUpdated this weekHas examples

API reference#

Badge

Renders a span and accepts every native span attribute.

PropTypeDefault
variant"soft" | "outline" | "solid"

Visual style.

"soft"
colorNeonColor

Palette name or hex. Falls back to --neon-accent, then cyan.

inherited
size"sm" | "md"

Height, padding and type size.

"md"
dotboolean

Shows a glowing status dot before the label.

false
pulseboolean

Adds a ping ring to the dot. Implies dot.

false
onRemove() => void

Renders a remove button and calls this when it is pressed.

—
removeLabelstring

Accessible name for the remove button.

"Remove"

Accessibility#

  • The dot is decorative, so the label text has to carry the status on its own.
  • Give each remove button a specific removeLabel, such as "Remove TypeScript filter", when several badges sit together.
  • The ping animation stops when the user prefers reduced motion.
PreviousOTP InputNext Avatar