UI Kit Docs

Guides

• shadcn migration

  Turn a shadcn/ui React component into a Chiralkit module usable in any stack.

Installable components

Each component lands in your project as source you own — reviewable, editable, versioned by you.

• badge

  Small chip for labeling type, state, or category.

• button

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

• card

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

• checkbox

  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.

• code-block

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

• 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.

• 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.

• loader

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

• select

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

• 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.

• 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.

• 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.