Back Original

Oat – Ultra-lightweight, zero dependency, semantic HTML, CSS, JS UI library

Oat UI

Semantic, minimal, zero dependencies. ~8KB CSS and JS.

Oat is an ultra-lightweight HTML + CSS, semantic UI component library with zero dependencies. No framework, build, or dev complexity. Just include the tiny CSS and JS files and you are good to go building decent looking web applications with most commonly needed components and elements.

Semantic tags and attributes are styled contextually out of the box without classes, forcing best practices, and reducing markup class pollution. A few dynamic components are WebComponents and use minimal JavaScript.

Light like an oat flake

6KB CSS, 2.2KB JS, minified + gzipped.

That's it.

Zero dependencies

Fully-standalone with no dependencies on any JS or CSS frameworks or libraries. No Node.js ecosystem garbage or bloat.

Semantic HTML

Native elements like <button>, <input>, <dialog> and semantic attributes like role="button" are styled directly. No classes.

Accessibility

Semantic HTML and ARIA roles are used (and forced in many places) throughout. Proper keyboard navigation support for all components and elements.

Easy customization

Easily customize the overall theme by overriding a handful of CSS variables. data-theme="dark" on body automatically uses the bundled dark theme.