Expandable Card

A card component that expands into a modal to reveal more content with smooth animations.

"use client";
import { ExpandableCard, type ExpandableCardItem } from "@/components/ui/expandable-card/expandable-card";
import styles from "./expandable-card-demo.module.css";

const item: ExpandableCardItem = {
  id: 1,
  imageSrc: "/p-01.svg",
  cardHeading: "Eudaimonia",
  alt: "Figure contemplating under an archway at dusk",
  content: (
    <div className={styles.content}>
      <p>
        Aristotle taught that eudaimonia, or human flourishing, is not found in fleeting pleasures or material wealth,
        but in living a life of virtue and purpose. It is the highest good, achieved through the cultivation of
        character and the exercise of reason.
      </p>

      <p>
        We build not for momentary delight, but for lasting excellence. Every interface, every interaction is an
        opportunity to help users flourish in their work and creative pursuits.
      </p>
    </div>
  ),
};

export default function ExpandableCardDemo() {
  return <ExpandableCard item={item} />;
}

npx shadcn@latest add @roiui/expandable-card
npx shadcn@latest add @roiui/expandable-card-tailwind

Component props

Prop
Type
Default

Component props

Prop
Type
Default