add-component

name	add-component
description	Add a new visualization component to Unovis end to end — the TypeScript core, the shared registry, the generated framework wrappers, a dev example, a gallery example, and docs. Use when asked to add/create a new component, chart type, plot, or diagram to the library, or to wire an existing core component through to the framework wrappers.

Adding a component to Unovis

Operational checklist. For the conceptual tutorial (data models, SVG vs HTML, transitions) read packages/website/contributing/guides/adding-a-component.mdx. Before writing anything, open a similar existing component and copy its shape — e.g. packages/ts/src/components/line (XY) or packages/ts/src/components/donut (Core).

1. Build the core in packages/ts

Create packages/ts/src/components/<kebab-name>/ (kebab-case dir + files):

• config.ts — ConfigInterface (JSDoc each prop, end with Default: \...`) and a Configclass with defaults. Extend the right superclass:XYComponentConfig*for XY components,ComponentConfig*` for Core components. Stand-alone components don't extend.
• index.ts — the component class. Extends XYComponentCore / ComponentCore (or stands alone). Declares static selectors = s, static cssVariables = s.variables, config, events, and a _render(customDuration?) (or render) with clear enter / update / exit D3 selections.
• style.ts — emotion selectors + a map. CSS variables are named ; every color var needs a counterpart. Export and call .