Back to Components

Image

v1.0.0
Media

An enhanced image component with hover effects and loading states.

Dependencies

framer-motion
Installation
Add this component to your project

CLI Installation

npx shadcn@latest add https://ui.authmate.xyz/registry/image.json

Manual Installation

// 1. Install dependencies
npm install framer-motion

// 2. Copy the component code to components/ui/image.tsx

// 3. Usage example:
import { Image } from "@/components/ui/image"

export function MyImage() {
  return (
    <Image
      src="/my-image.jpg"
      alt="My image"
      hoverEffect={true}
      className="rounded-lg"
    />
  )
}
Props
Component properties and their types
src
string
default: undefined

The image source URL

alt
string
default: undefined

Alt text for the image

hoverEffect
boolean
default: true

Whether to show hover effects

loading
'lazy' | 'eager'
default: 'lazy'

Image loading behavior

Examples
Code example for this component

Image with Hover Effect

import { Image } from "@/components/ui/image"

export function ImageDemo() {
  return (
    <div className="grid grid-cols-2 gap-4 max-w-md">
      <Image
        src="/placeholder.svg?height=200&width=200"
        alt="Example image with hover effect"
        className="rounded-lg"
      />
      <Image
        src="/placeholder.svg?height=200&width=200"
        alt="Example image without hover effect"
        hoverEffect={false}
        className="rounded-lg"
      />
    </div>
  )
}

Registry

View the component registry file

View Registry
Live Preview
Interactive
Interactive component preview
Preview