Usage
<Frame caption="CodivDocs dashboard with live preview">
<img src="/screenshots/dashboard.png" alt="CodivDocs dashboard" />
</Frame>Frames give visual content a consistent bordered treatment with an optional caption. They're theme-aware — the border, background, and caption color all adapt to the tenant's light/dark theme.
Without a caption
The caption is optional — omit it for a plain bordered image.
<Frame>
<img src="/diagrams/architecture.svg" alt="Multi-tenant architecture" />
</Frame>Border variants
Three border weights to match the visual context:
<Frame border="none">
<img src="/hero.png" alt="Hero image" />
</Frame>
<Frame border="subtle">
<img src="/screenshot.png" alt="Default screenshot frame" />
</Frame>
<Frame border="strong">
<img src="/feature.png" alt="Strong border for emphasis" />
</Frame>| Variant | When to use |
none | Hero images, full-bleed media that should feel borderless |
subtle | Default. Screenshots, diagrams, anything that needs visual separation from the page background |
strong | Featured content with extra inner shadow for depth — sparingly |
Combine with <Image>
For full control (lightbox, dark variants, alt enforcement) wrap an <Image> instead of a plain <img>:
<Frame caption="Click to enlarge">
<Image
src="/screenshots/dashboard-full.png"
alt="Full dashboard screenshot"
lightbox
/>
</Frame>Props
| Prop | Type | Default | Description |
caption | string | — | Caption text shown below the frame |
border | "none" | "subtle" | "strong" | "subtle" | Border visual weight |
children | ReactNode | required | Content to wrap (image, video, embed, etc.) |