Plandalf

Snippet

Use snippets for compact copyable values and reusable MDX fragments inside prose, tables, callouts, and setup instructions.

Snippets are for short values that readers may need to copy without breaking the flow into a full code block. Use them for API keys, package names, offer IDs, headers, environment variables, and command fragments.

Keep snippets inline

Use Snippet for one value. Use a fenced code block or CodeGroup when the reader needs multiple lines, syntax highlighting, or surrounding context.

Basic example

Set PLANDALF_PUBLIC_KEY in your client environment and keep PLANDALF_API_KEY on the server.

Set <Snippet text="PLANDALF_PUBLIC_KEY" icon="key" /> in your client environment and keep <Snippet text="PLANDALF_API_KEY" icon="lock" /> on the server.

Labels and children

Use label when the snippet is generated from props, or put short inline content between the tags when porting existing MDX.

<Panel title="Offer identifiers">
  Use <Snippet label="offer_founder_launch" icon="package" /> as the offer slug in examples.
  Use <Snippet copy={false}>test mode</Snippet> when the value should read like inline code but not show a copy action.
</Panel>

Reusable MDX snippets

Mintlify also uses snippets for reusable MDX fragments. In Plandalf docs, put the reusable fragment outside content/docs, import it into any page, and pass variables as props.

Keep reusable snippets outside the docs collection

Files under content/docs become public docs routes. Store reusable MDX fragments under src/components/docs/snippets so they can be imported without rendering as standalone pages.

import Tooltip from '../v2/Tooltip.astro';
import Snippet from '../v2/Snippet.astro';

export const offerSnippetDefaults = {
  term: 'offer',
  href: '/docs/offers/overview',
};

export const OfferTermSnippet = ({ term = offerSnippetDefaults.term, href = offerSnippetDefaults.href }) => (
  <span>
    A Plandalf <Tooltip headline="Offer" tip="A sale configuration that can include products, prices, checkout layout, coupons, bumps, upsells, and completion behavior." href={href} cta="Open the Offers guide">{term}</Tooltip> is the root object behind checkout. Use <Snippet text="offer_founder_launch" icon="package" /> as the reusable example slug.
  </span>
);

export default OfferTermSnippet;
import OfferTermSnippet, { offerSnippetDefaults } from "../../../src/components/docs/snippets/OfferTermSnippet.mdx";

<OfferTermSnippet term="offer" href={offerSnippetDefaults.href} />

Authoring rules

Snippet usage

Use for literal valuesIDs, keys, headers

Snippets should represent exact values, variables, package names, or small command fragments.

Do not hide setup logicnot a code block

If the reader needs to understand more than one line, use a fenced code block with a title and language.

Keep copy behavior intentionalcopy by default

Copy is enabled by default. Disable it for labels that describe a concept rather than a value.

Use MDX imports for reusable fragmentsshared content

Import a reusable MDX fragment when the same definition, warning, setup step, or product explanation appears on multiple docs pages.

Properties

textstring

Literal value shown in the snippet and copied by the button.

labelstring

Alias for text when imported MDX uses label-style props.

childrenReactNode

Inline fallback content when the snippet wraps a short value instead of receiving text or label.

iconstringdefault: copy

Icon rendered before the value through the shared docs icon layer.

copybooleandefault: true

Shows or hides the copy button.

class | classNamestring

Optional local utility classes for rare inline layout adjustments.

Code groups Use for multi-line language examples.
Tooltips Use for inline definitions.
Attention Use snippets beside callouts and notices.

Feature detail