Installation

Prerequisites

Node.js 18+ or Bun
Next.js 14+ with App Router
React 18+

Install the package

npm install @blokhaus/core

pnpm add @blokhaus/core

yarn add @blokhaus/core

bun add @blokhaus/core

Install peer dependencies

Blokhaus requires Lexical and Radix UI primitives. Most Next.js projects already have React and Next.js installed.

npm install lexical @lexical/react @lexical/rich-text @lexical/history @lexical/selection @lexical/utils @lexical/list @lexical/table @lexical/link @radix-ui/react-popover @radix-ui/react-dropdown-menu @radix-ui/react-toast lucide-react

pnpm add lexical @lexical/react @lexical/rich-text @lexical/history @lexical/selection @lexical/utils @lexical/list @lexical/table @lexical/link @radix-ui/react-popover @radix-ui/react-dropdown-menu @radix-ui/react-toast lucide-react

yarn add lexical @lexical/react @lexical/rich-text @lexical/history @lexical/selection @lexical/utils @lexical/list @lexical/table @lexical/link @radix-ui/react-popover @radix-ui/react-dropdown-menu @radix-ui/react-toast lucide-react

bun add lexical @lexical/react @lexical/rich-text @lexical/history @lexical/selection @lexical/utils @lexical/list @lexical/table @lexical/link @radix-ui/react-popover @radix-ui/react-dropdown-menu @radix-ui/react-toast lucide-react

If your project already has react, react-dom, and next installed, you don't need to install them again. They're peer dependencies that Blokhaus expects to find.

Copy the theme tokens

Copy the CSS custom properties file into your project. This file defines all design tokens that Blokhaus components use:

styles/blokhaus-tokens.css

:root {
  --blokhaus-background: hsl(0 0% 100%);
  --blokhaus-foreground: hsl(222.2 84% 4.9%);
  --blokhaus-border: hsl(214.3 31.8% 91.4%);
  --blokhaus-ring: hsl(221.2 83.2% 53.3%);
  --blokhaus-muted: hsl(210 40% 96.1%);
  --blokhaus-muted-foreground: hsl(215.4 16.3% 46.9%);
  --blokhaus-accent: hsl(221.2 83.2% 53.3%);
  --blokhaus-accent-foreground: hsl(0 0% 100%);
  --blokhaus-destructive: hsl(0 84.2% 60.2%);
  --blokhaus-ai-stream: hsl(262 83% 58%);
  --blokhaus-radius: 0.5rem;
  --blokhaus-font-sans: ui-sans-serif, system-ui, sans-serif;
  --blokhaus-font-mono: ui-monospace, monospace;
}

Import this file in your root layout or global CSS.

Verify the installation

Create a minimal editor to verify everything is working:

app/page.tsx

"use client";

import { EditorRoot } from "@blokhaus/core";

export default function Page() {
  return (
    <EditorRoot namespace="test" className="min-h-[200px] p-4 border rounded" />
  );
}

If you see an editable area with the placeholder "Start writing...", the installation is complete.

Next steps

Quick Start -- Build a full-featured editor
Theming -- Customize the design tokens
Project Structure -- Understand the library layout