Image

Themed <img> wrapper with a loading skeleton, object-fit, radius tokens, and a fallback slot.

Image is a thin wrapper around the native element. It adds three small quality-of-life things that come up every time you reach for <img>:

• a themed skeleton background while the file is loading,
• a radius prop that takes the design tokens (or a raw pixel),
• a fallback slot rendered when the URL 404s.

Try it live

import { Image, Box, Stack } from "@plyxui/primitives";

export default function App() {
return (
  <Box padding="lg" style={{ minHeight: "100vh" }}>
    <Stack direction="horizontal" gap={4}>
      <Image src="https://i.pravatar.cc/96?img=14" alt="Avatar" width={64} height={64} radius="pill" />
      <Image src="https://picsum.photos/seed/plyxui/240/180" alt="Cover" width={240} height={180} radius="lg" fit="cover" />
      <Image
        src="https://broken.example/404.jpg"
        alt="Fallback demo"
        width={64}
        height={64}
        radius="pill"
        fallback={
          <div style={{ width: "100%", height: "100%", background: "#FF5C00", color: "#fff", display: "grid", placeItems: "center", fontWeight: 700 }}>
            VP
          </div>
        }
      />
    </Stack>
  </Box>
);
}

API

import { Image } from "@plyxui/primitives";

<Image src={user.avatar} alt={user.name} width={32} height={32} radius="pill" />

<Image
  src="/hero.jpg"
  alt="Hero photo"
  aspectRatio="16 / 9"
  fit="cover"
  radius="lg"
/>

<Image
  src={user.avatar}
  alt={user.name}
  width={64}
  height={64}
  radius="pill"
  fallback={<span>VP</span>}
/>

Props

Native

The native build uses RN Image with the same prop shape. fit maps to resizeMode. aspectRatio is a number on native, not a CSS string.