Astro Components

Published package

@prosefly/astro-components grew out of work on Lotus and Dahlia. Both themes needed the same author-facing vocabulary—callouts, cards, steps, tabs, accordions, file trees, and media—but they needed to render that vocabulary inside different visual systems.

Extracting the components into their own package made that distinction explicit. The package owns content structure and accessible behavior. The surrounding site owns typography, color, spacing, and page composition.

A practical MDX vocabulary

The component set covers patterns that are awkward to express with Markdown alone but common in technical writing.

Each component is an Astro component first. Authors import only what a page needs, combine it with ordinary Markdown, and keep the rendered output server-first. Client scripts are limited to the components that genuinely need interaction, such as tabs, accordions, galleries, and audio.

The integration handles the shared setup

The package also exports a single Astro integration. It scans static icon usage, preloads Iconify collections, registers Markdown transforms, and supplies the assets used by components such as ImageGallery.

• Directory @prosefly/astro-components

  • Directory components

    • Callout,Card, Steps, Tabs
    • FileTree,ImageGallery, Embed
  • Directory integration

    • iconpreloading
    • Markdowntransforms
  • Directory markdown

    • Mermaid
    • package-managertabs
    • imagegalleries
  • Directory expressive-code

    • code-headericons

Advanced projects can import the Markdown and Expressive Code integrations independently, but the combined integration is the normal starting point.

The theme contract is semantic

Components use --pf-* custom properties for roles such as text, surface, accent, border, status color, font, and radius. They do not import Lotus or Dahlia styles. A theme maps those roles to its own design tokens, while a standalone site can provide a small token layer of its own.

That portability is the useful result of the package: an article can move between Lotus, Dahlia, and a custom Astro site without rewriting every structured element.

Read the component documentation, see every component rendered in Aster, or browse the source.