Made of something. Weathered ceramic armour, recessed optics and chipped red identification marks.
The moment. A targeting ring aligns with the chosen option. Native radio semantics preserve keyboard navigation and form behaviour.
Yours to adapt. Copy the component source, styles and materials. Functional text stays live, effects respect reduced motion, and the artwork requires no remote hosting.
Choose a range to align the targeting optic. Arrow keys move between options.
Add it with the shadcn CLI, or copy the source manually.
Release candidate: public installation becomes available after deployment. Use an existing React 19 project with shadcn initialized and a components.json file. The CLI installs the source, CSS, embedded materials, MIT licence and font notices together.
npx shadcn@latest add https://seanportfol.io/r/grimkit-target-radio-group.jsonnpx shadcn@latest registry add @seanlynch=https://seanportfol.io/r/{name}.jsonnpx shadcn@latest add @seanlynch/grimkit-target-radio-groupCopy this example into a separate file, not over the installed component. The @/ alias points to your source root. In Next.js this is a Client Component; Vite also accepts the directive. Replace demonstration actions with your application logic.
components/examples/target-radio-group-demo.tsx"use client";
import { TargetRadioGroup } from "@/components/grimkit/target-radio-group";
export default function Example() {
return <TargetRadioGroup label="Target range" name="target" defaultValue="mid" options={[{value:"near",label:"Near field",description:"Close-range acquisition"},{value:"mid",label:"Mid field",description:"Balanced tracking range"},{value:"far",label:"Far field",description:"Long-range acquisition"}]} />;
}Props on Target Radio. Consult the included TypeScript source for supported native attributes.
labelAccessible control label.ReactNode–optionsOptions with value, label and optional disabled state. See the exported option type for additional fields.readonly TargetOption[]–valueControlled value. Update it in the change callback; visual effects never delay value changes.string–defaultValueInitial uncontrolled value. Do not combine with value.string''onValueChangeReports a requested value change immediately.(value: string) => void–nameNative form field name.string–formID of the associated form.string–requiredRequires a selection for form submission.booleanfalsedisabledDisables user interaction and cancels transient effects.booleanfalseeffectsAuto honours reduced motion; off suppresses decorative motion without changing values.'auto' | 'off''auto'classNameAdditional surface class; does not replace material styles.string''components/grimkit/target-radio-group.tsxcomponents/grimkit/target-radio-group.csscomponents/grimkit/target-radio-group-materials.csscomponents/grimkit/LICENSE.txtcomponents/grimkit/Saira-OFL.txtcomponents/grimkit/JetBrainsMono-OFL.txtgrimkit-target-radio-group