Skip to content
NeonKit
  • Introduction
  • Installation
  • Theming
  • Design language
  • Theme Studio
  • Use with AI
  • All components
  • Icons412 icons drawn as bent neon tube, with every lucide-react name for them. Blockout gaps where one tube passes behind another.
  • ButtonSolid, outline, soft, ghost and link buttons that light up on hover.
  • InputText field with an animated neon focus ring, icons, labels and error states.
  • TextareaMulti-line field that grows with its content and counts characters.
  • SelectKeyboard-friendly listbox with a glowing popover and typeahead.
  • CheckboxCheckbox with a drawn-on checkmark and indeterminate state.
  • Radio GroupSingle choice from a set, with arrow-key navigation and card layouts.
  • SwitchA toggle that powers on like a neon tube.
  • SliderPointer and keyboard slider with a glowing track and optional range.
  • OTP InputOne-time code input with auto-advance, paste and backspace handling.
  • Toggle GroupToggles and segmented controls with a lit pill that slides to the selection.
  • ComboboxSearchable select with filtering, keyboard nav and an async-friendly API.
  • Tag InputType, paste or backspace your way through a row of glowing chips.
  • Number InputSteppers, drag-to-scrub, min, max, step and locale formatting.
  • File DropzoneDrag files in and the dashed tube border powers up. Lists files with progress.
  • RatingStars or bolts that flicker on as you hover, with half steps.
  • Color PickerNeon gel swatches, a hue knob and a hex field in one control.
  • CalendarSingle, range and multiple selection with full keyboard grid navigation.
  • Date PickerA field that opens a calendar, with presets and range support.
  • Time InputSegmented hours and minutes you can type, arrow or scrub.
  • FieldLabel, description and error wiring for any control, plus a standalone Label.
  • Input GroupInput or Textarea with icon, text, button and toolbar addons inside one field box that glows as a whole.
  • Password InputPassword field with a reveal toggle, Caps Lock warning, four-segment strength meter and a rule checklist.
  • Shimmer ButtonA light sweeps across the face while a beam runs the border.
  • Pulse ButtonA ring pulses outward to call attention.
  • Magnetic ButtonPulled toward the cursor, with a label that leads.
  • Power ButtonA round power key that ignites with a flickering ring.
  • Cyber ButtonCut corners, a corner tick and a glitch on hover.
  • Hold ButtonHold to confirm: a tube fills, release drains it.
  • Copy ButtonCopy to clipboard with a drawn-on check.
  • Button GroupAttached buttons, inputs and text segments with single-pixel seams, split buttons and vertical stacks.
  • BadgeStatus labels with optional live dot and remove button.
  • AvatarProfile image with initials fallback, status light and stacked groups.
  • CardSurface with header, content and footer slots and a lit edge.
  • KbdKeyboard keys and shortcuts that glow when pressed.
  • TabsTabbed panels with a sliding light indicator and roving focus.
  • AccordionCollapsible sections with smooth height animation.
  • TableSortable, selectable table with a sticky header and a row hover beam.
  • TimelineEvents on a tube that is lit up to now.
  • Glow ChartLine, area and bar charts with glow, crosshair tooltips and a Sparkline.
  • Code BlockHighlighted code with file tabs, line numbers, lit lines, diffs, wrap and copy. Built-in tokenizer, no dependencies.
  • Data TableSorting with Shift multi-sort, search, faceted filters, range selection, pages or load more. No table library.
  • StatKPI with a count-up value, a tube-drawn icon that lights when live, a delta judged by direction, a sparkline or goal.
  • Donut ChartDonut and pie charts bent from neon tube, with a lit hover, keyboard reading and an unlit remainder for max.
  • Image CompareBefore and after slider split by a lit tube. Drag, press, keys or hover to scrub; horizontal or vertical.
  • HeatmapContribution calendar or labelled matrix, lit by value, with one tooltip and arrow-key navigation. SSR-stable.
  • BreadcrumbPath navigation with separators and overflow collapse.
  • PaginationPage controls with a sliding active indicator and a compact mode.
  • StepperSteps joined by a tube that fills as you progress.
  • Navigation MenuTop navigation with mega-menu panels and a moving light indicator.
  • SidebarApp sidebar with groups, collapse-to-rail and an active tube marker.
  • MenubarApplication menubar with the APG keyboard model, hover switching, submenus, checkbox and radio items.
  • Tree ViewFile tree with the APG keyboard model, typeahead, multi-select, lazy folders and a lit guide down the open branch.
  • DockMagnifying dock on springs, with tooltips, running tubes, badges, separators and a one-stop keyboard toolbar.
  • DialogAccessible modal built on the native dialog element.
  • TooltipHover and focus hints on four sides.
  • Dropdown MenuMenus with groups, checkable items, submenus and a gliding highlight.
  • Context MenuRight-click menus built on the Dropdown Menu parts.
  • PopoverAnchored panel that flips to stay on screen, with arrow and focus handling.
  • Hover CardRich previews that open on hover or focus.
  • CommandA ⌘K palette with groups, fuzzy search and keyboard navigation.
  • SheetSide panel on the native dialog with a lit leading edge.
  • Alert DialogConfirm dialog on the native dialog element. Cancel takes focus; type-to-confirm lights the action up.
  • DrawerBottom drawer with drag to dismiss, snap points, velocity-aware flicks, nesting and a scaled background.
  • TourProduct tour: the page dims around a lit outline that glides from target to target, with a focus-trapped step card.
  • ProgressLinear and circular progress with a moving highlight.
  • SpinnerRing, dots and bars loaders in any neon color.
  • SkeletonLoading placeholders with a scanning shimmer.
  • AlertInline messages for info, success, warning and errors.
  • ToastStacked notifications with a tiny toast() API. No provider needed.
  • EmptyEmpty state whose icon is an unlit neon tube that flickers on once there's an action to take.
  • Status LightIndicator lamp with six states: a bezelled panel LED, a dot or a live pulse, plus a group for service lists.
  • BannerAnnouncement bar with a tube along its bottom edge that strikes on at mount. Remembers dismissal, can scroll.
  • Scroll ProgressReading progress as a lit tube on the window edge, or a ring for back to top. Follows the page or any container.
  • SeparatorHairlines and tube dividers, with optional labels.
  • Scroll AreaThin neon scrollbar with edge fades that appear only when needed.
  • CollapsibleA single disclosure with smooth height animation.
  • ItemList row with media, title, description and actions, for settings, people, files and notifications.
  • ResizableResizable panel groups: nested, collapsible, keyboard-driven, saved to localStorage. Grips light up as tubes.
  • CarouselScroll-snap carousel with mouse drag, loop, autoplay that pauses itself, and dots that fill with the timer.
  • Device FrameBrowser window and phone frames for screenshots or live UI, with a screen rim that catches the neon.
  • Aspect RatioHolds children at a fixed shape, from 16 / 9 or "4:3". Optional hairline frame with a lit corner tick.
  • Chat MessageA message row with streamed markdown, reasoning, tool calls, attachments, inline edit and hover actions.
  • Prompt InputAn auto-growing composer with attachments by click, paste or drop, a token counter and a send button that becomes Stop.
  • ConversationA transcript that follows streaming text, stops when you scroll up and offers Jump to latest with an unread count.
  • ReasoningA thinking trace with a live line and timer. Its filament glows while it thinks and cools to a dim wire when done.
  • Tool CallOne tool invocation with a status lamp, live timer, arguments, result and Approve/Deny. Groups into a run log.
  • Agent PlanAn agent's steps on a glass tube that fills to the one running. Done, failed and skipped steps, substeps, findings.
  • SourcesInline citation markers and a source list that light each other, with hover previews of the cited passage.
  • Context MeterContext-window usage as an LED bar split by system, conversation, files and tools, with zones and a breakdown.
  • Voice InputToggle or push-to-talk dictation with a live LED tape from the mic, a timer, cancel and a transcribing state.
  • Model SelectA model picker that prints context, speed and price as LED readouts in columns you can compare.
  • SuggestionsA row of prompt chips for under a chat input. One tab stop, arrow keys, edge fades while it scrolls.
  • Neon TextText rendered as a glowing tube sign, with optional power-on flicker.
  • Neon SignA full sign: acrylic backplate, standoffs, frame tube, cable and a power switch with flicker profiles.
  • Glitch TextRGB-split text with slice jitter, in bursts or on hover.
  • Scramble TextText that decodes into place from random glyphs.
  • TerminalA typing terminal and an inline typewriter for rotating headlines.
  • Split-Flap BoardDeparture-board characters that flip mechanically into place.
  • Seven-Segment DisplayNumbers and clocks on segments you can see even when they're off.
  • LED MatrixDot-matrix marquee with a built-in 5×7 font.
  • OdometerRolling-drum counter that carries like real gearing. Lit, backlit and cream drums, locale-aware separators.
  • Rotating TextCycles words in a headline like swapping a neon sign insert: the old tube powers off, the next one strikes.
  • KnobA machined rotary control with a lit value arc and detents.
  • FaderA mixing-desk channel fader with a scale and an LED meter.
  • Hardware SwitchRocker, safety-cover flip and key switches you can almost feel.
  • GaugeRadial gauge with a sprung needle, redline and digital readout.
  • MeterLED VU meter with zones and peak hold.
  • EqualizerAnimated spectrum bars, optionally driven by real audio.
  • OscilloscopeA phosphor trace on a CRT grid, from waveforms or live audio.
  • RadarA sweeping radar where blips flare as the beam passes.
  • HeartbeatA looping ECG trace with a bright leading edge.
  • CountdownLaunch timers in split-flap, digital or neon-tube digits.
  • Neon ClockAnalog and digital clocks with tube hands and a blinking colon.
  • Border BeamA beam of light that travels around any element's border.
  • Spotlight CardCard whose border and surface light up under the cursor.
  • Hologram CardA 3D-tilting card with iridescent foil and a moving glare.
  • Neon FrameA HUD frame with corner brackets that draw in and label tabs.
  • Tube DividerBent neon tube separators with mounting clips.
  • CRT OverlayScanlines, vignette, flicker and a power-on animation over anything.
  • Cursor GlowA pointer light with an optional comet trail.
  • MarqueeInfinite scrolling rows with edge fades and pause on hover.
  • Neon IconStatus icons whose bars light in sequence, and any NeonKit icon drawn as a lit tube.
  • Signal BeamA neon tube drawn between two elements, with a pulse of light running along it. Curves, reverses, runs both ways.
  • SparksBursts of white-hot sparks that cool to the neon color, fired from a hook, a function or a click wrapper.
  • Retro GridSynthwave perspective grid that scrolls toward the horizon.
  • AuroraSlow curtains of light drifting behind your content.
  • StarfieldParallax stars with a hyperspace warp.
  • Light RaysVolumetric beams with drifting dust.
  • CityscapeA night skyline with flickering windows and rooftop signs.
  • Rain on GlassDroplets sliding down glass over neon bokeh.
  • ParticlesDrifting dust that reacts to the cursor.
  • GlobeA dotted neon globe on canvas with real coastlines, pulsing markers and lit arcs. Drag or use arrow keys to spin.
  • Dot GridA pegboard of dots that light up near the pointer like LEDs behind a panel, with slow ripples rolling across.
  • CircuitA seeded PCB with buses of traces, vias and chips. Pulses of light run along the traces and light the pins they reach.
  • LasersStage lasers fanning from the top or bottom edge, sweeping slowly through patchy haze, with a bright source flare.
  • TunnelNeon rings or corridor frames rushing toward you down a winding tunnel, drawn on canvas with soft halos.
  • SunsetA synthwave sun whose slits drift down and widen, behind rim-lit mountains. Lines up with Retro Grid.
  • HazeDrifting smoke lit by neon from below or a side: three layers of one noise tile, slid and lit each frame, no blur.
  • Sign HeroA neon sign headline on a lit wall, with a working power switch.
  • Grid HeroRetro-grid hero with a working email capture and a live webhook delivery log.
  • Terminal HeroSplit hero where a typing terminal deploys, then 38 region bars light up on success.
  • City HeroNight-skyline launch hero with a neon-tube countdown and a notify-me form.
  • Product HeroCentered hero over a tilted, interactive analytics dashboard with light pooling beneath.
  • Split Form HeroSplit hero with a working email, OTP and vault-created sign-up flow.
  • Globe HeroEdge-network hero: a draggable globe of 18 regions with deploy arcs and a live p95 latency readout.
  • Sunset HeroSynthwave album launch over a sunset and grid floor: rotating format headline, format picker, release countdown.
  • Minimal NavbarQuiet navbar with a lit tube under the active link and a large-type mobile sheet.
  • Mega Menu NavbarMega menu with a live CI pipeline readout and a collapsible mobile sheet.
  • Floating NavbarFloating pill nav that tightens on scroll and grows a glowing reading-progress hairline.
  • Bento FeaturesLive bento of meters, a threshold knob, latency readout, ECG watchdog and terminal.
  • Alternating FeaturesThree alternating rows of live UI: invoice search, due-date calendar, bank reconcile.
  • Spotlight FeaturesSpotlight cards where the number is the hero and lights up like a tube on hover.
  • Before and AfterBefore and after columns; a rocker switch powers the lit column's checks in sequence.
  • Feature StepsThree working steps joined by a Stepper tube that fills as each one completes.
  • Integrations FeaturesEight sources beamed into a hub and out to three destinations. Switch a source off and the count drops.
  • Logo GridA hairline grid of twelve type-drawn wordmarks that flicker on like signs when hovered.
  • Logo MarqueeA logo marquee under a strip lamp: each wordmark lights up as it passes the middle.
  • Stat CountersSeven-segment stats that count up in view, led by a live requests-served counter.
  • Stats with ChartUptime KPIs and a glowing p95 chart with an SLO line and a 7/30/90-day range switch.
  • Testimonial WallA masonry wall of twelve quotes with one lit featured card and a show-all toggle.
  • Testimonial MarqueeTwo opposing quote marquees; hovering a card pauses it and lights its highlighted line.
  • Big QuoteAn editorial big quote signed with a neon name sign that re-strikes per story.
  • Pricing TiersThree plans with an odometer price roll on billing switch and a beamed featured tier.
  • Single PlanOne plan with a lit price driven by a pageview slider and an honest not-included list.
  • Plan ComparisonFull plan comparison table with tooltips, grouped rows and a sticky lit plan header.
  • FAQ AccordionTwo-column FAQ: an Accordion whose open answer lights a tube, plus a support card.
  • Searchable FAQCommand-powered FAQ search with grouped topics and a lit answer panel.
  • CTA BandFull-width call to action between two neon tubes that strike as it scrolls in.
  • Open Sign CTAAn OPEN neon sign on a brick wall; flip the switch and the CTA lights up.
  • Install Command CTABig headline over a glowing install prompt with a package-manager switch.
  • Lasers CTAClosing CTA under crossing lasers in haze. One big line whose ticket count ticks down, a button, one line of proof.
  • Big FooterLink columns, newsletter and status, over a giant outlined name that lights up.
  • Minimal FooterOne calm row under a thin neon tube with electrode caps.
  • Sign FooterA neon sign signature over a city skyline, with address and live opening hours.
  • Sign InSplit sign-in with an orbiting satellite over a lit planet limb and a working form.
  • Sign UpSign-up form whose LED strength meter and rule tubes light as the password improves.
  • Two-Factor VerifyOTP check with a resend timer and a neon keystone that lights on success, red on failure.
  • DashboardMetrics dashboard with a rail sidebar, a glowing MRR chart and a sortable accounts table.
  • SettingsTabbed settings with a save bar that lights on changes and a hold-to-delete danger zone.
  • InboxThree-pane mail client with glowing unread dots, labels, archive, reply and compose.
  • Kanban BoardProduction board where cards fly between columns and WIP limits buzz red when exceeded.
  • Team ChatTeam chat with grouped messages, a working composer, glowing typing dots and replies.
  • Notification CenterIncident notification center with filters, day groups and a lit firing-alert detail pane.
  • Music PlayerNow-playing radio screen with SVG tube cover art, a live Equalizer, fader volume and queue.
  • Status BoardStatus board with a fleet Heartbeat, live load meters, 90-day uptime bars and an incident Timeline.
  • OnboardingThree-step workspace setup with a Stepper and a live preview that retints to the chosen accent.
  • Empty StatesFour empty states with unlit glass tube illustrations that light on hover or success.
  • 404 No VacancyFull-page 404 under a motel sign whose 0 is dying, with key-fob links to popular pages.
  • 500 Power OutageBrowned-out 500 page; flip the breaker panel's main switch to bring the lights back.
  • NewsletterNewsletter capture card lit by a desk-lamp tube, with an expandable issue archive.
  • WaitlistWaitlist that hands you a split-flap ticket number and a referral link to copy.
  • Team GridTeam grid of hologram ID cards, each with a lit tide line, plus filters and open roles.
  • ContactContact form with validation and studio hours on a live seven-segment clock.
  • ChangelogRelease notes on a tube timeline lit from the newest version, with tag filters.
  • Blog GridFeatured post and filterable card grid with blueprint covers, each with one lit stroke.
  • Event TicketNotched event ticket with a neon wordmark, seeded QR stub, countdown and wallet button.
  • Product CardProduct card with an exploding isometric switch lit in its stem color, plus a live cart.
  • Device ShowcaseLaptop and phone frames running one live app: seat a party on the phone and its table lights up on the laptop.
  • SaaS landingNightshift, a deploy scheduler: a lit 2am headline, a live night-run panel, pricing and a plan comparison page.
  • DashboardSwitchback, a deploy platform console: live overview, filterable projects and tabbed team settings.
  • PortfolioJuno Park, a design engineer: one page under a pendant lamp whose pull cord turns every light off.
  • Launch eventLow Light, a one-night conference: a split-flap countdown that flips to live, then to the replay.
  • DocsGantry, a container CLI: sidebar nav, ⌘K search, an outline that tracks your reading and MDX-ready blocks.
 NeonKit on GitHub

