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

Sidebar

App sidebar with groups, collapse-to-rail and an active tube marker.

Built on Icons. Installs motion.

Projects

4 active

  • NKNeon v1.168%
  • DSDocs search41%
  • MSMarketing site90%
  • RCRegistry CLI12%

Installation

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

Usage

import {
  Sidebar,
  SidebarContent,
  SidebarGroup,
  SidebarInset,
  SidebarItem,
  SidebarProvider,
  SidebarTrigger,
} from "@/components/ui/sidebar"

<SidebarProvider className="min-h-svh">
  <Sidebar>
    <SidebarContent>
      <SidebarGroup label="Workspace">
        <SidebarItem icon={<Inbox />} href="/inbox" badge={3} active>
          Inbox
        </SidebarItem>
        <SidebarItem icon={<Folder />} href="/projects">Projects</SidebarItem>
      </SidebarGroup>
    </SidebarContent>
  </Sidebar>
  <SidebarInset>
    <SidebarTrigger />
    …
  </SidebarInset>
</SidebarProvider>

Examples

Starts as a rail

defaultCollapsed opens on the 56px rail. Badges turn into a dot on the icon, and the hover label carries the count.

Settings navigation

collapsible="none" keeps the sidebar open on wide screens. Below md it is still a drawer.

API reference

SidebarProvider

Holds the state and renders a flex row: put Sidebar and SidebarInset inside. Give it min-h-svh for a page shell, or a fixed height for a framed panel.

PropTypeDefault
collapsedboolean

Rail state when controlled.

None
defaultCollapsedboolean

Initial rail state when uncontrolled.

false
onCollapsedChange(collapsed: boolean) => void

Called when the rail is toggled.

None
shortcutstring | false

⌘ or Ctrl plus this key toggles the sidebar. Ignored inside contenteditable. Pass false to turn it off.

"b"

Sidebar

The panel. From md up it sits in the layout, sticky, as tall as the viewport or the provider, whichever is smaller. Below md it is an off-canvas drawer. It sets data-state="collapsed" | "expanded" and the group/sidebar class for styling your own content.

PropTypeDefault
side"left" | "right"

Which edge it sits on. For the right, render it after SidebarInset.

"left"
collapsible"rail" | "none"

Allow collapsing to the 56px icon rail.

"rail"
colorNeonColor

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

inherited

SidebarHeader / SidebarFooter

Fixed rows at the top and bottom. They clip their content to the rail; fade your own text with useSidebar().collapsed, e.g. collapsed && "md:opacity-0".

PropTypeDefault
classNamestring

Classes for the row.

None

SidebarContent

The scrolling middle. Renders a nav labelled "Sidebar".

PropTypeDefault
aria-labelstring

Name of the navigation landmark.

"Sidebar"

SidebarGroup

A list of items with an optional heading. Items must live in a group, including in the footer.

PropTypeDefault
labelReactNode

Heading above the items. In the rail it becomes a short divider.

None

SidebarItem

A row in a group. Renders a link with href, a button without, or your own element with asChild.

PropTypeDefault
iconReactNode

16px icon. It stays put while the sidebar collapses.

None
hrefstring

Renders an a instead of a button.

None
activeboolean

Marks the current page: aria-current="page" and the lit tube.

false
badgeReactNode

Count or short tag at the end of the row. In the rail it becomes a dot on the icon.

None
tooltipReactNode

Text for the rail hover label. Defaults to the item's label.

None
disabledboolean

Dims the row and blocks clicks.

false
onClick(event) => void

Below md, a click also closes the drawer unless you call event.preventDefault().

None
asChildboolean

Merge onto the single child, such as your router's Link. The child's children become the label.

false

SidebarTrigger

An icon button that collapses or expands the sidebar, or opens the drawer below md. Children replace the icon.

PropTypeDefault
colorNeonColor

Palette name or hex for the focus ring.

inherited

SidebarInset

The page next to the sidebar. A flex column that takes the remaining width. While the drawer is open it is inert.

PropTypeDefault
classNamestring

Classes for the page column, e.g. overflow-y-auto.

None

useSidebar()

Reads the nearest SidebarProvider. Throws outside one.

PropTypeDefault
collapsedboolean

Whether the sidebar is on the rail (md and up).

None
setCollapsed(collapsed: boolean) => void

Collapse or expand.

None
toggle() => void

What the trigger and the shortcut call: the rail on desktop, the drawer below md.

None
isMobileboolean

True below md, where the sidebar is a drawer. False during server rendering.

None
openMobileboolean

Whether the drawer is open.

None
setOpenMobile(open: boolean) => void

Open or close the drawer.

None

Accessibility

  • The trigger is a button named "Toggle sidebar" with aria-expanded, aria-controls pointing at the panel, and aria-keyshortcuts for ⌘B and Ctrl+B.
  • The active item has aria-current="page". The tube is decorative and hidden from screen readers.
  • On the rail the labels fade but stay in the accessibility tree, so every item keeps its name. The hover label is visual only and also appears on keyboard focus.
  • The hover label closes on Escape, on scroll and when the pointer leaves the item.
  • Below md the sidebar is a modal drawer: focus moves into it and Tab cycles inside it, Escape and the backdrop close it, the page behind is inert and stops scrolling, and focus returns to the trigger. The drawer renders into document.body, so no parent's z-index or transform can trap it.
  • The width animation and the glide respect reduced motion.