ToggleGroup with motion: with type="single" one background springs between the toggles; with "multiple" each pops in and out.
$ pnpm dlx shadcn@latest add https://dashral.com/r/motion-toggle-group.jsonInstallation
$ pnpm dlx shadcn@latest add https://dashral.com/r/motion-toggle-group.jsonAdds components/dashral/motion/toggle-group.tsx, the Toggle Group it builds on (in components/dashral/), motion and the motion files every motion component shares. With the registry in your components.json:
$ pnpm dlx shadcn@latest add @dashral/motion-toggle-groupUsage
The same as Toggle Group, imported from components/dashral/motion/: swap the import and it moves.
import { ToggleGroup } from "@/components/dashral/motion/toggle-group"
<ToggleGroup type="single" aria-label="Alignment" items={alignments} />Examples
Compared with Default
Each toggle's background changes color as it's pressed.
Motion
Single: one background springs from toggle to toggle. Multiple: each pops in and shrinks away on its own. Toggles press in while held.
How the two editions differ in general, and which to use where: Motion.
API reference
Every prop of Toggle Group, and every attribute of the element it renders. The Motion edition adds no props of its own.
ToggleGroup
Also takes every prop of Radix Toggle Group(opens in a new tab).
| Prop | Type | Default |
|---|---|---|
type | "single" | "multiple"Required. One pressed at a time, or any of them. | — |
items | { value, label?, icon?, aria-label?, disabled? }[]Required. The toggles; an icon alone needs an aria-label. | — |
value / defaultValue / onValueChange | string (single) | string[] (multiple)Controlled or initial state. | — |
variant | "ghost" | "outline"As Toggle's. | "ghost" |
size | "sm" | "default" | "lg"As Toggle's. | "default" |
color | "primary" | "neutral"The tint of a pressed toggle: grey, as a segmented control, or a soft primary. | "neutral" |
attached | booleanJoined into one bar, as a toolbar's. | false |
classNames | { item }Classes for each toggle. | — |
className | stringExtra classes, merged with cn() so yours win. | — |
Motion
- With type="single", the pressed toggle's background is one element springing from toggle to toggle with a touch of overshoot (motion's shared layout).
- With type="multiple", each background pops in from 60% and shrinks away on its own.
- Toggles press in on a spring while held. With reduced motion backgrounds only fade.