# Oat — Ultra-Lightweight Semantic HTML and CSS UI Library

> A zero-dependency, semantic HTML and CSS UI library weighing around 10KB that provides clean components without JavaScript.

## Install

Save in your project root:

# Oat — Ultra-Lightweight Semantic HTML and CSS UI Library

## Quick Use
```html
<!-- Add the stylesheet -->
<link rel="stylesheet" href="https://unpkg.com/oat-css/dist/oat.min.css">
<!-- Use semantic HTML—Oat styles it automatically -->
<button>Click me</button>
<input type="text" placeholder="Type here">
```

## 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

---
Source: https://tokrepo.com/en/workflows/asset-8c747cbf
Author: AI Open Source