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

Aspect Ratio

Holds children at a fixed shape, from 16 / 9 or "4:3". Optional hairline frame with a lit corner tick.

New in 1.7.

9:41 / 24:18
Shipping a design system in 30 daysMain stage, 16:9

Installation

npx shadcn@latest add https://neonkit.heyaadi.com/r/aspect-ratio.json

Usage

import { AspectRatio } from "@/components/ui/aspect-ratio"

<AspectRatio ratio={16 / 9}>
  <img src="/talk.jpg" alt="Main stage" className="h-full w-full object-cover" />
</AspectRatio>

Examples

Common shapes

ratio takes a number or a string: 1, 16 / 9, "4:5" or "9/16".

Lit corner as selection

The tick marks the picked tile. Inside each, a second AspectRatio letterboxes the screenshot at its real shape; portrait ones are sized by height with h-full w-auto.

API reference

Renders a div and accepts its attributes; the ref points at it. Children fill an inner box clipped to the corners.

PropTypeDefault
rationumber | string

Width over height. Strings like "16:9" or "21/9" work too. Anything invalid falls back to 1.

1
frameboolean | "top-left" | "top-right" | "bottom-right" | "bottom-left"

Adds a 12px radius, a white/10 hairline and a lit tick on one corner. true puts it top left.

false
colorNeonColor

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

inherited

Accessibility

  • It uses the CSS aspect-ratio property. Set a width (it fills its parent by default) or, for a box sized by height, h-full w-auto.
  • Children are positioned inside an absolute box, so media should be h-full w-full with object-cover or object-contain.
  • The frame is decoration and is hidden from assistive tech. Give images their own alt text.