> ## Documentation Index
> [HTML page](https://blode.md/docs/components/installer)
> [Documentation index](https://blode.md/docs/llms.txt)
> Use the index to discover all available pages before exploring further.

# Installer

Display a copyable package install command with the Installer component, including a styled default command generated from a package path.

Use the `Installer` component to show a copyable installation command in a styled container.

Place an `Installer` near the top of quickstart and onboarding pages so readers can install the CLI before they run other commands. The built-in copy button means they do not need to select text from a plain code block. If your docs cover multiple package managers, pass a custom `command` prop or pair this component with [Code group](/components/code-group) for npm, pnpm, and yarn variants on the same page.

A typical getting started flow: show the install command, link to [CLI overview](/cli/overview), then walk through `edda new` and `edda dev`. On the CLI overview page itself, `Installer` renders the global install command with one line of MDX.

## Basic usage

Pass a `command` prop with the full install command:

```mdx
<Installer path="edda-docs" command="npm install edda-docs" />
```

```bash
npm install edda-docs
```

## Default command

If you omit the `command` prop, a default command is generated from the `path` value:

```mdx
<Installer path="edda-docs" />
```

## Props

- `path` (type: string, required: true): Package path used to generate the default command.
- `command` (type: string, required: false): Custom install command. Overrides the default generated from `path`.

## Related pages

- [CLI overview](/cli/overview) -- install the CLI and browse all commands
- [Code group](/components/code-group) -- show npm, pnpm, and yarn install commands in tabs
- [Tabs](/components/tabs) -- switch between related install or setup instructions