Docs del UI Kit

Guías

• Migrar desde shadcn

  Convertí un componente shadcn/ui de React en un módulo Chiralkit usable en cualquier stack.

Componentes instalables

Cada componente aterriza en tu proyecto como código tuyo — revisable, editable, versionado por vos.

• badge

  Chip pequeño para etiquetar tipo, estado o categoría.

• button

  Botón base del design system: primary/secondary + estado disabled.

• card

  Superficie con borde y esquinas redondeadas para agrupar contenido — sin props, un único default slot, sin rol ARIA. El consumidor compone sus propios headings adentro.

• checkbox

  <input type="checkbox"> nativo envuelto como custom element del design system — props checked/indeterminate se reenvían al DOM, dsChange emite el nuevo estado booleano. Mantiene el render nativo del checkbox para preservar el comportamiento de AT y del modo forced-colors.

• code-block

  Bloque de código con etiqueta de lenguaje y botón de copiar integrado.

• dialog

  Elemento <dialog> nativo envuelto como custom element del design system — showModal() entrega la máquina de estado modal (focus trap, Escape para cerrar, background inerte, return-focus) vía la plataforma del navegador, sin ARIA scratch. Props: open, label|labelledBy, describedBy. Eventos: dsOpen, dsClose.

• input

  <input> nativo envuelto como custom element del design system — soporta tipos text/email/password/search/tel/url/number, invalid+describedBy para errores, y emite dsInput con el valor actual en cada tecla.

• loader

  Indicador de carga indeterminada construido a partir del path del logo — dos mitades espejo oscilan alrededor del centro del anillo.

• select

  <select> nativo envuelto como custom element del design system — opciones vía prop, emite dsChange con el nuevo valor.

• tabs

  Patrón WAI-ARIA Tabs (scratch build) — solo la tablist, con roving tabindex, navegación por arrow keys, Home/End y activación automática. El consumidor renderiza sus propios tabpanels en light DOM y togglea visibilidad en dsChange. shadow:false para que los ids de los tabs sean referenciables desde los tabpanels vía aria-labelledby.

• textarea

  <textarea> nativo envuelto como custom element del design system — campo de texto multilínea con prop rows, invalid+describedBy para errores, y evento dsInput en cada tecla.

• tooltip

  Patrón WAI-ARIA Tooltip (scratch build) — envuelve el primer Element child del consumidor como trigger, abre en hover (con openDelay) y en focus (inmediato), se cierra con Escape sin sacar el foco del trigger, y también en blur o mouseleave real. shadow:false para que aria-describedby del trigger pueda apuntar al id del tooltip.