104Get started
HextaUI

Empty: Image

Give images explicit dimensions so the layout doesn’t shift while they load.

No photos in this album
Drop photos here or add them from your library.
import { Button } from "@/components/ui/button"
import {
  Empty,
  EmptyContent,
  EmptyDescription,
  EmptyHeader,
  EmptyMedia,
  EmptyTitle,
} from "@/components/ui/empty"

export function EmptyImage() {
  return (
    <Empty>
      <EmptyHeader>
        <EmptyMedia>
          <img
            src="/preview/landscape.svg"
            alt=""
            width={160}
            height={100}
            className="h-24 w-40 rounded-lg object-cover"
          />
        </EmptyMedia>
        <EmptyTitle>No photos in this album</EmptyTitle>
        <EmptyDescription>
          Drop photos here or add them from your library.
        </EmptyDescription>
      </EmptyHeader>
      <EmptyContent>
        <Button variant="outline" size="sm">
          Add photos
        </Button>
      </EmptyContent>
    </Empty>
  )
}

Add this example

This adds the example as components/examples/empty/image.tsx, together with the Empty component and the HextaUI theme tokens it needs.

pnpm dlx shadcn@latest add https://hextaui.com/r/empty-image.json

To add only the component, follow the Empty installation.

More Empty examples

See them all, with keyboard support and accessibility notes, on the Empty page.

Related components