Primitives
Card
Content surface for panels, tiles, and settings groups.
Composition
The preferred shape for composing the installed primitive from its exported parts.
Panel anatomy
Header parts are optional; content and footer keep the surface predictable.
Card├── CardHeader│ ├── CardTitle│ ├── CardDescription│ └── CardAction├── CardContent└── CardFooterThe refined source installs this primitive from src/registry/sources/refined/ui/card.tsx. Install it on its own with the command above, or inspect the source below.
npx shadcn@latest add http://127.0.0.1:3000/r/refined/card.jsonRaw code
Primary installed primitive source
Card slot
src/registry/sources/refined/ui/card.tsx
import type { CardActionProps, CardContentProps, CardDescriptionProps, CardFooterProps, CardHeaderProps, CardProps, CardTitleProps,} from "@/components/refined-ui/contracts";import { cn } from "@/components/refined-ui/lib/cn";import { skinSlot } from "@/components/refined-ui/skin";// Plain semantic card (no Base UI). Header is a grid; has-data-[slot=card-action] pins CardAction to top-right without title/description knowing it's there.export function Card({ className, ...props }: CardProps) { return ( <div data-ui="agent" data-slot="card" className={cn( "flex flex-col gap-6 rounded-[var(--radius-lg)] border bg-card py-6 text-card-foreground shadow-sm", skinSlot("card", {}), className, )} {...props} /> );}export function CardHeader({ className, ...props }: CardHeaderProps) { return ( <div data-ui="agent" data-slot="card-header" className={cn( "grid auto-rows-min grid-rows-[auto_auto] items-start gap-1.5 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto]", className, )} {...props} /> );}export function CardTitle({ className, ...props }: CardTitleProps) { return <div data-ui="agent" data-slot="card-title" className={cn("font-semibold leading-none", className)} {...props} />;}export function CardDescription({ className, ...props }: CardDescriptionProps) { return <div data-ui="agent" data-slot="card-description" className={cn("text-sm text-muted-foreground", className)} {...props} />;}export function CardAction({ className, ...props }: CardActionProps) { return ( <div data-ui="agent" data-slot="card-action" className={cn("col-start-2 row-span-2 row-start-1 self-start justify-self-end", className)} {...props} /> );}export function CardContent({ className, ...props }: CardContentProps) { return <div data-ui="agent" data-slot="card-content" className={cn("px-6", className)} {...props} />;}export function CardFooter({ className, ...props }: CardFooterProps) { return <div data-ui="agent" data-slot="card-footer" className={cn("flex items-center px-6 [.border-t]:pt-6", className)} {...props} />;}