Docs
MinimalCard
MinimalCard
A minimal image card
![Sick title](/basic-img.png)
Sick title
How to design with gestures and motion that feel intuitive and natural.
![Sick title](/basic-img.png)
Sick title
How to design with gestures and motion that feel intuitive and natural.
![Sick title](/basic-img.png)
Sick title
How to design with gestures and motion that feel intuitive and natural.
![Sick title](/basic-img.png)
Sick title
How to design with gestures and motion that feel intuitive and natural.
![Sick title](/basic-img.png)
Sick title
How to design with gestures and motion that feel intuitive and natural.
Installation
Copy and paste the following code into your project.
import * as React from "react"
import Image from "next/image"
import { cn } from "@/lib/utils"
const MinimalCard = React.forwardRef<
HTMLDivElement,
React.HTMLAttributes<HTMLDivElement> & { children?: React.ReactNode }
>(({ className, children, ...props }, ref) => (
<div
ref={ref}
className={cn(
"rounded-[24px] dark:bg-neutral-800 bg-neutral-50 p-2 no-underline shadow-sm transition-colors hover:bg-neutral-100 dark:hover:bg-neutral-800/80 ",
"shadow-[0px_1px_1px_0px_rgba(0,0,0,0.05),0px_1px_1px_0px_rgba(255,252,240,0.5)_inset,0px_0px_0px_1px_hsla(0,0%,100%,0.1)_inset,0px_0px_1px_0px_rgba(28,27,26,0.5)]",
"shadow-[rgba(17,24,28,0.08)_0_0_0_1px,rgba(17,24,28,0.08)_0_1px_2px_-1px,rgba(17,24,28,0.04)_0_2px_4px]",
"dark:shadow-[0_1px_0_0_rgba(255,255,255,0.03)_inset,0_0_0_1px_rgba(255,255,255,0.03)_inset,0_0_0_1px_rgba(0,0,0,0.1),0_2px_2px_0_rgba(0,0,0,0.1),0_4px_4px_0_rgba(0,0,0,0.1),0_8px_8px_0_rgba(0,0,0,0.1)]",
className
)}
{...props}
>
{children}
</div>
))
MinimalCard.displayName = "MinimalCard"
const MinimalCardImage = React.forwardRef<
HTMLDivElement,
React.HTMLAttributes<HTMLDivElement> & { src: string; alt: string }
>(({ className, alt, src, ...props }, ref) => (
<div
ref={ref}
className={cn(
"relative h-[190px] w-full rounded-[20px] mb-6",
"shadow-[0px_1px_1px_0px_rgba(0,0,0,0.05),0px_1px_1px_0px_rgba(255,252,240,0.5)_inset,0px_0px_0px_1px_hsla(0,0%,100%,0.1)_inset,0px_0px_1px_0px_rgba(28,27,26,0.5)]",
"dark:shadow-[0_1px_0_0_rgba(255,255,255,0.03)_inset,0_0_0_1px_rgba(255,255,255,0.03)_inset,0_0_0_1px_rgba(0,0,0,0.1),0_2px_2px_0_rgba(0,0,0,0.1),0_4px_4px_0_rgba(0,0,0,0.1),0_8px_8px_0_rgba(0,0,0,0.1)]",
className
)}
{...props}
>
<img
src={src}
alt={alt}
width={200}
height={200}
className="rounded-[16px] object-cover absolute h-full w-full inset-0 "
/>
<div className="absolute inset-0 rounded-[16px]">
<div
className={cn(
"absolute inset-0 rounded-[16px]",
"shadow-[0px_0px_0px_1px_rgba(0,0,0,.07),0px_0px_0px_3px_#fff,0px_0px_0px_4px_rgba(0,0,0,.08)]",
"dark:shadow-[0px_0px_0px_1px_rgba(0,0,0,.07),0px_0px_0px_3px_rgba(100,100,100,0.3),0px_0px_0px_4px_rgba(0,0,0,.08)]"
)}
/>
<div
className={cn(
"absolute inset-0 rounded-[16px]",
"dark:shadow-[0px_1px_1px_0px_rgba(0,0,0,0.15),0px_1px_1px_0px_rgba(0,0,0,0.15)_inset,0px_0px_0px_1px_rgba(0,0,0,0.15)_inset,0px_0px_1px_0px_rgba(0,0,0,0.15)]"
)}
/>
</div>
</div>
))
MinimalCardImage.displayName = "MinimalCardImage"
const MinimalCardTitle = React.forwardRef<
HTMLHeadingElement,
React.HTMLAttributes<HTMLHeadingElement>
>(({ className, ...props }, ref) => (
<h3
ref={ref}
className={cn("text-lg mt-2 font-semibold leading-tight px-1", className)}
{...props}
/>
))
MinimalCardTitle.displayName = "MinimalCardTitle"
const MinimalCardDescription = React.forwardRef<
HTMLParagraphElement,
React.HTMLAttributes<HTMLParagraphElement>
>(({ className, ...props }, ref) => (
<p
ref={ref}
className={cn("text-sm text-neutral-500 pb-2 px-1", className)}
{...props}
/>
))
MinimalCardDescription.displayName = "MinimalCardDescription"
const MinimalCardContent = React.forwardRef<
HTMLDivElement,
React.HTMLAttributes<HTMLDivElement>
>(({ className, ...props }, ref) => (
<div ref={ref} className={cn("p-6 pt-0", className)} {...props} />
))
MinimalCardContent.displayName = "MinimalCardContent"
const MinimalCardFooter = React.forwardRef<
HTMLDivElement,
React.HTMLAttributes<HTMLDivElement>
>(({ className, ...props }, ref) => (
<div
ref={ref}
className={cn("flex items-center p-6 pt-0", className)}
{...props}
/>
))
MinimalCardFooter.displayName = "MinimalCardFooter"
export {
MinimalCard,
MinimalCardImage,
MinimalCardTitle,
MinimalCardDescription,
MinimalCardContent,
MinimalCardFooter,
}
export MinimalCard
Update the import paths to match your project setup.
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>
)
}