Getting started
Set up ValyroUI in Vite, Next.js, React Router, Astro, TanStack Start and more: install, styles, ThemeProvider and the first component, step by step.
React
- Vite — Client-side SPA: import the styles once and wrap the app in `ThemeProvider`.
- Next.js — The package is marked `'use client'`, so you can import components straight into Server Components; the theme is set on `<html>` on the server, with no flash.
- React Router 7 — Framework mode with SSR: add the styles and `ThemeProvider` in `app/root.tsx`.
- TanStack Start — SSR on Vite: the styles are linked from the root route's `head()` and the theme is set on `<html>` in `shellComponent`, so the first paint is already themed.
- Waku — React Server Components: components without function props render directly in server components, and interactive parts live in `'use client'` files.
- Astro — React islands (`client:load`) with SSR; static markup with the package's classes works with no JS at all.
- Rsbuild — Client-side SPA on Rspack: styles and `ThemeProvider` go in `src/index.tsx`, theme attributes in your own HTML template.
- Parcel — Client-side SPA: styles and `ThemeProvider` go in `src/index.tsx`, theme attributes in `src/index.html`. No resolver settings needed: the package keeps its CSS files at real paths.
- Electron — electron-vite: the renderer is Vite + React. No need to change the template's CSP.
- Tauri — The Tauri frontend is Vite + React: set it up as in the Vite guide; CSP is off by default.
- Laravel + Inertia — Laravel's React starter kit (Inertia 3): `ThemeProvider` goes in `withApp`, the theme attributes in the Blade template, and the starter's background and font give way to the theme.
CSS only
- HTML + CSS — No React: a single `valyro-ui/styles.css` file, two attributes on `<html>` and markup with `ui-*` classes.
- Vue — Vue 3 + Vite without React: `valyro-ui/styles.css`, theme attributes on `<html>` and static component markup in templates. Interactive components run as a React island.
- Nuxt — Flash-free SSR: the theme lives in a cookie, and `useHead` writes it on `<html>` in the server-rendered HTML; styles go through `css` in `nuxt.config.ts`.
- SvelteKit — Flash-free SSR: `hooks.server.ts` injects the theme from a cookie into the server-rendered `<html>`; styles are imported in the root layout.
- Angular — No React: `valyro-ui/styles.css` via `@import` in `styles.css`, the theme via attributes on `<html>` and a small signals-based service, and component markup straight in templates.
- SolidStart — Flash-free SSR: `entry-server.tsx` writes the theme from a cookie on `<html>`; component markup goes straight into Solid JSX (`class`, as in HTML).
More
- PHP — The `php/` package (Composer, PHP 8.1+) renders static components on the server: the same markup as React, plus `valyro-ui/styles.css` and the theme attributes — no Node or React at runtime.
- WordPress — The `wordpress/ui-kit` plugin: blocks and shortcodes built on the PHP renderer, with theme and mode in the settings. Accordion, Tabs, FAQ and Pricing come alive with their own React 19 — in WordPress 7.1, `wp.element` is still React 18.
- SwiftUI — KitUI, a native Swift package for iOS 17+ and macOS 14+: the Vercel and Liquid Glass themes in SwiftUI, with tokens generated from the same CSS themes.