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/Forms

Radio Group

Single choice from a set, with arrow-key navigation and card layouts.

Shipping speed

Installation#

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

Usage#

import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group"

<RadioGroup defaultValue="express" aria-label="Shipping speed">
  <RadioGroupItem value="standard" label="Standard" />
  <RadioGroupItem value="express" label="Express" />
</RadioGroup>

Examples#

Card variant

variant="card" turns each option into a tile. icon sits above the label and children render below it.

Horizontal

Row density

Disabled option

Disabled options are skipped by arrow keys.

Backup frequency

API reference#

RadioGroup

Renders a div with role="radiogroup" and accepts its attributes.

PropTypeDefault
valuestring

Controlled selected value.

—
defaultValuestring

Initial value when uncontrolled.

—
onValueChange(value: string) => void

Called when the selection changes.

—
namestring

Shared name of the native radios. Set it to submit the value with a form.

generated
orientation"vertical" | "horizontal"

Stacks options or lays them out in a row (a responsive grid for cards).

"vertical"
variant"default" | "card"

Classic radios, or bordered tiles with a corner indicator.

"default"
colorNeonColor

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

inherited
size"sm" | "md" | "lg"

Radio, text and card padding.

"md"
disabledboolean

Disables every option.

false
requiredboolean

Requires a selection before a form can submit.

false

RadioGroupItem

className and style go to the outer label; other native input attributes go to the radio input, which also receives the ref.

PropTypeDefault
valuestring

Value reported when this option is selected. Required.

—
labelReactNode

Option name, used as the accessible name.

—
descriptionReactNode

Secondary text, linked with aria-describedby.

—
iconReactNode

Card variant only. Shown above the label and lit when selected.

—
childrenReactNode

Extra content below the description, such as a price. Also announced as a description.

—
disabledboolean

Disables this option only.

false

Accessibility#

  • Options are native radio inputs sharing one name, so the group is a single tab stop and arrow keys move and select.
  • Give the group an accessible name with aria-label or aria-labelledby.
  • Each label is wired with aria-labelledby, so descriptions and card content are read as descriptions, not as part of the name.
PreviousCheckboxNext Switch