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

Changelog

Every release, newest first. Anything added in the last two carries a New mark across the site.

  1. 1.7

    , latest

    Lights on

    • New backgrounds: Dot Grid, Circuit, Lasers, Tunnel, Sunset and Haze. New effects and helpers: Signal Beam, Globe, Sparks, Rotating Text, Scroll Progress and Device Frame. And the pieces people kept asking for: Tour, Password Input, Heatmap, Suggestions and Aspect Ratio.
    • Five new blocks built on them: a Globe Hero for edge networks, Integrations with live signal beams, a Sunset Hero for a synthwave launch, a Lasers CTA, and a Device section where a phone and a laptop run the same app.
    • A design language page at /docs/design: glow as light, when things are allowed to glow, type, motion, radius and how the icons are built. The landing page now shows the system and the icon set live.
    • 102 new icons, 412 in all: Save, Clipboard, History, Shield, Battery, Printer, the heading and list glyphs, money, charts, health and more, each drawn to the same tube rules. Icons also answer to every lucide-react name for the glyphs they draw, including the CheckIcon-style names shadcn's own components import, so moving a project over is a change of import path.
    • Every component page can open itself in v0, ChatGPT or Claude, next to Copy as Markdown. Block pages open in v0.
    • Field errors now light Input, Textarea, Select and Number Input red, and disabled solid buttons are no longer lit. Heatmap keeps its day labels pinned when the weeks scroll, and a Carousel whose slides hold links or buttons no longer adds a tab stop of its own. The new accessibility gate turned up about twenty smaller fixes across components, examples and templates.
    • Galleries are much lighter. Previews boot one at a time between scrolls, only what's on screen animates, and frames in a sideways strip no longer reload each time they slide out. Meter now draws one halo per row instead of one per segment, which took Features Bento from 10 to 60 frames a second, and Retro Grid's floor is a fifth of the size it was, so pages that change while it moves no longer stutter.
    • NeonKit moved to neonkit.heyaadi.com. The old address redirects, registry URLs included.
    • Size budgets in the test suite: every component's source and its installed footprint are checked on each change.

    17 components

    Signal Beam Globe Sparks Rotating Text Scroll Progress Device Frame Dot Grid Circuit Lasers Tunnel Sunset Haze Tour Password Input Heatmap Suggestions Aspect Ratio

    5 blocks

    Globe Hero Sunset Hero Integrations Features Lasers CTA Device Showcase

  2. 1.6

    Agents, and a lighting desk

    • Seven AI components for agent interfaces: Reasoning (a filament that glows while it thinks and cools when it's done), Tool Call with approval, Agent Plan, Sources with inline citations, Context Meter, Voice Input and Model Select. Chat Message now renders its reasoning and tool calls with them.
    • Theme Studio at /theme: edit the palette, glow, radius, surface and motion on a live scene, then export globals.css variables, a lib/neon.ts, a link, or a registry item that shadcn add applies.
    • --neon-glow scales every glow in the library. Set it to 0 for a flat dark UI, or up to 1.5 for signage.
    • Stat was rebuilt: icons drawn as glass tube that light when live, a full-width trend, a goal meter, and rows that line up across a group whatever wraps.
    • The icons page is now a specimen: each glyph lit at 192px with its construction drawn over it (grid, bend radii, blockouts), 16 sets, keyboard browsing. Calendar and Table gained the blockout gaps they were missing.
    • Every older component was rechecked at desktop and phone widths, and 80-odd needed fixes. Date Picker no longer scrolls the page to the top when it opens. Submenus, the sidebar drawer and toasts stay on screen and above sticky headers. Gauge ticks no longer overlap, Retro Grid recedes in real perspective, Border Beam keeps one speed around corners, and labels that were cut off now wrap.
    • Templates installed into a fresh shadcn app now bring their own fonts, and links inside buttons survive Base UI's render rewrite.

    7 components

    Reasoning Tool Call Agent Plan Sources Context Meter Voice Input Model Select

  3. 1.5

    A full pass

    • 22 new components: Alert Dialog, Drawer, Menubar, Button Group, Input Group, Item, Empty, Data Table, Tree View, Resizable, Carousel, Stat, Donut Chart, Odometer, Status Light, Dock, Image Compare, Banner, Code Block, and an AI set of Chat Message, Prompt Input and Conversation.
    • NeonKit icons: 310 glyphs drawn as bent glass tube, with blockout gaps where one tube passes behind another. Same names and props as lucide-react, and the library no longer depends on it.
    • Every existing component was rechecked. Custom controls now reset with their form and validate when required, asChild triggers work with children passed from server pages, nested dialogs close one at a time, and hydration mismatches in a handful of instruments are gone.
    • A new site: Mona Sans and Fragment Mono, a landing page you can play with, and component, block, template and docs pages rebuilt to match.
    • Every block and template was redrawn: fewer boxes, one dominant idea per section, and light only where it means something.

    23 components

    Alert Dialog Drawer Menubar Button Group Input Group Item Empty Code Block Chat Message Prompt Input Conversation Icons Data Table Tree View Resizable Carousel Stat Donut Chart Odometer Status Light Dock Image Compare Banner

  4. 1.4

    Templates

    • Complete Next.js sites built from NeonKit components: a SaaS landing with a pricing page, a deploy dashboard, a portfolio with a lights-off mode, a launch event that changes as the doors open, and a docs starter.
    • One shadcn command installs a template's pages, its sections and every component it uses. Change one color in its config and the whole site re-tints.
    • Scrolling over a block preview always moves the page: previews no longer catch the first pixels of a scroll, inner panes hand off at their ends, and a knob only takes the wheel once you've picked it up.
    • Works in Base UI shadcn projects too. The CLI rewrites asChild to render there, and every NeonKit component now accepts both.
    • A loading Button keeps keyboard focus. Sheets and the sidebar drawer hand focus back properly, and dim labels across the library now pass contrast.
    • A polish pass over every block: focus that no longer drops to the page, bigger tap targets on phones, and fixes found at 390 px.

    5 templates

    SaaS landing Dashboard Portfolio Launch event Docs

  5. 1.3

    Blocks

    • Whole sections built from NeonKit components: navbars, heroes, features, pricing, testimonials, FAQs, calls to action, footers, auth screens, app screens and marketing pages.
    • Every block works in the preview. Forms validate, tabs switch, cards move, players play. Each one holds up at desktop, tablet and phone widths.
    • One shadcn command adds a block and every component it uses. Change the color at the block's root and everything inside follows.
    • A page for every block, with a viewport switcher, the source and install steps.

    54 blocks

    Minimal Navbar Mega Menu Navbar Floating Navbar Grid Hero Terminal Hero City Hero Product Hero Split Form Hero Bento Features Alternating Features Spotlight Features Before and After Feature Steps Logo Grid Logo Marquee Stat Counters Stats with Chart Testimonial Wall Testimonial Marquee Big Quote Pricing Tiers Single Plan Plan Comparison FAQ Accordion Searchable FAQ CTA Band Open Sign CTA Install Command CTA Big Footer Minimal Footer Sign Footer Sign In Sign Up Two-Factor Verify Dashboard Settings Inbox Kanban Board Team Chat Notification Center Music Player Status Board Onboarding Empty States 404 No Vacancy 500 Power Outage Newsletter Waitlist Team Grid Contact Changelog Blog Grid Event Ticket Product Card

  6. 1.2

    Signature neon

    • The pieces nobody else has: a full neon sign with backplate, cable and flicker profiles, a split-flap departures board, seven-segment and LED matrix displays.
    • Instruments you can actually use as form controls: knobs, faders, hardware switches and gauges, plus live signal displays (meters, oscilloscope, radar, heartbeat) and glow charts.
    • Backgrounds and surfaces: cityscape, aurora, starfield, light rays, rain on glass, particles, hologram cards and a CRT overlay.
    • Effect buttons: shimmer, pulse, magnetic, power, cyber and hold-to-confirm.

    39 components

    Shimmer Button Pulse Button Magnetic Button Power Button Cyber Button Hold Button Copy Button Glow Chart Neon Sign Glitch Text Scramble Text Terminal Split-Flap Board Seven-Segment Display LED Matrix Knob Fader Hardware Switch Gauge Meter Equalizer Oscilloscope Radar Heartbeat Countdown Neon Clock Hologram Card Neon Frame Tube Divider CRT Overlay Cursor Glow Marquee Neon Icon Aurora Starfield Light Rays Cityscape Rain on Glass Particles

  7. 1.1

    The standard set

    • Menus, popovers, a command palette, sheets, date and time pickers, tables, steppers, a sidebar and more: the primitives every app needs, each with its own neon detail.
    • Components can build on each other. The CLI installs Date Picker together with Calendar and Popover.
    • Menus and popovers flip and shift to stay on screen and carry their color through portals.
    • Live component gallery, collapsible sidebar and a changelog.

    27 components

    Toggle Group Combobox Tag Input Number Input File Dropzone Rating Color Picker Calendar Date Picker Time Input Field Table Timeline Breadcrumb Pagination Stepper Navigation Menu Sidebar Dropdown Menu Context Menu Popover Hover Card Command Sheet Separator Scroll Area Collapsible

    1 block

    Sign Hero

  8. 1.0

    The revamp

    • Every component rebuilt around one CSS variable, --neon. Pass a palette name or any hex, or inherit it from a parent.
    • Installable with the shadcn CLI, plus the @neonkit namespace and the shadcn MCP server.
    • New docs, a new landing page, llms.txt and a markdown version of every page.

    26 components

    Button Input Textarea Select Checkbox Radio Group Switch Slider OTP Input Badge Avatar Card Kbd Tabs Accordion Dialog Tooltip Progress Spinner Skeleton Alert Toast Neon Text Border Beam Spotlight Card Retro Grid