Docs
Image
Image
An image element with an optional fallback for loading and error status.
import { Image, ImageFallback, ImageRoot } from "@repo/tailwindcss/ui/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:
import { cn } from "@/libs/cn";
import type {
ImageFallbackProps,
ImageImgProps,
ImageRootProps,
} from "@kobalte/core/image";
import { Image as ImagePrimitive } from "@kobalte/core/image";
import type { PolymorphicProps } from "@kobalte/core/polymorphic";
import type { ValidComponent } from "solid-js";
import { splitProps } from "solid-js";
type imageRootProps<T extends ValidComponent = "span"> = ImageRootProps<T> & {
class?: string;
};
export const ImageRoot = <T extends ValidComponent = "span">(
props: PolymorphicProps<T, imageRootProps<T>>,
) => {
const [local, rest] = splitProps(props as imageRootProps, ["class"]);
return (
<ImagePrimitive
class={cn(
"relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full",
local.class,
)}
{...rest}
/>
);
};
type imageProps<T extends ValidComponent = "img"> = ImageImgProps<T> & {
class?: string;
};
export const Image = <T extends ValidComponent = "img">(
props: PolymorphicProps<T, imageProps<T>>,
) => {
const [local, rest] = splitProps(props as imageProps, ["class"]);
return (
<ImagePrimitive.Img
class={cn("aspect-square h-full w-full", local.class)}
{...rest}
/>
);
};
type imageFallbackProps<T extends ValidComponent = "span"> =
ImageFallbackProps<T> & {
class?: string;
};
export const ImageFallback = <T extends ValidComponent = "span">(
props: PolymorphicProps<T, imageFallbackProps<T>>,
) => {
const [local, rest] = splitProps(props as imageFallbackProps, ["class"]);
return (
<ImagePrimitive.Fallback
class={cn(
"flex h-full w-full items-center justify-center rounded-full bg-muted",
local.class,
)}
{...rest}
/>
);
};Install the following dependencies:
npm install @kobalte/coreCopy and paste the following code into your project:
import { cn } from "@/libs/cn";
import type {
ImageFallbackProps,
ImageImgProps,
ImageRootProps,
} from "@kobalte/core/image";
import { Image as ImagePrimitive } from "@kobalte/core/image";
import type { PolymorphicProps } from "@kobalte/core/polymorphic";
import type { ValidComponent } from "solid-js";
import { splitProps } from "solid-js";
type imageRootProps<T extends ValidComponent = "span"> = ImageRootProps<T> & {
class?: string;
};
export const ImageRoot = <T extends ValidComponent = "span">(
props: PolymorphicProps<T, imageRootProps<T>>,
) => {
const [local, rest] = splitProps(props as imageRootProps, ["class"]);
return (
<ImagePrimitive
class={cn(
"relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full",
local.class,
)}
{...rest}
/>
);
};
type imageProps<T extends ValidComponent = "img"> = ImageImgProps<T> & {
class?: string;
};
export const Image = <T extends ValidComponent = "img">(
props: PolymorphicProps<T, imageProps<T>>,
) => {
const [local, rest] = splitProps(props as imageProps, ["class"]);
return (
<ImagePrimitive.Img
class={cn("aspect-square h-full w-full", local.class)}
{...rest}
/>
);
};
type imageFallbackProps<T extends ValidComponent = "span"> =
ImageFallbackProps<T> & {
class?: string;
};
export const ImageFallback = <T extends ValidComponent = "span">(
props: PolymorphicProps<T, imageFallbackProps<T>>,
) => {
const [local, rest] = splitProps(props as imageFallbackProps, ["class"]);
return (
<ImagePrimitive.Fallback
class={cn(
"flex h-full w-full items-center justify-center rounded-full bg-muted",
local.class,
)}
{...rest}
/>
);
};Usage
import { ImageRoot, ImageFallback, Image } from "@/components/ui/image";<ImageRoot>
<Image src="https://github.com/hngngn.png" />
<ImageFallback>HN</ImageFallback>
</ImageRoot>