Skip to content

Small controls, done right.

Every example is live. Install one with a single command, and your agent reads its motion rules first.

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.json

Switch

Turn a setting on or off. The thumb stretches as you press.

npx shadcn@latest add https://better-design.com/registry/motion/switch.json

Slider

Drag to pick a number. The fill stays under your finger.

npx shadcn@latest add https://better-design.com/registry/motion/slider.json
npx shadcn@latest add https://better-design.com/registry/motion/copy-button.json

Copy button

Copy a value. The button confirms without changing size.

npx shadcn@latest add https://better-design.com/registry/motion/copy-button.json
The 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.json

Your 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.json

Number field

Type or step a number. Changed digits roll.

npx shadcn@latest add https://better-design.com/registry/motion/number-field.json

Nothing 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
Not deployed

Every second run fails in this example.

Status badge

Show where a job stands. The icon and label roll to the new state.

npx shadcn@latest add https://better-design.com/registry/motion/status-badge.json

Nothing is changed in this example.

Overflow actions

Keep the main actions in view. The row widens to show the rest.

npx shadcn@latest add https://better-design.com/registry/motion/overflow-actions.json
  • Invoice 2041 paid
  • Design review moved to 3 PM
  • New comment on Pricing
  • Weekly report is ready

Drag the list down and let go. With a keyboard, press Tab.

Pull to refresh

Pull a list down to reload it. The pull resists, then holds while it loads.

npx shadcn@latest add https://better-design.com/registry/motion/pull-to-refresh.json

Example page. Nothing is sent.

Every second message fails in this example.

Feedback widget

Send a short message. The panel grows from its corner and confirms or retries.

npx shadcn@latest add https://better-design.com/registry/motion/feedback-widget.json

Revenue, day 1

$48,210

Number ticker

Show a dashboard figure. Each digit rolls to the new value.

npx shadcn@latest add https://better-design.com/registry/motion/number-ticker.json

Point at the bar or tab into it.

Expandable action bar

Keep a row of icons small. Point or tab in and each one shows its label.

npx shadcn@latest add https://better-design.com/registry/motion/expandable-action-bar.json
Monday
Tuesday
Wednesday
Thursday
Friday
Saturday

Unavailable

Sunday

Unavailable

Open 5 days a week. Nothing is saved in this example.

Availability scheduler

Set the hours someone is open each week. Days switch on and off, and hours copy across.

npx shadcn@latest add https://better-design.com/registry/motion/availability-scheduler.json

You are in Home.

Dock

Switch between the places of an app. A pill glides to the one you choose.

npx shadcn@latest add https://better-design.com/registry/motion/dock.json

Voice note

Play a voice message. The waveform fills as it plays, and you drag it to seek.

npx shadcn@latest add https://better-design.com/registry/motion/voice-note.json

The example project comes back after you delete it.

Confirm button

Delete without a dialog. The button widens to ask, then acts on the second press.

npx shadcn@latest add https://better-design.com/registry/motion/confirm-button.json

Press the bell to mark them all as read.

Notification bell

Show unread notifications. The bell swings and the count rolls up when one arrives.

npx shadcn@latest add https://better-design.com/registry/motion/notification-bell.json
Launch day1 of 4 done

Checklist

Tick off tasks. A done task greys out and slides below the open ones.

npx shadcn@latest add https://better-design.com/registry/motion/checklist.json