Image Preview

tsx

1
2
3import type { ReactNode } from 'react';

import { ImagePreview, ImagePreviewImage } from '@/registry/bases/base-ui/components/data-display/image-preview';

View code

Installation#

pnpm dlx shadcn@latest add https://ui.zeroxsolutions.com/r/image-preview.json

Usage#

import { ImagePreview, ImagePreviewImage } from '@/components/data-display/image-preview';

<ImagePreview>
  <ImagePreviewImage src={src} alt="Logo" />
</ImagePreview>

It fills the space it is given, so size its wrapper rather than the frame itself. For a font file's specimen instead of an image, use Font Preview.

Composition#

ImagePreview
`-- ImagePreviewImage

API reference#

ImagePreview#

Renders a div and takes every prop a div takes. It sets data-slot="image-preview".

ImagePreviewImage#

Renders an img and takes every prop an img takes. It defaults alt to empty, since the image usually sits decoratively over the checkerboard; give it real text when the image conveys information. It sets data-slot="image-preview-image".