Expandable card
Give a dense card more room when requested.
npm install https://animui.stracture.net/__local/package.tgzLive · keyboard ready
- A single summary card with optional details, like a plan, order, or log entry.
- Cards whose summary line updates and should roll changed words in place.
- Use accordion for a list of mutually exclusive sections.
- Use card when there is nothing to reveal.
- Use card-stack for browsing several cards in one spot.
Installation
Install animui once, then import any component or block from its typed package entry.
animui · 250 components and blocks
React 19 and React DOM 19 are required. The package includes Free and Pro entries, styles and TypeScript declarations.
npm install https://animui.stracture.net/__local/package.tgzLoad the stylesheet once at your app root, then use the typed component import:
import 'animui/styles.css';
import { ExpandableCard } from 'animui/expandable-card';Read the Code tab for the implementation files and the API reference below for required props.
Download animui 0.3.0 · Agent guideexample.tsx
import { ExpandableCard } from "animui/expandable-card"; export function PlanDetails() { return ( <ExpandableCard title="Pro plan" description="Billed yearly, renews March 4" width={400} expandedWidth={600}> <ul> <li>Unlimited projects</li> <li>Priority support</li> </ul> </ExpandableCard> );}ExpandableCard
A card whose header toggles a details panel beneath it.
PropTypeDefaultDescription
titleRequiredstring–Card heading, shown in the toggle.descriptionstring–Summary line. Changed words roll in when it updates.childrenRequiredReactNode–Details revealed when expanded.defaultExpandedbooleanfalseStarts expanded.widthnumber–Collapsed width cap in px. The card is centered and never wider than its container. Fills the container when omitted.expandedWidthnumber–Expanded width cap in px, so the card grows sideways into more room when opened. Defaults to width.- EnterorSpace
- Toggles the card from its header button.
- Escape
- Closes the card while focus is inside it and returns focus to the header.
- The header is a native button with aria-expanded and aria-controls pointing at the panel.
- The rolling description keeps a screen-reader-only copy of the full text; animated words are aria-hidden.
- The collapsed panel is inert, so its content is not reachable by keyboard or screen readers while closed.
- Open and close are one morph: width and height move together on the smooth spring, which never overshoots, and the arrow turns on the same spring.
- Details fade in once the box has made room and fade out before it shrinks. They are laid out at their open width throughout, so text never reflows or stretches.
- Clicking again mid-animation reverses from the current size with its velocity. Changed words in the description rise in; unchanged words hold still.
- Reduced motion applies end states instantly and swaps the description without animation.
- Without width caps the card fills its container. With width and expandedWidth it stays centered and grows sideways to the open cap, never wider than its container, so on a phone it simply uses the full width.
- The whole header is the toggle with a 64px minimum height, so it is an easy touch target.
- The panel stays mounted but inert at zero height when collapsed, so a second click mid-animation reverses smoothly.
- Width and height are animated for real on one spring rather than scaled, so text and corners never stretch; keep the details short.
- The description splits into one span per word for the roll; keep it to a short line.
Notes for AI
Give your coding assistant the Markdown reference instead of screenshots.
- Use for a single standalone expandable summary such as a plan, order, or log entry. Use accordion for a list of mutually exclusive sections.
- State is internal; there is no controlled prop.
The full library index for assistants is at /llms.txt.