# Astro Components

Build MDX documentation pages with reusable Astro components.

import { Callout, Card, CardGrid } from '@prosefly/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.

<Callout type="tip" title="Using Dahlia or Lotus?">
  [Dahlia](https://astro-theme-dahlia.prosefly.dev/) and
  [Lotus](https://astro-theme-lotus.prosefly.dev/) 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.
</Callout>

<CardGrid>
  <Card icon="lucide:rocket" title="Add it to Astro" href="/installation/">
    Install the package, import components in MDX, and optionally enable icons
    or markdown transforms in `astro.config.ts`.
  </Card>
  <Card icon="lucide:blocks" title="Choose a component" href="/overview/">
    Match each reader need to the right component: callout, tab, accordion,
    card, step list, file tree, badge, or icon.
  </Card>
  <Card icon="lucide:terminal-square" title="Show install choices" href="/package-manager-tabs/">
    Convert package-manager commands into synced tabs without making authors
    write every variant by hand.
  </Card>
  <Card icon="lucide:git-branch" title="Draw diagrams" href="/mermaid/">
    Turn Mermaid code blocks into themed, accessible SVG diagrams during the
    build.
  </Card>
  <Card icon="lucide:image" title="Improve screenshots" href="/images/">
    Turn image-only Markdown paragraphs into figures and galleries.
  </Card>
  <Card icon="lucide:code-xml" title="Enhance code blocks" href="/expressive-code/">
    Add file icons and language labels to Expressive Code frames.
  </Card>
  <Card icon="lucide:palette" title="Match your site" href="/styling/">
    Use `--pf-*` CSS custom properties to align the components with your docs
    shell or design system.
  </Card>
</CardGrid>