Installation

Access

@codecanon/waraq is a protected package on the npm registry. Only authorized users can install it.

To get access, contact us to purchase a license. Once confirmed, your npm account will be added to the allowed list and you will be able to install the package.

Install

bun add @codecanon/waraq

Import the stylesheet

Waraq's stylesheet is not a pre-compiled Tailwind build. Import it from your Tailwind entry CSS (e.g. app/globals.css or src/index.css), after @import "tailwindcss":

globals.css

@import "tailwindcss";
@import "@codecanon/waraq/styles.css";

The file contains an @source directive pointing at Waraq's compiled components, so your Tailwind generates the utility classes Waraq needs, in the same utilities layer as your own. It does not inject preflight, theme tokens, or a dark variant into your app, and it cannot break your own responsive classes.

Do not import it from JavaScript

import "@codecanon/waraq/styles.css" in a .tsx file skips your Tailwind pipeline and the editor will render unstyled. Always import it from a CSS file that Tailwind processes.

Theme tokens

Waraq components use the standard shadcn/ui theme tokens (--background, --primary, --popover, --radius, …) and your app's dark variant. Projects set up with shadcn init already provide these.

If your project has no shadcn theme yet, import the optional default theme before styles.css:

globals.css

@import "tailwindcss";
@import "@codecanon/waraq/theme.css";
@import "@codecanon/waraq/styles.css";

Skip theme.css if you already have a shadcn theme — it would override your palette.

Entry points

The package ships three tree-shakable entry points:

Import	Use for
`@codecanon/waraq`	Editor layout components, action components, hooks, default layer types
`@codecanon/waraq/ui`	Standalone UI primitives (Button, ColorPicker, InputNumber, …)
`@codecanon/waraq/lib`	Type definitions, constants, utility functions

You only pay for what you import. If you only need the UI primitives you can import from /ui without pulling in the editor internals.

Next.js

No extra configuration is needed. The package is ESM-only and Next.js handles it automatically.

If you hit a Cannot use import statement in a module error for a transitive dependency, add it to transpilePackages in next.config.mjs:

next.config.mjs

const config = {
  transpilePackages: ["@codecanon/waraq"],
}