Astro Components

Start With The Reader’s Task

This package is for Astro projects that publish MDX documentation. It gives authors a small set of components for the patterns readers expect in docs: installation choices, warnings, linked next steps, project trees, and short procedures.

Using Dahlia or Lotus?

Dahlia and Lotus already configure the shared Markdown transforms and icon preloading. In those theme projects, authors usually only import the components they need in each MDX page.

Add it to Astro

Install the package, import components in MDX, and optionally enable icons or markdown transforms in astro.config.ts.

Choose a component

Match each reader need to the right component: callout, tab, accordion, card, step list, file tree, badge, or icon.

Show install choices

Convert package-manager commands into synced tabs without making authors write every variant by hand.

Draw diagrams

Turn Mermaid code blocks into themed, accessible SVG diagrams during the build.

Improve screenshots

Turn image-only Markdown paragraphs into figures and galleries.

Enhance code blocks

Add file icons and language labels to Expressive Code frames.

Match your site

Use --pf-* CSS custom properties to align the components with your docs shell or design system.