Components

Radio Group

Radio group: selecting an item pops the inner dot in on a snappy spring while a soft lumen ring expands outward once and fades.

SnapFast settle, no wobble.

DriftOne gentle breath.

GlideLong, weighty, deliberate.

Install

Copies the component source — plus its small internal deps — into your project. You own the code from the first minute.

terminal

npx lumora-ui@latest add radio-group

Import

Using the workspace package instead? Deep imports keep cold starts lean; the barrel is fully tree-shakable either way.

app/page.tsx

import { RadioGroup, RadioItem } from "@lumora/ui/components/radio-group";
// or from the barrel:
import { RadioGroup, RadioItem } from "@lumora/ui";

Props worth knowing

RadioGroup works controlled via value/onValueChange or uncontrolled via defaultValue, with orientation switching the layout. Each RadioItem carries a value, a label and an optional description; selecting one pops the dot in and blooms a lumen ring once. Arrow keys move and select in a single gesture. Props extend the natural HTML element, so className, event handlers, and aria attributes pass straight through.