Masked Image
The MaskedImage component is a reusable UI element that displays images with custom mask shapes. It's built on top of Next.js's Image component and supports various mask shape variants.
Installation
Make sure you have the latest version (4.1.3+) of Tailwind CSS installed.
npx shadcn@latest add https://matsu-theme.vercel.app/r/masked-image.jsonUsage
import { MaskedImage } from "@/components/ui/masked-image";
// With a specific mask shape variant
<MaskedImage
src="/path/to/image.jpg"
alt="Description"
width={500}
height={500}
variant="shape3"
/>Available Mask Variants
shape1
shape2
shape3
shape4
shape5
shape6
Props
| Prop | Type | Default | Description |
|---|---|---|---|
src | string | (required) | The source URL of the image |
alt | string | (required) | Alt text for accessibility |
width | number | (required) | Width of the image |
height | number | (required) | Height of the image |
variant | "shape1" | "shape2" | "shape3" | "shape4" | "shape5" | "shape6" | "shape1" | The mask shape variant to apply |
className | string | undefined | Additional CSS classes to apply |