§UIKit ·

English | Русский

Ein Set flexibler, hochgradig praktischer und effizienter React-Komponenten zur Erstellung reichhaltiger Webanwendungen. Teil des Gravity UI Designsystems.

§Über

UIKit ist das Basispaket des Gravity UI Designsystems – ein praxiserprobter Satz von über 70 React-Komponenten, die für produktive Webanwendungen entwickelt wurden. Es kümmert sich um die schwierigen Aspekte: Theming, Barrierefreiheit, RTL-Layout, serverseitiges Rendering und Internationalisierung, damit Sie sich auf die Entwicklung Ihres Produkts konzentrieren können.

Hauptmerkmale:

• Über 70 Komponenten – Eingabefelder, Overlays, Datenanzeige, Layout-Primitive, Feedback und mehr
• Integriertes Theming – Varianten für helle, dunkle und kontrastreiche Modi mit einem Live-Tool Themer zur Anpassung von Tokens
• RTL-Unterstützung – Vollständige Rechts-nach-links-Layoutrichtung

Durchsuchen Sie den vollständigen Komponenten-Katalog in Storybook oder in der Dokumentation.

§Erste Schritte

§Voraussetzungen

React 16.14, 17, 18 oder 19 muss in Ihrem Projekt installiert sein.

§Installation

npm install @gravity-ui/uikit

§Verwendung

Importieren Sie Komponenten direkt aus dem Paket:

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

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

§Stile

Fügen Sie die Basisstile und Schriftarten einmal am Anfang Ihres App-Einstiegspunkts ein:

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

Eine SCSS-Datei mit nützlichen Mixins ist ebenfalls verfügbar, die Sie in Ihren eigenen Stylesheets verwenden können.

§Anleitungen

Lesen Sie mehr:

• Theming – Aktivieren Sie helle, dunkle und kontrastreiche Themes
• Serverseitiges Rendering – Generieren Sie die Root-CSS-Klasse auf dem Server
• Internationalisierung – Legen Sie die Sprache der integrierten Komponenten fest

§Entwicklung

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

Weitere nützliche Befehle:

npm test              # Führt Unit-Tests aus
npm run lint          # Lintet JS, SCSS und Markdown
npm run typecheck     # TypeScript-Typenprüfung
npm run playwright    # Führt visuelle Regressionstests aus

§Maintainer

@amje

@ValeraS

@korvin89

§Mitwirkung

Beiträge sind willkommen! Bitte lies CONTRIBUTING.md, bevor du einen Pull-Request einreichst. Detaillierte PR-Richtlinien findest du unter contribute/pull-request.md.

Wir haben Mitwirkende und es werden immer mehr – mach mit!

Tritt der Community auf Telegram für Fragen und Diskussionen bei.

§Lizenz

Verteilt unter der MIT-Lizenz. Details findest du in LICENSE.

§Für KI-Agenten

Die Basis-React-Komponenten und die Design-Token-Bibliothek für Gravity UI-Anwendungen – Steuerelemente, Eingabefelder, Overlays, Layout und Theming, auf denen jedes andere @gravity-ui-Paket aufbaut.

§Wann verwenden

• Standard-UI für Anwendungen: Buttons, Formularsteuerelemente, Modals und Popups, Menüs, Tabs, Labels, Typografie und Layout-Primitive.
• Die Grundlage für das Theming einer Gravity UI-App: ThemeProvider, Design-Tokens und CSS-Variablen, die der Rest des @gravity-ui/*-Ökosystems erwartet.
• Einfache tabellarische Daten über die integrierte Table-Komponente (Auswahl, Sortierung, Zeilenaktionen).

§Wann nicht verwenden

• Funktionsreiche Datenraster (Virtualisierung, Spaltenanpassung, Gruppierung, Neuanordnung) – verwende @gravity-ui/table, ein separates Headless-Paket. Es ist nicht dasselbe wie die Table-Komponente von uikit.
• Diagramme und Datenvisualisierung – verwende @gravity-ui/charts (@gravity-ui/chartkit ist der ältere Wrapper).
• Navigationsschalen für Anwendungen (Seitenleiste, Kopfzeile, Fußzeile, Logo) – verwende @gravity-ui/navigation.
• Datumsauswahlen, Kalender und Bereichssteuerelemente – verwende @gravity-ui/date-components.
• Der SVG-Icon-Satz selbst – verwende @gravity-ui/icons; uikit liefert nur den Icon-Renderer.

§Häufige Fallstricke

• Der Button-Styling-Prop heißt view, nicht variant oder color.
• Komponenten werden ohne Einrichtung ungestylt gerendert. Umschließe die App mit ThemeProvider und importiere @gravity-ui/uikit/styles/styles.css (plus fonts.css) einmal am Einstiegspunkt – beides ist erforderlich.
• Icon hat keinen name-Prop. Übergib eine importierte Icon-Komponente über data: import {Gear} from '@gravity-ui/icons'; <Icon data={Gear} size={16} />.
• theme-Werte sind light | dark | light-hc | dark-hc. Es gibt kein theme="default".

§Nützliche Dokumentation

• Layout-Komponenten und Abstände
• Theming, Farben & Branding
• Typografie

§Dokumentation für KI-Agenten

Agentenlesbare Dokumentation für die installierte Version befindet sich in node_modules/@gravity-ui/uikit/build/docs/INDEX.md.

§Star-Verlauf

Wenn du UIKit nützlich findest, gib ihm bitte einen ⭐ auf GitHub – das hilft anderen, das Projekt zu entdecken.