Plandalf

Attention components

Use Mintlify-style callouts, banners, badges, updates, frames, snippets, and tooltips without turning docs into card-heavy pages.

Attention components make a page easier to scan without changing the implementation path. Use them for constraints, announcements, inline status, dated changes, framed media, and quick copyable values.

Keep attention narrow

If a block is the next action, use a card or tile. If it is a constraint, status, release note, or definition, use one of these attention components instead.

Callouts

Use callouts for detail that affects the reader’s next decision. Plandalf supports the generic Callout component and Mintlify-style aliases such as Note, Tip, Info, Warning, Check, and Danger.

Use a test offer first

Create checkout flows against a test offer before connecting a production button.

Do not expose private API keys

Browser SDK examples should use publishable or signed context. Secret keys belong on the server.

<Note title="Use a test offer first">
  Create checkout flows against a test offer before connecting production buttons.
</Note>

<Warning title="Do not expose private API keys">
  Secret keys belong on the server.
</Warning>

Banners and badges

Use banners for page-level announcements and badges for compact status. Badges work well inside API field descriptions, changelog entries, and product availability notes.

The browser SDK is stable , while some API examples are draft until their backend source is verified.

<Banner title="Preview docs surface" icon="sparkles" type="info">
  This page is a component authoring guide.
</Banner>

The browser SDK is <Badge>stable</Badge>.

Updates

Use Update for dated release notes and docs change history. Keep the label stable so the generated anchor remains predictable.

2026-06-20

Attention family docs

Plandalf now documents the Mintlify-style attention family as a first-class authoring surface.

<Update label="2026-06-20" description="Attention family docs" tags={["Docs", "Components"]} icon="sparkles">
  Plandalf now documents the Mintlify-style attention family as a first-class authoring surface.
</Update>

Frames, snippets, and tooltips

Use Frame when a screenshot or preview needs a boundary. Use Snippet for short copyable values and Tooltip for terms that should be defined inline.

Use real product screenshots for product UI.
The Numi API docs preview.
Frames keep screenshots, embeds, and visual examples separate from prose.

Set the public key with PLANDALF_PUBLIC_KEY and treat an offer as the root object for checkout.

<Frame caption="Frames keep screenshots separate from prose.">
  <MediaImage id="numi-api-docs-6DPQPG" alt="The Numi API docs preview." variant="plain" />
</Frame>

Set the public key with <Snippet>PLANDALF_PUBLIC_KEY</Snippet>.

An <Tooltip tip="The buying surface that contains products, prices, coupons, bumps, and checkout behavior.">offer</Tooltip> drives checkout.

Callout properties

Use Callout directly, or use Mintlify-style aliases such as Note, Tip, Info, Warning, Check, and Danger.

titlestring

Optional heading shown above the callout body.

typeinfo | note | tip | warning | check | dangerdefault: info

Controls the callout tone and default icon.

iconstring

Lucide icon name, Mintlify-compatible alias, image URL, or inline SVG string.

iconTypestring

Icon style metadata preserved from imported Mintlify MDX.

colorstring

Compatibility prop for imported Mintlify callouts with custom color values.

titlestring

Banner heading shown before the banner body.

typeinfo | note | tip | warning | check | dangerdefault: info

Banner or badge tone. Use warning and danger only for constraints that affect the reader’s next action.

dismissiblebooleandefault: false

Allows a banner to be dismissed. Use this only for temporary notices.

idstring

Stable storage key for dismissible banners.

iconstring

Icon shown inside a banner or badge.

colorstring | object

Optional custom color metadata for imported Mintlify badges and banners.

Update, frame, snippet, and tooltip properties

Update.labelstringrequired

Visible update label and anchor source.

Update.descriptionstring

Short supporting text beside the update label.

Update.tagsstring[]

Filter labels for changelog-style pages and update rails.

Update.rss{ title?: string; description?: string }

Feed-specific summary when the update body contains rich MDX.

Frame.captionstring

Caption shown beneath framed media.

Frame.hintstring

Short context line above framed media.

Snippet.text | Snippet.labelstring

Compact inline value shown and copied by the snippet.

Tooltip.tipstringrequired

Short definition shown on hover or focus.

Tooltip.hrefstring

Optional link for opening the full concept page.

Cards and tiles Use linked surfaces when the reader needs a next step.
Show and hide content Reveal optional detail progressively.
Visual context Use diagrams, trees, icons, and colors.

Feature detail