NeonKit
esc
  • IntroductionGetting started
  • InstallationGetting started
  • ThemingGetting started
  • Use with AIGetting started
  • All componentsGetting started
  • ButtonSolid, outline, soft, ghost and link buttons that light up on hover.Forms
  • InputText field with an animated neon focus ring, icons, labels and error states.Forms
  • TextareaMulti-line field that grows with its content and counts characters.Forms
  • SelectKeyboard-friendly listbox with a glowing popover and typeahead.Forms
  • CheckboxCheckbox with a drawn-on checkmark and indeterminate state.Forms
  • Radio GroupSingle choice from a set, with arrow-key navigation and card layouts.Forms
  • SwitchA toggle that powers on like a neon tube.Forms
  • SliderPointer and keyboard slider with a glowing track and optional range.Forms
  • OTP InputOne-time code input with auto-advance, paste and backspace handling.Forms
  • BadgeStatus labels with optional live dot and remove button.Data Display
  • AvatarProfile image with initials fallback, status light and stacked groups.Data Display
  • CardSurface with header, content and footer slots and a lit edge.Data Display
  • KbdKeyboard keys and shortcuts that glow when pressed.Data Display
  • TabsTabbed panels with a sliding light indicator and roving focus.Data Display
  • AccordionCollapsible sections with smooth height animation.Data Display
  • ProgressLinear and circular progress with a moving highlight.Feedback
  • SpinnerRing, dots and bars loaders in any neon color.Feedback
  • SkeletonLoading placeholders with a scanning shimmer.Feedback
  • AlertInline messages for info, success, warning and errors.Feedback
  • ToastStacked notifications with a tiny toast() API. No provider needed.Feedback
  • DialogAccessible modal built on the native dialog element.Overlay
  • TooltipHover and focus hints on four sides.Overlay
  • Neon TextText rendered as a glowing tube sign, with optional power-on flicker.Effects
  • Border BeamA beam of light that travels around any element's border.Effects
  • Spotlight CardCard whose border and surface light up under the cursor.Effects
  • Retro GridSynthwave perspective grid that scrolls toward the horizon.Effects

Components/Data Display

Accordion

Collapsible sections with smooth height animation.

Usesmotionlucide-react

Yes. Every component is MIT licensed. Use it in personal and commercial projects, change whatever you like, and ship it without attribution.

Installation#

npx shadcn@latest add https://get-neonkit.vercel.app/r/accordion.json

Usage#

import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@/components/ui/accordion"

<Accordion defaultValue="free">
  <AccordionItem value="free">
    <AccordionTrigger>Is NeonKit free?</AccordionTrigger>
    <AccordionContent>Yes. Every component is MIT licensed.</AccordionContent>
  </AccordionItem>
</Accordion>

Examples#

Multiple

type="multiple" lets any number of sections stay open, like a filter panel.

Controlled

Drive value from state to expand or collapse everything at once.

Only the packages a component imports. For Accordion that is motion and lucide-react.

npm install motion lucide-react

API reference#

Accordion

Renders a div and accepts every native div attribute.

PropTypeDefault
type"single" | "multiple"

How many items can be open at once.

"single"
defaultValuestring | string[]

Initially open item(s) when uncontrolled. A string for single, an array for multiple.

—
valuestring | string[]

Open item(s) when controlled. "" means none in single mode.

—
onValueChange(value: string | string[]) => void

Called with the new value, typed to match type.

—
collapsibleboolean

Single only. Lets the open item close again.

true
colorNeonColor

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

inherited

AccordionItem

Renders a div. Items are separated by hairlines.

PropTypeDefault
valuestring

Unique id for the item.

—
disabledboolean

Locks the item in its current state.

false

AccordionTrigger, AccordionContent

The trigger is a button inside an h3; the content is a div that animates its height.

PropTypeDefault
classNamestring

Merged with the defaults.

—

Accessibility#

  • Each trigger is a real button with aria-expanded and aria-controls, wrapped in an h3.
  • Content has role="region" and is labelled by its trigger.
  • Up and Down arrows move between triggers; Home and End jump to the first and last.
  • When collapsible is false, the open trigger reports aria-disabled so screen readers know it cannot close.
  • Height and opacity animations are skipped when the user prefers reduced motion.
PreviousTabsNext Progress