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

Фронтенд Tauri — это Vite + React: настройка как в гайде по Vite, CSP по умолчанию выключен

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

Проверено с Tauri 2.12 (Rust 1.97).

npm create tauri-app@latest my-app -- --manager npm --template react-ts --identifier com.example.uikit --yes
cd my-app
npm install

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. Тема на <html>

<!doctype html>
<html lang="en" data-theme="glass" data-mode="light">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Tauri + React + Typescript</title>
  </head>

  <body>
    <div id="root"></div>
    <script type="module" src="/src/main.tsx"></script>
  </body>
</html>

4. Стили и ThemeProvider

Шаблонный src/App.css задаёт фон и цвет на :root — удалите его и импорт в App.tsx.

import React from "react";
import ReactDOM from "react-dom/client";
import "valyro-ui/styles.css";
import { ThemeProvider } from "valyro-ui";
import App from "./App";

ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
  <React.StrictMode>
    <ThemeProvider theme="glass" mode="light">
      <App />
    </ThemeProvider>
  </React.StrictMode>,
);

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

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

import { Showcase } from "./Showcase";

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

export default App;

6. Соберите

Первая release-сборка Rust занимает несколько минут.

npm run build
npm run tauri build -- --no-bundle

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