Tour

Product tour: the page dims around a lit outline that glides from target to target, with a focus-trapped step card.

New in 1.7.Installs @floating-ui/react-dom and motion.

Requests
1.24M
last 24 h
p95
182 ms
−11 ms
Errors
0.04%
38 total

Recent deployments

  • Cache product images at the edgeLive
  • Fix cart total rounding for JPY
  • Move checkout to the new API

Arrow keys step through it, Escape skips.

Installation

npx shadcn@latest add https://neonkit.heyaadi.com/r/tour.json

Usage

import { Tour } from "@/components/ui/tour"

const [open, setOpen] = React.useState(false)

<Tour
  open={open}
  onOpenChange={setOpen}
  steps={[
    { target: "#deploy", title: "Ship from main", body: "Builds the latest commit in about two minutes." },
    { target: logsRef, title: "Logs stay for 14 days", side: "right" },
  ]}
/>

Examples

Controlled, whole page

step and open are both controlled, so the links above jump to any step. The first step has no target, so its card sits in the middle of the screen.

One-step coachmark

A single step drops the count and Skip, and labels renames Done.

API reference

Tour

Renders nothing until open. Accepts div attributes for the card; the ref points at it.

PropTypeDefault
stepsTourStep[]

The stops, in order.

None
openboolean

