Installation

Install two packages, drop in a config, add the plugin. Beam compiles on every save.

Packages

Package	Purpose
`beamcss`	Core compiler, CLI, config types
`@beamcss/vite`	Vite plugin with HMR
`@beamcss/postcss`	PostCSS plugin for other bundlers

Vite

The recommended setup. Install the core package and the Vite plugin:

terminal

npm install beamcss @beamcss/vite

Create beam.config.ts in your project root:

beam.config.ts

import { defineConfig } from 'beamcss'

export default defineConfig({
  tokens: {
    color: {
      base: '#0b0b0c',
      surface: '#16161a',
      fg: '#e8e8ea',
      accent: '#3b82f6',
      'on-accent': '#ffffff',
    },
    radius: { md: '8px' },
    text: { base: '16px', lg: '20px' },
    font: { ui: 'Inter, system-ui, sans-serif' },
    screens: { tablet: '48rem' },
  },
  background: 'base',
  foreground: 'fg',
})

Add the plugin to your Vite config:

vite.config.ts

import { beamcss } from '@beamcss/vite'

export default {
  plugins: [
    beamcss({
      config: './beam.config.ts',
      content: ['./src'],
    }),
  ],
}

Now write markup - the plugin scans your files and injects the compiled CSS:

index.html

<main class="grid place-center h-screen bg-base text-fg font-ui">
  <section class="flex direction-column align-center gap-4 p-6 bg-surface rounded-md
                  hover:(bg-surface+8 scale-105)
                  tablet:(direction-row justify-between gap-8)">
    <h1 class="text-lg text-accent">Hello Beam</h1>
  </section>
</main>

PostCSS

For webpack, Parcel, Rollup, Next.js, and other PostCSS-based setups, install the PostCSS plugin instead:

terminal

npm install beamcss @beamcss/postcss

postcss.config.js

module.exports = {
  plugins: {
    '@beamcss/postcss': {
      config: './beam.config.ts',
      content: ['./src'],
    },
  },
}

CLI

No bundler? Use the CLI directly via npx or a global install. Scaffold a project, then build or watch:

terminal

# scaffold config + plugin wiring
npx beam init --template vite

# one-off build
npx beam build --config ./beam.config.ts --content ./src --out ./dist/beam.css

# watch mode
npx beam dev --config ./beam.config.ts --content ./src --out ./public/beam.css

See Configuration to flesh out your design tokens, or CLI & integrations for the full command reference.