Card

Composable card — header with action slot, content, footer — in default, elevated, ghost and interactive variants.

2 files · 53 locdeps: clsx, tailwind-merge

Team plan

Everything in Pro, for up to 20 seats.

Popular

$49/seat/mo

Spring field notes

Interactive variant — hover me.

A short essay on why motion design deserves the same rigour as typography.

Installation

With the shadcn CLI, pointing at this platform’s registry:

npx shadcn@latest add https://opusui.131199999.xyz/r/card.json

Or offline, straight from your opus55 checkout (copies every file it needs):

node ../tailwind_component/opus55/scripts/add.mjs card

Usage

import { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter } from "@/components/opus/ui/card";

<Card>
  <CardHeader><CardTitle>Title</CardTitle><CardDescription>…</CardDescription></CardHeader>
  <CardContent>…</CardContent>
  <CardFooter>…</CardFooter>
</Card>

API

Prop	Type	Default	Description
variant	"default" \| "elevated" \| "ghost" \| "interactive"	"default"	Chrome style.

← PreviousTag Next →Skeleton