# 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, package-manager tabs, and image galleries.

## 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/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 automatic tabs or galleries.**

   ```ts title="astro.config.ts"
   import { defineConfig } from 'astro/config';
   import {
     rehypeImageGallery,
     remarkPackageManagerTabs,
   } from '@prosefly/astro-components/markdown';

   export default defineConfig({
     markdown: {
       remarkPlugins: [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 [Package Manager Tabs](/docs/package-manager-tabs/) and
[Images](/docs/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 } from '@prosefly/astro-components/markdown';
```

## Component Exports

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