# Frame

Crop marks that frame media without competing with it.

- Family: Foundation, imported from `mizu-ui` or `mizu-ui/ui`
- Docs: https://mizu.user64bit.world/components/frame
- Source: https://github.com/0xuser64bit/mizu/blob/main/packages/mizu/src/ui/Frame.tsx

## Usage

```tsx
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>
  );
}
```

## Copy it with the shadcn CLI

```sh
npx shadcn@latest init 0xuser64bit/mizu/preset # once, where there is no components.json
npx shadcn@latest add 0xuser64bit/mizu/frame
```

## Props

- `label`: `string`. Figure caption.
- `tone`: `"line" | "line-bright"` (default `"line"`). Border contrast.

## Accessibility

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

## Motion

Static framing.