Vendorable React components for the Typix editor — toolbar buttons, overlays, primitives, and design tokens you copy into your project via the CLI.

Typix UI is a set of vendorable React components built on shadcn primitives and Tailwind CSS. Components are copied into your project — not installed from node_modules — via the Typix CLI. You own the source and can edit it freely.

Install

npx typix init                    # one-time, writes typix.json
npx typix ui add <component>      # any time, copies source into components/typix/

The first ui add also drops the design-system CSS into components/typix/styles/. See Installation for the global CSS wiring.

Catalog

Pre-built formatting buttons that read editor state from context and ship with tooltips + keyboard shortcuts. Each is also exposed as a companion hook (useMark, useHeading, etc.) for building your own UI.

Component	Purpose
`MarkButton`	Toggle bold, italic, underline, strike, code, sup/subscript.
`HeadingButton`	Toggle H1–H6.
`BlockquoteButton` & `CodeBlockButton`	Toggle blockquote / code block.
`ListDropdownMenu`	Switch between bullet / ordered / checklist.
`TextAlignButton`	Left / center / right / justify.
`UndoRedoButton`	Undo / redo with disabled-when-empty.
`ClearFormattingButton`	Strip inline marks from the selection.
`ColorTextButton`	Change text color.
`ColorHighlightButton`	Change highlight background color.
`FontSizeInput`	Increment / decrement font size.
`FontFamilyDropdownMenu`	Pick from a configurable font list.

Overlays

Floating UI that anchors to a selection, cursor, or DOM node. These pair with their corresponding behavior extensions.

Component	Purpose
`FloatingLinkUI`	Inline link editor that hovers over links and selected ranges.
`MentionUI`	`@`-trigger picker for mentioning users / entities.
`SlashDropdownMenu`	`/`-trigger command palette for inserting blocks.
`DraggableBlock`	Drag handle that lets users reorder blocks.
`EditorContextMenu`	Right-click menu for the editor surface.

Components

Larger feature components — not just a single button.

Component	Purpose
`CodeBlockUI`	Language picker + toolbar wired into the code-block extension.
`TableUI`	Full table UI: cell menu, header buttons, color pickers, resize.
`ImageComponent`	Renderer + toolbar + caption + alignment for images.
`CharacterLimit`	Live character / word counter with limit threshold.
`SpeechToTextButton`	Browser speech-recognition toggle.

Primitives

Low-level building blocks. See the primitives index for the full list of 28 primitives — three are Typix-specific (Toolbar, Kbd, ColorSelector); the rest are standard shadcn primitives you can drop into any UI.

How vendoring works

When you run typix ui add <name>, the CLI walks the component's dependency graph and copies:

components/typix/main/<name>/ — the component itself
components/typix/primitives/... — every primitive it imports
components/typix/lib/utils.ts — the cn() helper
components/typix/styles/{tokens,editor,tailwind,index}.css — design-system CSS (first run only)

It also installs any missing npm peers (Radix UI packages, lucide-react, etc.) using your project's package manager. Edit any of these files freely — they're yours now.

Full CLI flow →

Typix UI