Typix v2 ships a complete CSS layer that lands in components/typix/styles/ the first time you run typix ui add. It uses plain CSS custom properties — no SCSS, no required preprocessor. Most theming is a few token overrides in your global stylesheet.

The three token vocabularies

Typix splits its tokens by concern so you can override surgically.

Prefix	Owner	Examples
`--*`	shadcn-style theme tokens (consumed by primitives)	`--background`, `--popover`, `--ring`, `--radius`
`--typix-*`	Editor node tokens (consumed by `.typix-*` rules)	`--typix-color-text`, `--typix-bg-code`, `--typix-color-link`
`--typix-ui-*`	UI primitive tokens (Notion/Craft aesthetic)	`--typix-ui-color-fg`, `--typix-ui-space-2`, `--typix-ui-shadow-md`

All three live in components/typix/styles/tokens.css with light + dark overrides.

Override a token

Add a :root (or .dark) block AFTER importing the design system:

globals.css

@import "tailwindcss";
@import "./components/typix/styles/tokens.css";
@import "./components/typix/styles/editor.css";
@import "./components/typix/styles/tailwind.css";

:root {
  /* Brand the editor link color */
  --typix-color-link: rgb(16, 185, 129);
  /* Looser quote padding */
  --typix-quote-radius: 8px;
}

.dark {
  --typix-color-link: rgb(52, 211, 153);
}

That's it — the editor and every UI component instantly reflect the new values. No rebuild, no theme prop.

Dark mode

Typix supports two dark-mode triggers out of the box:

.dark, [data-theme="dark"] {
  /* dark token overrides */
}

Use whichever your app uses. With next-themes (default in our templates), .dark lands on <html> automatically.

The four-file styles layout

Inside components/typix/styles/:

tokens.css       All CSS custom properties + dark overrides + keyframes
editor.css       All .typix-* node rules (paragraph, code, table, list…)
tailwind.css     Tailwind v4 wiring (@source, @theme inline, animations)
index.css        @import of the three above

Import the three files individually from your globals.css:

@import "./components/typix/styles/tokens.css";
@import "./components/typix/styles/editor.css";
@import "./components/typix/styles/tailwind.css";

If you don't use Tailwind, import the two structural halves only:

@import "./components/typix/styles/tokens.css";
@import "./components/typix/styles/editor.css";

Tailwind v4 + Turbopack quirk. Do not import index.css through a relative path — Turbopack misses the @theme inline block. Import the three files individually as shown above. The typix ui add success message prints this exact snippet.

Per-node restyling

If a token override isn't enough, target the editor node classes directly:

globals.css

.typix-quote {
  border-left-color: rgb(99, 102, 241);
  background-color: rgba(99, 102, 241, 0.04);
}

.typix-code {
  font-family: "JetBrains Mono", ui-monospace, monospace;
}

.typix-heading--h1 {
  font-family: "Inter Display", system-ui, sans-serif;
  letter-spacing: -0.04em;
}

A complete class list is in editor.css source.

Theme prop

The theme option on useTypixEditor controls which CSS class names Lexical emits per node. Most users pass defaultTheme:

import { defaultTheme, useTypixEditor } from "@typix-editor/react";

const editor = useTypixEditor({
  extensions,
  theme: defaultTheme,
});

defaultTheme maps Lexical's internal node names to the .typix-* classes the design-system CSS targets. Override only if you're styling the editor from scratch.

When you vendor UI

After typix ui add <component>, the design-system source lands in your repo at components/typix/. Edit the components themselves to change visuals beyond token overrides:

components/typix/primitives/button/index.tsx

// Tweak the variant styles — these are your files now.
const buttonVariants = cva(/* … */);

You own these files; nothing in node_modules cares.

CLI & UI Vendoring

typix ui add — pull components into your project.

Editor Setup

All useTypixEditor options.

Theming