§UIKit ·

English | Español

Un conjunto de componentes React flexibles, muy prácticos y eficientes para crear aplicaciones web enriquecidas. Parte del sistema de diseño Gravity UI.

§Acerca de

UIKit es el paquete fundamental del sistema de diseño Gravity UI, un conjunto probado en batalla de más de 70 componentes React creados para aplicaciones web de producción. Se encarga de las partes difíciles: temas, accesibilidad, diseño RTL, renderizado del lado del servidor e internacionalización, para que puedas centrarte en construir tu producto.

Características principales:

• Más de 70 componentes — entradas, superposiciones, visualización de datos, primitivas de diseño, retroalimentación y más
• Temas integrados — variantes claras, oscuras y de alto contraste con una herramienta Themer en vivo para personalizar tokens
• Soporte RTL — dirección de diseño completa de derecha a izquierda

Explora el catálogo completo de componentes en Storybook o en la documentación.

§Primeros pasos

§Requisitos previos

React 16.14, 17, 18 o 19 debe estar instalado en tu proyecto.

§Instalación

npm install @gravity-ui/uikit

§Uso

Importa los componentes directamente desde el paquete:

import {Button} from '@gravity-ui/uikit';

const SubmitButton = (
  <Button view="action" size="l">
    Enviar
  </Button>
);

§Estilos

Incluye los estilos base y las fuentes una vez en la parte superior del punto de entrada de tu aplicación:

// index.js
import '@gravity-ui/uikit/styles/fonts.css';
import '@gravity-ui/uikit/styles/styles.css';

También hay disponible un archivo SCSS con mixins con utilidades útiles para usar en tus propias hojas de estilo.

§Guías

Lee más:

• Temas — habilita temas claros, oscuros y de alto contraste
• Renderizado del lado del servidor — genera la clase CSS raíz en el servidor
• Internacionalización — establece el idioma de los componentes integrados

§Desarrollo

git clone git@github.com:gravity-ui/uikit.git
cd uikit
npm ci
npm run start   # inicia Storybook en http://localhost:7007

Otros comandos útiles:

npm test              # ejecuta pruebas unitarias
npm run lint          # revisa JS, SCSS y Markdown
npm run typecheck     # verificación de tipos de TypeScript
npm run playwright    # ejecuta pruebas de regresión visual

§Mantenedores

@amje

@ValeraS

@korvin89

§Contribuciones

¡Tus contribuciones son bienvenidas! Por favor, lee CONTRIBUTING.md antes de enviar una solicitud de extracción (pull request). Para obtener directrices detalladas sobre las PR, consulta contribute/pull-request.md.

Tenemos colaboradores y contando — ¡únete a nosotros!

Únete a la comunidad en Telegram para preguntas y discusiones.

§Licencia

Distribuido bajo la Licencia MIT. Consulta LICENSE para más detalles.

§Para agentes de IA

La biblioteca base de componentes React y tokens de diseño para aplicaciones Gravity UI — controles, entradas, superposiciones, diseño y temas sobre los que se basa cada otro paquete de @gravity-ui/*.

§Cuándo usar

• Interfaz de usuario estándar de aplicaciones: botones, controles de formulario, modales y popups, menús, pestañas, etiquetas, tipografía y primitivas de diseño.
• La base de temas de una aplicación Gravity UI: ThemeProvider, tokens de diseño y variables CSS que el resto del ecosistema @gravity-ui/* espera que estén presentes.
• Datos tabulares sencillos a través del componente Table integrado (selección, ordenación, acciones de fila).

§Cuándo no usar

• Cuadrículas de datos con muchas funciones (virtualización, redimensionamiento de columnas, agrupación, reordenación) — usa @gravity-ui/table, un paquete separado sin cabeza (headless). No es lo mismo que el componente Table de uikit.
• Gráficos y visualización de datos — usa @gravity-ui/charts (@gravity-ui/chartkit es el wrapper heredado).
• Estructuras de navegación de aplicaciones (barra lateral, encabezado, pie de página, logo) — usa @gravity-ui/navigation.
• Selectores de fecha, calendarios y controles de rango — usa @gravity-ui/date-components.
• El conjunto de iconos SVG en sí — usa @gravity-ui/icons; uikit solo distribuye el renderizador Icon.

§Errores comunes

• La prop de estilo de Button es view, no variant o color.
• Los componentes se renderizan sin estilo sin configuración. Envuelve la aplicación en ThemeProvider e importa @gravity-ui/uikit/styles/styles.css (más fonts.css) una vez en el punto de entrada — ambos son necesarios.
• Icon no tiene prop name. Pasa un componente de icono importado a través de data: import {Gear} from '@gravity-ui/icons'; <Icon data={Gear} size={16} />.
• Los valores de theme son light | dark | light-hc | dark-hc. No existe theme="default".

§Documentación útil

• Componentes de diseño y espaciado
• Temas, Colores y Marca
• Tipografía

§Documentación para agentes de IA

La documentación legible por agentes para la versión instalada se encuentra en node_modules/@gravity-ui/uikit/build/docs/INDEX.md.

§Historial de Estrellas

Si encuentras UIKit útil, considera darle una ⭐ en GitHub — ayuda a otros a descubrir el proyecto.