Getting started: Electron

electron-vite: the renderer is Vite + React. No need to change the template's CSP

1. Create the app

Tested with electron-vite 5 and Electron 39.

npm create @quick-start/electron@latest my-app -- --template react-ts --skip
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>

Leave the template's CSP as is: styles.css has no url() or @import, the font files of valyro-ui/fonts/*.css are bundled into the renderer and load under default-src 'self', and React applies inline styles through the CSSOM, which works even with a strict style-src 'self'.

<!doctype html>
<html data-theme="glass" data-mode="light">
  <head>
    <meta charset="UTF-8" />
    <title>Electron</title>
    <!-- https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP -->
    <meta
      http-equiv="Content-Security-Policy"
      content="default-src 'self'; script-src 'self'; style-src 'self' 'unsafe-inline'; img-src 'self' data:"
    />
  </head>

  <body>
    <div id="root"></div>
    <script type="module" src="/src/main.tsx"></script>
  </body>
</html>

4. Styles and ThemeProvider

Replace the template's ./assets/main.css (background and colors on body) with the package styles. Electron formats numbers in the OS locale (“1 200” instead of “1,200”) — for a consistent format, pass locale to ThemeProvider.

import 'valyro-ui/styles.css'

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

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

5. Use the components

Showcase is the component from the Next.js guide. The template's linter requires an explicit return type: export function Showcase(): React.JSX.Element.

import { Showcase } from './Showcase'

function App(): React.JSX.Element {
  return <Showcase />
}

export default App

6. Build

npm run build type-checks the main and renderer processes and builds the app.

npm run build

Other frameworks