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/Effects

Spotlight Card

Card whose border and surface light up under the cursor.

Edge cached

Static pages ship from 300 locations. Median TTFB 41ms.

Signed builds

Every artifact is checksummed and traceable to a commit.

Preview per branch

Push a branch, get a URL. Delete the branch, it's gone.

Installation#

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

Usage#

import { SpotlightCard } from "@/components/ui/spotlight-card"

<SpotlightCard className="p-6">Hover me</SpotlightCard>

Examples#

Wider light

radius sets the size of the pool of light.

Now playing

Midnight City

M83 · Hurry Up, We're Dreaming

1:42
4:03

API reference#

SpotlightCard

Also accepts every div attribute.

PropTypeDefault
colorNeonColor

Light color.

inherited
radiusnumber

Diameter of the light in pixels.

360

Accessibility#

  • The pointer position is written to CSS variables directly, so moving the cursor never re-renders React.
  • The light also appears when something inside the card has keyboard focus.
PreviousBorder BeamNext Retro Grid