Image - Dreamy UI

Image

Image is a img tag and it provides bunch of styled features.

#

Import

Image - The Image component.
ImageRSC - The Image component for RSC usage without client handlers.

import { Image } from "@dreamy-ui/react";
import { ImageRSC } from "@dreamy-ui/react/rsc";

#

Usage

Image contains bunch of helpful props to make it easier to use. Provide a fallbackSrc to show a backup image if the main image fails to load.

Photos by Alex Padurariu and Piotr Musioł on Unsplash

<Image 
  src="https://dreamy-ui.com/coffee-n-cookies.webp" 
  alt="Coffee and cookies" 
  fallbackSrc="https://via.placeholder.com/250x164" 
  w="250px"
  rounded="lg"
/>

#

Zoom on hover

Use zoomOnHover to zoom in the image on hover.

<Image 
  src="https://dreamy-ui.com/coffee-n-cookies.webp" 
  alt="Coffee and cookies" 
  fallbackSrc="https://via.placeholder.com/250x164" 
  w="250px"
  rounded="lg"
  zoomOnHover
/>

#

Blur shadow

Use blurShadow to add a blurred shadow to the image.

<Image 
  src="https://dreamy-ui.com/outdoor-cat.webp" 
  alt="Outdoor cat" 
  fallbackSrc="https://via.placeholder.com/250x164" 
  w="250px"
  rounded="lg"
  blurShadow
/>

#

RSC Usage

ImageRSC is a server-side compatible component that does not use client handlers.

<ImageRSC 
  src="/outdoor-cat.webp"
  alt="Outdoor cat" 
  w="250px"
  rounded="lg"
/>