Media frame for images and scenes, built on Base UI useRender: default, outline hairline, muted mat and placeholder variants with four corner radii. A direct img fills the frame and crops.
The source comes with full access.
One payment of $149 ($49 for now) opens the source right here and lets the CLI install every paid component, with lifetime updates.
pnpm dlx shadcn add @01orbital/medianpx shadcn add @01orbital/mediayarn shadcn add @01orbital/mediabunx --bun shadcn add @01orbital/mediaPart of the 01orbital library. With a license, put ORBITAL_TOKEN in .env.local and the same command installs it (licensed install, pricing).
It lands at components/media/media.tsx, as source you own and edit.
The example also uses aspect-ratio. Install it too:
pnpm dlx shadcn add @01orbital/aspect-rationpx shadcn add @01orbital/aspect-ratioyarn shadcn add @01orbital/aspect-ratiobunx --bun shadcn add @01orbital/aspect-ratioimport { Media } from "@/components/media/media"
import { AspectRatio } from "@/components/ui/aspect-ratio"
const COPY = {
image: "https://01orbital.dev/art/kit/layered-currents-553717.png",
alt: "Layered currents, a painting of scattered blue and coral dots",
matted: "https://01orbital.dev/art/kit/celestograph-61495-roan-6b.png",
mattedAlt: "A celestograph plate, taupe marbling veined with rust",
empty: "Image to come",
}
// Crop an image, mat another, hold a slot: the three jobs a frame does.
export default function MediaDemo() {
return (
<div className="grid w-full max-w-3xl gap-6 sm:grid-cols-3">
<Media variant="outline" radius="lg" className="aspect-4/5">
<img src={COPY.image} alt={COPY.alt} />
</Media>
<Media variant="muted" radius="lg" render={<AspectRatio ratio={4 / 5} />}>
<img src={COPY.matted} alt={COPY.mattedAlt} className="rounded-sm" />
</Media>
<Media variant="placeholder" radius="lg" className="aspect-4/5">
{COPY.empty}
</Media>
</div>
)
}Prop
Type
It also accepts the props of the Base UI part it wraps, and the HTML attributes of the element it renders.
npm: @base-ui/react, class-variance-authority, cn. The CLI installs them for you.
No other registry pieces.
Void Transit Loader
Paper-lit sphere crossed diagonally by a dark void that grows as it covers the disc and shrinks as it leaves. Sized in pixels; reduced motion fades the void instead of moving it.
Screenshot Frame
Frame that bleeds a product screenshot off one edge of its ground, with six placements, a padded gutter and an optional ring. ScreenshotImage keeps the natural ratio and inherits the corner.