Primitive · CLI

Radio

Radio group with Motion fill-scale indicator on Base UI.

Preview

npx shadcn@latest add @atroui/radio

DraftLiveArchived

Installation

Agent blurb — install command + no npm UI rule. For agents

npx shadcn@latest add @atroui/radio

Source lands in your repo. Installation · Registry

Usage

One choice in a set. Wrap options in RadioGroup; the fill scales in, no bounce.

tsx

import { Radio, RadioGroup } from "@/components/ui/radio"

<RadioGroup defaultValue="draft" className="gap-2">
  <label className="flex items-center gap-2 text-sm">
    <Radio value="draft" />
    Draft
  </label>
  <label className="flex items-center gap-2 text-sm">
    <Radio value="live" />
    Live
  </label>
</RadioGroup>

import { Radio, RadioGroup } from "@/components/ui/radio"

<RadioGroup defaultValue="draft" className="gap-2">
  <label className="flex items-center gap-2 text-sm">
    <Radio value="draft" />
    Draft
  </label>
  <label className="flex items-center gap-2 text-sm">
    <Radio value="live" />
    Live
  </label>
</RadioGroup>