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

Toast

Stacked notifications with a tiny toast() API. No provider needed.

Usesmotionlucide-react

Installation#

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

Usage#

import { Toaster, toast } from "@/components/ui/toast"

// Once, near the root of your app
<Toaster />

// Anywhere, even outside React
toast.success("Invite sent to ana@acme.dev")

Examples#

Status

Each status brings its own icon and color. Reuse an id to turn a loading toast into a result.

Promise

toast.promise shows one toast that follows the promise from pending to settled.

Positions

Set position on the Toaster. Top positions enter from above.

API reference#

Toaster

Renders the toasts. Mount one per app; if several are mounted, the most recent one shows them. Also accepts native section attributes.

PropTypeDefault
position"top-left" | "top-center" | "top-right" | "bottom-left" | "bottom-center" | "bottom-right"

Corner or edge of the viewport, 16px from it.

"bottom-right"
maxnumber

Toasts visible at once. Older ones stay hidden until their timers run out.

3
colorNeonColor

Color of default and loading toasts. Falls back to --neon-accent, then cyan.

inherited

toast(title, options?)

Shows a toast and returns its id. title can be any React node.

PropTypeDefault
descriptionReactNode

Secondary line under the title.

—
status"default" | "success" | "error" | "warning" | "info" | "loading"

Sets the icon and color.

"default"
colorNeonColor

Overrides the status color.

—
durationnumber

Milliseconds on screen. Infinity keeps it until dismissed. Loading toasts default to Infinity.

4000
action{ label: string; onClick: () => void }

A button inside the toast. Clicking it also dismisses the toast.

—
idstring

Pass the id of a visible toast to replace its content in place and restart its timer.

—

Methods

PropTypeDefault
toast.success / error / warning / info / loading(title, options?) => string

Shorthands that set status.

—
toast.dismiss(id?: string) => void

Dismisses one toast, or all of them when called without an id.

—
toast.promise(promise, { loading, success, error }, options?) => Promise<T>

Shows loading, then success or error on the same toast. success and error can be functions of the result or error. Returns the original promise.

—

Accessibility#

  • The stack is a labelled region; toasts are announced politely, and errors use role="alert" so they interrupt.
  • Hovering the stack or tabbing into it expands it and pauses every timer; timers also pause while the tab is hidden.
  • Swipe a toast sideways to dismiss it. On touch screens the close button stays visible.
  • Toasts disappear, so never make one the only way to reach an action.
PreviousAlertNext Dialog