Expand Card
Discloses more of itself on click, built on GridReveal.
- cards
- card
- effect
- disclosure
- expand
- accordion
Full carrier and tracking details once the order ships.
Quick usage
usage
import { ExpandCard } from "@pinky-ui/components";
<ExpandCard title="Shipping details" summary="Arrives in 3–5 days">
<p>Full carrier and tracking details once the order ships.</p>
</ExpandCard>Presets
Default
Collapsed to start.
Install
Add @pinky-ui/components as a dependency, or use the CLI to copy this component's source directly into your project — no dependency to manage, fully editable.
shell
npm install @pinky-ui/componentsshell
pnpm add @pinky-ui/componentsshell
yarn add @pinky-ui/componentsshell — copies source into your project
npx pinky-ui add expand-cardPrefer to run the whole repository locally instead?
repository
git clone https://github.com/florash/Pinky-UI.git
cd Pinky-UI
npm install
npm run devProps
| Prop | Type | Default | Description |
|---|---|---|---|
| title | ReactNode | — | Required. |
| summary | ReactNode | — | Always visible, above the expand toggle. |
| children | ReactNode | — | Required. Revealed when expanded. |
| open | boolean | — | Controlled open state. Omit to let the card manage its own. |
| defaultOpen | boolean | false | Initial state when uncontrolled. |
| onOpenChange | (open: boolean) => void | — | Called on every toggle, controlled or not. |
| radius | "md" | "lg" | "xl" | "2xl" | "xl" | Corner radius from the shape scale. |
| padded | boolean | true | Inner content padding. |
| shadow | "neutral" | "pink" | "neutral" | Shadow token pair. |
Accessibility
- The whole header is a real <button> with aria-expanded and aria-controls — never a div with an onClick.
- Collapsed content stays mounted but inert (via GridReveal), off the tab order and assistive tech until opened.
Reduced motion
The grid-track transition is skipped under prefers-reduced-motion: reduce — open/close is instant.
When to use
- FAQ-style content, order/shipping detail a user opts into seeing
- Any card where the collapsed summary is genuinely useful on its own
When not to use
- Content that should always be visible — collapsing it just adds a click for no benefit