Astro Components
Type to search documentation.

Overview

Choose the right component for each documentation problem.

View as MarkdownOpen in ChatGPTOpen in Claude

Use @prosefly/astro-components when your docs have outgrown plain Markdown but you still want authors to write normal MDX. The package focuses on common documentation jobs rather than application UI: explain risk, compare options, show structure, and guide readers through a task.

Choose By Reader Need

Warn or emphasize

Use Callout for notes, tips, warnings, and destructive guidance that should stand apart from the surrounding prose.

Show equivalent choices

Use Tabs for package managers, frameworks, languages, or other parallel examples where the reader should pick one.

Keep secondary detail nearby

Use Accordions for optional explanations, FAQs, and background details that should not interrupt the main path.

Explain project structure

Use FileTree when a reader needs to create, find, or understand files and directories.

Point readers forward

Use Card and CardGrid for related guides, feature summaries, and next-step links.

Walk through a process

Use Steps for installation, migration, and configuration procedures.

Generate install tabs

Use package-manager tabs when readers should choose between pnpm, npm, yarn, and bun.

Render image galleries

Use image transforms when authors should write plain Markdown screenshots and get polished figures.

Build A Page

  1. Start with plain Markdown.

    Write the explanation first. Add components only where the reader needs a stronger structure than headings, paragraphs, and lists.

  2. Import locally.

    Import components at the top of the MDX file so the page makes its own dependencies obvious.

    import { Callout, Steps } from '@prosefly/astro-components';

  3. Use transforms for repeated patterns.

    In standalone Astro projects, enable the package-manager tab or image transform that matches the content. Lotus enables both automatically.

  4. Theme once in the shell.

    Configure --pl-* custom properties in the site layout, not in each MDX page.

Lotus users usually start at step 2 because the theme already configures the markdown transforms, Iconify preload middleware, and shared styles.

Last updated Jul 18, 2026