Skip to main content
Oat UI Hero Light

​
What is Oat UI?

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.

​
Key Features

Light like an oat flake

6KB CSS and 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="alert" are styled directly. No classes needed.

Accessibility

Semantic HTML and ARIA roles are used throughout. Proper keyboard navigation support for all components and elements.

Easy customization

Easily customize the overall theme by overriding a handful of CSS variables. Automatically picks up dark theme based on system preferences.

Web Components

Dynamic components like tabs, dropdowns, tooltips, and sidebars are implemented as native Web Components.

​
Get Started

Installation

Learn how to install Oat UI via CDN or npm

Quick Start

Build your first page with Oat UI in minutes

Components

Explore all available components and elements

Customization

Learn how to customize themes and styles
Important: Oat UI is currently sub v1 and is likely to have breaking changes until it hits v1.

​
Why Oat UI?

Oat was created after the unending frustration with the over-engineered bloat, complexity, and dependency-hell of pretty much every Javascript UI library and framework out there. The goal is a simple, minimal, vanilla, standards-based UI library that you can use in your projects for the long term without having to worry about Javascript ecosystem churn. The look and feel are influenced by the shadcn aesthetic, with automatic light/dark theme support and modern design patterns.