Getting started: 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

1. Create the app

Tested with Parcel 2.16. The scaffolder installs dependencies and makes the first git commit for you. On Windows it can fail at that commit (fatal: paths 'commit …' with -a does not make sense) after everything is installed: the app is ready, carry on.

npm create parcel@latest react-client 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. Theme on <html>

<!doctype html>
<html lang="en" data-theme="glass" data-mode="light">
  <head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Parcel React App</title>
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="index.tsx"></script>
  </body>
</html>

4. Styles and ThemeProvider

The template's src/App.css centers everything on html — delete it and its import in App.tsx.

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

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

5. Use the components

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

import { Showcase } from './Showcase';

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

6. TypeScript 6+

The template has a tsconfig.json but not TypeScript itself. If you type-check with tsc 6 or 7, noUncheckedSideEffectImports (on by default) rejects imports of the app's own CSS files (TS2882), since Parcel has no declarations for *.css. The package already ships a declaration for valyro-ui/styles.css; add one for the rest yourself.

// Lets TypeScript 6+ accept side-effect imports of the app's own CSS files.
declare module '*.css';

7. Build

npm run build
npx serve dist

Other frameworks