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

React-острова (client:load) с SSR; статичная разметка с классами пакета работает вообще без JS

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

npm create astro@latest my-app -- --template minimal
cd my-app
npx astro add react

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 в каждом острове

Каждый остров — отдельный React-корень, поэтому оборачивайте содержимое острова в ThemeProvider (графики и часть компонентов читают тему из контекста). Store тостов общий для всех островов страницы.

import { ThemeProvider } from 'valyro-ui';
import { Showcase } from './Showcase';

// Every Astro island is its own React root, so each one gets a ThemeProvider.
export default function ShowcaseIsland() {
  return (
    <ThemeProvider theme="glass" mode="light" locale="en-US">
      <Showcase />
    </ThemeProvider>
  );
}

4. Страница

Стили импортируются во frontmatter, атрибуты темы — на <html>. Без директивы client:* компонент отрендерится в HTML без JS. Showcase — из гайда по Next.js (строку 'use client' можно убрать).

---
import 'valyro-ui/styles.css';
import ShowcaseIsland from '../components/ShowcaseIsland';
---

<html lang="en" data-theme="glass" data-mode="light">
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width" />
		<title>ValyroUI on Astro</title>
	</head>
	<body>
		<!-- Static markup: plain HTML + ValyroUI classes, no JavaScript shipped. -->
		<button class="ui-button" data-variant="secondary" data-size="md" type="button">
			<span class="ui-button__label">Static button</span>
		</button>
		<ShowcaseIsland client:load />
	</body>
</html>

5. Соберите

npm run build
npm run preview

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