Creative Tim UICreative Tim UI

Shadcn Image

PreviousNext

A component for displaying images with various styling options including rounded corners, shadows, captions, and circular shapes.

nature-image
export function ImageDemo() {
  return (
    <img
      src="https://images.unsplash.com/photo-1501854140801-50d01698950b?auto=format&w=2000&q=85"
      alt="nature-image"
      className="h-96 w-full object-cover object-center"
    />
  )
}

Installation

pnpm dlx @creative-tim/ui@latest add image

Usage

<img
  src="/image.jpg"
  alt="description"
  className="h-96 w-full object-cover object-center"
/>

Examples

Circular Image

An image component with fully rounded (circular) corners, perfect for profile pictures, avatars, or any context where a circular image is desired.

nature-image
export function CircularImage() {
  return (
    <img
      src="https://images.unsplash.com/photo-1501854140801-50d01698950b?auto=format&w=2000&q=85"
      alt="nature-image"
      className="h-96 w-96 rounded-full object-cover object-center"
    />
  )
}

Image With Caption

An image component with a caption displayed below it, providing context or additional information about the image content.

nature-image
Image Caption
export function ImageWithCaption() {
  return (
    <figure>
      <img
        src="https://images.unsplash.com/photo-1501854140801-50d01698950b?auto=format&w=2000&q=85"
        alt="nature-image"
        className="h-96 w-full rounded-lg object-cover object-center"
      />
      <figcaption className="text-muted-foreground mt-2 block text-center text-sm">
        Image Caption
      </figcaption>
    </figure>
  )
}

Image With Blurred Caption

An image component with a blurred caption overlay positioned at the bottom, creating a modern and elegant way to display image metadata without obscuring the image content.

nature-image
Sara Lamalo

20 July 2022

Growth

import { Card, CardContent } from "@/components/ui/card"

export function ImageWithBlurredCaption() {
  return (
    <figure className="relative h-96 w-full">
      <img
        src="https://images.unsplash.com/photo-1501854140801-50d01698950b?auto=format&w=2000&q=85"
        alt="nature-image"
        className="h-full w-full rounded-xl object-cover object-center"
      />
      <Card className="bg-background/75 absolute bottom-4 left-1/2 w-[calc(100%-2rem)] -translate-x-1/2 backdrop-blur-md">
        <CardContent className="flex justify-between px-4 py-3">
          <div>
            <h6 className="font-semibold">Sara Lamalo</h6>
            <p className="text-muted-foreground mt-1 text-sm">20 July 2022</p>
          </div>
          <p className="font-bold">Growth</p>
        </CardContent>
      </Card>
    </figure>
  )
}

Image With Rounded Corners

An image component with rounded corners, providing a softer appearance while maintaining the rectangular image format.

nature-image
export function ImageWithRoundedCorners() {
  return (
    <img
      src="https://images.unsplash.com/photo-1501854140801-50d01698950b?auto=format&w=2000&q=85"
      alt="nature-image"
      className="h-96 w-full rounded-lg object-cover object-center"
    />
  )
}

Image With Shadow

An image component with a shadow effect, adding depth and visual separation from the background to make the image stand out.

nature-image
export function ImageWithShadow() {
  return (
    <img
      src="https://images.unsplash.com/photo-1501854140801-50d01698950b?auto=format&w=2000&q=85"
      alt="nature-image"
      className="h-96 w-full rounded-lg object-cover object-center shadow-lg shadow-black/25"
    />
  )
}

Props

Image components use standard HTML img elements with Tailwind CSS classes. The following props are commonly used:

Image (img element)

PropTypeDefaultDescription
srcstring-The source URL of the image (required)
altstring-Alternative text for the image (required for accessibility)
classNamestring-Additional CSS classes to apply to the image
widthnumber-The width of the image
heightnumber-The height of the image

Best Practices

  • Always provide an alt attribute for accessibility
  • Use appropriate image formats (WebP, AVIF for modern browsers, JPEG/PNG for fallback)
  • Optimize images for web to ensure fast loading times
  • Use object-cover for consistent aspect ratios
  • Consider using responsive images with srcset for different screen sizes
  • Use semantic HTML (figure and figcaption) when including captions
  • Ensure sufficient contrast between text and images for captions
  • Use shadows and rounded corners sparingly to maintain design consistency
  • Consider lazy loading for images below the fold
  • Provide appropriate image dimensions to prevent layout shift

The image component provides a flexible way to display images with various styling options. It's ideal for galleries, hero images, profile pictures, product displays, and any interface where images need to be presented with consistent styling and proper accessibility.