The @typix-editor/cli package gives you a single tool to scaffold, install extensions, and vendor UI components into your project. UI vendoring is the shadcn pattern: source files copied into your repo, nothing locked in node_modules.

Install

The CLI is invoked through your package runner — no global install needed.

npx @typix-editor/cli --help
# or
pnpm dlx @typix-editor/cli --help

After typix init, your project's package.json gets a script alias:

package.json

{
  "scripts": {
    "typix": "typix"
  }
}

…so you can call pnpm typix <cmd> from then on.

Commands at a glance

Command	Purpose
`typix init`	Interactive `typix.json` setup
`typix add`	Install editor extensions as npm packages
`typix remove`	Uninstall extensions
`typix upgrade`	Bump installed extensions
`typix list`	Catalog of available extensions
`typix ui list`	Catalog of UI components
`typix ui add`	Vendor UI components into your repo
`typix ui remove`	Remove vendored components (orphan-aware)

`typix init`

Interactive typix.json setup. Run this once per project.

npx @typix-editor/cli init

Prompts you for:

Component directory (default components/typix) — where vendored files land
TypeScript (yes/no)
Tailwind (yes/no)
Package manager (detects pnpm/npm/yarn/bun)

Writes typix.json to your project root:

typix.json

{
  "componentDir": "components/typix",
  "typescript": true,
  "tailwind": true,
  "packageManager": "pnpm"
}

This file is the source of truth for every subsequent CLI command.

`typix add`

Install editor extension packages from npm.

# Interactive picker
npx typix add

# Explicit
npx typix add mention floating-link code-block

Runs the equivalent pnpm add @typix-editor/extension-<name> for each selection, using the package manager from typix.json.

add ≠ ui add. typix add <name> installs the extension package (editor behavior). typix ui add <name> vendors the UI component (toolbar, menu, etc.) into your repo. Many features have both — see Floating Link for an example.

`typix remove`

npx typix remove mention

Uninstalls @typix-editor/extension-mention via your package manager.

`typix upgrade`

# All installed extensions
npx typix upgrade

# Specific ones
npx typix upgrade mention floating-link

`typix list`

npx typix list

Prints the catalog of every available extension with its npm package name and a one-line description.

`typix ui list`

Shows every available UI component and marks which are already vendored into your project.

npx typix ui list

UI components (23 total)

  Already in your project:
    floating-link  components\typix\main\floating-link
    mention        components\typix\main\mention

  Available to add:
    blockquote-button
    character-limit
    code-block
    code-block-button
    color-highlight-button
    …

Flags: --installed, --available, --all (default), --json, --path <dir>.

`typix ui add`

The headline feature. Copies UI component source into your <componentDir>/main/<name>/ folder, plus every primitive and lib file the component transitively needs.

# Interactive picker
npx typix ui add

# Explicit
npx typix ui add floating-link mention code-block

# Everything
npx typix ui add --all

# Dry-run (no files written)
npx typix ui add floating-link --debug

What gets copied

For typix ui add floating-link, the CLI walks the dependency graph and copies:

components/typix/main/floating-link/ — the component
components/typix/primitives/{button, popover, separator, …} — every primitive it imports
components/typix/lib/utils.ts — cn() helper
components/typix/styles/{tokens,editor,tailwind,index}.css — the design-system CSS (only on the first ui add; subsequent adds skip existing style files)

It also installs any missing npm peers (Radix UI packages, lucide-react, etc.) using your package manager.

Default behavior is safe

Skip-if-exists by default — won't overwrite files you've edited
--overwrite to force-refresh from upstream
--debug to dry-run

Wire up the CSS

After your first ui add, the CLI prints the exact CSS snippet to add:

globals.css

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

Do not use ./components/typix/styles/index.css with Tailwind v4

Turbopack — its @theme inline block doesn't propagate through relative @import indirection. Import the three files individually.

`typix ui remove`

# Interactive
npx typix ui remove

# Explicit (with confirmation)
npx typix ui remove floating-link

# Skip the confirmation
npx typix ui remove floating-link --force

# Also uninstall npm peers no other vendored component needs
npx typix ui remove floating-link --remove-peers

Orphan-aware: before deleting any primitive/lib file, the CLI re-walks the dependency graph over the surviving vendored components. Shared primitives stay; only true orphans get removed.

A complete workflow

# 1. Scaffold the project
npx @typix-editor/cli init

# 2. Install editor extensions you want
pnpm add @typix-editor/react @typix-editor/extension-starter-kit \
  @typix-editor/extension-floating-link \
  @typix-editor/extension-mention \
  @typix-editor/extension-code-block \
  lexical @lexical/react

# 3. Vendor the UI for those extensions
npx typix ui add floating-link mention code-block

# 4. Done — start editing

Now your repo has:

npm packages for editor logic (in node_modules)
React UI source (in components/typix/) you own and can customize

CLI & UI Vendoring