Frame | NookDocs | NookDocs

Usage

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 your theme.

<Frame caption="Example frame with caption">
  This content is wrapped in a bordered frame with a caption below.
</Frame>

This content is wrapped in a bordered frame with a caption below.

Example frame with caption

Without a caption

The caption is optional — omit it for a plain bordered container.

<Frame>
  A simple bordered frame without a caption. Use for screenshots, diagrams, or any content that needs visual separation.
</Frame>

A simple bordered frame without a caption. Use for screenshots, diagrams, or any content that needs visual separation.

Border variants

Three border weights to match the visual context:

<Frame border="none">
  border="none" — no visible border, for hero images
</Frame>

<Frame border="subtle">
  border="subtle" — default, light border for screenshots
</Frame>

<Frame border="strong">
  border="strong" — emphasized with inner shadow for depth
</Frame>

border="none" — no visible border, for hero images

border="subtle" — default, light border for screenshots

border="strong" — emphasized with inner shadow for depth

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

With an image

<Frame caption="Dashboard overview">
  <Image
    src="https://placehold.co/800x400/1e293b/white?text=Dashboard+Screenshot"
    alt="Dashboard screenshot"
  />
</Frame>

Dashboard screenshot — Dashboard overview

Hint label

The hint prop displays a small text label above the frame. Use it to add context like "Before", "After", or a short annotation without a full caption:

<Frame hint="Before migration">
  The old dashboard layout with sidebar navigation.
</Frame>

<Frame hint="After migration">
  The new dashboard with top-nav and command palette.
</Frame>

Before migration

The old dashboard layout with sidebar navigation.

After migration

The new dashboard with top-nav and command palette.

You can combine hint and caption — the hint appears above the frame, the caption below.

Props

Prop	Type	Default	Description
`caption`	`string`	—	Caption text shown below the frame
`hint`	`string`	—	Label text shown above the frame
`border`	`"none" \| "subtle" \| "strong"`	`"subtle"`	Border visual weight
`children`	`ReactNode`	required	Content to wrap (image, video, embed, etc.)