Installation

Prerequisites

Bun (recommended) or npm/pnpm/yarn
Next.js 14+ with App Router
React 18+

Install the package

bun add @blokhaus/core

Or with npm/pnpm:

npm install @blokhaus/core
# or
pnpm add @blokhaus/core

Peer dependencies

Blokhaus requires the following peer dependencies. Most Next.js projects already have these installed:

bun add react react-dom next lexical @lexical/react @lexical/rich-text @lexical/history @lexical/selection @lexical/utils @lexical/list @lexical/table @lexical/link

Radix UI primitives

Blokhaus uses Radix UI for accessible dropdown menus, popovers, and toasts:

bun add @radix-ui/react-popover @radix-ui/react-dropdown-menu @radix-ui/react-toast

Icons

bun add lucide-react

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

On this page