Getting started: Rsbuild

Client-side SPA on Rspack: styles and ThemeProvider go in src/index.tsx, theme attributes in your own HTML template

1. Create the app

Tested with Rsbuild 2.2.

npm create rsbuild@latest my-app -- --template react-ts --no-git
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>

Rsbuild has no option for <html> attributes, and its built-in template is baked into the package. Create your own index.html and point html.template at it — Rsbuild adds the meta tags, title, scripts and CSS <link> for you.

<!doctype html>
<html lang="en" data-theme="glass" data-mode="light">
  <head></head>
  <body>
    <div id="<%= mountId %>"></div>
  </body>
</html>

4. Use the template

import { defineConfig } from '@rsbuild/core';
import { pluginReact } from '@rsbuild/plugin-react';

// Docs: https://rsbuild.rs/config/
export default defineConfig({
  plugins: [pluginReact()],
  html: {
    // Custom template so <html> carries the theme before any JS runs.
    template: './index.html',
  },
});

5. Styles and ThemeProvider

The template's src/App.css paints body (gradient, white text) — delete it and its import in App.tsx.

import { StrictMode } from 'react';
import { createRoot } from 'react-dom/client';
import 'valyro-ui/styles.css';
import { ThemeProvider } from 'valyro-ui';
import App from './App';

const rootEl = document.getElementById('root');
if (rootEl) {
  const root = createRoot(rootEl);
  root.render(
    <StrictMode>
      <ThemeProvider theme="glass" mode="light">
        <App />
      </ThemeProvider>
    </StrictMode>,
  );
}

6. Use the components

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

import { Showcase } from './Showcase';

const App = () => {
  return <Showcase />;
};

export default App;

7. Build

npm run build
npx tsc --noEmit
npm run preview

Other frameworks