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

Клиентское SPA: стили импортируются один раз, ThemeProvider оборачивает приложение

1. Создайте приложение

npm create vite@latest my-app -- --template react-ts
cd my-app

2. Установите пакет

Подходят react и react-dom 17, 18 и 19 (на React 17 id из useId появляются сразу после монтирования). Пакет — ES-модули (плюс CommonJS-копия для require()), без runtime-зависимостей, по файлу на модуль: в бандл попадают только импортированные компоненты, а как грузить и CSS только их — в разделе «Только нужный CSS» ниже. Шрифты — отдельные файлы: тема vercel (по умолчанию в ThemeProvider) использует Geist, поэтому рядом со стилями импортируйте valyro-ui/fonts/geist.css и valyro-ui/fonts/geist-mono.css, иначе текст будет системным шрифтом; glass использует системные шрифты, ей файлы не нужны. Пока пакет не опубликован, соберите и упакуйте его в репозитории (npm run build:core && npm pack ./dist/core) и установите tarball из корня репозитория: npm install /path/to/ValyroUI/valyro-ui-0.1.0.tgz.

npm install valyro-ui

3. Подключите стили и тему

ThemeProvider ставит data-theme и data-mode на <html>, поэтому меню, диалоги и тосты в порталах получают те же токены. Удалите шаблонные index.css и App.css вместе с импортами: :root в них задаёт letter-spacing, а #root центрирует текст — это наследуют все компоненты; фон страницы рисует сама тема.

import { StrictMode } from 'react';
import { createRoot } from 'react-dom/client';
import 'valyro-ui/styles.css';
import { ThemeProvider } from 'valyro-ui';
import App from './App.tsx';

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

4. Используйте компоненты

Компонент Showcase из гайда по Next.js работает без изменений (директива 'use client' в Vite ни на что не влияет). <Toaster /> рендерится один раз, toast() вызывается откуда угодно.

import { Showcase } from './Showcase';

export default function App() {
  return <Showcase />;
}

5. Соберите

npm run build

Другие фреймворки