Collapsible

An expandable/collapsible content area with smooth animations.

Basic Usage (Default Animation)

The base component now includes smooth height animation by default.

@peduarte starred 3 repositories

@radix-ui/primitives

Spring Animation (Framer Motion)

Bouncy spring effect for a more playful feel.

Fade + Slide Animation

Content fades in while sliding down.

Staggered Children Animation

Items animate in sequence for a cascade effect.

FAQ with Animation

Code Example

example.tsx
import { Button } from '@/components/ui/button'

Settings Panel

Username@username

Filter Panel

Accordion Style

Only one item can be open at a time.

We offer a 30-day money-back guarantee on all purchases. If you're not satisfied, simply contact our support team.