Начало работы
Установка ValyroUI в Vite, Next.js, React Router, Astro, TanStack Start и другие: пакет, стили, ThemeProvider и первый компонент — по шагам.
React
- Vite — Клиентское SPA: стили импортируются один раз, `ThemeProvider` оборачивает приложение.
- Next.js — Пакет помечен `'use client'`: компоненты импортируются прямо из Server Components, тема ставится на `<html>` на сервере — без вспышки.
- React Router 7 — Framework mode с SSR: стили и `ThemeProvider` подключаются в `app/root.tsx`.
- TanStack Start — SSR на Vite: стили — ссылкой в `head()` корневого маршрута, тема — на `<html>` в `shellComponent`, поэтому первая отрисовка уже в теме.
- Waku — React Server Components: компоненты без функций в пропсах рендерятся прямо в серверных компонентах, интерактив — в файлах с `'use client'`.
- Astro — React-острова (`client:load`) с SSR; статичная разметка с классами пакета работает вообще без JS.
- Rsbuild — Клиентское SPA на Rspack: стили и `ThemeProvider` — в `src/index.tsx`, атрибуты темы — в своём HTML-шаблоне.
- Parcel — Клиентское SPA: стили и `ThemeProvider` подключаются в `src/index.tsx`, атрибуты темы — в `src/index.html`. Настройки резолвера не нужны: CSS-файлы пакета лежат по реальным путям.
- Electron — electron-vite: renderer — это Vite + React. CSP шаблона менять не нужно.
- Tauri — Фронтенд Tauri — это Vite + React: настройка как в гайде по Vite, CSP по умолчанию выключен.
- Laravel + Inertia — React-стартер Laravel (Inertia 3): `ThemeProvider` — в `withApp`, атрибуты темы — в Blade-шаблоне, фон и шрифт стартера уступают теме.
Только CSS
- HTML + CSS — Без React: один файл `valyro-ui/styles.css`, два атрибута на `<html>` и разметка с классами `ui-*`.
- Vue — Vue 3 + Vite без React: `valyro-ui/styles.css`, атрибуты темы на `<html>` и статичная разметка компонентов в шаблонах. Интерактивные компоненты — React-островом.
- Nuxt — SSR без вспышки: тема в cookie, `useHead` пишет её на `<html>` уже в серверном HTML; стили — через `css` в `nuxt.config.ts`.
- SvelteKit — SSR без вспышки: `hooks.server.ts` подставляет тему из cookie в `<html>` серверного HTML; стили импортируются в корневом layout.
- Angular — Без React: `valyro-ui/styles.css` через `@import` в `styles.css`, тема — атрибуты на `<html>` и маленький сервис на сигналах, разметка компонентов — прямо в шаблонах.
- SolidStart — SSR без вспышки: `entry-server.tsx` пишет тему из cookie на `<html>`; разметка компонентов — прямо в Solid JSX (`class`, как в HTML).
Ещё
- PHP — Пакет `php/` (Composer, PHP 8.1+) рендерит статичные компоненты на сервере: та же разметка, что у React, плюс `valyro-ui/styles.css` и атрибуты темы — без Node и React в рантайме.
- WordPress — Плагин `wordpress/ui-kit`: блоки и шорткоды на PHP-рендерере, тема и режим в настройках. Accordion, Tabs, FAQ и Pricing оживают через свой React 19 — в WordPress 7.1 `wp.element` всё ещё React 18.
- SwiftUI — Нативный Swift-пакет KitUI для iOS 17+ и macOS 14+: темы Vercel и Liquid Glass в SwiftUI, токены сгенерированы из тех же CSS-тем.