8,391 example visits
Segmented control
Pick one of a few options. The thumb slides to it.
npx shadcn@latest add https://better-design.com/registry/motion/segmented-control.jsonSmall controls, done right.
Every example is live. Install one with a single command, and your agent reads its motion rules first.
Switch
Turn a setting on or off. The thumb stretches as you press.
npx shadcn@latest add https://better-design.com/registry/motion/switch.jsonSlider
Drag to pick a number. The fill stays under your finger.
npx shadcn@latest add https://better-design.com/registry/motion/slider.jsonnpx shadcn@latest add https://better-design.com/registry/motion/copy-button.jsonCopy button
Copy a value. The button confirms without changing size.
npx shadcn@latest add https://better-design.com/registry/motion/copy-button.jsonThe new onboarding flow cut setup to two steps.
Reactions
React with one tap. The count rolls the way it moved.
npx shadcn@latest add https://better-design.com/registry/motion/reactions.jsonYour agent designs forms, dashboards, onboarding, pricing pages
Word rotate
Swap one word in a sentence. Hover to pause it.
npx shadcn@latest add https://better-design.com/registry/motion/word-rotate.jsonNumber field
Type or step a number. Changed digits roll.
npx shadcn@latest add https://better-design.com/registry/motion/number-field.jsonNothing is deleted in this example.
Hold to confirm
Hold to delete. Let go early and it drains back.
npx shadcn@latest add https://better-design.com/registry/motion/hold-to-confirm.json