Skip to content
MIZU.

Frame

Crop marks that frame media without competing with it.

Live — this one is real

A place for your work
Artwork

Usage

import { Frame } from "mizu-ui";

export function Example() {
  return (
    <Frame label="Artwork">
      <div style={{ padding: 40, textAlign: "center" }}>
        A place for your work
      </div>
    </Frame>
  );
}

Source & setup

Import mizu-ui/styles.css once. Fonts are optional via mizu-ui/fonts.css. Override --mizu-* tokens or use className for local styling. Uses native React and CSS; install the package peers for root imports.

Inspect ui/Frame.tsx

Source is included in the npm package under src/ui/Frame.tsx.

Open full source ↗

Props

PropTypeDefaultDescription
labelstring—Figure caption.
tone"line" | "line-bright""line"Border contrast.

Accessibility

Uses figure/figcaption semantics. Content provides its own alternative text.

Motion

Static framing.

Works alongside

ButtonPrimitivesMarkSectionTag