Developer guide

Motion components for stateful React interactions

Motion components use animation to explain state changes, direct manipulation, progress, or feedback inside a React interaction. This guide links only Spectrum UI components whose documented source or registry dependencies include Motion, including switches, confirmation controls, reactions, ratings, and notifications.

Animation should support the interaction rather than delay it. Review the spring or tween values in the copied source, preserve keyboard behavior, and add or verify a reduced-motion path before production use.

Browse 12 componentsView code example

What Motion Components means

A motion component owns both interface state and the visual transition between states. Useful examples include a switch knob following a drag gesture, a hold control showing confirmation progress, or a reaction button acknowledging an action.

Spectrum UI uses Motion only where the implementation calls for it; the technology list on each component page is generated from source and registry evidence. That distinction helps teams avoid adding an animation dependency to components that do not need one.

When to use these patterns

01

State changes need spatial continuity

Use motion when a control changes shape, position, or progress and the transition clarifies what happened.

02

The interaction includes a gesture

Drag, press-and-hold, and swipe interactions benefit from feedback that follows the pointer before committing state.

03

Feedback must remain compact

A contained icon, count, or progress transition can acknowledge an action without adding another persistent panel.

Motion Components to explore

Open a component page to inspect its live example, editable source, installation command, dependencies, API details, accessibility notes, and related components.

ControlAnimated SwitchAn iOS-style toggle switch with a stretchy knob you can drag or flick.ActionFollow ButtonA follow button that morphs its width, fill, and label between states.ActionHold to ConfirmA press-and-hold button that fills a progress ring before confirming destructive actions.ActionLike ButtonA heart button that pops with a particle burst and rolling count.ActionMorph ButtonAn async button that morphs between idle, loading, success, and error states.FeedbackNotification BellA bell button that swings on new notifications with a rolling unread badge.FeedbackReaction BarA Slack-style emoji reaction bar with animated chips and rolling counts.ActionSwipe to DeleteA swipeable list item that reveals an iOS-style delete action on drag.FormTask CheckboxA todo checkbox that celebrates completion with a confetti burst and strikethrough.FeedbackUndo PillAn inline undo pill with a draining countdown ring that pauses on hover.RatingFace RatingA five-level rating input where an SVG face morphs between moods.RatingStar RatingAn animated star rating input with hover preview and sparkle burst effects.

Control an animated preference switch

The switch exposes a controlled checked state while its installed source owns the drag and transition behavior.

pnpm dlx shadcn@latest add @spectrumui/animated-switch
NotificationPreference.tsx
'use client';

import { useState } from 'react';
import { AnimatedSwitch } from '@/components/spectrumui/animated-switch';

export function NotificationPreference() {
  const [enabled, setEnabled] = useState(false);

  return (
    <AnimatedSwitch
      checked={enabled}
      onCheckedChange={setEnabled}
      label="Email notifications"
    />
  );
}

Linked guides

Guide

Motion design for engineers

Choose timing, easing, and transition purpose from interaction requirements.

Guide

Micro-interactions guide

Use feedback and state transitions without adding visual noise.

Guide

Accessibility from day one

Test keyboard operation, focus, announcements, and reduced-motion behavior.

Animation LibraryReact Component LibraryTailwind Component Library

Motion Components questions

The components on this page were selected because Motion usage was detected in their documented source or registry dependencies. Confirm the exact package on the individual component page.