Installation

Install the package where your MDX content is rendered. Lotus users can usually start importing components immediately. Standalone Astro users can also enable the icon integration and bundled Markdown transforms.

Install

pnpm add @prosefly/astro-components

npm install @prosefly/astro-components

yarn add @prosefly/astro-components

bun add @prosefly/astro-components

Use In MDX

Standalone Astro projects need MDX configured before they can render component imports inside .mdx files. If the project already renders MDX pages, or if it uses Lotus, skip this setup.

import mdx from '@astrojs/mdx';
import { defineConfig } from 'astro/config';

export default defineConfig({
  integrations: [mdx()],
});

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

<Callout type="tip" title="Keep examples close to the task">
  Import only the components used by the current page.
</Callout>

<Steps>

1. Install the package.
2. Import the component.
3. Write normal Markdown inside the component.

</Steps>

Configure Optional Features

1. Add icon preloading if you use icons outside Lotus.

   import { defineConfig } from 'astro/config';
   import proseflyIcon from '@prosefly/astro-components/icon';
   
   export default defineConfig({
     integrations: [
       proseflyIcon({
         preload: ['lucide:sparkles', 'simple-icons:github'],
       }),
     ],
   });

2. Add markdown transforms if you want callout directives, also known as admonitions, automatic tabs, or galleries.

   import { defineConfig } from 'astro/config';
   import {
     rehypeImageGallery,
     remarkCalloutDirectives,
     remarkPackageManagerTabs,
     unified,
   } from '@prosefly/astro-components/markdown';
   
   export default defineConfig({
     markdown: {
       processor: unified({
         remarkPlugins: [remarkCalloutDirectives, remarkPackageManagerTabs],
         rehypePlugins: [rehypeImageGallery],
       }),
     },
   });

3. Set theme tokens in the layout.

   Components have fallbacks, but a site-level token set keeps them visually aligned with the surrounding docs.

For detailed setup, see Callout, Package Manager Tabs, and Images.

Import Paths

Use the main entry for components:

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

Use subpath entries for integrations:

import proseflyIcon from '@prosefly/astro-components/icon';
import {
  rehypeImageGallery,
  remarkCalloutDirectives,
  unified,
} from '@prosefly/astro-components/markdown';

Component Exports

• AccordionItem and Accordions
• Badge
• Callout
• Card and CardGrid
• FileTree
• Icon
• Steps
• TabItem and Tabs