Documentation
Data display
Image
Styles accessible images while preserving Astro, Next.js, and browser-native optimization.
01
See it in context
Preview
02
Copy a working example
Usage
---
import { Image } from '@santi020k/lumen-astro'
---
<Image
alt="Lumen UI logo"
height="80"
invertOnDark
layout="fixed"
src="/logo.svg"
width="318"
/>---
import { Image } from '@santi020k/lumen-astro'
---
<Image
alt="Lumen UI logo"
height="80"
invertOnDark
layout="fixed"
src="/logo.svg"
width="318"
/>import NextImage from 'next/image'
import { Image as LumenImage } from '@santi020k/lumen-react'
export const Example = () => (
<LumenImage
alt="Lumen UI logo"
as={NextImage}
height={80}
invertOnDark
src="/logo.svg"
width={318}
/>
)import NextImage from 'next/image'
import { Image as LumenImage } from '@santi020k/lumen-react'
export const Example = () => (
<LumenImage
alt="Lumen UI logo"
as={NextImage}
height={80}
invertOnDark
src="/logo.svg"
width={318}
/>
)<picture>
<source srcset="/logo.avif" type="image/avif" />
<source srcset="/logo.webp" type="image/webp" />
<img
alt="Lumen UI logo"
class="ui-image ui-image--invert-dark"
decoding="async"
height="80"
loading="lazy"
src="/logo.svg"
width="318"
/>
</picture><picture>
<source srcset="/logo.avif" type="image/avif" />
<source srcset="/logo.webp" type="image/webp" />
<img
alt="Lumen UI logo"
class="ui-image ui-image--invert-dark"
decoding="async"
height="80"
loading="lazy"
src="/logo.svg"
width="318"
/>
</picture>03
Choose your target
Add this component
Choose the package for your runtime. All adapters share the Lumen stylesheet. Use the matching registry command when you want a local wrapper for that framework.
pnpm add @santi020k/lumen-astropnpm add @santi020k/lumen-astrolumen add Imagelumen add Imagepnpm add @santi020k/lumen-reactpnpm add @santi020k/lumen-reactlumen add Image --target reactlumen add Image --target reactpnpm add @santi020k/lumen-elementspnpm add @santi020k/lumen-elementslumen add Image --target elementslumen add Image --target elementsAPI reference
Lumen-specific props and runtime attributes for the Astro primitive. React props follow the same names; Elements use equivalent kebab-case attributes where custom elements expose them.
| Attribute | Values | Default | Description |
|---|---|---|---|
| src | ImageMetadata | string | required | Uses astro:assets in Astro; React can pass a framework optimizer through as. |
| alt | string | required | Provides an accessible description; use an empty string for decorative images. |
| loading | "lazy" | "eager" | "lazy" | Defers off-screen image loading by default; use eager only for likely LCP images. |
| invertOnDark | boolean | false | Inverts monochrome artwork in dark themes while preserving colorful images by default. |
| as | React ElementType | "img" | React only: renders a compatible optimizer such as next/image while retaining Lumen classes. |
| class, className | string | "" | Merges custom classes with the generated ui-* root classes. |
| ...native attributes | HTML attributes | - | Forwards standard attributes to the root element unless the component consumes them. |