Image
The Image component displays images from base64 or Uint8Array data, supporting all standard HTML image attributes. It is ideal for showing AI-generated images or user uploads in chat and AI apps. Compatible with AI SDK v5 architecture
Examples
Basic Usage
Compact SVG chat iconInstallation
npx shadcn add "https://prompt-kit.com/c/image.json"Component API
Image
| Prop | Type | Default | Description |
|---|---|---|---|
| base64 | string | Base64-encoded image data | |
| uint8Array | Uint8Array | Raw image data as Uint8Array | |
| mediaType | string | 'image/png' | MIME type of the image (e.g., 'image/jpeg') |
| alt | string | (required) | Alternative text for accessibility |
| className | string | Additional CSS classes | |
| ...props | img props | All standard HTML <img> attributes |
Features
- Accepts base64 or Uint8Array image data
- Supports all standard HTML image attributes
- Responsive by default with
max-w-full h-auto - Customizable with Tailwind classes
- Fully accessible (alt required)