Image

Migration guide for Image from HeroUI v2 to v3

Key Changes

1. Component Removal

v2: <Image> component from @lenso/ui
v3: Native HTML <img> element or Next.js Image component

2. Features Mapping

The v2 Image component had several features that need to be replaced:

Structure Changes

In v2, Image was a component wrapper around the native <img> element:

1import { Image } from "@lenso/ui";2
3export default function App() {4  return (5    <Image6      src="https://example.com/image.jpg"7      alt="Example image"8      width={300}9      height={200}10    />11  );12}

In v3, use the native <img> element directly with Tailwind CSS classes:

1export default function App() {2  return (3    <img4      src="https://example.com/image.jpg"5      alt="Example image"6      width={300}7      height={200}8      className="rounded-lg"9    />10  );11}

Migration Examples

With Next.js Image (Recommended)

If you're using Next.js, use the optimized Image component:

1import { Image } from "@lenso/ui";2
3<Image4  src="/image.jpg"5  alt="Example"6  width={300}7  height={200}8/>

With Zoom Effect

1<Image isZoomed src="..." alt="..." />

With Blur Effect

1<Image isBlurred src="..." alt="..." />

With Fallback Image

1<Image2  src="https://example.com/image.jpg"3  fallbackSrc="/fallback.jpg"4  alt="Example"5/>

With Loading Skeleton

1<Image2  src="https://example.com/image.jpg"3  alt="Example"4  disableSkeleton={false}5/>

Combined Features

1<Image2  src="https://example.com/image.jpg"3  alt="Example"4  radius="lg"5  shadow="md"6  isZoomed7  isBlurred8  width={400}9  height={300}10/>

Creating a Reusable Image Component (Optional)

If you frequently use images with similar features, you can create a reusable component:

1import { Image } from "@lenso/ui";2
3<Image4  src="..."5  radius="lg"6  shadow="md"7  isZoomed8/>

Complete Example

1import { Image } from "@lenso/ui";2
3export default function App() {4  return (5    <div className="space-y-4">6      <Image7        src="https://example.com/image1.jpg"8        alt="Image 1"9        width={300}10        height={200}11        radius="lg"12        shadow="md"13      />14      <Image15        src="https://example.com/image2.jpg"16        alt="Image 2"17        width={300}18        height={200}19        isZoomed20        radius="lg"21      />22      <Image23        src="https://example.com/image3.jpg"24        alt="Image 3"25        width={300}26        height={200}27        isBlurred28        radius="full"29      />30    </div>31  );32}

Summary

1. Component Removed: Image component no longer exists in v3
2. Import Change: Remove import { Image } from "@lenso/ui"
3. Use Native Element: Replace with native <img> HTML element or Next.js Image
4. Features: Implement blur, zoom, skeleton, and fallback manually
5. Styling: Apply Tailwind CSS classes directly for radius, shadow, and effects

Migration Steps

1. Remove Import: Remove Image from @lenso/ui imports
2. Replace Component: Replace all <Image> instances with <img> elements
3. Add Tailwind Classes: Apply equivalent Tailwind classes for styling (radius, shadow)
4. Implement Features: Add manual implementations for blur, zoom, skeleton, and fallback if needed
5. Use Next.js Image: If using Next.js, consider using next/image for optimization
6. Optional: Create reusable wrapper components for frequently used patterns

Next.js Image Component

If you're using Next.js, the Image component from next/image provides:

• Automatic image optimization
• Lazy loading by default
• Responsive images with srcSet
• Placeholder blur support
• Built-in loading states

1import Image from "next/image";2
3<Image4  src="/image.jpg"5  alt="Example"6  width={300}7  height={200}8  className="rounded-lg shadow-md"9  placeholder="blur" // Optional: blur placeholder10  blurDataURL="data:image/..." // Optional: base64 blur data11/>