§UIKit ·

English | Русский

Un ensemble de composants React flexibles, très pratiques et performants pour créer des applications web riches. Fait partie du système de design Gravity UI.

§À propos

UIKit est le package fondamental du système de design Gravity UI — un ensemble éprouvé de plus de 70 composants React conçus pour les applications web en production. Il gère les aspects complexes : thèmes, accessibilité, disposition RTL, rendu côté serveur et internationalisation, vous permettant ainsi de vous concentrer sur la création de votre produit.

Fonctionnalités clés :

• Plus de 70 composants — champs de saisie, superpositions, affichage de données, primitives de mise en page, retours d'information, et plus encore.
• Thèmes intégrés — variantes claires, sombres et à fort contraste avec un outil Themer interactif pour personnaliser les jetons.
• Support RTL — direction de mise en page complète de droite à gauche.

Parcourez le catalogue complet des composants dans Storybook ou la documentation.

§Premiers pas

§Prérequis

React 16.14, 17, 18 ou 19 doit être installé dans votre projet.

§Installation

npm install @gravity-ui/uikit

§Utilisation

Importez les composants directement depuis le package :

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

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

§Styles

Incluez les styles de base et les polices une seule fois en haut du point d'entrée de votre application :

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

Un fichier SCSS de mixins avec des utilitaires utiles est également disponible pour être utilisé dans vos propres feuilles de style.

§Guides

En savoir plus :

• Thèmes — activez les thèmes clair, sombre et à fort contraste.
• Rendu côté serveur — générez la classe CSS racine côté serveur.
• Internationalisation — définissez la langue des composants intégrés.

§Développement

git clone git@github.com:gravity-ui/uikit.git
cd uikit
npm ci
npm run start   # lance Storybook à l'adresse http://localhost:7007

Autres commandes utiles :

npm test              # exécute les tests unitaires
npm run lint          # vérifie la qualité du code JS, SCSS et Markdown
npm run typecheck     # vérifie les types TypeScript
npm run playwright    # exécute les tests de régression visuelle

§Mainteneurs

@amje

@ValeraS

@korvin89

§Contribution

Les contributions sont les bienvenues ! Veuillez lire CONTRIBUTING.md avant de soumettre une pull request. Pour des directives détaillées sur les PR, consultez contribute/pull-request.md.

Nous avons contributeurs et ce nombre ne cesse de croître — rejoignez-nous !

Rejoignez la communauté sur Telegram pour vos questions et discussions.

§Licence

Distribué sous la licence MIT. Voir LICENSE pour les détails.

§Pour les agents IA

La bibliothèque de base de composants React et de tokens de design pour les applications Gravity UI — contrôles, entrées, superpositions, mise en page et thèmes sur lesquels tous les autres packages @gravity-ui/* s'appuient.

§Quand l'utiliser

• Interface utilisateur standard des applications : boutons, contrôles de formulaire, modales et popups, menus, onglets, étiquettes, typographie et primitives de mise en page.
• La base thématique d'une application Gravity UI : ThemeProvider, tokens de design et variables CSS que le reste de l'écosystème @gravity-ui/* s'attend à trouver.
• Données tabulaires simples via le composant Table intégré (sélection, tri, actions sur les lignes).

§Quand ne pas l'utiliser

• Grilles de données riches en fonctionnalités (virtualisation, redimensionnement des colonnes, regroupement, réorganisation) — utilisez @gravity-ui/table, un package headless séparé. Ce n'est pas la même chose que le composant Table de uikit.
• Graphiques et visualisation de données — utilisez @gravity-ui/charts (@gravity-ui/chartkit est l'ancien wrapper).
• Coques de navigation d'application (en-tête latéral, pied de page, logo) — utilisez @gravity-ui/navigation.
• Sélecteurs de date, calendriers et contrôles de plage — utilisez @gravity-ui/date-components.
• L'ensemble d'icônes SVG lui-même — utilisez @gravity-ui/icons ; uikit ne fournit que le rendu Icon.

§Pièges courants

• La prop de style de Button est view, pas variant ou color.
• Les composants s'affichent sans style sans configuration. Encapsulez l'application dans ThemeProvider et importez @gravity-ui/uikit/styles/styles.css (ainsi que fonts.css) une seule fois au point d'entrée — les deux sont requis.
• Icon n'a pas de prop name. Passez un composant d'icône importé via data : import {Gear} from '@gravity-ui/icons'; <Icon data={Gear} size={16} />.
• Les valeurs de theme sont light | dark | light-hc | dark-hc. Il n'y a pas de theme="default".

§Documentation utile

• Composants de mise en page et espacements
• Thèmes, couleurs et image de marque
• Typographie

§Documentation pour les agents IA

La documentation lisible par agent pour la version installée se trouve dans node_modules/@gravity-ui/uikit/build/docs/INDEX.md.

§Historique des étoiles

Si vous trouvez UIKit utile, veuillez envisager de lui donner un ⭐ sur GitHub — cela aide les autres à découvrir le projet.