Editor

Registry

Monaco-based code editor recipe with syntax highlighting, validation, and theme sync.

Use the Editor registry recipe to add a Monaco-powered code editor with language support, diagnostics hooks, and automatic light/dark theme behavior.

After shadcn add, import Editor from the generated UI path in your app (typically @/components/ui/editor).

Installation

Run the shadcn CLI with your package manager. It vendors the recipe into components/ui/editor.tsx and installs the runtime dependencies (@by/experience-system, …) automatically:

pnpm dlx shadcn@latest add @by-es/editor

In this monorepo, depend on the workspace package (for example via workspace:* or your catalog) so imports resolve to packages/experience-system. Configure the Registry in your app before adding recipes.

Dropdown Menu

A menu opened from a button or control, for actions and settings without leaving the current view.

Ellipsis With Tooltip

Truncated text that only shows a tooltip when it actually overflows its container.

Editor

Installation

On this page