Component

MediaFrame

Reserve stable media surfaces for images, video, placeholders, captions, and metadata.

Usage

Import the component entry and start with its smallest complete example.

Import

import { MediaFrame } from "@chitrank2050/monoline-ui/media-frame"

Basic usage

<MediaFrame ratio="cinematic" size="md" placeholder>
  <MediaFrame.Caption>COVER · PRODUCT</MediaFrame.Caption>
</MediaFrame>

Usage guidance

Choose the component for its interaction model and semantics before customizing its appearance.

Use when

MediaFrame reserves a stable ratio and styled boundary for an image, video, embed, or placeholder.

Avoid when

The media must keep an unconstrained intrinsic ratio or needs figure semantics without a custom asChild root.

Accessibility

MediaFrame is a visual div wrapper, so the nested media must provide its own alt text, controls, title, caption association, and other required semantics.

Server Component

This component can render without adding a Monoline client boundary when its children and props are serializable.

API reference

Props, slots, and callbacks available on this component.

ratio"square" | "portrait" | "landscape" | "wide" | "cinematic"Reserved media aspect ratio

sizesm | md | lgFrame radius and caption spacing

placeholderbooleanRender the built-in media placeholder

asChildbooleanRender a custom root element through Radix Slot

MediaFrame.CaptionReactNodeBottom-aligned caption with fade

MediaFrame.MetaReactNodeBottom-aligned media metadata with fade

childrenReactNodeimg, video, canvas, svg, Next/Image, or custom media

Design tokens

Theme variables this component reads for color, spacing, and motion.

--surfaceCSS varFrame background

--borderCSS varFrame outline

--shadow-xsCSS varResting elevation

--duration-mediumCSS varCaption and meta fade timing

Implementation

The source used by the example above, including any state it needs.

import Image from "next/image"
import { MediaFrame } from "@chitrank2050/monoline-ui/media-frame"

export function ProjectCover() {
  return (
    <MediaFrame ratio="cinematic" size="lg">
      <Image
        src="/project-cover.jpg"
        alt="Lumen Insights dashboard"
        fill
        sizes="(max-width: 48rem) 100vw, 75rem"
      />
      <MediaFrame.Meta>COVER · PRODUCT</MediaFrame.Meta>
    </MediaFrame>
  )
}

Compare related components or review the package and theme setup.

01ComponentCardComponent · ReferenceReference→02ComponentMeta RowComponent · ReferenceReference→03SetupInstall Monoline UISetup · GuideGuide→04ThemeTailwind CSS v4 design tokensTheme · FoundationsFoundations→

Interactive preview