Ship UI with pure CSS

31 components. 23 themes. Dark mode. Gradient mode. Zero JavaScript. Zero dependencies. Works with every framework — or none at all.

Browse Components GitHub

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

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

<link rel="stylesheet" href="themes/ocean.css">

Why UI CSS?

Everything you need to build beautiful interfaces, nothing you don't.

Pure CSS. That's it.

Drop a CSS file into any project. No build step, no config, no package manager. Link it and go.

Framework agnostic

React, Vue, Svelte, Angular, HTMX, vanilla HTML — it doesn't matter. Plain CSS classes work everywhere.

Dark mode built in

Toggle with a single data attribute. Every component, every color, every shadow — all calibrated for both themes.

23 themes included

23 built-in themes, or override a few CSS custom properties to create your own. Hover, active, and light variants are derived automatically via color-mix().

Gradient mode

Toggle gradient mode with a single attribute. Every button, badge, toggle, progress bar, and more gets a beautiful gradient — works with all themes.

Mobile-first responsive

Touch-optimized hit targets, hover-only effects on hover-capable devices, and fluid sizing from phone to desktop.

Accessibility ready

Focus-visible outlines, proper disabled states, screen-reader-friendly markup patterns, and WCAG-aware contrast ratios.

Lightweight

Small file size with zero bloat. No runtime, no unused code — just the styles you need, ready to serve.

Customizable

Override a few CSS custom properties to match your brand. Colors, radii, shadows, fonts — all controlled by variables.

Markup you already know

Standard HTML elements with simple CSS classes. No custom elements, no data-binding, no magic.

HTML

<!-- A card with actions -->
<div class="ui-card">
  <div class="ui-card-body">
    <h3 class="ui-card-title">Hello</h3>
    <p class="ui-card-text">Clean markup.</p>
    <button class="ui-btn">Action</button>
  </div>
</div>

<!-- A form field -->
<div class="ui-field">
  <label class="ui-label">Email</label>
  <input class="ui-input" type="email">
</div>

Theming

/* Override 5 variables, retheme everything */
:root {
  --ui-primary:   #6366f1;
  --ui-success:   #10b981;
  --ui-danger:    #ef4444;
  --ui-radius:    10px;
  --ui-font:      "Inter", sans-serif;
}

/* Hover, active, light variants?
   Derived automatically. Done. */

Components preview

A glimpse at what's included. All rendered with the CSS you just saw.

Buttons

Form inputs

Toggle & Checkbox

Active Agree

Badges & Tags

Default Success Danger Tag Done

Avatars

Progress & Skeleton

Spinners

Table

Name ↑	Role ↕	Status
Alice Chen	Engineer	Active
Bob Martinez	Designer	Away
Carol Davis	Manager	Active