Image

Stable
WCAG 2.2 evidence
RTL

A picture in a rounded frame with a fixed aspect ratio: Figma State=Loading (a bg/sunken frame with a shimmer), Loaded and Error ("Image unavailable") follow the load lifecycle of the <img>; they are not props. Accessibility: alt is required by the type (WCAG 1.1.1); alt="" marks a decorative picture. When the picture is missing or fails, the fallback frame is an image (role="img") with the same name, so the text alternative survives; decorative fallbacks are hidden. The shimmer runs only when motion is allowed (2.3.3). Consumer duties: meaningful alt text, a caption (<figure> / <figcaption>) when the picture needs one, and an accessible route to the full image when it is cropped in a way that loses information. Presentational: renders in React Server Components. Only the load lifecycle is a client island (ImageContent); the <img> is in the server HTML, so the picture shows before hydration.

import { Image } from "@nexera-ui/react";

Loading example…

5
examples: 7
props: 1
live controls: 1
platform: 6
WCAG criteria: 3
blocks use it

Try every prop. Copy the code.

Change the props and the code updates. Check light and dark, LTR and RTL, and phone width.

Loading…

ratio

Generated code

import { Image } from "@nexera-ui/react";

<Image />

Examples 4

The same examples as Storybook, rendered live. Open Code to copy one.

Ratios

Every Figma Ratio. The frame takes the container width and the height follows the ratio.

Loading example…

app.tsx

import { Image } from "@nexera-ui/react";

const ratios = ["1-1", "4-3", "16-9", "3-4"] as const;

