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

1npm install omverse-ui

2. Install Tailwind v4

terminal

tsx

1npm install tailwindcss @tailwindcss/vite

3. Configure vite.config.ts

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

vite.config.ts

tsx

1import { defineConfig } from 'vite'
2import react from '@vitejs/plugin-react'
3import tailwindcss from '@tailwindcss/vite'
4 
5export default defineConfig({
6  plugins: [
7    react(),
8    tailwindcss(),
9  ],
10})

4. Update index.css

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

index.css

tsx

1@import "tailwindcss";
2@import "omverse-ui/styles";
3@source "../node_modules/omverse-ui/dist/index.js";

5. Import CSS in main.tsx

main.tsx

tsx

1import './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

1import { Toaster } from 'omverse-ui'
2 
3function App() {
4  return (
5    <>
6      <Toaster position="bottom-right" />
7      {/* your app */}
8    </>
9  )
10}

7. Start using components

App.tsx

tsx

1import { Button, Badge, Input, Card } from 'omverse-ui'
2 
3export default function App() {
4  return (
5    <div>
6      <Button variant="filled">Get started</Button>
7      <Badge color="success">Live</Badge>
8      <Input label="Email" placeholder="you@example.com" />
9    </div>
10  )
11}