Motion UIComponentsComponent

Expand card

An App Store-style expand where a grid tile morphs into a centred detail panel.

API reference

Components

`<ExpandCards />`

Provider for a set of expanding cards. Renders no DOM.

`children?`

ReactNode

Grid of ExpandCardTriggers and one ExpandCardPanel.

`scrimOpacity?`

number = 0.72

Scrim opacity (0-1). Default 0.72.

`<ExpandCardTrigger />`

Grid tile that expands on activation.

`id`

string

Card id matched against openId.

`children?`

ReactNode

Visible card content.

`className?`

string

Merged onto the morphing surface.

`"aria-label"?`

string

Button accessible name.

`<ExpandCardShared />`

Sub-element that morphs with its card's surface.

`part`

string

Stable part name (e.g. "icon", "head").

`as?`

"span" | "div" = "span"

Element to render. Default "span".

`layout?`

"position" | "size" | boolean

Pass "position" to morph position only, not size.

`className?`

string

Merged onto the element.

`children?`

ReactNode

Part content.

`<ExpandCardPanel />`

Expanded detail dialog. One per ExpandCards group.

`children`

((card: { id: string }) => ReactNode) | ReactNode

Dialog body, or a render function receiving the open card's id.

`className?`

string

Merged onto the dialog surface.

`contentClassName?`

string

Merged onto the inner content wrapper.

`labelledBy?`

(id: string) => string

Builds aria-labelledby from the open card's id.

`describedBy?`

(id: string) => string

Builds aria-describedby from the open card's id.

`initialFocusRef?`

RefObject<HTMLElement | null>

Where focus lands on open.

`<ExpandCardBody />`

Non-shared body that cross-fades in after the surface morph settles.

`children?`

ReactNode

Non-shared dialog detail content.

`className?`

string

Merged onto the wrapper.

Hooks

`useExpandCard`

Read expand/collapse controls from inside an ExpandCards group.

useExpandCard(): UseExpandCard

Returns

`openId`

string | null

Id of the expanded card, or null.

`open`

(id: string) => void

Expand the card with this id.

`close`

() => void

Collapse the open card.

`isOpen`

(id: string) => boolean

Whether the card with this id is expanded.

Featured in

See the expand card composed into full sections.

Feature expand bentoAn example of a bento grid of feature cards that expand in place into a detail dialog with a shared-element layout animation in Motion for React.