Cards

Minimal Card

Composable minimal image card for React and shadcn/ui with image, title, and description parts, for blog and product grids.

Updated Oct 1, 2026

Sick title

How to design with gestures and motion that feel intuitive and natural.

Sick title

How to design with gestures and motion that feel intuitive and natural.

Sick title

How to design with gestures and motion that feel intuitive and natural.

Sick title

How to design with gestures and motion that feel intuitive and natural.

Sick title

How to design with gestures and motion that feel intuitive and natural.

MinimalCard is a composable React card component for shadcn/ui built on Next.js Image. Use it for blog post previews, product grids, portfolio items, or any gallery where an image leads the card.

Installation


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

Usage


import {
  MinimalCard,
  MinimalCardDescription,
  MinimalCardImage,
  MinimalCardTitle,
} from "@/components/ui/minimal-card";


const cards = [
  {
    title: "Sick title",
    description:
      "How to design with gestures and motion that feel intuitive and natural.",
  },
  {
    title: "Sick title",
    description:
      "How to design with gestures and motion that feel intuitive and natural.",
  },
  {
    title: "Sick title",
    description:
      "How to design with gestures and motion that feel intuitive and natural.",
  },
  {
    title: "Sick title",
    description:
      "How to design with gestures and motion that feel intuitive and natural.",
  },
  {
    title: "Sick title",
    description:
      "How to design with gestures and motion that feel intuitive and natural.",
  },
];
 
export default function MinimalCardDemo() {
  return (
    <div className="w-full max-w-4xl">
      <div className="p-2">
        <h3 className="text-xl font-semibold">MinimalCard</h3>
      </div>
      <div className="min-h-[500px] p-4  flex flex-col justify-center border border-dashed rounded-lg space-y-4">
        <div className="relative grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
          {cards.map((card) => (
            <MinimalCard>
              <MinimalCardImage src="/basic-img.png" />
              <MinimalCardTitle>{card.title}</MinimalCardTitle>
              <MinimalCardDescription>
                {card.description}
              </MinimalCardDescription>
            </MinimalCard>
          ))}
        </div>
      </div>
    </div>
  );
}