Installation - OmniUI

Alpha Release

OmniUI is in active development. NPM package and CDN coming soon. For now, clone the repository to get started.

Clone Repository

The recommended way to get started during alpha:

git clone https://github.com/TarkinLarson/OmniUI.git
cd OmniUI
npm install
npm run build

This will generate the compiled CSS in dist/omniui.css.

Include CSS

Link the compiled CSS in your HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My App</title>

    <!-- OmniUI CSS -->
    <link rel="stylesheet" href="path/to/omniui.css">
</head>
<body>
    <button class="omni-button" data-variant="primary">
        Hello OmniUI
    </button>
</body>
</html>

NPM (Coming Soon)

NPM package will be available at v1.0 release:

npm install omniui

CDN (Coming Soon)

CDN links will be available at v1.0 release:

<link rel="stylesheet" href="https://cdn.example.com/omniui@1.0.0/omniui.css">

Directory Structure

Key directories in the OmniUI repository:

omniui/
├── dist/                    # Compiled CSS (after build)
│   └── omniui.css
│
├── packages/core/src/
│   ├── css/
│   │   ├── tier1-css-only/  # CSS-only components
│   │   ├── tier3-interactive/ # JS-required component styles
│   │   ├── core/            # Tokens, animations, typography
│   │   └── utilities/       # Variant system, accessibility
│   │
│   └── js/
│       └── tier3-interactive/ # JavaScript components
│
├── docs/site/               # Documentation site
│   └── components/          # Component docs pages
│
└── examples/                # Working examples
    └── tier1-css-only/      # CSS-only component demos

Build Options

Command	Description
`npm run build`	Build CSS (runs PostCSS pipeline)
`npm run dev`	Start development server with live reload
`npm run test`	Run test suite
`npm run lint`	Lint CSS and JavaScript

Framework Integration

React

Import the CSS in your entry point:

// index.js or App.js
import 'path/to/omniui.css';

function App() {
    return (
        <button className="omni-button" data-variant="primary">
            Click me
        </button>
    );
}

Vue

Import in your main entry:

// main.js
import 'path/to/omniui.css';
import { createApp } from 'vue';
import App from './App.vue';

createApp(App).mount('#app');

Vanilla JavaScript

Just link the CSS. No JavaScript needed for Tier 1 components:

<link rel="stylesheet" href="omniui.css">

<!-- Use components directly -->
<button class="omni-button" data-variant="success">Save</button>

Astro / Static Sites

Perfect for static site generators. Just include the CSS:

---
// Astro component
---
<html>
<head>
    <link rel="stylesheet" href="/omniui.css">
</head>
<body>
    <div class="omni-card">
        <slot />
    </div>
</body>
</html>

Browser Support

OmniUI uses modern CSS features and targets evergreen browsers:

Browser	Minimum Version
Chrome	105+
Firefox	121+
Safari	15.4+
Edge	105+

Modern CSS Features Used

:where(), :has(), color-mix(), logical properties, container queries. No polyfills provided.