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

Alert

Inline messages for info, success, warning and errors.

Useslucide-react
Your trial ends in 3 days
Add a payment method to keep your projects online after October 14.
Deployment ready
acme-web is live on acme.dev and 2 preview URLs.
Scheduled maintenance on Sunday, 02:00–02:30 UTC

Installation#

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

Usage#

import { Alert, AlertTitle, AlertDescription } from "@/components/ui/alert"

<Alert status="success">
  <AlertTitle>Deployment ready</AlertTitle>
  <AlertDescription>acme-web is live on acme.dev.</AlertDescription>
</Alert>

Examples#

Action and dismiss

The action inherits the alert's color, so a Button in it matches without props.

Variants

Deployment ready
Built in 38s and promoted to production.
Deployment ready
Built in 38s and promoted to production.
Deployment ready
Built in 38s and promoted to production.

Custom color and icon

color overrides the status color. icon={false} hides the icon.

Border Beam just landed
Trace any card with a moving line of light. One file, no dependencies.
You’re viewing a read-only snapshot from September 30.

API reference#

Alert

Also accepts every native div attribute.

PropTypeDefault
status"info" | "success" | "warning" | "error" | "neutral"

Sets the default color, icon and role.

"info"
variant"soft" | "outline" | "solid"

Visual style.

"soft"
colorNeonColor

Palette name or hex. Overrides the status color.

from status
iconReactNode | false

Replaces the icon, or hides it with false.

status icon
actionReactNode

Right-aligned slot, usually a small Button.

—
onDismiss() => void

Shows a dismiss button that calls this. Removing the alert is up to you.

—

AlertTitle

A div with the title style. Accepts every native div attribute.

PropTypeDefault

AlertDescription

A div with the muted body style. Accepts every native div attribute.

PropTypeDefault

Accessibility#

  • warning and error render role="alert" so they are announced immediately; the other statuses use role="status".
  • Render a live alert in response to an event; one present on page load may not be announced.
  • The dismiss button is a native button labelled "Dismiss", reachable with Tab.
PreviousSkeletonNext Toast