Installation
Install Typix and its peer dependencies
This page covers manual pnpm/npm/yarn install. For a guided
scaffold, see typix init.
Required packages
Typix v2 ships as small, focused packages. The minimum to render an editor is three packages: the React adapter, the starter kit, and Lexical.
pnpm add @typix-editor/react @typix-editor/extension-starter-kit \
lexical @lexical/reactnpm install @typix-editor/react @typix-editor/extension-starter-kit \
lexical @lexical/reactyarn add @typix-editor/react @typix-editor/extension-starter-kit \
lexical @lexical/reactbun add @typix-editor/react @typix-editor/extension-starter-kit \
lexical @lexical/reactAdd UI components
Toolbars, floating menus, mention pickers, and the slash-command palette
ship as vendorable components — copied into your repo, not consumed
from node_modules. This is the shadcn pattern: you own the source and
can edit it freely.
npx @typix-editor/cli init
npx @typix-editor/cli ui add floating-link mention code-blockAfter running, you'll have working source files at:
components/typix/
├── lib/
├── main/
│ ├── floating-link/
│ ├── mention/
│ └── code-block/
├── primitives/
└── styles/Imports in your code use the vendored paths:
import { FloatingLinkUI } from "@/components/typix/main/floating-link";
import { Toolbar } from "@/components/typix/primitives/toolbar";Add CSS
The first typix ui add also copies the design-system CSS into
components/typix/styles/. Import the three files from your global
stylesheet:
@import "tailwindcss";
@import "./components/typix/styles/tokens.css";
@import "./components/typix/styles/editor.css";
@import "./components/typix/styles/tailwind.css";Tailwind v4 + Turbopack only. Import the three files individually —
do not import index.css through a relative path; Turbopack misses the
@theme inline block. If you hit
Cannot apply unknown utility class "border-border", run a fresh
next build to verify your imports.
If you don't use Tailwind, import the two structural halves only:
@import "./components/typix/styles/tokens.css";
@import "./components/typix/styles/editor.css";Add to your CSS source scan
Tell Tailwind to scan your vendored components so it picks up the classes they use:
@source "./components/typix/**/*.{ts,tsx}";