NewAI SDK Agents

CutoutCard

PreviousNext

Image card with cutout corner accents, hover motion, inset labels, pins, and reveal-on-hover actions.

Mountain landscape
Featured
New

Alpine Adventures

Discover breathtaking mountain landscapes and experience the serenity of nature at its finest.

Sarah Chen
5 min read

Installation

pnpm dlx shadcn@latest add https://cult-ui.com/r/cutout-card.json

Usage

CutoutCard is a composable layout: wrap content in CutoutCardMedia, CutoutCardContent, and optional CutoutCardInsetLabel, CutoutCardPin, and CutoutCardAction. Use CutoutCorner inside labels or pins for the masked corner shape. CutoutCardImage wraps next/image with sensible defaults (fill, sizes).

import {
  CutoutCard,
  CutoutCardAction,
  CutoutCardContent,
  CutoutCardFooter,
  CutoutCardImage,
  CutoutCardInsetLabel,
  CutoutCardMedia,
  CutoutCardOverlay,
  CutoutCardPin,
  CutoutCorner,
  cutoutCardSurfaceClassName,
  useCutoutCard,
  useCutoutContentStaggerVariants,
} from "@/components/ui/cutout-card"
<CutoutCard className={cutoutCardSurfaceClassName}>
  <CutoutCardMedia className="h-72">
    <CutoutCardImage alt="Preview" src="/your-image.jpg" />
    <CutoutCardOverlay />
    <CutoutCardInsetLabel className="bottom-0 left-0 rounded-tr-[20px] bg-stone-50 px-5 py-3">
      <span className="text-[11px] font-semibold uppercase tracking-widest text-stone-500">
        Featured
      </span>
      <CutoutCorner className="absolute -right-[31px] -bottom-px rotate-90 text-stone-50" />
      <CutoutCorner className="absolute -top-[31px] -left-px rotate-90 text-stone-50" />
    </CutoutCardInsetLabel>
  </CutoutCardMedia>
  <CutoutCardContent>{/* title, body */}</CutoutCardContent>
  <CutoutCardAction className="right-6 bottom-6">{/* e.g. button */}</CutoutCardAction>
</CutoutCard>