# Monorepo

`bejamas/ui` works well in a monorepo setup. In fact, it's the recommended way to use it.

### Create a new monorepo project

To create a new monorepo project, run the `init` command. You will be prompted
to select the type of project you are creating.

<DocsTabs syncKey="pkg">
  <DocsTabItem label="bun">
  ```bash
  bunx bejamas@latest init
  ```
  </DocsTabItem>

  <DocsTabItem label="npm">
    ```bash
    npx bejamas@latest init
    ```
  </DocsTabItem>
  <DocsTabItem label="pnpm">
    ```bash
    pnpm dlx bejamas@latest init
    ```
  </DocsTabItem>
  <DocsTabItem label="yarn">
    ```bash
    yarn dlx bejamas@latest init
    ```
  </DocsTabItem>
</DocsTabs>

Select the `Astro (Monorepo)` or `Astro with Component Docs (Monorepo)` option.

```bash
? Would you like to start a new project?
    Astro
❯   Astro (Monorepo)
    Astro with Component Docs (Monorepo)
```

**`Astro (Monorepo)`** creates a new monorepo project with two workspaces: `web` and `ui`.

**`Astro with Component Docs (Monorepo)`** creates a new monorepo project with three workspaces: `web`, `ui`,
and `docs`. The `docs` workspace contains the component documentation.

Both setups use **Astro v5**, **Tailwind CSS v4**, and **[Turborepo](https://turbo.build/repo/docs)** as the build system.

Everything is set up for you, so you can start adding components to your project.

### Add components to your project

To add components to your project, run the `add` command from your **app directory**.

```bash
cd apps/web
```

<DocsTabs syncKey="pkg">
  <DocsTabItem label="bun">
  ```bash
  bunx bejamas@latest add [COMPONENT]
  ```
  </DocsTabItem>

  <DocsTabItem label="npm">
    ```bash
    npx bejamas@latest add [COMPONENT]
    ```
  </DocsTabItem>
  <DocsTabItem label="pnpm">
    ```bash
    pnpm dlx bejamas@latest add [COMPONENT]
    ```
  </DocsTabItem>
  <DocsTabItem label="yarn">
    ```bash
    yarn dlx bejamas@latest add [COMPONENT]
    ```
  </DocsTabItem>
</DocsTabs>

The CLI automatically detects whether a component is a primitive or a block and installs it in the correct location:

- **Primitives** (e.g. button, card, input) — installed in `packages/ui` and automatically update import paths in `apps/web`
- **Blocks** (e.g. hero-a, hero-b, login-01) — installed in `apps/web/components`. Any primitives the block depends on are installed automatically in `packages/ui`

## File Structure

<DocsTabs>
  <DocsTabItem label="Astro (Monorepo)">

<FileTree>

- apps
  - web # Your Astro project goes here.
    - pages
      - index.astro
    - components
      - Welcome.astro
    - components.json
    - package.json
  - packages
    - ui # Your components and dependencies are installed here
      - src
        - components
          - Button.astro
    - lib
      - utils.ts
    - styles
      - globals.css
  - components.json
- package.json
- turbo.json

</FileTree>

  </DocsTabItem>

  <DocsTabItem label="Astro with Component Docs (Monorepo)">

<FileTree>

- apps
  - web # Your Astro project goes here.
    - pages
      - index.astro
    - components
      - Welcome.astro
    - components.json
    - package.json
  - docs
    - content
      - docs
        - components
          - Button.astro
    - package.json
  - packages
    - ui # Your components and dependencies are installed here
      - src
        - components
          - Button.astro
    - lib
      - utils.ts
    - styles
      - globals.css
  - components.json
- package.json
- turbo.json

</FileTree>

  </DocsTabItem>
</DocsTabs>