Getting started: React Router 7

Framework mode with SSR: add the styles and ThemeProvider in app/root.tsx

1. Create the app

Remix v2 continues as React Router 7. For a Remix project, first follow the official migration to React Router 7 (imports from @remix-run/* become react-router); after that, everything works as in this guide.

npx create-react-router@7 my-app
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 in root

Add the imports next to import "./app.css", put the theme attributes on <html> in Layout, and wrap children in ThemeProvider. With SSR, pass locale to ThemeProvider. Otherwise numbers and dates are formatted in the server locale on the server and in the user locale in the browser, and hydration fails on the mismatched text (“1,200” vs “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. Remove the template background

The template paints html, body with the bg-white dark:bg-gray-950 classes, covering the theme background. Delete that block, keeping @import "tailwindcss" and @theme if you use 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. Route

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

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

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

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

6. Build and run

npm run typecheck
npm run build
npm run start

Other frameworks