Saltar al contenido principal

​
Resumen

Twenty UI es la biblioteca de interfaz de usuario de React de código abierto de Twenty. Proporciona primitivas fundamentales, componentes compartidos, iconos y tokens de tema con CSS predefinido, por lo que tu aplicación no necesita un compilador de CSS-in-JS.

​
Instalar

Para una aplicación de React existente, instala la biblioteca. Se requiere React 19.
El editor de código tiene un punto de entrada independiente, twenty-ui/components/code-editor. Los demás componentes no requieren Monaco. Para usar el editor de código, instala sus dependencias de pares opcionales y configura los workers de Monaco para tu empaquetador antes de montarlo:
Si estás creando una aplicación de Twenty, sigue Uso de componentes de Twenty UI. El renderizador de componentes front proporciona el tema del espacio de trabajo y tiene una configuración diferente de la de una aplicación de navegador independiente. Mantén twenty-ui, twenty-sdk y twenty-client-sdk en la misma versión.

​
Carga estilos y proporciona un tema

Importa la hoja de estilos de los componentes y una hoja de estilos de tema una vez en el punto de entrada de tu aplicación. ThemeProvider aplica la clase de tema activa y pone los valores del tema a disposición de los componentes.
La hoja de estilos de los componentes incluye un restablecimiento global. Revisa su efecto al añadir Twenty UI a una aplicación existente.

​
Sobrescribir estilos

Twenty UI coloca los estilos de componentes y el restablecimiento en la capa de cascada twenty-ui. Los estilos que escribes fuera de una capa, como un className, un módulo CSS o una regla CSS-in-JS, sobrescriben esas reglas en capas independientemente de la especificidad del selector o el orden de importación. Las hojas de estilos del tema y las reglas globales opcionales de Monaco del editor permanecen sin capas. Los restablecimientos globales de elementos de tu aplicación tampoco tienen capas, por lo que sobrescribirían los componentes de Twenty UI. Declara una capa para ellos antes de que se cargue la hoja de estilos de Twenty UI:
Con Tailwind CSS v4, coloca Twenty UI entre las capas base y de utilidades de Tailwind:

​
Elige un punto de entrada

Importa componentes desde su subruta pública para mantener las importaciones centradas: Las primitivas son controles fundamentales, incluidos controles compuestos como Select, Popover y AlertDialog. Los componentes compartidos combinan primitivas en ajustes de diseño recurrentes y bloques de construcción reutilizables de aplicaciones. Ambos reciben datos y devoluciones de llamada de la aplicación. Usa MainButton para acciones destacadas y LightButton para acciones ligeras. Ambos provienen de twenty-ui/components/input y comparten el contrato de interacción fundamental de Button. El enrutamiento y el diseño de página permanecen en la aplicación. Cada familia de primitivas y componentes compartidos tiene un punto de entrada público correspondiente, como twenty-ui/primitives/input y twenty-ui/components/settings. Las entradas agregadas twenty-ui/primitives y twenty-ui/components exportan sus respectivas familias. La entrada raíz twenty-ui vuelve a exportar primitivas, componentes compartidos, iconos, tokens de tema y utilidades. Los recursos, las utilidades de prueba y el editor de código opcional tienen puntos de entrada independientes. Importa iconos individuales, como IconCheck, desde twenty-ui/icon. El proveedor dinámico de iconos incluye el catálogo completo de iconos, así que resérvalo para interfaces que necesiten buscar iconos en tiempo de ejecución.

​
Hooks responsivos

Importa useIsMobile, useIsTouchDevice y useMediaQuery desde twenty-ui/utilities. Las constantes de consulta provienen de twenty-ui/utilities; MOBILE_VIEWPORT proviene de twenty-ui/theme. Las suscripciones comparten una MediaQueryList por consulta y se actualizan cuando cambia su coincidencia. Los hooks devuelven false durante el renderizado del servidor, el primer renderizado de hidratación y cuando window.matchMedia no está disponible. En un componente frontal de Twenty, las consultas de ancho siguen el cuadro del widget. Por lo tanto, useIsMobile sigue el ancho del widget, mientras que useIsTouchDevice sigue la entrada principal del dispositivo. Usa las anulaciones de historias para probar estos estados en Storybook.

​
Continuar

  • Temas: usa tokens semánticos y anulaciones con ámbito.
  • Modo oscuro: alterna entre paletas claras y oscuras.

​
Explora la biblioteca

  • Primitivos: controles fundamentales agrupados por familia, con ejemplos de uso y referencias de API.
  • Componentes: ajustes preestablecidos de diseño compartidos y bloques de construcción reutilizables para la aplicación compuestos a partir de primitivas.