Toggle

Toggle with motion: it presses in, its background pops in from the middle and its icon bounces as it turns on.

$ pnpm dlx shadcn@latest add https://dashral.com/r/motion-toggle.json

Installation

$ pnpm dlx shadcn@latest add https://dashral.com/r/motion-toggle.json

Adds components/dashral/motion/toggle.tsx, the Toggle 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

Usage

The same as Toggle, imported from components/dashral/motion/: swap the import and it moves.

example.tsx

1import { Toggle } from "@/components/dashral/motion/toggle"
2
3<Toggle aria-label="Pin" pressed={pinned} onPressedChange={setPinned}>
4  <Pin />
5</Toggle>

Examples

Reactions on a post

color="none": the icon fills in its own color with a bounce as it's pressed, and the count turns on odometer wheels.

Maya Chen

Design · 2 hours ago

The new dashboard is live for everyone. Charts load twice as fast, and dark mode finally matches the brand colors. Thanks to everyone who tested it last week!

Compared with Default

Default

Its background changes color as it's pressed.

Motion

It presses in on a spring; its background pops in from the middle and its icon bounces; off, the background shrinks away.

How the two editions differ in general, and which to use where: Motion.

API reference

Every prop of Toggle, and every attribute of the element it renders. The Motion edition adds no props of its own.

Toggle

Also takes every prop of Radix Toggle(opens in a new tab).

Prop	Type	Default
`pressed / defaultPressed / onPressedChange`	`boolean` Controlled or initial state.	—
`variant`	`"ghost" \| "outline"` Quiet until it's on, or a border all the time.	`"ghost"`
`size`	`"sm" \| "default" \| "lg"` 32, 36 or 40px tall.	`"default"`
`color`	`"primary" \| "neutral" \| "none"` The tint when it's on: a soft primary, neutral grey for a busy toolbar, or none when what's inside shows it (a reaction's filled icon).	`"primary"`
`className`	`string` Extra classes, merged with cn() so yours win.	—

Motion

It presses in to 90% on a spring while held.
Turned on, its background pops in from 60% with a small overshoot and what's inside bounces up a little; turned off, the background shrinks away quickly and what's inside dips.
With reduced motion the background only fades.