oat-css

Oat CSS

Oat is an ultra-lightweight (~8KB min+gz), zero-dependency, semantic HTML/CSS/JS UI library by Kailash Nadh (5k+ stars on GitHub). It styles native HTML elements out of the box — no classes needed for basic UIs. Dynamic components use WebComponents with minimal JS.

Philosophy: Semantic tags and attributes are styled contextually without classes, forcing best practices and reducing markup class pollution. Only reach for custom CSS when Oat's defaults don't cover your use case.

Installation

npm (SvelteKit, Vite, etc.)

bun add @knadh/oat

In your app entry or root SCSS:

@import '@knadh/oat/oat.min.css';

Import the JS for dynamic components (dialog, dropdown, tabs, toast, tooltip, sidebar):

import '@knadh/oat/oat.min.js';

Or selectively import individual files from @knadh/oat/css/ and @knadh/oat/js/.

CDN

<link rel="stylesheet" href="https://unpkg.com/@knadh/oat/oat.min.css">
<script src="https://unpkg.com/@knadh/oat/oat.min.js" defer></script>

Core Principle

Use semantic HTML. Oat styles elements based on their tag and ARIA attributes, not CSS classes.

<!-- ❌ Class-heavy approach you DON'T need with Oat -->
<div class="card">
  <div class="card-header">
    <h3 class="card-title">Title</h3>
  </div>
  <div class="card-body">
    <p>Content</p>
  </div>
  <div class="card-footer">
    <button class="btn btn-primary">Save</button>
  </div>
</div>

<!-- ✅ Semantic HTML — Oat styles this automatically -->
<article class="card">
  <header>
    <h3>Title</h3>
  </header>
  <p>Content</p>
  <footer>
    <button>Save</button>
  </footer>
</article>

When to Add Custom CSS/SCSS

Only override when:

1. Brand colors — redefine CSS variables in :root (see Theming below)
2. Layout — use Oat's .hstack, .vstack, .container/.row/.col-* grid, or add your own
3. Complex compositions — recipes like stats cards, split buttons, form cards
4. Custom animations or interactions — Oat doesn't ship opinionated transitions beyond the basics