ExpandableCard

A card that expands into a modal with smooth layout animations.

Click to expand

Design System

A complete component library for modern apps.

Click to expand

UI Components

Reusable building blocks for any project.

Basic Usage

import {
  ExpandableCard,
  ExpandableCardTrigger,
  ExpandableCardContent,
  ExpandableCardHeader,
  ExpandableCardTitle,
  ExpandableCardDescription,
  ExpandableCardBody,
} from "@corew500/ui"

<ExpandableCard>
  <ExpandableCardTrigger>
    <ExpandableCardHeader>
      <ExpandableCardTitle>Card Title</ExpandableCardTitle>
      <ExpandableCardDescription>Click to expand</ExpandableCardDescription>
    </ExpandableCardHeader>
  </ExpandableCardTrigger>

  <ExpandableCardContent>
    <ExpandableCardHeader>
      <ExpandableCardTitle>Expanded View</ExpandableCardTitle>
    </ExpandableCardHeader>
    <ExpandableCardBody>
      <p>Full content shown when expanded...</p>
    </ExpandableCardBody>
  </ExpandableCardContent>
</ExpandableCard>

Controlled State

const [expanded, setExpanded] = useState(false)

<ExpandableCard expanded={expanded} onExpandedChange={setExpanded}>
  <ExpandableCardTrigger>...</ExpandableCardTrigger>
  <ExpandableCardContent>...</ExpandableCardContent>
</ExpandableCard>

Variants

// Default with shadow
<ExpandableCard variant="default">...</ExpandableCard>

// Outline style
<ExpandableCard variant="outline">...</ExpandableCard>

Sizes

<ExpandableCard size="sm">Small card</ExpandableCard>
<ExpandableCard size="default">Default card</ExpandableCard>
<ExpandableCard size="lg">Large card</ExpandableCard>

Custom Close Button

Hide the default close button or add a custom one:

<ExpandableCardContent showCloseButton={false}>
  <ExpandableCardBody>
    <p>Content here</p>
    <ExpandableCardClose>
      <Button variant="outline">Close</Button>
    </ExpandableCardClose>
  </ExpandableCardBody>
</ExpandableCardContent>

With Footer

<ExpandableCardContent>
  <ExpandableCardBody>Content</ExpandableCardBody>
  <ExpandableCardFooter>
    <Button variant="outline">Cancel</Button>
    <Button>Save</Button>
  </ExpandableCardFooter>
</ExpandableCardContent>

Sub-components

| Component | Description | |-----------|-------------| | ExpandableCard | Root container with context | | ExpandableCardTrigger | Clickable card that triggers expansion | | ExpandableCardContent | Expanded modal content | | ExpandableCardClose | Close button/trigger | | ExpandableCardHeader | Header section | | ExpandableCardTitle | Title text | | ExpandableCardDescription | Description text | | ExpandableCardBody | Main content area | | ExpandableCardFooter | Footer with actions |

Props

ExpandableCard

Prop	Type	Default	Description
`expanded`	enum	—	Controlled expanded state
`onExpandedChange`	(expanded: boolean) => void	—	Callback when expanded state changes
`defaultExpanded`	enum	`false`	Default expanded state for uncontrolled usage
`variant`	enum	`default`	—
`size`	enum	`default`	—

ExpandableCardContent

Prop	Type	Default	Description
`showCloseButton`	enum	`true`	Show close button in expanded view
`className`	string	—	—

Accessibility

Escape key closes the expanded card
Focus is trapped within expanded content
Focus returns to trigger on close
Uses role="dialog" and aria-modal="true"
Trigger is keyboard accessible (Enter/Space)