How do I make the whole card clickable?

Set interactive and stretch the title link with after:absolute after:inset-0, as in the variants example.

Why don't I see the crop marks?

They sit outside the card, so a parent with overflow: hidden clips them. Give the card some room or remove the clipping.

LayoutAnimated

Card

Surfaces with crop marks, raised and inset styles, and a divided footer tray.

Cards group related content on one surface. Cuelark cards add optional print-style crop marks, raised, inset and ghost surfaces, a mono label slot, and a footer tray separated by a dashed rule. Titles can render as real headings for SEO.

Preview

Plan · 02

Studio

For small teams shipping every week.

Popular

$24 / seat / month

Unlimited projects
Shared component library
Priority support

Installation

pnpm dlx shadcn@latest add https://ui.cuelark.com/r/card.json

The CLI also installs the Cuelark theme tokens, the GSAP motion layer. With the @cuelark namespace configured, use @cuelark/card.

Builds on: motion

Usage

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

<Card variant="raised" marks>
  <CardHeader>
    <CardTitle asChild><h3>Studio</h3></CardTitle>
    <CardDescription>For small teams.</CardDescription>
  </CardHeader>
  <CardContent>…</CardContent>
</Card>

Examples

Interactive variants

Outline, raised and inset cards whose whole surface is a link.

outline

Outline

Hairline border on the card surface.

raised

Raised

Adds the tactile highlight and a soft drop.

inset

Inset

Dashed and recessed, for empty or secondary areas.

Motion

How it moves

With spotlight, a soft accent glow trails the pointer, smoothed with GSAP quickTo on the house ease.

Scale it with --cl-motion (0 off, 1 default, 1.5 expressive) on any ancestor. Reduced-motion preferences always switch it off.

API reference

Card

Prop	Type	Default	Description
variant	"outline" \| "raised" \| "inset" \| "ghost"	"outline"	Surface style.
marks	boolean	false	Crop marks outside the corners (hidden globally with --cl-marks: 0).
interactive	boolean	false	Hover lift and focus ring for clickable cards.
spotlight	boolean	false	Accent glow that follows the pointer (GSAP quickTo).

CardTitle

Prop	Type	Default	Description
asChild	boolean	false	Render your own heading element.

CardFooter

Prop	Type	Default	Description
divided	boolean	false	Dashed rule and muted tray.

CardHeader · CardLabel · CardDescription · CardAction · CardContent

Accessibility

A card is a plain container; give titles a heading level that fits the page outline with asChild.
Interactive cards show a focus ring when any link or button inside is focused.
Crop marks are a decorative pseudo-element and are never announced.

FAQ

Also searched as: react card · shadcn card · pricing card · tailwind card component · card with header and footer