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

Tabs

Tabbed panels with a sliding light indicator and roving focus.

Usesmotion

Profile

This is how your name appears on deployments and comments.

Installation#

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

Usage#

import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"

<Tabs defaultValue="account">
  <TabsList>
    <TabsTrigger value="account">Account</TabsTrigger>
    <TabsTrigger value="password">Password</TabsTrigger>
  </TabsList>
  <TabsContent value="account">…</TabsContent>
  <TabsContent value="password">…</TabsContent>
</Tabs>

Examples#

Underline

variant="underline" draws a glowing line on a hairline track. Good for code.

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

Colors

Every Tabs gets its own indicator, so several can sit side by side.

9,617

Visitors

214

Deployments

27

Errors

Manual activation

Arrow keys move focus; Enter or Space selects. Disabled tabs are skipped.

3 projects, 12 members and 41 deployments this week.

API reference#

Tabs

Renders a div and accepts every native div attribute.

PropTypeDefault
defaultValuestring

Initially selected tab when uncontrolled.

—
valuestring

Selected tab when controlled.

—
onValueChange(value: string) => void

Called when the selection changes.

—
variant"pill" | "underline"

Indicator style.

"pill"
activationMode"automatic" | "manual"

Select on focus, or wait for Enter and Space.

"automatic"
colorNeonColor

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

inherited

TabsTrigger

Renders a button.

PropTypeDefault
valuestring

Matches a TabsContent value.

—
disabledboolean

Skipped by the keyboard and not clickable.

false

TabsContent

Renders a div that fades in when selected.

PropTypeDefault
valuestring

Matches a TabsTrigger value.

—
forceMountboolean

Keeps the panel mounted but hidden while inactive, so its state survives.

false

Accessibility#

  • Follows the WAI-ARIA tabs pattern: tablist, tab and tabpanel roles, with aria-selected and aria-controls wired up.
  • Only the selected tab is in the Tab order. Left and Right arrows move between tabs, Home and End jump to the ends.
  • Panels are focusable so keyboard users can reach content without interactive elements.
  • The indicator jumps instead of sliding when the user prefers reduced motion.
PreviousKbdNext Accordion