Motion-First Components

Components, hooks, and blocks for any shadcn/ui project. The code goes into your repo, so you can change anything.

Browse componentsRead docs

Built on

shadcn/uiBase UIMotionTailwind CSS

Index

The Registry

Components

01Actions

Buttons whose motion reports what the action is doing.

  1. Copy Button
  2. Like
  3. Like Button
  4. Status Button
  5. Expandable Toggle Button
  6. Play Button
  7. Sliding Play Button

02Form

Inputs and form controls for focused interaction states.

  1. Filter Tags
  2. OTP Input
  3. Floating Select
  4. Adaptive Switch
  5. Expandable Slider

03Tabs & Navigation

Tab lists, selectable rails, and menus with roving focus and a moving indicator.

  1. Nav Link
  2. Highlight Tabs
  3. Sliding List
  4. Rail List
  5. Expandable Segmented Tabs
  6. Expandable Tabs
  7. Navigation Menu

04Overlays

Dialogs, drawers, popovers, and panels that float above the page.

  1. Expandable Panel
  2. Expandable Dialog
  3. Adaptive Drawer
  4. Feedback Popover
  5. Floating Shortcut Button
  6. Arc Menu

05Display

Read-only output — status, text, and elapsed time — where motion carries the change.

  1. Status Badge
  2. Check Mark
  3. Shy Heart
  4. Timer
  5. Text Morph

06Layout & Flow

Structural primitives that measure, arrange, and transition changing content.

  1. Smooth Height
  2. Multi-Step Flow
  3. Expandable Toolbar

07Motion Primitives

Reusable motion behaviors that animate icons, elements, and nested content.

  1. Icon Swap
  2. Jitter
  3. Squeeze
  4. Heartbeat
  5. Projected Shadow
  6. Staggered Entrance
  7. Context Cursor

Hooks

01Accessibility

Hooks that adapt interfaces to user preferences.

  1. useReducedMotion

02Measurement

Hooks for measuring rendered element dimensions.

  1. useElementHeight
  2. useElementSizeMap

03Motion

Hooks that drive scroll-linked, gesture-linked, and eased movement.

  1. useScrollAnchor
  2. useScrollProgress
  3. useSwipeNavigation
  4. useSequencePlayer

Blocks

01App Patterns

Composed product interfaces for navigation, rich content, and complete screen states.

  1. Rail Stage
  2. Mermaid Diagram
  3. Deck Lift

02Marketing Scenes

Immersive scroll heroes and scene galleries for marketing surfaces.

  1. Scroll Expand & Focus Hero
  2. Ripple Scene Gallery
  3. Vertical Scene Gallery