Configuration

`strata.config.ts` is the single source of truth for content paths, themes, presets and plugins. It's fully typed — hover any key in your editor for docs.

Updated Sep 15, 2026 4 min read

Options

Key	Type	Default
content	string[]	["./src/*/.{ts,tsx}"]
presets	Preset[]	[]
theme	Theme \| Theme[]	slate
prefix	string	""
colorScheme	"system" \| "class" \| "attribute"	"system"
plugins	Plugin[]	[]

Full example

strata.config.ts

import { defineConfig } from "@strata/core";
import { slate } from "@strata/core/presets";
import typography from "@strata/typography";
import { aurora } from "./src/styles/tokens";

export default defineConfig({
  presets: [slate],
  theme: aurora,
  content: ["./src/**/*.{ts,tsx,mdx}"],
  colorScheme: "class",
  plugins: [typography({ maxWidth: "68ch" })],
});

Plugins

Plugins add utilities, variants or components. Define one with definePlugin() — the returned object is type-checked against your theme.

plugins/elevate.ts

import { definePlugin } from "@strata/core";

export default definePlugin(({ addUtilities, theme }) => {
  addUtilities({
    ".lift": { translate: "0 -2px", boxShadow: theme("elevation.3") },
  });
});

Was this page helpful?

Last edited Sep 15, 2026 · docs/configuration.mdx