Bibliotecas / UIKit

UIKit

Componentes de interfaz de usuario básicos y tokens para crear servicios con Gravity.

UIKit & middot; [npm package (https://www.npmjs.com/package/@gravity-ui/uikit) [CI (https://github.com/gravity-ui/uikit/actions/workflows/ci.yml?query=branch:main) [storybook (https://preview.gravity-ui.com/uikit/)

Un conjunto de componentes de React flexibles, altamente prácticos y eficientes para crear aplicaciones web sofisticadas.

Instalar

npm install --save-dev @gravity-ui/uikit

Uso

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

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

Estilos

UIKit viene con un estilo y un tema básicos. Para que todo se vea bien, incluye esto en la parte superior de tu archivo de entrada:

// index.js

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

// ...

UIKit admite diferentes temas: claros, oscuros y sus variantes de contraste. Tu aplicación debe renderizarse dentro de ThemeProvider:

import {createRoot} from 'react-dom/client';
import {ThemeProvider} from '@gravity-ui/uikit';

const root = createRoot(document.getElementById('root'));
root.render(
  <ThemeProvider theme="light">
    <App />
  </ThemeProvider>,
);

Es posible generar clases CSS raíz iniciales durante SSR para evitar que el tema parpadee:

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

const theme = 'dark';
const rootClassName = getRootClassName({theme});

const html = `
<html>
  <body>
    <div id="root" class="${rootClassName}"></div>
  </body>
</html>
`;

Además, hay un archivo de mezclas SCSS con útiles ayudantes para usar en tu aplicación.

I18N

Algunos componentes contienen símbolos de texto (palabras y frases). Están disponibles en dos idiomas: en (predeterminado) y ru. Para configurar la configure función de uso del idioma:

// index.js

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

configure({
  lang: 'ru',
});

Desarrollo

Para iniciar el servidor de desarrollo con Storybook, ejecute lo siguiente:

npm start
Acerca de la biblioteca
Estrellas
770
Versión
7.13.1
Última actualización
03.06.2025
Repositorio
github.com/gravity-ui/uikit
Licencia
MIT License
Mantenedores
Colaboradores