Image - Dreamy UI

Image

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

#

Installation

npx dreamy add image

pnpm dlx dreamy add image

yarn dlx dreamy add image

bunx dreamy add image

#

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
/>

#

Modify zoom and blur options

You can use zoomOptions and blurOptions to modify the zoom and blur options.

<Image 
  src="https://dreamy-ui.com/outdoor-cat.webp" 
  alt="Outdoor cat" 
  fallbackSrc="https://via.placeholder.com/250x164" 
  w="250px"
  rounded="lg"
  blurShadow
  blurOptions={{
    scale: 1.1,
    radius: "15px",
    opacity: 0.5
  }}
  zoomOnHover
  zoomOptions={{
    scale: 1.2,
    duration: "0.5s"
  }}
/>

Icon

Input