A trigger on the Soft tray and an inset card that opens in place.
FreeWeb and MobileMotion
Preview
npx shadcn add @fetaui/collapsiblePlayground
Everything you need to know before it ships.
MaterialSpeckled stoneware
Capacity300 ml
CareDishwasher safe
Closed
Open
Everything you need to know before it ships.
MaterialSpeckled stoneware
Capacity300 ml
CareDishwasher safe
Disabled
Icons animation
Open
Disabled
Motion
Installation
Terminal· bash
npx shadcn add @fetaui/collapsible
Accessibility
- The whole trigger is a button with aria-expanded and aria-controls.
- A closed panel is inert, so focus never lands inside it.
Motion
- Height grows on a 320 ms spring and content fades in from 80 ms.
- Closing fades content first and takes 220 ms.
- The chevron turns in 200 ms. Hover washes the trigger at 4% in 120 ms.
- With reduced motion, height is instant and content fades in 120 ms.
Responsive behavior
- Fills its column, 358 px on a phone.
- Body text grows from 14 to 15 px on Mobile.
Performance
- The panel animates height through Motion, so it runs layout each frame. Keep the content short.
- With reduced motion it fades instead.
Note for AI
Give your coding assistant the Markdown reference instead of screenshots.
- Import Collapsible and CollapsibleRow. Props: title, open or defaultOpen, onOpenChange, disabled, animated.
- The whole bar is the trigger. CollapsibleRow takes label and a value as children.
- For several linked sections use Accordion.
Related
AccordionComponentStacked headings that each reveal a panel, in three looks: Classic, Soft and Editorial.Expandable CardComponentA task summary that opens into steps, with a ring that fills to a success mark.Expandable TextComponentCopy clamped on a line boundary that unrolls from where you were reading.CardComponentThe container most of fetaUI is built on: an inset card on a soft tray, with actions on the tray.