Primitive · CLI
Toggle Group
Toggle peers with layoutId highlight morph — Motion.dev Base UI pattern.
Preview
npx shadcn@latest add @atroui/toggle-groupInstallation
Agent blurb — install command + no npm UI rule. For agents
npx shadcn@latest add @atroui/toggle-groupSource lands in your repo. Installation · Registry
Usage
Single-select: highlight travels between peers. multiple keeps per-toggle morph.
tsx
import { Toggle } from "@/components/ui/toggle"
import { ToggleGroup } from "@/components/ui/toggle-group"
<ToggleGroup defaultValue={["left"]} aria-label="Align">
<Toggle value="left">Left</Toggle>
<Toggle value="center">Center</Toggle>
<Toggle value="right">Right</Toggle>
</ToggleGroup>Toggle Group