Chapter 6: Animate Base UI components

Core Idea

How to animate Base UI components with Motion.

Key Concepts

• Setup motion components: By default
• Exit animations: In most situations
• Stay in the loop.: Deep dives on animation
• Animate faster with Motion+.: Unlock 430+ premium examples

Code Examples

import { Menu } from "@base-ui-components/react/menu"
import { motion } from "motion/react"

function Component() {
  return (
    <Menu.Trigger render={
      <motion.button
        initial={{ opacity: 0 }}
        animate={{ opacity: 1 }}
        whilePress={{ scale: 0.9 }}
      />
    } />
  )
}

• What it demonstrates: Core usage pattern for Animate Base UI components.

Key Takeaways

1. Animate Base UI components supports Setup motion components.
2. Animate Base UI components supports Exit animations.
3. Animate Base UI components supports Stay in the loop..

Connects To

• React motion component: related Motion doc page.
• Radix: How to Add Animations to Radix: related Motion doc page.
• AnimatePresence: related Motion doc page.
• Layout Animation: related Motion doc page.