DocsInstallation

Installation

Get omverse-ui up and running in your React project in under 5 minutes.

Requirements

PackageVersionNote
React18+Hooks + concurrent features
Tailwind CSSv4Required for utility classes
Vite or Next.jsRecommendedFirst-class Tailwind v4 support
TypeScriptRecommendedFull type definitions included

1. Install omverse-ui

terminal
tsx
npm install omverse-ui

2. Install Tailwind v4

terminal
tsx
npm install tailwindcss @tailwindcss/vite

3. Configure vite.config.ts

Add the Tailwind v4 Vite plugin — no tailwind.config.js needed.

vite.config.ts
tsx
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import tailwindcss from '@tailwindcss/vite'
 
export default defineConfig({
plugins: [
react(),
tailwindcss(),
],
})

4. Update index.css

Import Tailwind, the omverse-ui design tokens, and tell Tailwind where to scan for class usage.

index.css
tsx
@import "tailwindcss";
@import "omverse-ui/styles";
@source "../node_modules/omverse-ui/dist/index.js";

5. Import CSS in main.tsx

main.tsx
tsx
import './index.css'

6. Add Toaster to app root

Required only if you use the toast() API. Place it once at the top level so toasts render above all other content.

App.tsx
tsx
import { Toaster } from 'omverse-ui'
 
function App() {
return (
<>
<Toaster position="bottom-right" />
{/* your app */}
</>
)
}

7. Start using components

App.tsx
tsx
import { Button, Badge, Input, Card } from 'omverse-ui'
 
export default function App() {
return (
<div>
<Button variant="filled">Get started</Button>
<Badge color="success">Live</Badge>
<Input label="Email" placeholder="you@example.com" />
</div>
)
}