# Components
Browse Plandalf's Mintlify-style MDX component library for structure, attention, API docs, navigation, and visual context.
Source: /docs/components
Last modified: 2026-06-20
Plandalf docs use Mintlify-style MDX components so implementation guides can teach one step at a time, keep examples close to the API call, and move readers to the next useful page without turning every section into a dashboard.

## The main path


### Teach the first action

Start with the one move the reader should make next.


    Use [Steps](/docs/components/steps) when a reader needs to move through setup in order.


### Offer the right implementation view

Let the reader choose HTML, React, API, or agent-oriented examples.


    Use [Tabs](/docs/components/tabs), [Code groups](/docs/components/code-groups), or [View](/docs/components/view) when the same concept has multiple implementation paths.


### Keep warnings narrow

Define terms and constraints without interrupting the flow.


    Use [Callouts](/docs/components/callouts), [Badges](/docs/components/badge), and [Tooltips](/docs/components/tooltips) for important notes, statuses, and short definitions.


### Document the shape

Show exact parameters, responses, and examples beside the explanation.


    Use [Fields](/docs/components/fields), [Responses](/docs/components/responses), and [Examples](/docs/components/examples) when an endpoint, payload, or response object needs precise structure.


### Send the reader onward

Only add navigation surfaces once the reader understands what they need next.


    Use [Cards](/docs/components/cards) and [Tiles](/docs/components/tiles) after the reader understands the choice. Every linked card or tile should have an icon.


## Structure your content


  - [Tabs](/docs/components/tabs): Organize related content into switchable tabbed views.
  - [Code groups](/docs/components/code-groups): Display code examples in multiple languages.
  - [Steps](/docs/components/steps): Display sequential instructions in a numbered format.
  - [Columns](/docs/components/columns): Arrange content side by side in responsive layouts.
  - [Panel](/docs/components/panel): Create side-panel context for supplementary content.
  - [Text formatting](/docs/components/text): Format prose, links, quotes, inline values, and anchors.
  - [Code formatting](/docs/components/code): Add titles, line numbers, highlights, diffs, wrapping, and expandable snippets.
  - [Lists and tables](/docs/components/lists-tables): Structure ordered lists, checklists, nested lists, and compact reference tables.
  - [Headings](/docs/components/headings): Render explicit imported section headings without rewriting MDX.


## Draw attention


  - [Callouts](/docs/components/callouts): Emphasize notes, tips, checks, warnings, and danger states.
  - [Banner](/docs/components/banner): Display prominent announcements at the top of docs pages.
  - [Badge](/docs/components/badge): Add inline labels and compact status indicators.
  - [Update](/docs/components/update): Highlight dated product updates and changelog entries.
  - [Frames](/docs/components/frames): Add borders and captions to images and media.
  - [Tooltips](/docs/components/tooltips): Display short contextual definitions on hover.
  - [Snippet](/docs/components/snippet): Show compact copyable values inside prose.
  - [Reusable snippets](/docs/components/reusable-snippets): Reuse MDX fragments and compact setup values across docs pages.


## Showcase AI prompts


  - [Prompt](/docs/components/prompt): Display copyable AI prompts with Cursor integration.


## Show and hide content


  - [Accordions](/docs/components/accordions): Expandable sections for progressive disclosure.
  - [Expandables](/docs/components/expandables): Show and hide detailed content on demand.
  - [View](/docs/components/view): Switch visible content by reader context.
  - [Visibility](/docs/components/visibility): Control content shown to humans versus AI agents.


## Document your API


  - [Fields](/docs/components/fields): Display request parameters, headers, body fields, and props.
  - [Responses](/docs/components/responses): Document API response structures and fields with Mintlify-compatible naming.
  - [ResponseField](/docs/components/response-fields): Describe a single response property, nested object, or returned value.
  - [Examples](/docs/components/examples): Show request and response examples beside API content.
  - [API endpoint pages](/docs/components/api-fields-examples): Pair endpoint metadata with request fields, response fields, and the right example rail.
  - [API playground pages](/docs/components/api-playground): Build manual Mintlify-style API pages with multiple responses, SDK samples, and OpenAPI planning notes.


## Link to other pages


  - [Cards](/docs/components/cards): Highlight links with customizable containers, icons, images, and CTAs.
  - [Tiles](/docs/components/tiles): Display visual previews and dense navigation grids.


## Add visual context


  - [Images and embeds](/docs/components/image-embeds): Add screenshots, media-library images, videos, and iframe embeds.
  - [Files](/docs/components/files): Link downloadable files, static assets, and reference artifacts.
  - [Icons](/docs/components/icons): Add visual indicators using the shared docs icon layer.
  - [Mermaid diagrams](/docs/components/mermaid): Create flowcharts, sequence diagrams, and other small visualizations.
  - [Color](/docs/components/color): Display color swatches with copyable values.
  - [Tree](/docs/components/tree): Display hierarchical file and folder structures.


## Related topics


  - [Mintlify compatibility](/docs/components/mintlify-compatibility): Check the one-to-one component map before porting imported MDX.
  - [Component reference](/docs/components/reference): Review aliases, prop support, and compatibility notes.
  - [Component showcase](/docs/components/showcase): See every component family rendered together for visual QA.