Collapsible

An interactive component which expands/collapses a panel with smooth animations.

Animation Variants

Different animation effects using framer-motion for expand/collapse transitions.

This content animates its height smoothly, creating a natural accordion-like effect. The content slides down as the panel opens and slides up when closing.

Basic Usage

@radix-ui/react-collapsible

Code Block Collapse

import { Button } from "@/components/ui/button"

Settings Panel

Clean settings panel without redundant dividers.

Enable debugging

Off

Log level

Warning

Cache duration

24 hours

API Region

Auto

File Tree

Compact file tree with placeholder content area.

States

Expanded by default

This content is visible by default because the collapsible starts in an open state.

Collapsed by default