Installation

Requirements

Regen expects a React app running through Vite. Add Vite and the React plugin if the parent app does not already have them.

pnpm add -D vite @vitejs/plugin-react

Install from the registry

pnpm add regen-ui lucide-react

Or install as a submodule

Add Regen under the parent repo, register it in pnpm-workspace.yaml, then install the workspace package from the consuming app.

git submodule add <regen-ui-repo-url> ref/regen

packages:
  - app
  - ref/regen

pnpm --filter app add regen-ui@workspace:* lucide-react

Enable the Vite plugin

The plugin is used in both Tailwind and non-Tailwind apps. It wires source imports, local package reloads, Tailwind processing, and theme isolation when requested.

import react from '@vitejs/plugin-react'
import regen from 'regen-ui/vite'
import { defineConfig } from 'vite'

export default defineConfig({
  plugins: [regen(), react()],
})

No Tailwind parent app

Import the compiled Regen stylesheet once from the app entrypoint.

import 'regen-ui/styles.css'

Tailwind parent app

Import Regen from the app stylesheet so Tailwind extracts the app and Regen together. Regen exposes semantic utilities such as bg-accent, text-foreground, and rounded-button.

@import 'tailwindcss';
@import 'regen-ui/tailwind.css';

Theme scope

Use the default non-isolated mode when Regen should share the parent app semantic tokens.

regen()

Use isolated mode when the parent app owns names like bg-accent and Regen should keep its generated utilities under rgn-*.

regen({ theme: 'isolated' })

Use a component

import { Button } from 'regen-ui'

export function SubmitButton() {
  return <Button variant="primary">Continue</Button>
}