A
Auralix UI

ExpandableCard

Click-to-expand card with smooth height animation.

Preview

This is the hidden content that appears when you click the card header.

This card is expanded by default.

Installation

bash
npx auralix-ui add expandable-card

Usage

Expandable Card

tsx
import { ExpandableCard } from "@/components/ui/ExpandableCard";

<ExpandableCard title="Click to expand">
  <p>Hidden content revealed on click.</p>
</ExpandableCard>

Props

NameTypeDefaultDescription
titlestring-Card title.
descriptionstring-Optional description.
childrenReactNode-Expandable content.
defaultExpandedbooleanfalseInitial expanded state.