Skip to example

DocsDocs ExamplesExamples AI KitAIAI KitAI

Radix: Accordion

An accordion component with smooth height animations using Radix UI and Motion

Matt Perry9 Mar 2025

Vue

On this page

Live example

Live example

Built withmotionAnimatePresenceMotionConfiganimatewhilePressvariantslayoutId

Motion+One payment
Lifetime updates

Motion+ examples

Radix: Accordion is part of Motion+

Run every demo live, tweak the controls and copy the source. Motion+ also gives your agent the examples through Motion's MCP, with lifetime access to new examples and APIs.

Examples: 520+
Source: Included
Updates: Lifetime

Get Motion+Get Motion+Sign in

Not ready? Try 10 Motion+ demos free.

Create a free Motion account to run 10 Motion+ demos live, with their controls. No card needed.

Have an account? Log in

EmailPassword

I agree to the Terms and Privacy policy, and to receive emails from Motion about new examples and releases.

Related examples

Radix: Slider with AnimateNumber
Radix: Checkbox
Radix: Context Menu

Latest in Vue

AnimateView: App Store
AnimateView: Clip path
AnimateView: Reorder
AnimateView: Skeleton

Sponsors

Motion is supported by
the best in the industry

Discuss a partnership

Partners

Platinum

Newsletter

Subscribe to the newsletter

>

Site

About
Changelog
Docs
Examples
Magazine
Made with Motion
Partners
Troubleshooting

Products

AI Kit
CSS Studio
Motion
Motion+
Motion StudioNew
The Book of Motion

Most Popular

React animation
Layout animation
SVG animation
Motion component
GSAP vs Motion

Docs

JavaScript
React
Vue
AI Kit

Social

GitHub
RSS: Changelog
RSS: Magazine
X/Twitter
YouTube

© 2026 Motion

+Login Purchase