Начало работы

Установите пакеты, подключите стили и тему и отрисуйте первый компонент.

Требования

react и react-dom ^19.0.0
сборщик, который загружает CSS, импортированный из пакетов: Vite, webpack, Next.js и подобные

Установка

pnpmnpmyarnbun

pnpm add @vega-ui/react @vega-ui/theme-core @vega-ui/icons

@vega-ui/react: компоненты и их таблица стилей.
@vega-ui/theme-core: светлая и тёмная темы. Цвета, поверхности и текст компоненты берут из её переменных, поэтому без неё они остаются без оформления.
@vega-ui/icons: иконки, которые используются в примерах. @vega-ui/react уже зависит от этого пакета, но pnpm и Yarn Plug'n'Play разрешают приложению импортировать только пакеты, которые оно указало само.

Если приложение использует календарные системы или помощники для дат напрямую, установите ещё @vega-ui/i18n. Подробнее — в разделе Даты и календарные системы.

Подключение стилей

Компоненты не импортируют свой CSS сами. Импортируйте тему и таблицу стилей один раз в точке входа приложения, тему первой:

import '@vega-ui/theme-core';
import '@vega-ui/react/style.css';

С CSS-слоями сначала объявите их порядок, а библиотеку импортируйте в отдельные слои. Тогда стили приложения побеждают независимо от специфичности:

@layer theme, library, app;

@import url('@vega-ui/theme-core') layer(theme);
@import url('@vega-ui/react/style.css') layer(library);

Стили вне слоёв побеждают любой слой, поэтому стили приложения можно и не помещать в слой.

Применение темы

Переменные темы заданы на классах .light и .dark. Поставьте класс на корневой элемент:

<html class="light">

Держите его на <html> или <body>, а не на внутренней обёртке. Dialog, Drawer и Sheet рендерятся в document.body, вне дерева приложения, и получают тему, только если она задана на предке body.

Чтобы сменить тему, замените класс. Собственные темы описаны в разделе Темы.

Шрифты

Шрифты по умолчанию — Montserrat, Arial, sans-serif. Библиотека не загружает Montserrat: если приложение его не подключило, текст отображается шрифтом Arial.

Подключите Montserrat в приложении или задайте свой набор шрифтов:

:root {
  --default-font-family: Inter, system-ui, sans-serif;
}

Заголовки следуют --default-font-family. Код использует --code-font-family.

Первый компонент

import { Button } from '@vega-ui/react';

export function App() {
  return <Button>Save changes</Button>;
}

Про Next.js и серверный рендеринг — в разделе Next.js и SSR.

Частые ошибки

Импортирован только @vega-ui/react/style.css: без @vega-ui/theme-core переменные не определены.
Класс темы стоит на внутренней обёртке: Dialog, Drawer и Sheet открываются без темы.
Montserrat не загружен, а набор шрифтов не заменён: текст отображается шрифтом Arial.
@vega-ui/icons импортируется, но не установлен: сборка не может его найти.

Работа над библиотекой

pnpm install
pnpm storybook
pnpm test
pnpm docs:validate

pnpm storybook: песочница компонентов.
pnpm test: тесты всех пакетов; тесты компонентов запускаются в Chromium, Firefox и WebKit.
pnpm --filter @vega-ui/react test: только тесты компонентов.
pnpm docs:validate: проверяет структуру документации.