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

Glow Chart

Line, area and bar charts with glow, crosshair tooltips and a Sparkline.

Unique visitors

49,667

+13.7%

docs.halcyon.dev · last 30 days vs the 30 days before

Use the left and right arrow keys to read each point.
Unique visitors per day, last 30 days
DateThis periodPrevious 30 days
Fri, Sep 111,6101,563
Sat, Sep 129661,429
Sun, Sep 131,1871,337
Mon, Sep 141,7591,016
Tue, Sep 151,8611,111
Wed, Sep 161,8391,452
Thu, Sep 171,7041,847
Fri, Sep 181,6651,543
Sat, Sep 191,0021,633
Sun, Sep 201,2601,321
Mon, Sep 211,574940
Tue, Sep 223,9481,074
Wed, Sep 232,5081,748
Thu, Sep 241,9521,826
Fri, Sep 251,6251,684
Sat, Sep 261,0811,504
Sun, Sep 271,1031,608
Mon, Sep 281,7581,104
Tue, Sep 291,9261,181
Wed, Sep 301,6661,616
Thu, Oct 11,7211,615
Fri, Oct 21,5621,658
Sat, Oct 31,0341,547
Sun, Oct 41,2531,363
Mon, Oct 51,7651,081
Tue, Oct 61,9691,226
Wed, Oct 71,6931,709
Thu, Oct 81,8511,598
Fri, Oct 91,7721,831
Sat, Oct 101,0531,506
Avg. session+6.1%
3m 42s
Bounce rate−2.4%
38.2%
Sign-ups+18.0%
1,284

Installation

npx shadcn@latest add https://neonkit.heyaadi.com/r/glow-chart.json

Usage

import { GlowChart, Sparkline } from "@/components/ui/glow-chart"

<GlowChart
  label="Unique visitors per day"
  data={[
    { x: new Date("2026-10-08"), y: 1840 },
    { x: new Date("2026-10-09"), y: 1912 },
    { x: new Date("2026-10-10"), y: 1206 },
  ]}
/>

<Sparkline data={[96, 104, 98, 121, 117, 132]} />

Examples

Bars with a target

Bars are glass with a lit cap; the hovered month powers on. Monthly dates tick on calendar months, and thresholds draw a dashed reference line.

Several series

Each series takes its own color. The first follows the accent, so only the others are set. yDomain fixes the range so a spike doesn't rescale the day.

Sparklines

A Sparkline is a single glowing trend with its latest value marked. live makes that dot ping.

API reference

GlowChart

Also accepts native div attributes. aria-label replaces the generated summary.

PropTypeDefault
dataGlowChartPoint[] | GlowChartSeries[]

Points for one series, or named series. Series are matched by x, so they don't need the same length.

None
type"area" | "line" | "bar"

Area and bar charts start at zero; lines fit the data.

"area"
labelstring

What the chart shows. Leads the accessible summary and captions the data table.

None
colorNeonColor

Color of the first series. Falls back to --neon-accent, then cyan.

inherited
curve"smooth" | "linear"

Smooth is monotone, so it never overshoots a peak.

"smooth"
heightnumber

Plot height in pixels, x-axis labels included. The width fills the container.

240
gridboolean

Hairlines at each y tick.

true
axisboolean

Tick labels on both axes.

true
tooltipboolean

Crosshair, tooltip and arrow-key reading. Off makes the chart a static image.

true
legendboolean

Series key above the plot.

series > 1
yFormat(value: number, context: "axis" | "tooltip") => string

Formats y values. The axis gets 1.2K by default; the tooltip and table get 1,204.

compact / grouped
xFormat(x: string | number | Date, context: "axis" | "tooltip") => string

Formats x values. Dates default to UTC so the server and browser agree; pass this to use a local zone.

None
yDomain[number, number]

A fixed y range instead of fitting the data.

None
yTicksnumber

Rough number of y ticks. Steps are always 1, 2, 2.5 or 5 times a power of ten.

4
thresholds{ y: number; label?: string; color?: NeonColor }[]

Dashed reference lines, like an SLO or a target.

None
xLabelstring

Header of the x column in the data table.

"Date" / "Label"
animateboolean

A beam draws the series in when the chart scrolls into view (bars grow), and again when the number of points changes.

true
onActiveIndexChange(index: number | null) => void

The point under the crosshair, from pointer or keyboard.

None

GlowChartSeries

PropTypeDefault
namestring

Shown in the legend, tooltip, summary and table header.

None
data{ x: string | number | Date; y: number | null }[]

A null y leaves a gap in the line.

None
colorNeonColor

The first series defaults to --neon, the rest to white, amber, violet, green, pink and blue in that order.

None
type"line" | "area"

Overrides the chart type for this series in a line or area chart.

None
mutedboolean

Drawn thin and unlit, for a comparison or baseline.

false

Sparkline

Also accepts native span attributes.

PropTypeDefault
datanumber[]

Values in order, oldest first.

None
widthnumber | string

Pixels or any CSS length. With a percentage it stretches without distorting the glow.

96
heightnumber

Height in pixels.

28
labelstring

Accessible name.

trend summary
areaboolean

A soft wash under the line.

true
dotboolean

Marks the latest value.

true
liveboolean

The latest-value dot pings, for streaming data.

false
curve"smooth" | "linear"

Line interpolation.

"smooth"
yFormat(value: number) => string

Formats values in the generated label.

None
colorNeonColor

Line color.

inherited

Accessibility

  • The plot is role="img" with a generated summary: the range, then each series' low, high and latest value.
  • Every value is also in a visually hidden table with a caption, so nothing depends on hovering.
  • The plot is focusable when tooltip is on. Left and Right move the crosshair, PageUp and PageDown jump a tenth of the range, Home and End go to the ends, and Escape hides it.
  • Keyboard moves are announced through a polite live region; pointer hover is not, so screen readers aren't flooded.
  • Touch scrubs horizontally and leaves vertical scrolling to the page.
  • With reduced motion the series appear without the draw-in beam and the crosshair doesn't glide.