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

Card

Surface with header, content and footer slots and a lit edge.

Usage this month

Oct 1 – 31

Pro plan · resets in 20 days

$38.20

Estimated bill, including $18.20 in overages

Bandwidth182.4 GB / 1 TB
Edge requests1.24M / 10M
Build minutes4,410 / 6,000
Image optimizations4,612 / 5,000
Updated 4 minutes ago

Installation#

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

Usage#

import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"

<Card>
  <CardHeader>
    <CardTitle>Usage this month</CardTitle>
    <CardDescription>Pro plan · resets in 20 days</CardDescription>
  </CardHeader>
  <CardContent>…</CardContent>
</Card>

Examples#

Pricing

glow adds a neon border and ambient light. Use it on one card per view.

Hobby

For side projects and trying things out.

$0forever

  • 3 projects
  • Preview deployments
  • Community support

Pro

Most popular

For teams shipping to production every day.

$20per seat / month

  • Unlimited projects
  • Preview deployments
  • Password-protected previews
  • Priority support

Link cards

interactive lifts the card on hover. A stretched link makes the whole surface clickable.

Installation

Point the shadcn CLI at the registry and add your first component.

Theming

Set --neon-accent once and every component follows it.

Components

Each one is a single file you own, edit and ship.

Registry

Serve your own variants as shadcn-compatible JSON.

Variants

Default

A raised surface with a faint lit edge. Use it for most content.

Glow

Neon border and ambient light. Save it for the one card that matters.

Outline

Border only, for dense layouts and nested groups.

API reference#

Card

Renders a div and accepts every native div attribute.

PropTypeDefault
variant"default" | "glow" | "outline"

Surface style.

"default"
colorNeonColor

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

inherited
interactiveboolean

Hover lift, brighter edge and a focus ring when something inside is keyboard-focused.

false

CardHeader, CardContent, CardFooter

Divs with matching 24px padding. Content and footer drop their top padding so the slots stack evenly.

PropTypeDefault
classNamestring

Merged with the defaults, so p-4 or gap-3 override cleanly.

—

CardTitle, CardDescription

An h3 and a p. Swap the heading level with your own element if the outline needs it.

PropTypeDefault
classNamestring

Merged with the defaults.

—

Accessibility#

  • Card has no role or tab stop of its own; put the link or button inside it.
  • For a clickable card, stretch one link over the surface with after:absolute after:inset-0 instead of wrapping the card in an anchor.
  • The hover lift is disabled when the user prefers reduced motion.
PreviousAvatarNext Kbd