# Installation

Install the package for Lotus or a standalone Astro site.

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

Install the package where your MDX content is rendered.
[Lotus](https://astro-theme-lotus.prosefly.dev/) users can usually start
importing components immediately. Standalone Astro users can also enable the
icon integration and bundled Markdown transforms.

## Install

<Tabs copy syncKey="install-package">
  <TabItem label="pnpm" icon="simple-icons:pnpm">
    ```sh
    pnpm add @prosefly/astro-components
    ```
  </TabItem>
  <TabItem label="npm" icon="simple-icons:npm">
    ```sh
    npm install @prosefly/astro-components
    ```
  </TabItem>
  <TabItem label="yarn" icon="simple-icons:yarn">
    ```sh
    yarn add @prosefly/astro-components
    ```
  </TabItem>
  <TabItem label="bun" icon="simple-icons:bun">
    ```sh
    bun add @prosefly/astro-components
    ```
  </TabItem>
</Tabs>

## 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](https://astro-theme-lotus.prosefly.dev/), skip this setup.

```ts title="astro.config.ts"
import mdx from '@astrojs/mdx';
import { defineConfig } from 'astro/config';

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

```mdx title="src/content/docs/astro-components/getting-started.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

<Steps>

1. **Add icon preloading if you use icons outside [Lotus](https://astro-theme-lotus.prosefly.dev/).**

   ```ts title="astro.config.ts"
   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.**

   ```ts title="astro.config.ts"
   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.

</Steps>

<Callout type="tip" title="Using Lotus">
  [`@prosefly/astro-theme-lotus`](https://astro-theme-lotus.prosefly.dev/) already wires the
  markdown transforms, Iconify preloading, MDX, and docs shell. Install this
  package directly only when you are using the components outside the
  [Lotus](https://astro-theme-lotus.prosefly.dev/) integration.
</Callout>

For detailed setup, see [Callout](/docs/astro-components/components/callout/),
[Package Manager Tabs](/docs/astro-components/package-manager-tabs/), and [Images](/docs/astro-components/images/).

## Import Paths

Use the main entry for components:

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

Use subpath entries for integrations:

```ts
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`