Omnira UI — Premium Glassmorphism Components

1. Install Omnira UI

Install the Omnira UI package and its peer dependencies into your project.

bash
# Using npm
npx omnira-ui@latest init

# Using pnpm
pnpm dlx omnira-ui@latest init

# Using yarn
yarn dlx omnira-ui@latest init

Or install the package directly:

bash
# Using npm
npm install omnira-ui

# Using pnpm
pnpm add omnira-ui

# Using yarn
yarn add omnira-ui

2. Install Peer Dependencies

Omnira UI requires the following peer dependencies for icons and animations.

pnpm add iconsax-react framer-motion

3. Configure the Design System

Add the Omnira UI design tokens to your globals.css. This includes all CSS custom properties for colors, shadows, borders, radii, and typography.

css
/* globals.css — Import the Omnira UI design tokens */
@import "omnira-ui/styles";

/* Or manually add the data-theme selectors */
[data-theme="dark"] {
    --color-lime: #D2FE17;
    --color-bg-primary: #202020;
    --color-bg-card: rgba(248, 248, 248, 0.03);
    --color-text-primary: rgba(248, 248, 248, 0.95);
    /* ... full token set */
}

[data-theme="light"] {
    --color-lime: #8AB400;
    --color-bg-primary: #f5f5f7;
    --color-bg-card: rgba(255, 255, 255, 0.7);
    --color-text-primary: rgba(18, 18, 18, 0.95);
    /* ... full token set */
}

4. Set Up Fonts

Omnira UI uses Host Grotesk (Bold 700) for display/headlines and Rubik for body text.

tsx
// app/layout.tsx
import { Rubik } from "next/font/google";

const rubik = Rubik({
    subsets: ["latin"],
    weight: ["300", "400", "500", "600", "700"],
    variable: "--font-rubik",
    display: "swap",
});

// Add Host Grotesk as a local @font-face in globals.css
// Download HostGrotesk-Bold.woff2 to public/fonts/

5. Start Using Components

Import and use Omnira UI components in your application. Each component is self-contained and fully typed.

tsx
import { Button } from "omnira-ui/Button";
import { Badge } from "omnira-ui/Badge";
import { Input } from "omnira-ui/Input";
import { Card } from "omnira-ui/Card";

export default function MyPage() {
    return (
        <Card variant="standard" padding="lg">
            <h2>Welcome to Omnira UI</h2>
            <Input label="Email" placeholder="you@example.com" />
            <Button variant="primary">Get Started</Button>
            <Badge variant="accent">New</Badge>
        </Card>
    );
}