Components

Reusable MDX components for Folio documentation pages, including callouts, tabs, previews, diagrams, and API reference helpers.

Component catalog

Pick the right primitive before writing another docs section.

Folio ships 30 documentation components across 5 families. Use this page as a routing layer: find the job, open the component, then copy the pattern into a real guide or generated API page.

30 entries5 familiesMDX ready

Fast paths

Start from the shape of the page.

Write a setup guide

TerminalSession + Steps + Checklist

Explain generated output

FileTree + BuildArtifact + ConfigPanel

Document Python APIs

ClassOverview + ParamTable + TypeBadge

Workflow Components

Build setup guides, CLI references, migration notes, and plugin docs that stay easy to scan.

CommandsTerminalSessionCommand and output blocks with prompt, status, and working directory context.Open ConfigConfigPanelAnnotated configuration snippets for docs.yaml examples.Open OutputBuildArtifactCompact summaries of generated files, folders, and routes.Open CLICommandGridScannable CLI command cards with common flags.Open CompareBeforeAfterSide-by-side migration, config, and output comparisons.Open StateChecklistReadiness and deployment checklists with explicit states.Open PluginsHookMapPlugin lifecycle stages with hook names and descriptions.Open

Interactive Components

Add controlled disclosure, alternate examples, and sequence structure without custom page logic.

RevealAccordionCollapsible content sections for FAQs and grouped information.Open ViewsTabsTabbed panels for organizing alternative content views.Open SequenceStepsNumbered step-by-step instructions with a vertical timeline.Open HistoryTimelineVertical timeline for changelogs and version history.Open CodeCodeGroupTabbed code blocks for multi-language or multi-variant examples.Open ExamplesPreviewCodePaired rendered previews and source snippets for component examples.Open ExamplesExampleTabsTabbed code panels for basic vs. advanced usage patterns.Open

Display Components

Present diagrams, file structures, notes, feature summaries, and rendered technical notation.

MessageCalloutHighlighted message blocks for notes, warnings, tips, and alerts.Open SummaryFeatureCardsCards for feature overviews, landing pages, and link grids.Open FilesFileTreeVisual file and folder tree for project structures.Open PreviewDocPreviewResponsive iframe frames for showing generated docs pages inside a guide.Open ImageOrganicEditorialImagePromptPrompt card for generating Organic Editorial abstract hero images.Open DiagramMermaidDiagrams rendered as SVG for flows and sequences.Open FormulaMathLaTeX math rendering with KaTeX.Open CodeCode BlocksSyntax highlighting, line numbers, filenames, and word highlighting.Open

API Reference Components

These appear automatically when Folio turns Python source into reference pages.

ClassClassOverviewCard displaying a Python class with bases, decorators, and description.Open MethodMethodAccordionExpandable panels for documenting class methods and signatures.Open ParamsParamTableStructured table for function or method parameters.Open TypesTypeBadgeInline badge for displaying type annotations with optional links.Open LifecycleDeprecationNoticeBanner indicating deprecated classes, functions, or modules.Open

Theme Components

Small pieces of site chrome used by the generated Nextra theme.

ThemeThemeConfiguratorPopover widget for customizing accent color and border radius.Open ActionsPage ActionsHeader controls for copying a page or opening it with AI context.Open FeedbackPageFeedbackWas this page helpful? widget with thumbs up/down.Open