Cards

Cutout Card

Composable image card for React and shadcn/ui with cutout corner accents, inset labels, pins, and actions revealed on hover.

Updated Oct 1, 2026

Featured

New

Alpine Adventures

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

Sarah Chen

5 min read

CutoutCard is a composable React card component for shadcn/ui, animated with Motion. Use it for portfolio grids, product galleries, or template showcases.

Installation


pnpm dlx shadcn@latest add @cult-ui/cutout-card

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>