Image

Features

• Loading states — Automatic detection of loading, error, and success states
• Fallback support — Display placeholder content during loading or on error
• Composable — Flexible slot-based architecture with Image.Source, Image.Loading, Image.Error, and Image.Fallback
• Zag-powered — State machine API via useImage and Image.Provider

Installation

Install from the Vuzeno registry:

      Copy
      bunx --bun shadcn-vue@latest add https://vuzeno.com/r/image.json
    

      Copy
      npx shadcn-vue@latest add https://vuzeno.com/r/image.json
    

      Copy
      yarn dlx shadcn-vue@latest add https://vuzeno.com/r/image.json
    

      Copy
      pnpm dlx shadcn-vue@latest add https://vuzeno.com/r/image.json
    

Usage

      Copy
      <script setup lang="ts">
import { Image } from "@/components/ui/image";
import { Skeleton } from "@/components/ui/skeleton";
</script>

<template>
  <Image.Root>
    <Image.Source class="aspect-video w-72" src="https://picsum.photos/id/229/600/400" alt="..." />

    <Image.Loading as-child>
      <Skeleton class="aspect-video w-72" />
    </Image.Loading>

    <Image.Error>
      <div class="bg-destructive p-2 text-center text-destructive-foreground">
        An error occurred while loading the image.
      </div>
    </Image.Error>
  </Image.Root>
</template>
    

Composition

      Copy
      Image.Root
├── Image.Source
├── Image.Loading
├── Image.Error
└── Image.Fallback
    

Examples

Fallback

Use Image.Fallback to display a placeholder while the image is loading or when it fails to load.

Loading

Use Image.Loading to show a dedicated loading indicator.

Controlled

For a controlled image, manage the state with v-model:state. When controlled, image load and error events no longer update the state automatically — use setState from useImage or bind the model yourself.

API

Built with a custom Zag.js state machine. Use useImage() with Image.Provider for imperative control (api.value.setState(...), api.value.state). Polymorphic parts use Ark UI ark / as-child.