Controlled open state.

None
defaultOpenboolean

Starting open state when uncontrolled.

false
onOpenChange(open: boolean) => void

Called on Skip, Escape and Done.

None
stepnumber

Controlled step, zero-based.

None
defaultStepnumber

Where an uncontrolled tour starts. It starts there again each time it opens.

0
onStepChange(step: number) => void

Called on Next, Back and the arrow keys.

None
onComplete() => void

Next on the last step. The tour then closes.

None
onSkip(step: number) => void

Skip or Escape, with the step it was on.

None
containerRefObject<HTMLElement> | HTMLElement

Dims only this element instead of the page. Give it position: relative. The card still renders in the body, so it's never clipped.

None
labels{ next?, back?, skip?, done? }

Button text.

Next, Back, Skip tour, Done
colorNeonColor

Outline and button color. Falls back to the color where the tour was opened, then cyan.

inherited

TourStep

PropTypeDefault
targetstring | RefObject | HTMLElement | () => HTMLElement

A selector, ref, element or function. Leave it out, or point at a hidden element, for a centered card with no cutout.

None
titleReactNode

Labels the dialog.

None
bodyReactNode

Describes the dialog.

None
side"top" | "right" | "bottom" | "left"

Where the card sits. It flips, then falls back to the other axis, when there isn't room.

"bottom"
align"start" | "center" | "end"

Alignment along that side.

"center"
paddingnumber

Space between the target and the outline, in px.

6
radiusnumber

Corner radius of the outline.

target's radius + padding

Accessibility

  • The card is a modal dialog labelled by the step's title and described by its body. A polite live region says "Step 2 of 5" as you move.
  • Focus moves to Next when the tour opens, stays inside the card (Tab wraps), and returns to where it was when the tour closes.
  • Escape skips. Left and Right go back and forward, unless focus is in a text field inside the card.
  • Targets scroll into view when they're near an edge, and the outline follows them through scrolling and resizing. A target that mounts a frame late is waited for.
  • The outline and the dimmed page are one SVG whose geometry is written straight to the DOM each frame of a glide, so stepping never re-renders the page or animates layout. The card is placed with floating-ui on the same frame.
  • The outline strikes once when the tour opens. With reduced motion it appears without the flicker and jumps between steps.