const scene = (sky: string, ground: string) =>
  `data:image/svg+xml,${encodeURIComponent(
    `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 300"><rect width="400" height="300" fill="${sky}"/>` +
      `<circle cx="300" cy="80" r="36" fill="white" fill-opacity="0.85"/>` +
      `<path d="M0 230 L120 140 L210 210 L290 160 L400 230 L400 300 L0 300 Z" fill="${ground}"/></svg>`,
  )}`;

const OFFICE = scene("lightsteelblue", "seagreen");

const TEAM = scene("navajowhite", "peru");

const LANDSCAPE = scene("lightblue", "darkolivegreen");

export function Ratios() {
  return (
    <div className="flex flex-wrap items-start gap-6">
      {ratios.map((ratio, index) => (
        <figure key={ratio} className="m-0 flex w-full max-w-60 flex-col gap-2">
          <Image
            alt="Open-plan office with plants by the windows"
            ratio={ratio}
            src={[OFFICE, TEAM, LANDSCAPE, OFFICE][index] ?? OFFICE}
            className="w-full"
          />
          <figcaption className="text-body-caption text-secondary">{`Ratio ${ratio.replace("-", ":")}`}</figcaption>
        </figure>
      ))}
    </div>
  );
}

Error and missing

Figma State=Error: a picture that fails to load (here an undecodable file) keeps its name on the error frame. Without a src the same frame shows. errorLabel translates the text.

Loading example…

app.tsx

import { Image } from "@nexera-ui/react";

const BROKEN = "data:image/png;base64,broken";

export function ErrorAndMissing() {
  return (
    <div className="flex flex-wrap items-start gap-6">
      <Image src={BROKEN} alt="Quarterly town hall stage" className="max-w-60" />
      <Image src={null} alt="Profile banner" ratio="16-9" className="max-w-80" />
      <Image
        src={null}
        alt="Foto des Teams"
        errorLabel="Bild nicht verfügbar"
        className="max-w-60"
      />
    </div>
  );
}

Fallback slot

The Figma Photo placeholder is the fallback slot: what the frame shows without a picture or when it fails. It is drawn inside the image's text alternative, so it carries no interactive content.

Loading example…

app.tsx

import { Image } from "@nexera-ui/react";

const BROKEN = "data:image/png;base64,broken";

export function FallbackSlot() {
  return (
    <div className="flex flex-wrap items-start gap-6">
      <Image
        src={null}
        alt="Team lunch on Friday"
        ratio="4-3"
        className="max-w-80"
        fallback={
          <svg viewBox="0 0 400 300" preserveAspectRatio="xMidYMid slice">
            <rect width="400" height="300" className="fill-status-warning-bg" />
            <circle cx="140" cy="150" r="40" className="fill-status-warning-solid" />
            <circle cx="260" cy="150" r="40" className="fill-status-warning-border" />
          </svg>
        }
      />
      <Image
        src={BROKEN}
        alt="Office floor plan"
        className="max-w-60"
        fallback={
          <svg viewBox="0 0 240 240">
            <rect width="240" height="240" className="fill-nav-active-bg" />
            <rect x="60" y="60" width="120" height="120" rx="12" className="fill-brand-border" />
          </svg>
        }
      />
    </div>
  );
}

Decorative

A decorative picture (alt="") next to text that already says what it shows: hidden from assistive technology.

Loading example…

app.tsx

import { Image } from "@nexera-ui/react";

const scene = (sky: string, ground: string) =>
  `data:image/svg+xml,${encodeURIComponent(
    `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 300"><rect width="400" height="300" fill="${sky}"/>` +
      `<circle cx="300" cy="80" r="36" fill="white" fill-opacity="0.85"/>` +
      `<path d="M0 230 L120 140 L210 210 L290 160 L400 230 L400 300 L0 300 Z" fill="${ground}"/></svg>`,
  )}`;

const LANDSCAPE = scene("lightblue", "darkolivegreen");

export function Decorative() {
  return (
    <figure className="m-0 flex max-w-80 flex-col gap-2">
      <Image alt="" src={LANDSCAPE} ratio="16-9" className="w-full" />
      <figcaption className="text-body-small text-secondary">
        The retreat venue, two hours north of Lahore, with a view of the hills.
      </figcaption>
    </figure>
  );
}

Props 7

Press "Try it" on a card to load that prop into the playground.

srcNexera

string | null

Image URL. Without one (undefined, null or "") the frame shows fallback, or the "Image unavailable" frame. The library never fetches or hosts media: pass a URL your app serves.

alt*Nexera

string

Text alternative (WCAG 1.1.1), required. Describe what the picture shows ("Team at the March offsite"), or pass "" for a decorative picture that repeats nearby text: it is then hidden from assistive technology, its fallback too. The same name stays on the fallback when the picture fails to load.

ratioNexera

"1-1" | "4-3" | "16-9" | "3-4"

Aspect ratio of the frame. The frame fills its container's width and the height follows; constrain the width with className (max-w-60) or the parent layout.

fallbackNexera

ReactNode

What the frame shows when there is no src or the picture fails to load: the Figma Photo placeholder slot (for example an illustration). Presentational: it is drawn inside the image's text alternative, so put no links or buttons in it. Without it, the Figma State=Error frame is shown (Icon/LuImage and errorLabel).

errorLabelNexera

string

Visible text of the default error frame. Translate it for your locale.

onLoadNexera

ReactEventHandler<HTMLImageElement>

Called when the picture has loaded (the <img> load event). Pass it from a Client Component.

onErrorNexera

ReactEventHandler<HTMLImageElement>

Called when the picture fails to load (the <img> error event). Pass it from a Client Component.

* Required. React Aria props shown are the ones most apps use; the component accepts the rest of its React Aria props too.

Accessible by default.

Built on React Aria, and covered by the WCAG 2.2 evidence generated on every build.

WCAG 2.2 evidence

3 direct · 3 supporting

1.1.1Non-text ContentLevel A · tested directly
1.3.1Info and RelationshipsLevel A · tested directly
1.3.2Meaningful SequenceLevel A · supporting test
1.4.10ReflowLevel AA · supporting test
2.3.3Animation from InteractionsLevel AAA · supporting test
4.1.2Name, Role, ValueLevel A · tested directly

Fits any width.

Nexera components respond to the space they are given. Drag the corner of the frame, or pick a width.

0 px · drag the corner

Styling hooks

Pass className to add Tailwind classes (merged last). State is exposed as data attributes, so you can style it with variants like data-pressed:.

Usage

<Image className="shadow-sm" />

Theme studio

Image

Try every prop. Copy the code.

Examples 4

Ratios

Error and missing

Fallback slot

Decorative

Props 7

Accessible by default.

WCAG 2.2 evidence

Fits any width.

Styling hooks

Used in blocks

Related components