Skip to content
bejamas/ui
Theme Editor
⌘E
Background
L 0.5
C 0.2
H 250
Foreground
L 0.5
C 0.2
H 250
Primary
L 0.5
C 0.2
H 250
Primary FG
L 0.5
C 0.2
H 250
Secondary
L 0.5
C 0.2
H 250
Secondary FG
L 0.5
C 0.2
H 250
Accent
L 0.5
C 0.2
H 250
Accent FG
L 0.5
C 0.2
H 250
Card
L 0.5
C 0.2
H 250
Card FG
L 0.5
C 0.2
H 250
Popover
L 0.5
C 0.2
H 250
Popover FG
L 0.5
C 0.2
H 250
Muted
L 0.5
C 0.2
H 250
Muted FG
L 0.5
C 0.2
H 250
Border
L 0.5
C 0.2
H 250
Input
L 0.5
C 0.2
H 250
Ring
L 0.5
C 0.2
H 250
Destructive
L 0.5
C 0.2
H 250
Destructive FG
L 0.5
C 0.2
H 250
Chart 1
L 0.5
C 0.2
H 250
Chart 2
L 0.5
C 0.2
H 250
Chart 3
L 0.5
C 0.2
H 250
Chart 4
L 0.5
C 0.2
H 250
Chart 5
L 0.5
C 0.2
H 250

Reset

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. The source code is available on GitHub.