Installation

Requirements

Quick install with the CLI

Run strata init from your project root. It detects your framework and package manager, then asks three questions: which preset to start from, where components should live and whether to enable the React bindings.

$ npx @strata/cli@latest init

1. 1

   Pick a preset

   slate (neutral, 6px radius), ember (warm, 10px radius) or blank if you bring your own tokens.

2. 2

   Confirm paths

   Components default to src/components/strata, tokens to src/styles/tokens.ts.

3. 3

   Review the diff

   The CLI prints every file it touched. Nothing is written until you press Enter.

Manual installation

Prefer to do it by hand? Install the core package and the bundler plugin, then add the config file yourself.

1. Install the packages

$ npm install -D @strata/core @strata/vite

2. Register the plugin

import { defineConfig } from "vite";
import strata from "@strata/vite";

export default defineConfig({
  plugins: [strata({ config: "./strata.config.ts" })],
});

3. Create strata.config.ts

import { defineConfig } from "@strata/core";
import { slate } from "@strata/core/presets";

export default defineConfig({
  presets: [slate],
  content: ["./src/**/*.{ts,tsx}"],
  prefix: "",
});

4. Import the layers

@import "@strata/core/layers.css";

@layer strata.base, strata.components, strata.utilities;

Verify the setup

Start your dev server and add class="stack gap-4 p-6 surface-raised" to any element. You should see a padded, elevated card. Run strata doctor if nothing changes — it checks plugin order, content globs and duplicate installs.

$ npx @strata/cli doctor

Last edited Sep 24, 2026 · docs/installation.mdx Suggest an edit