Oat — Ultra-Lightweight Semantic HTML and CSS UI Library

Introduction

Oat is a CSS-only UI library that styles semantic HTML elements directly. There is no JavaScript runtime, no class-name system to learn, and no build step. Write standard HTML and Oat makes it look polished.

What Oat Does

• Styles native HTML elements like buttons, inputs, tables, and forms without extra classes
• Provides a complete component set: navigation, cards, modals, tabs, and alerts
• Supports dark mode via CSS custom properties and prefers-color-scheme
• Weighs approximately 10KB minified and gzipped with zero dependencies
• Uses CSS custom properties for easy theming without a preprocessor

Architecture Overview

Oat is a single CSS file that targets semantic HTML elements and a small set of data attributes for components that need state. It uses CSS custom properties for theming, :has() and :checked pseudo-classes for interactive patterns, and no JavaScript. Components like accordions and tabs work through hidden checkbox or radio input patterns.

Self-Hosting & Configuration

• Include the CSS file via CDN link tag or npm install oat-css
• No build step or configuration file needed
• Override CSS custom properties to change colours, spacing, and typography
• Supports both light and dark themes via --oat-* variables
• Works in any web project—no framework dependency

Key Features

• Semantic HTML first—no utility classes or component wrappers to learn
• Pure CSS interactivity for accordions, tabs, and modals using HTML patterns
• Dark mode support with automatic detection and manual toggle
• Fully responsive with mobile-first breakpoints built in
• Minimal footprint at 10KB with zero runtime dependencies

Comparison with Similar Tools

• Pico CSS — similar classless approach; Oat adds more interactive components via CSS-only patterns
• Water.css — minimal classless stylesheet; Oat provides a broader component set with theming
• MVP.css — classless MVP stylesheet; Oat offers dark mode and more layout components
• Tailwind CSS — utility-first with build step; Oat requires no build, no classes, just semantic HTML

FAQ

Q: Do I need a build tool? A: No. Include the CSS file and write semantic HTML.

Q: How do I customise the theme? A: Override CSS custom properties like --oat-primary and --oat-bg in your stylesheet.

Q: Does Oat use JavaScript? A: No. All interactivity is handled through CSS pseudo-classes and HTML patterns.

Q: Can I use Oat with React or Vue? A: Yes. Oat styles any HTML output, so it works with any framework or templating system.

Sources

• https://github.com/knadh/oat
• https://oat.knadh.io