Lattice UI Docs Docs

Quick Start

Scaffold or bootstrap a Lattice UI app project with the full CLI workflow.

On this page

Audience: app developers integrating Lattice UI into project codebases.

If you want to see how the UI packages fit together after setup, continue with Build a Settings Dialog.

1. Choose the Entry Point

Use create when you are starting a fresh project. Use init when the repository already exists and you want Lattice to merge its template, scripts, and dependency baseline into the current package.json.

New Project

lattice create
pnpm lattice create

Existing Project

lattice init --dry-run
pnpm lattice init --dry-run

Notes:

  • create requires project-path in non-interactive mode (--yes).
  • init does not accept positional arguments.
  • init --dry-run is the safest first pass for an existing codebase.

2. Add Packages by Preset and Name

Global CLI

lattice add --preset form
lattice add dialog,toast --preset overlay

Monorepo Local Script

pnpm lattice add --preset form
pnpm lattice add dialog,toast --preset overlay

When you start designing product UI, use @lattice-ui/style as your default styling baseline and pair it with @lattice-ui/system for layout and app-level UI context.

Global CLI

lattice add style system

Monorepo Local Script

pnpm lattice add style system

3. Remove Packages You No Longer Need

Global CLI

lattice remove dialog
lattice remove --preset overlay --dry-run

Monorepo Local Script

pnpm lattice remove dialog
pnpm lattice remove --preset overlay --dry-run

4. Validate Environment and Dependencies

Global CLI

lattice doctor

Monorepo Local Script

pnpm lattice doctor

5. Upgrade Installed Lattice Packages

Global CLI

lattice upgrade
lattice upgrade --preset form

Monorepo Local Script

pnpm lattice upgrade
pnpm lattice upgrade --preset form

For command signatures and edge cases, see CLI Commands.

Next step: Design with Style + System.