Getting started: Tauri

The Tauri frontend is Vite + React: set it up as in the Vite guide; CSP is off by default

1. Create the app

Tested with 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. Install the package

Works with react and react-dom 17, 18 and 19 (React 17: ids from useId appear right after mount). The package ships ES modules (plus a CommonJS copy for require()), has no runtime dependencies and has one file per module, so your bundle includes only the components you import; to load only their CSS as well, see “Only the CSS you need” below. Fonts are separate files: the vercel theme (the ThemeProvider default) uses Geist, so import valyro-ui/fonts/geist.css and valyro-ui/fonts/geist-mono.css next to the styles, or text falls back to the system font; glass uses system fonts and needs none. Until the package is published, build and pack it in the repository (npm run build:core && npm pack ./dist/core) and install the tarball from the repository root: npm install /path/to/ValyroUI/valyro-ui-0.1.0.tgz.

npm install valyro-ui

3. Theme on <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. Styles and ThemeProvider

The template's src/App.css sets the background and color on :root — delete it and its import in 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. Use the components

Showcase is the component from the Next.js guide, unchanged.

import { Showcase } from "./Showcase";

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

export default App;

6. Build

The first Rust release build takes a few minutes.

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

Other frameworks