Docs

This page isn't translated yet

next

Quick start

Scaffold a Systhema project with the CLI, sync its tokens and start the dev server.

On this page

Scaffold a complete Systhema project with the global CLI, sync its design tokens and start the dev server. To add Systhema to a project you already have, see Manual installation.

PrerequisitesLink to this section

  • Node.js 22 or newer for the systhema CLI. Generated projects run on Node.js 20.9 or newer.
  • pnpm 10. New projects pin a pnpm 10 release in packageManager, because pnpm 11 and later ignore the pnpm field of package.json that holds the project's overrides, build allowlist and Lexical patch.
  • A GitHub personal access token (classic) with the read:packages scope, to install the private @systhemaui/* packages. See Registry access.

Scaffolding a new projectLink to this section

Use the global CLI, @systhemaui/cli. It scaffolds a complete application from one of the bundled templates.

Option A: pnpm dlx (no install)Link to this section

pnpm dlx @systhemaui/cli@latest create my-app

This downloads the CLI on demand and runs create interactively. You'll be asked which template to use (next or payload) and whether to install dependencies and initialize git.

Option B: install the CLI globallyLink to this section

pnpm add -g @systhemaui/cli
systhema create my-app

After installing, the systhema binary is available everywhere. Use systhema --help to list every command.

Non-interactive scaffoldingLink to this section

# Pick a template up front:
systhema create my-app --template next
systhema create my-app --template payload

# Skip prompts entirely:
systhema create my-app --template next --yes --no-install

Research, notes or a brief often land in a folder before the project does. Scaffold into it with --path and --force; colliding files are listed before you confirm:

systhema create --path . --force

See Scaffolding into an existing folder for the details.

The CLI ships two project templates:

A third template, HTML, is not offered by systhema create; its page describes the files so you can set it up by hand.

After scaffoldingLink to this section

The scaffolder leaves you with a project that already has Systhema, Tailwind CSS, and the chosen framework wired together. From the project directory:

# Configure your registry token first (see Registry access).
pnpm install

# Sync design-token artifacts (CSS variables, types, safelist). On a Payload
# project this also generates the Payload types and the admin import map.
pnpm sync

# Start the dev server.
pnpm dev

The project package.json scripts use systhema-core directly, so they don't depend on the global CLI being installed. systhema sync from the global CLI runs the same pipeline, including the agent-facing references at .systhema/references/, and adds the doctor nudge.

Run systhema doctor at any time to check project health, or systhema doctor --fix to resolve issues automatically.

Skipped a feature (database, email, maps, captcha, forms, redirects, AI, Cloudflare, locales) during scaffolding, on a Payload project? Add, reconfigure, or turn it off later with systhema setup <feature>, see systhema setup in the CLI reference.

Next stepsLink to this section