Collapsible

Layout

An expandable section that reveals and hides content with a smooth animated toggle transition.

Loading component...

Run the following command to add this component to your project:

$pnpm dlx static-ui add collapsible

Import the component directly from the package:

import { Collapsible } from "@static-ui/ui"

Common props available for this component:

Prop	Type	Description
open	boolean	Controlled open state.
onOpenChange	(open: boolean) => void	Callback when open state changes.
className	string	Additional CSS classes to apply.

Uses `aria-expanded` on the trigger button and `aria-controls` to reference the content panel.

AccordionVertically stacked interactive headings with reveal panels.

Aspect RatioContent-sized to a desired ratio.

CardBounded content container.

CarouselHorizontally scrolling item sets.

Scroll AreaCustom styled scroll container.

SeparatorVisual content divider.

TabsTabbed content panels.