Astro Components

Write clearer product and developer documentation with ready-made MDX components, Iconify icons, package-manager tabs, and image galleries.

Get started Browse 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.

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.