Chewypixel component
Radio Group
Radio buttons that squish when pressed, with a dot that springs in when picked.
Installation
npx shadcn@latest add https://chewypixel.io/r/radio-group.jsonUsage
import { Label } from "@/components/ui/label";
import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
export function ShippingSpeed() {
return (
<RadioGroup defaultValue="standard" aria-label="Shipping speed">
<div className="flex items-center gap-2">
<RadioGroupItem value="standard" id="standard" />
<Label htmlFor="standard">Standard</Label>
</div>
<div className="flex items-center gap-2">
<RadioGroupItem value="express" id="express" />
<Label htmlFor="express">Express</Label>
</div>
</RadioGroup>
);
}Props
valueThe selected value, when controlled.
string
defaultValueThe value that starts selected, when uncontrolled.
string
onValueChangeCalled with the new value when the selection changes.
(value: string) => void
Released under the MIT License.
More components
- TooltipA tooltip on a frosted panel that scales in from its trigger and fades out when you move away.
- DialogA dialog that springs up over a light overlay and animates out before it closes.
- SheetA side panel that slides in from any edge of the screen over a light overlay.
- Dropdown MenuA frosted menu that scales out of its trigger and animates out when it closes.
See them in a real app
These components come from Mochi, our admin dashboard template built with Next.js, shadcn/ui and Motion.