A task summary that opens into steps, with a ring that fills to a success mark.
FreeWeb and MobileMotion
Preview
npx shadcn add @fetaui/expandable-cardPlayground4 of 6 items complete
Two small steps remain
Invite reviewers and add a release note before publishing.
- Invite reviewersMaya Chen, Jonas Weber
- Add a release noteDraft started Tuesday
Collapsed
4 of 6 items complete
Expanded, check both steps4 of 6 items complete
Two small steps remain
Invite reviewers and add a release note before publishing.
- Invite reviewersMaya Chen, Jonas Weber
- Add a release noteDraft started Tuesday
Complete6 of 6 items complete
Ready to publish
Everything is checked. Publish when you are ready, the team will be notified.
Icons animation
Open
Motion
Installation
Terminal· bash
npx shadcn add @fetaui/expandable-card
Accessibility
- The trigger has aria-expanded and aria-controls.
- The count is announced as it changes.
Motion
- Opens like Collapsible.
- The arc grows in 600 ms as steps are checked.
- At the end the ring turns into a success mark in 240 ms and the action fades in.
- With reduced motion, the ring jumps.
Responsive behavior
- Fills its column, 358 px on a phone.
Performance
- The panel reuses the Collapsible height animation. The ring is a single SVG stroke.
Note for AI
Give your coding assistant the Markdown reference instead of screenshots.
- Import ExpandableCard and the ExpandableStep type. Props: title, total, steps, completed, heading, body, completeHeading, completeBody, actionLabel, onAction, defaultOpen.
- steps are the open items and completed counts those done elsewhere. The ring follows them against total.
- Checks stay local to the component. It composes Button, Checkbox and Collapsible.
Related
CollapsibleComponentA trigger on the Soft tray and an inset card that opens in place.CheckboxComponentToggles between checked and not checked, with an indeterminate value for parents of a list.AccordionComponentStacked headings that each reveal a panel, in three looks: Classic, Soft and Editorial.Todo ListProComponentThe agent plan as a checklist with progress. Finished tasks keep their time.CardComponentThe container most of fetaUI is built on: an inset card on a soft tray, with actions on the tray.