omverse-ui

A modern, fully-typed React component library — 27 components built with Tailwind v4, TypeScript & CVA.

✨ Features

• 🎨 27 components — buttons, inputs, modals, toasts, date pickers, and more
• 🌈 Material Design 3 foundation with modern web-first variants
• 💅 Tailwind v4 — design tokens, semantic colors, consistent spacing
• 🔷 Fully typed — TypeScript with complete prop intellisense
• 🌙 Dark mode ready
• ⚡ Tree-shakeable — only ship what you use

📦 Installation

npm install omverse-ui

🚀 Quick Setup

Step 1 — Install Tailwind v4

npm install tailwindcss @tailwindcss/vite

Step 2 — Add Tailwind plugin to vite.config.ts

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

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

Step 3 — Update your index.css

@import "tailwindcss";

/* omverse-ui design tokens (colors, spacing, typography) */
@import "omverse-ui/styles";

/* Tell Tailwind to scan omverse-ui components for classes */
@source "../node_modules/omverse-ui/dist/index.js";

Step 4 — Import CSS in main.tsx

import React from 'react'
import ReactDOM from 'react-dom/client'
import './index.css'   // ← must be here
import App from './App'

ReactDOM.createRoot(document.getElementById('root')!).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
)

Step 5 — Add Toaster to your app root

Required only if you use the toast() API.

import { Toaster } from 'omverse-ui'

function App() {
  return (
    <>
      <Toaster position="top-right" />
      {/* rest of your app */}
    </>
  )
}

🧩 Usage

import { Button, Input, Badge, Avatar, Card, CardBody } from 'omverse-ui'

export default function App() {
  return (
    <div className="p-8 flex flex-col gap-4">

      {/* Button variants */}
      <div className="flex gap-2">
        <Button variant="filled">Save</Button>
        <Button variant="outlined">Cancel</Button>
        <Button variant="tonal">Draft</Button>
      </div>

      {/* Badges */}
      <div className="flex gap-2">
        <Badge color="success">Live</Badge>
        <Badge color="warning">Beta</Badge>
        <Badge color="error">Deprecated</Badge>
      </div>

      {/* Input */}
      <Input label="Email" placeholder="[email protected]" clearable />

      {/* Avatar */}
      <Avatar name="John Doe" size="md" />

      {/* Card */}
      <Card variant="elevated">
        <CardBody>Hello from omverse-ui!</CardBody>
      </Card>

    </div>
  )
}

🔔 Toast

import { toast } from 'omverse-ui'

// Basic
toast('Hello world!')

// Types
toast.success('Profile saved!')
toast.error('Something went wrong')
toast.warning('This cannot be undone')
toast.info('A new version is available')

// Promise (shows loading → success/error automatically)
toast.promise(saveData(), {
  loading: 'Saving...',
  success: 'Saved successfully!',
  error: 'Failed to save',
})

📚 Components

Form

| Component | What it does | |---|---| | Button | 6 variants · 5 sizes · loading · icon support | | IconButton | Icon-only button · fab · toggle · badge | | Input | Text · textarea · password · clearable · copyable | | Select | Single/multi · searchable · grouped options | | Checkbox | 6 colors · indeterminate · card style · group | | Radio | Default · card · button · segmented · group | | Switch | 6 colors · icon labels · card style | | Slider | 4 thumb styles · range · vertical · marks | | DatePicker | 4 variants · range · dual month · time picker |

Display

| Component | What it does | |---|---| | Badge | 4 variants · 6 colors · dot · pulse | | Avatar | 6 sizes · circle/square · group · status | | Chip | 4 variants · 6 colors · selectable · group | | Spinner | 9 variants · skeleton · overlay | | Progress | Linear · circular · segmented · multi | | Divider | 7 styles · label · icon · inset · chat date |

Layout & Navigation

| Component | What it does | |---|---| | Navbar | 16 variants · sidebar · collapsible | | Breadcrumb | 11 variants · collapsible · numbered steps | | Pagination | 17 variants · dots · table · load more | | Tabs | 9 variants · horizontal + vertical · step tabs | | Stepper | 10 variants · horizontal + vertical · timeline |

Feedback & Overlay

| Component | What it does | |---|---| | Toast | 8 types · 6 positions · promise · progress | | Dialog | 5 types · sizes · command palette | | Tooltip | 3 variants · 4 positions · rich content | | Popover | 4 sides · 3 alignments · arrow |

Content

| Component | What it does | |---|---| | Card | 6 variants · interactive · flip · media | | Accordion | 10 variants · single/multiple · animated | | DropdownMenu | Checkbox · radio · search · color picker · emoji |

⚙️ Requirements

| Requirement | Version | |---|---| | React | 18+ | | Tailwind CSS | v4 | | TypeScript | Recommended | | Vite | Recommended |

📄 License

MIT © Om

Built with ❤️ using React, Tailwind v4, TypeScript and CVA.