Docs
Image
Image
An image element with an optional fallback for loading and error status.
import {
Image,
ImageFallback,
ImageRoot,
} from "@repo/tailwindcss/default/image";
const ImageDemo = () => {
return (
<ImageRoot>
<Image src="https://github.com/hngngn.png" alt="hngngn" />
<ImageFallback>HN</ImageFallback>
</ImageRoot>
);
};
export default ImageDemo;import { Image, ImageFallback, ImageRoot } from "@repo/tailwindcss/solid/image";
const ImageDemo = () => {
return (
<ImageRoot>
<Image src="https://github.com/hngngn.png" alt="hngngn" />
<ImageFallback>HN</ImageFallback>
</ImageRoot>
);
};
export default ImageDemo;Installation
npx shadcn-solid@latest add imageInstall the following dependencies:
npm install @kobalte/coreCopy and paste the following code into your project:
Install the following dependencies:
npm install @kobalte/coreCopy and paste the following code into your project:
Usage
import { ImageRoot, ImageFallback, Image } from "@/components/ui/image";<ImageRoot>
<Image src="https://github.com/hngngn.png" />
<ImageFallback>HN</ImageFallback>
</ImageRoot>