Init UI: A Lightweight CSS Framework That Generates Its Color Theme From One Line of Code

8 hours 0 3 3 min read

Init UI is a small, dependency-free CSS framework built to give you a polished, consistent interface without heavy configuration. Its entire color palette is generated automatically from oklch(), dark mode works out of the box, and the framework ships with more than 30 ready-made components for most modern web interface needs.

Init UI: A Lightweight CSS Framework That Generates Its Color Theme From One Line of Code

Table of Contents

Why Init UI is Worth a Try
Layout System & Components
Installation
Try It Now
What’s Next

Read Init UI Docs

Why Init UI is Worth a Try

Unlike heavy utility-first frameworks, Init UI takes a minimal and opinionated approach. Every design decision is made to reduce the time you spend tweaking CSS by hand:

Change the theme with one line of CSS. Override --iu-primary-base (or the remaining 5 root variables: neutral, success, danger, warning, info), and the entire 11-step color scale, gradients, focus ring, and contrast pairs will auto-update thanks to oklch(from ...).
Dark mode built-in. Supports three modes — auto, light, dark — via the data-theme attribute, with the InitUI.theme JavaScript API and a flash-of-unstyled-content (FOUC) prevention mechanism on page load.
Zero external dependencies. Just one CSS file and one JS file. No build tool, no config required.
Distinct visual identity. Details like the eyebrow label, notched corner, dashed focus ring, and noise texture give Init UI a different look from popular CSS frameworks.

Layout System & Components

Init UI provides a complete set of layout primitives — Container, Grid, Stack, Cluster, plus Flex utilities — alongside a rich component library:

Button, Card, Badge, Alert, Dropdown, Navbar, Breadcrumbs
Form Input, Checkbox & Radio, Switch, Password Input (with show/hide toggle), Input Group, Custom File Input (drag & drop), Range Slider
Tabs, Modal (with focus trap), Offcanvas, Tooltip
Toast, Progress Bar & Progress Ring, Skeleton loading, Avatar, Divider
Accordion (smooth open/close via CSS Grid), Pagination (auto ellipsis), Button Loading (built-in spinner)
List, Table (striped, hover, compact modes), Back To Top
Command Palette quick search with Ctrl + K shortcut, Kbd, Search Trigger
Automatic Form Validation (powered by the Constraint Validation API) with .iu-is-valid / .iu-is-invalid states

All backed by a comprehensive design-token system: colors, typography, spacing scale, radius, shadow, motion (easing/duration), and z-index — ensuring consistency from the smallest component to the overall layout.

Installation

Init UI can be dropped in via CDN or downloaded directly into your project — no build step needed:

CDN:

<link rel="stylesheet" href="https://r2.inithtml.com/init-ui/css/init-ui.min.css" />
<script src="https://r2.inithtml.com/init-ui/js/init-ui.min.js"></script>

Or download the full source here.

Try It Now

You can preview all components in the live demo, or browse the detailed docs for every CSS class and JavaScript API.

View Init UI Demo

What’s Next

The current release of Init UI is v0.2.0, focused on a flexible theming system and a component set solid enough for most real-world projects. The framework will keep improving based on real user feedback. If you’re looking for a compact CSS framework that’s easy to customize and free from heavy dependencies, Init UI is worth trying today.

5.0_/5 (1)