Skip to content
bejamas/ui

Monorepo

A guide for using bejamas/ui in a monorepo setup.

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

Create a new monorepo project

Section titled “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.

Terminal window
bunx bejamas@latest init

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

Terminal window
? 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 as the build system.

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

Add components to your project

Section titled “Add components to your project”

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

Terminal window
cd apps/web
Terminal window
bunx bejamas@latest add [COMPONENT]

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

Section titled “File Structure”
  • Directoryapps
    • Directoryweb # Your Astro project goes here.
      • Directorypages
        • index.astro
      • Directorycomponents
        • Welcome.astro
      • components.json
      • package.json
    • Directorypackages
      • Directoryui # Your components and dependencies are installed here
        • Directorysrc
          • Directorycomponents
            • Button.astro
      • Directorylib
        • utils.ts
      • Directorystyles
        • globals.css
    • components.json
  • package.json
  • turbo.json
Built at Bejamas