Chiralkit / UI Kit
Un sistema visual. Cualquier stack.
Tokens, primitivas y patrones expresados una vez e implementados para React, Web Components y templates renderizados en servidor.
01 · Qué
Sin paquetes que configurar ni temas que rehacer. El componente llega a tu repositorio como código normal que puedes leer y cambiar.
Ejecuta ck init una vez para detectar tu framework y después ck add button. Los archivos se copian en tu proyecto y quedan listos para commitear.
La misma etiqueta ds-button funciona en React, en plantillas de Django y en HTML, con las mismas props y eventos en todas partes.
02 · Por qué
Cambiar de sistema de diseño suele obligar a reescribir componentes y a renombrar cada color. ChiralUI parte de lo que ya tienes: ck tokens migrate lee tu globals.css de shadcn/ui y escribe chiraltokens.css con tus colores, radios y fuentes ya traducidos a tokens de ChiralUI. Sin IA y sin clave de API.
Lee la guía de migración desde shadcn03 · Cómo
Todos los stacks leen los mismos valores de @chiralkit/tokens y los mismos nombres de props y eventos, así que un token migrado significa lo mismo en todas partes. Cuando el registry avanza, ck update te enseña el diff antes de tocar tu copia.
Cada nivel se construye con los dos anteriores: la taxonomía de Chiralkit aplicada a lo que entrega el UI Kit. Los anillos siguen Fibonacci: 0, 1, 1, 2, 3, 5. Los tokens son el punto del que parte todo; en el 2 empieza la quiralidad: una pieza se entrega con su espejo, como las manos.
Ver el marco cross-domain en Arquitectura ChiralEl vocabulario compartido — color, spacing, radius, tipografía — declarado una vez en @chiralkit/tokens y consumido por cualquier stack como CSS custom properties.
Custom elements de un solo propósito construidos directamente desde tokens: ds-button, ds-badge, ds-code-block. React y templates llegan al mismo tag.
Composiciones de primitivas que resuelven interacciones recurrentes — diálogos, forms, tabs — con el mismo contrato de props y eventos entre stacks.
Especializaciones emparejadas de un patrón que comparten ADN estructural y espejan según el contexto. Dos cards, dos modos de form, enviados juntos con el contrato de transición entre ellos.
Flujos end-to-end — sign-in, checkout, settings — ensamblados desde patrones y enantiómeros, portables entre React y templates de servidor.
Layouts y páginas: la geometría que reparte las features en una superficie y las composiciones completas que el usuario ve. La cima de la espiral del UI Kit.