Swirski UI

Media

ImageFrame

A framed media primitive for screenshots, product shots, visual examples and editorial layouts.

Component

29

Request Changes

Import

import { ImageFrame } from "@swirski/ui";

Playground

This component does not have editable controls yet.

Usage

<ImageFrame caption="Studio proof" tone="paper">
  <img src="/preview.jpg" alt="Preview" />
</ImageFrame>

Props

6 generated
PropTypeDefaultNotes
asChildbooleanfalseRenders the child as the root element.
captionReactNode-Optional caption pinned inside the frame.
childrenReactNode-Media or visual content rendered inside the frame.
size'sm' | 'md' | 'lg'"md"Sets the Swirski size data attribute.
tone'white' | 'black' | 'paper'"paper"Applies the frame background and text treatment.
variant'default' | 'plain'"default"Toggles the border and offset shadow treatment.
...divPropsHTMLAttributes<HTMLDivElement>-Forwarded to the rendered frame.
Previous: SliderNext: Avatar