Base UI: Switch

An example of creating a switch component using Base UI and Motion for React. This examples uses CSS variables, spring and layout animations to animate the switch by switching justify-content.

Matt Perry

Related docs

Motion component

Animate elements with a declarative API. Supports variants, gestures, and layout animations.

React animation

Create React animation with Motion components. Learn variants, gestures, and keyframes.

Gesture animation

An overview of all the gestures available in Motion for React.

Layout animation

Smoothly animate layout changes and create shared element animations.

Motion component

Animate elements with a declarative API. Supports variants, gestures, and layout animations.

React animation

Create React animation with Motion components. Learn variants, gestures, and keyframes.

Gesture animation

An overview of all the gestures available in Motion for React.

Layout animation

Smoothly animate layout changes and create shared element animations.

Motion Studio

Enhance your AI code editor with this example

Use Motion Studio to create new components or infuse static designs with animations based on "Base UI: Switch" and 300+ other examples.

Discover Motion Studio

Base UI: Switch

Related docs

Motion component

React animation

Gesture animation

Layout animation

Motion component

React animation

Gesture animation

Layout animation

Enhance your AI code editor with this example

Stay in the loop

Stay in the loop