regen-ui

Regen

Reusable Tempo UI primitives for React apps.

Development

pnpm install
pnpm dev

Scripts

• pnpm dev starts the local gallery app.
• pnpm check formats and lints source files.
• pnpm check:types runs TypeScript checks.
• pnpm build builds the package.

Installation

Import components from regen-ui and shared styles from regen-ui/styles.css.

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

pnpm add -D vite @vitejs/plugin-react

Install Regen with its icon peer dependency:

pnpm add regen-ui lucide-react

Enable the Regen Vite plugin in the parent app:

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

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

Tailwind apps can instead import Regen’s Tailwind-native source CSS from regen-ui/tailwind.css inside their app CSS. Regen exposes utility-scoped semantic Tailwind classes such as bg-accent, text-foreground, border-border, outline-focus, and rounded-button.

If the parent app already registers @tailwindcss/vite, keep importing regen-ui/tailwind.css and disable Regen's extra Tailwind plugin:

regen({ tailwindPlugin: false })

Use isolated theme mode when the parent app should keep its own semantic tokens:

regen({ theme: 'isolated' })

To use Regen from a submodule, add Regen to your packages and register ref/regen in pnpm-workspace.yaml.

packages:
  - app
  - ref/regen

Then install the workspace package:

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