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

Switch

A toggle that powers on like a neon tube.

Turns off cellular, Wi-Fi and Bluetooth.

Connected to Studio 5G

Pauses downloads and background refresh until you charge.

Installation#

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

Usage#

import { Switch } from "@/components/ui/switch"

<Switch label="Airplane mode" />

Examples#

Sizes

Colors

Pass a palette name or any hex value to color.

Controlled

Pair checked with onCheckedChange to drive other UI from the state.

Only invited members can view this board.

checkedfalse

API reference#

Switch

Renders a button with role="switch" and accepts its attributes; the ref points at the button. With a label, className and style go to the wrapper around both.

PropTypeDefault
checkedboolean

Controlled on state.

—
defaultCheckedboolean

Initial state when uncontrolled.

false
onCheckedChange(checked: boolean) => void

Called with the new state on every toggle.

—
labelReactNode

Clickable label after the switch, linked with aria-labelledby.

—
namestring

Renders a hidden input so the switch submits with a form when on.

—
valuestring

Value submitted under name.

"on"
colorNeonColor

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

inherited
size"sm" | "md" | "lg"

Track of 28, 36 or 44px wide.

"md"
disabledboolean

Blocks interaction and dims the switch.

false

Accessibility#

  • Space and Enter toggle the switch, and aria-checked reports its state.
  • Without a label, pass an aria-label or point a label element at the switch id.
  • The power-on flicker is skipped when the user prefers reduced motion, and never plays for switches that are already on when they mount.
PreviousRadio GroupNext Slider