Live preview
import ImageCard from "@/components/ui/image-card";
export default function ImageCardDemo() {
return (
<ImageCard
caption="Cherry blossoms at peak bloom"
imageUrl="https://hips.hearstapps.com/hmg-prod/images/flowers-trees-and-bushes-reach-their-peak-of-full-bloom-in-news-photo-1678292967.jpg?resize=300:*"
></ImageCard>
);
}
#Installation
npx shadcn@latest add https://neobrutal-ui.andongmin.com/r/image-card.jsonimport { cn } from "@/lib/utils";
type Props = {
imageUrl: string;
caption: string;
className?: string;
};
export default function ImageCard({ imageUrl, caption, className }: Props) {
return (
<figure
className={cn(
"w-[250px] overflow-hidden rounded-base border-2 border-border bg-main font-base shadow-shadow",
className,
)}
>
<img className="w-full aspect-4/3" src={imageUrl} alt={caption} />
<figcaption className="border-t-2 text-main-foreground border-border p-4">
{caption}
</figcaption>
</figure>
);
}
#Usage
import ImageCard from "@/components/ui/image-card";<ImageCard
caption="Cherry blossoms at peak bloom"
imageUrl="https://hips.hearstapps.com/hmg-prod/images/flowers-trees-and-bushes-reach-their-peak-of-full-bloom-in-news-photo-1678292967.jpg?resize=300:*"
></ImageCard>