MDX component showcase

This page is a visual QA surface for the docs component system. It shows the primitives that authors can use when writing implementation guides, API reference pages, and SDK walkthroughs.

Page notices

Component catalog

Use this catalog to jump to the visual QA section for the component family you are checking.

Structure content

Draw attention

Showcase AI prompts

Show and hide content

Document API shape

Link to other pages

Visual context

Callout aliases

Cards

Expand

Close

Image card

Image cards can frame screenshots or product surfaces without nesting a card inside another card.

See Offers

Tiles

Offers

Checkout surface

Timers

Deadline engine

Events

Browser stream

Webhooks

Backend handoff

Stripe

Payment platform

Inline SVG Portable icon markup.

Expand

Close

Offer setup Create the buying surface.

Expand

Close

Promo setup Attach a deadline to the sale.

Expand

Close

Event setup React when checkout changes.

Expand

Close

Image prop tile Use the `img` prop when a preview tile only needs one visual.

Compatibility aliases

Cards alias

Cards maps to CardGroup for imported or generated MDX that names the wrapper after the collection.

Field alias

Field and Param map to ParamField for compact API docs.

Tiles alias `Tiles` maps to `TileGroup`.

Description-only tile A tile without child media stays compact instead of rendering an empty preview frame.

Expand

Close

Title-less visual tiles remain valid for imported Mintlify examples.

ResponseFields alias `ResponseFields` maps to grouped response fields.

Folder and File aliases `Folder` and `File` map to tree nodes.

Images and embeds

Expand

Close

Lists and tables

1. Create the offer.
2. Add the buying action.
3. Watch the checkout event.
   • Preserve the checkout ID.
   • Send the customer to the right next step.
4. Route the backend handoff.

• SDK installed
• Test offer opened
• Live payment processor connected

npm install @plandalf/browser

window.Plandalf.openOffer({
  offerId: "offer_123",
  mode: "modal",
});

Steps

1. Create the test offer

   Start with the smallest buying surface that can open in preview.

   Add one Offer, one product, and one price before adding variants or upsells.

2. Install the browser SDK

   Load the SDK where the sales page owns the click.

   Use the script tag or package install path that matches the host page.

3. Open checkout from one action

   Bind the button to the offer before adding extra page logic.

   Keep the first interaction visible and easy to test.

4. Handle the checkout result

   Listen for completion before adding automation branches.

   Redirect, unlock access, record analytics, or call your backend with the completed checkout ID.

5. Connect the next document

   End with the next implementation page, not a dead end.

   Link to events, webhooks, or going live depending on what the reader should do next.

1. Card step with an icon

   Use card steps when each step needs more surface area or a visible state icon.

2. Imported numbering can continue

   Use stepNumber only when ported MDX continues an existing procedure.

3. Per-step title size still works

   Imported steps can preserve their heading level without forcing the whole sequence to change.

1. Compact step

   Use this in dense reference pages.

   Compact steps preserve the numbered sequence while taking less vertical space.

2. Inline SVG step

   Inline SVG icons work in numbered instructions too.

   Use this when a docs page is ported from Mintlify with custom icon markup.

Code blocks

window.Plandalf.openOffer({
  offerId: "offer_123",
  mode: "modal",
});

npm install @plandalf/js @plandalf/react && npx plandalf init --offer offer_123 --mode modal --redirect /thanks --events checkout.started,checkout.completed,checkout.dismissed

type CheckoutResult = {
  status: "completed" | "dismissed" | "failed";
  checkoutId?: string;
  offerId: string;
};

export function handleCheckout(result: CheckoutResult) {
  if (result.status === "completed") {
    window.location.href = `/thanks?checkout=${result.checkoutId}`;
  }
}

window.Plandalf.on("checkout.completed", (event) => {
  console.log(event.checkoutId); // [!code --]
  analytics.track("Checkout completed", event); // [!code ++]
  window.location.href = "/thanks"; // [!code ++]
});

  type CheckoutMode = "modal" | "slideout" | "inline";

export function openOffer(offerId: string, mode: CheckoutMode = "modal") {
return window.Plandalf.openOffer({
  offerId,
  mode,
});
}

  npx plandalf init --offer offer_123 --mode modal --redirect /thanks --events checkout.started,checkout.completed,checkout.dismissed

<script src="https://cdn.plandalf.com/sdk.js" defer></script>

import { PlandalfProvider } from "@plandalf/react";

export function App({ children }) {
  return <PlandalfProvider>{children}</PlandalfProvider>;
}

<button data-buy>Buy now</button>

window.Plandalf.openOffer({
  offerId: "offer_123",
  mode: "modal"
});

window.Plandalf.on("checkout.completed", (event) => {
  console.log(event.checkoutId);
});

<button data-buy>Buy now</button>

window.Plandalf.openOffer({ offerId: "offer_123" });

{
  "status": "completed",
  "checkoutId": "checkout_123"
}

const result = await window.Plandalf.present("founder-plan");

await plandalf.checkout.sessions.create({
  offerId: "founder-plan",
});

Use plain HTML when the page is static, CMS-owned, or built in a no-code tool.

Use React when the buying action depends on logged-in state, app routing, or component-level events.

Use image icons when a tab represents a platform, framework, or payment provider.

API fields

curl https://api.plandalf.com/v1/checkout/sessions \
  -H "Authorization: Bearer $PLANDALF_API_KEY" \
  -d offer_id=offer_123

await fetch("https://api.plandalf.com/v1/checkout/sessions", {
  method: "POST",
  headers: {
    Authorization: `Bearer ${process.env.PLANDALF_API_KEY}`,
    "Content-Type": "application/json"
  },
  body: JSON.stringify({ offer_id: "offer_123" })
});

{
  "id": "checkout_123",
  "status": "open",
  "offer_id": "offer_123"
}

{
  "error": {
    "code": "invalid_offer",
    "message": "Offer could not be found."
  }
}

Prompt

Supporting details

You can add inline help with a tooltip Offer Offers are the checkout surface a customer opens from a page, button, link, or embed. Read Offers , a plain definition Timers are deadline or promo state attached to a checkout. , or a small icon when a sentence needs a compact signal. Mintlify-style icon prop aliases work too . Numeric icon sizing also works .

Use offer_123 for a copyable ID, PLANDALF_API_KEY for an environment variable, or modal when the value should read like inline code without a copy affordance.

Use frames for real product screenshots, videos, and inspectable UI context rather than abstract diagrams.

Expand

Close

Expand

Close

Frame hints can include inline code and emphasis.

Expand

Close

Premium Verified Beta Locked With tooltip Shown on hover or keyboard focus SVG className

Visual context

graph TD
Button[Buy button] —> Offer[Plandalf Offer]
Offer —> Payment[Payment stack]
Offer —> Events[SDK events]
Events —> Backend[Backend handoff]

View and visibility

window.Plandalf.openOffer({
  offerId: "offer_123",
  mode: "modal"
});

session = plandalf.checkout.sessions.create(
    offer_id="offer_123",
    customer={"external_id": "user_123"}
)

- Test the offer
- Confirm checkout events
- Connect the backend handoff