v0.5.0 Alpha

OmniUI

The foundation layer

A minimal, unopinionated component library. CSS-first, framework-agnostic, progressively enhanced. The building blocks for your design system.

Get Started Components

The Omni Ecosystem

Three layers, each building on the last. Use what you need.

Available Now

OmniUI

The component library. 50+ CSS-first components that work anywhere. No opinions, no branding, just functional building blocks.

Explore
Coming Soon

OmniDS

The design system layer. Brand tokens, themed components, design guidelines. Your company's visual identity, built on OmniUI.

 Coming Soon

OmniShell

The application shell. Layouts, navigation patterns, responsive scaffolding. The structure for your web applications.

Quick Start

Alpha Release

OmniUI is in active development. npm package coming soon. For now, clone the repo or grab the CSS directly.

Clone and build:

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

Then include the CSS and start using components:

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

<button class="omni-button" data-variant="primary">Click me</button>

<div class="omni-card">
  <h3>Card Title</h3>
  <p>Works without JavaScript.</p>
</div>

Why OmniUI?

CSS-First

Core components work without JavaScript. Use them in emails, static sites, server-rendered pages. Progressive enhancement when you need interactivity.

Framework Agnostic

React, Vue, Svelte, vanilla JS, or plain HTML. Data attributes for variants, not framework-specific props. Use it anywhere.

Unopinionated

No brand colors, no design opinions. Semantic tokens you can override. A foundation to build your design system on, not someone else's.

Accessible by Default

ARIA patterns, keyboard navigation, reduced motion support. Accessibility isn't an add-on, it's built into every component.

Documentation

Introduction

Philosophy, architecture, and how OmniUI works.

Installation

Setup options, build process, and integration guides.

Theming

Customizing colors, typography, and design tokens.

Components

50+ components across three tiers:

Tier 1: CSS-Only

Zero JavaScript required. Works everywhere.

Button Button Group Card Badge Tag Alert Banner Notice Table Input Checkbox Radio Toggle Select Range Slider Color Input File Upload Temporal Inputs Form Layout Progress Meter Spinner Skeleton Indicator Avatar Metric Heatmap List Group Code Block KBD Accordion Tooltip Popover Scroll Gallery Navbar Nav Sidebar Breadcrumb Pagination Stepper Bottom Nav Footer Hero Grid Widget Divider Empty State FAB Engage Vote

Tier 2: JS Enhanced

CSS components with optional JavaScript enhancements.

Accordion Scroll Gallery Meter Progress Checkbox

Tier 3: Interactive

JavaScript-powered components for complex interactions.

Dashboard Modal Dropdown Tabs Toast Combobox Tree View Sortable Virtual Scroll Form Wizard

Data Attribute API

Clean, consistent, framework-agnostic:

<!-- Variants -->
<button class="omni-button" data-variant="primary">Primary</button>
<button class="omni-button" data-variant="danger">Danger</button>

<!-- Sizes -->
<button class="omni-button" data-size="sm">Small</button>
<button class="omni-button" data-size="lg">Large</button>

<!-- Styles -->
<button class="omni-button" data-variant="primary" data-variant-style="outline">
  Outline
</button>

Theme Support

Built-in light, dark, and high-contrast modes:

<html>                              <!-- Light (default) -->
<html data-color-mode="dark">       <!-- Dark mode -->
<html data-color-mode="high-contrast">  <!-- High contrast -->

30 semantic color tokens. Override what you need, keep the rest.