Skip to content
← Inventory

MediaFrame

A rounded clip frame for media (image or video). Establishes a relative overflow-hidden positioning context and clips its single child to a rounded corner — but it is a dumb box: it does NOT size or cover-fill the child. Give it one media child with size-full object-cover (identical contract to AspectRatio). Radius, size, and positioning all come from the className you pass (rounded-2xl, size-full, absolute inset-0, …) — there is no radius prop. Extracted from the product-card and editorial-card media frames; available to any composition that needs a rounded overflow-clip layer.

object-cover

Usage

import { MediaFrame, MediaFrameProps } from "@desk/ui/components/media-frame";

Best practices

  • MediaFrame is a dumb clip box — it does not size or cover-fill the child; give it one media child with size-full object-cover, like AspectRatio.

  • Set radius, size, and positioning through className (rounded-3xl, size-full, absolute inset-0) — there is no radius prop.

Props

PropTypeDefaultDescription
refReact.Ref<HTMLDivElement>

Allows getting a ref to the component instance. Once the component unmounts, React will set ref.current to null (or call the ref with null if you passed a callback ref).

Also exports

  • interfaceMediaFrameProps

Composition

Used by

EditorialCard, ProductCard