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

Source: Hacker News

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’re ready to build decent‑looking web applications with the most commonly needed components and elements.

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

Light like an oat flake

6 KB CSS, 2.2 KB 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 , , “ and semantic attributes like role="button" are styled directly. No classes required.

Accessibility

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

Easy customization

Easily customize the overall theme by overriding a handful of CSS variables. Adding data-theme="dark" on the “ automatically switches to the bundled dark theme.

Why?

This was made after the unending frustration with the over‑engineered bloat, complexity, and dependency‑hell of pretty much every JavaScript UI library and framework out there. Done with the continuous PTSD of rug‑pulls and lock‑ins of the Node.js ecosystem trash.
Read more about the JavaScript ecosystem mess

I’ve published this in case other Node.js ecosystem trauma victims find it useful.

My goal is a simple, minimal, vanilla, standards‑based UI library that I can use in my own projects for the long term without having to worry about JavaScript ecosystem trash. The look and feel are influenced by the shadcn aesthetic.