caliper uidocs
DemoSign inGet Pro

Card

Free

A titled container with media, status, meta and optional expandable details.

Installs components/ui/card.tsxDepends on @radix-ui/react-dialog, @radix-ui/react-slot, lucide-reactMotion none in component source
pnpm dlx shadcn@latest add https://caliperui.site/r/card.json

Booking flow and room pages.

Mara Chen

Updated today

When to use #

Use it for

  • Projects, listings and items in a grid.
  • Content that links to a larger page.

Skip it when

  • Wrapping content that has no boundary; use plain layout.

Installation #

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

Adds its 4 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 { Card } from "@/components/ui/card"

export function ProjectCard() {
  return (
    <div className="w-full max-w-sm">
      <Card
        title="Harbour redesign"
        description="Booking flow and room pages."
        meta="Mara Chen"
        status="Updated today"
        details={<p className="text-sm">Scope, milestones and open questions stay with the project.</p>}
      />
    </div>
  );
}

API reference #

Card

component
PropTypeDefault
title *string—
descriptionstring—
mediaReactNode—
metaReactNode—
statusstring—
actionReactNode—
detailsReactNode—
childrenReactNode—
classNamestring—

Accessibility #

It exposes status semantics. Changes that matter are announced through a live region.

Keyboard and focus handling comes from Radix dialog: arrow keys move through items, Enter and Space select, and Escape closes and returns focus.

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.