Getting started: Vite

Client-side SPA: import the styles once and wrap the app in ThemeProvider

1. Create the app

npm create vite@latest my-app -- --template react-ts
cd my-app

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. Add the styles and theme

ThemeProvider sets data-theme and data-mode on <html>, so menus, dialogs and toasts rendered in portals get the same tokens. Delete the template's index.css and App.css with their imports: :root there sets letter-spacing and #root centers text, and both are inherited by every component; the theme paints the page background itself.

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

createRoot(document.getElementById('root')!).render(
  <StrictMode>
    <ThemeProvider theme="glass" mode="light">
      <App />
    </ThemeProvider>
  </StrictMode>,
);

4. Use the components

The Showcase component from the Next.js guide works unchanged (the 'use client' directive has no effect in Vite). Render <Toaster /> once and call toast() from anywhere.

import { Showcase } from './Showcase';

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

5. Build

npm run build

Other frameworks