FeaturesQuick StartComponentsDocumentationGet Started
NewOmnira UI is now available — Get started in seconds

The Glassmorphism
Design System

A premium component library with glass effects, dark-first theming, and 500+ modular components. Install the foundation, extend with what you need.

See It in Action

Real components, rendered live. Every element follows the glassmorphism design language.

Buttons
Badges
NewActiveBetaDefaultDeprecatedInfoInformational status indicator
Form
Cards
Glass CardBackdrop blur, inset shadows, subtle borders.
Accent CardLime-tinted glass with accent borders.

Quick Start

Terminal
# Set up Omnira UI with interactive config
$npx omnira-ui init
 
Omnira UI Setup
 
?Project name:my-app
?Accent color:Lime
?Theme mode:Dark-first
 
Created omnira.config.ts
Generated CSS variables
Ready to go!

Choose from 10 accent colors — Lime, Blue, Teal, Purple, Pink, and more.

70+Components
10Accent Colors
2Theme Modes
0Dependencies

Built for Modern Apps

Every component follows the glassmorphism design language with consistent tokens and patterns.

Glass Design System

Every surface uses backdrop blur, subtle borders, and inset shadows for a premium glass effect.

Dark & Light Mode

Seamless theme switching with CSS custom properties. Every token adapts automatically.

Install & Extend

Install the base package for design tokens and theming, then copy individual components into your project.

Modular Components

Each component is a self-contained folder with TSX, CSS Module, and barrel export — built on the Omnira foundation.

CSS Modules

No Tailwind required. Built entirely with CSS Modules and custom properties for full control.

Accessible

Built with semantic HTML, ARIA attributes, keyboard navigation, and focus management.

How It Works

Three steps to a beautiful glassmorphism UI.

1

Install & Configure

Run npx omnira-ui init to choose your accent color, theme mode, and generate your config.

2

Browse & Copy Components

Pick the components you need from the docs. Each one is a self-contained folder — just drop it into your project.

3

Customize & Ship

Tweak the CSS variables to match your brand. The glassmorphism system adapts to any color palette.

Your Brand, Your Color

Choose from 10 built-in accent color presets. Every token, shadow, and border adapts instantly.

Lime#D2FE17
Blue#2196F3
Cyan#00BCD4
Teal#009688
Green#4CAF50
Purple#9C27B0
Pink#E91E63
Orange#FF5722
Red#F44336
Yellow#FFEB3B
npx omnira-ui initto pick your accent color

Frequently Asked Questions

Everything you need to know about Omnira UI.

Is Omnira UI free to use?

Yes. Omnira UI is open source and free for personal and commercial projects. Install the base design system and copy any components you need.

Does it work with Next.js, Remix, or Vite?

Absolutely. Omnira UI uses CSS Modules and CSS custom properties with zero framework lock-in. It works with any React-based framework out of the box.

How is this different from shadcn/ui or Radix?

Omnira UI is built around a glassmorphism design language — backdrop blur, inset shadows, and glass surfaces on every component. It ships with 10 accent color presets and a dark-first theme system.

Do I need Tailwind CSS?

No. Omnira UI is built entirely with CSS Modules and CSS custom properties. No Tailwind dependency — you have full control over every token.

Can I customize the accent color?

Yes. Run npx omnira-ui init to choose from 10 accent colors (Lime, Blue, Teal, Purple, Pink, and more). The CLI generates your config and CSS overrides automatically.

Open Source & Free

Omnira UI is open source, free forever, and built for the community. Star us on GitHub, contribute components, or just copy what you need.