Founding price: $35, then $79.99 after 23:59 UTC on 4 November, then $79.99
Get ProA picture slot that reserves its space, lazy-loads, takes a URL, an image with alt text and a dark-mode file, or your own element, and falls back to artwork when there is no image or it fails.
Derived from this item’s props table, because it declares no controls of its own. Changes drive the preview live.
import { Media } from "@/components/ui/media"<Media media="/screenshot.png" alt="The dashboard" aspect="video" frame /><Media
media={{ src: "/light.png", srcDark: "/dark.png", alt: "Settings page" }}
aspect="photo"
fallback={<Artwork />}
/>| Prop | Type | Default | Description |
|---|---|---|---|
media | string | MediaImage | ReactElement | null | - | The picture: a URL, { src, alt, srcDark?, srcSet?, sizes?, width?, height?, position? }, or your own element. Leave it out to show fallback. |
alt | string | - | Describes a picture passed as a plain URL. Use "" for decoration. |
fallback | ReactNode | - | Shown when there is no media or the file fails to load. |
aspect | "auto" | "square" | "video" | "photo" | "wide" | "portrait" | "cinema" | "w/h" | "auto" | Reserves the box before the image loads. auto keeps the image's own proportions. |
fit | "cover" | "contain" | "fill" | "cover" | How the image fills the box. |
priority | boolean | false | Loads eagerly with high priority, for above-the-fold images. |
fill | boolean | false | Fills a parent that has its own size instead of reserving space by aspect ratio. |
frame | boolean | false | Adds rounded corners, a border and a soft shadow around a real image or element. |
onImageError | () => void | - | Called when the file fails to load. |
Also accepts all <div> props. isMediaImage(value) is exported too: it is true for a URL or { src, alt } object and false for an element.
alt logs a warning in development.srcDark, both files are rendered and the right one is shown by the dark class.