UI Registry

UI Kit components you can install with chiralkit add.

12 components

ui-component

v1.0.0

badge

Small chip for labeling type, state, or category.

ui-component

v1.0.0

button

Base design system button — primary/secondary variants with a disabled state.

ui-component

v1.0.0

card

Bordered, rounded surface for grouping content — no props, single default slot, no ARIA role. Consumers compose their own heading structure inside.

ui-component

v1.0.0

Native <input type="checkbox"> wrapped as a design-system custom element — checked/indeterminate props forward to the DOM, dsChange emits the new boolean state. Keeps the browser's default checkbox rendering to preserve AT and forced-color-mode behavior.

ui-component

v1.0.0

code-block

Code block with a language label and a built-in copy button.

ui-component

v1.0.0

dialog

Native <dialog> element wrapped as a design-system custom element — showModal() delivers the modal state machine (focus trap, Escape to close, inert background, return-focus) via the browser platform, not scratch-built ARIA. Props: open, label|labelledBy, describedBy. Events: dsOpen, dsClose.

ui-component

v1.0.0

input

Native <input> wrapped as a design-system custom element — supports text/email/password/search/tel/url/number types, invalid+describedBy for error states, and emits dsInput with the current value on every keystroke.

ui-component

v1.0.0

loader

Indeterminate loading indicator built from the chiralkit logo path — two mirrored halves oscillate around the ring center.

ui-component

v1.0.0

select

Native <select> wrapped as a design-system custom element — options passed as a prop, emits dsChange with the new value.

ui-component

v1.0.0

tabs

WAI-ARIA Tabs pattern (scratch build) — tablist only, with roving tabindex, arrow-key navigation, Home/End, and automatic activation. The consumer renders their own tabpanels in light DOM and toggles visibility on dsChange. shadow:false so tab ids are addressable from tabpanels via aria-labelledby.

ui-component

v1.0.0

textarea

Native <textarea> wrapped as a design-system custom element — multi-line text field with rows prop, invalid+describedBy for error states, and dsInput event fired on every keystroke.

ui-component

v1.0.0

tooltip

WAI-ARIA Tooltip pattern (scratch build) — wraps the consumer's first Element child as the trigger, opens on hover (with openDelay) and focus (immediate), dismisses on Escape while keeping the trigger focused, and closes on blur or genuine mouseleave. shadow:false so aria-describedby on the trigger can reference the tooltip's id.