Expandable card

Free

A card that grows in place to reveal its details.

Installs components/ui/expandable-card.tsxDepends on lucide-reactMotion none in component source

pnpm dlx shadcn@latest add https://caliperui.site/r/expandable-card.json

The harbour rooms open at 15:00. Late arrivals use the side door and the code on the booking.

When to use #

Use it for

Summaries with optional detail, like a booking or an order.
Several cards in a list where only one is read at a time.

Skip it when

The details are long; open a page or a drawer.

Installation #

terminal

pnpm dlx shadcn@latest add https://caliperui.site/r/expandable-card.json

Adds its 2 files to components/ui/, each with its own stylesheet, and installs their packages. No account needed. The first part also adds Caliper UI’s tokens; import them once as in Installation.

Usage #

This is the code behind the preview above.

example.tsx

import { ExpandableCard } from "@/components/ui/expandable-card"

export function StayCard() {
  return (
    <div className="w-full max-w-sm">
      <ExpandableCard title="Harbour stay" description="8–14 October · 2 guests">
        The harbour rooms open at 15:00. Late arrivals use the side door and the code on the booking.
      </ExpandableCard>
    </div>
  );
}

API reference #

ExpandableCard

component

PropTypeDefault

title *string—

description *string—

children *ReactNode—

classNamestring—

Motion #

It declares no animation in its component source. Any transition comes from its stylesheet, which uses the duration tokens that collapse to instant under prefers-reduced-motion.