Optional components for Qalma editor surfaces

When to use it

Use the kit when Qalma's default interaction pieces match your editor surface. Skip it, or use only part of it, when your application already owns controls through PrimeNG, Material, Kendo, ng-zorro, or a private design system.

Installation

Install the kit next to the headless editor. The package expects your app to provide Tailwind utilities and the CSS token contract described in the theming page.

pnpm add @qalma/editor @qalma/kit @ng-icons/core @ng-icons/lucide

The kit does not ship a stylesheet to import. With Tailwind v4, point Tailwind at the installed package so it generates the utilities used inside kit components.

@import 'tailwindcss';

/* Adjust the path if your global stylesheet is not src/styles.css. */
@source '../node_modules/@qalma/kit';

Theming

The kit reads normal Tailwind classes such as bg-popover, text-muted-foreground, border-border, and ring-ring. Map those to your app tokens once, then override individual components where your product needs a stronger opinion.

Components

Each component has its own page with a live preview, expandable source snippet, API notes, and integration guidance.

Behavior primitives

Some exports are not visible components, but are still public because consumers may need the same placement, dismissal, or keyboard behavior for custom surfaces.