caliper uidocs
DemoSign inGet Pro

Rich text editor

Free

A small editor with bold, italic, lists and links, returning HTML.

Installs components/ui/rich-text-editor.tsxDepends on lucide-reactMotion shared motion tokens
pnpm dlx shadcn@latest add https://caliperui.site/r/rich-text-editor.json
<p>Start with the <strong>why</strong>.</p>

When to use #

Use it for

  • Notes and descriptions that need light formatting.
  • You want an icon toolbar with correct pressed states.

Skip it when

  • Plain text is enough; use a textarea.
  • You need a full document editor with blocks.

Installation #

terminal
pnpm dlx shadcn@latest add https://caliperui.site/r/rich-text-editor.json

Adds its 3 files to components/ui/, each with its own stylesheet, and installs their packages. No account needed. The first part also adds Caliper UI’s tokens; import them once as in Installation.

Usage #

This is the code behind the preview above.

example.tsx
import { RichTextEditor } from "@/components/ui/rich-text-editor"

export function ProjectNote() {
  return (
    <div className="w-full max-w-lg">
      <RichTextEditor label="Project note" defaultValue="<p>Start with the <strong>why</strong>.</p>" />
    </div>
  );
}

API reference #

RichTextEditor

component
PropTypeDefault
label *string—
defaultValuestring""
onChange((html: string) => void)—
classNamestring—

Accessibility #

It exposes toolbar and textbox semantics, with aria-label, aria-pressed, aria-hidden and aria-multiline kept in step with state.

No custom key handling; Tab and the native activation keys do the work.

Motion #

Transitions use the shared duration and easing tokens. Under prefers-reduced-motion those tokens collapse to instant and travel distances go to zero, so state changes still happen without movement.