Начало работы: React Router 7

Framework mode с SSR: стили и ThemeProvider подключаются в app/root.tsx

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

Remix v2 продолжился как React Router 7. Для проекта на Remix сначала пройдите официальную миграцию на React Router 7 (импорты из @remix-run/* меняются на react-router), дальше всё как в этом гайде.

npx create-react-router@7 my-app
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. Подключите стили и тему в root

Добавьте импорты рядом с import "./app.css", атрибуты темы — на <html> в Layout, а ThemeProvider — вокруг children. При SSR задайте locale в ThemeProvider: иначе числа и даты форматируются по локали сервера, а в браузере — по локали пользователя, и гидрация падает на несовпадении текста («1,200» против «1 200»).

import "./app.css";
import "valyro-ui/styles.css";
import { ThemeProvider } from "valyro-ui";

export function Layout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en" data-theme="glass" data-mode="light">
      <head>
        <meta charSet="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <Meta />
        <Links />
      </head>
      <body>
        <ThemeProvider theme="glass" mode="light" locale="en-US">
          {children}
        </ThemeProvider>
        <ScrollRestoration />
        <Scripts />
      </body>
    </html>
  );
}

4. Уберите фон из шаблона

Шаблон красит html, body классами bg-white dark:bg-gray-950 и перекрывает фон темы. Удалите этот блок, оставив @import "tailwindcss" и @theme, если используете Tailwind.

@import "tailwindcss";

@theme {
  --font-sans: "Inter", ui-sans-serif, system-ui, sans-serif,
    "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

5. Маршрут

Showcase — компонент из гайда по Next.js, без изменений.

import { Showcase } from "../Showcase";

export function meta() {
  return [{ title: "ValyroUI on React Router" }];
}

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

6. Соберите и запустите

npm run typecheck
npm run build
npm run start

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