Introduction
ng-oat is an Angular component library built on top of Oat UI — a classless, semantic CSS framework created by Kailash Nadh.
Why ng-oat?
If you've ever been frustrated by bloated UI libraries that force you into opinionated JavaScript runtimes, massive bundle sizes, and an endless maze of CSS overrides — you'll understand why this project exists.
I stumbled upon oat.ink while looking for something radically different: a CSS framework that actually respects semantic HTML. No utility classes to memorize, no class="flex items-center justify-between p-4 rounded-lg border" soup. Just write proper HTML, and it looks good. That's the promise of Oat, and it delivers.
But as an Angular developer, I wanted more. I wanted real components with proper TypeScript types, signal-based reactivity, keyboard navigation, ARIA attributes, and the full power of Angular's latest APIs — without losing the simplicity that makes Oat so appealing.
So I built ng-oat. It took a fair amount of evenings and weekends, reading through Oat's source, understanding how each CSS pattern works, and then carefully wrapping each one into Angular components that feel native to the framework. The result is a library that gives you the best of both worlds: Oat's beautiful, lightweight CSS foundation with Angular's component model on top.
What's inside
Here's what ng-oat brings to the table:
- 38+ Components — Button, Badge, Alert, Card, Dialog, Dropdown, Tabs, Toast, Accordion, Table, Carousel, and many more. Each one is a standalone Angular component with typed inputs, outputs, and signal-based state.
- 5 Directives — Lightweight attribute directives for Dropdown, Tooltip, Sidebar, Tabs, and Dialog that attach Oat behavior to your own markup.
- 6 Signal Forms Fields — Input, Textarea, Select, Checkbox, Radio Group, and Form Error components that implement Angular's new
@angular/forms/signalsAPI. No moreFormControlboilerplate. - Design Token Theming — 66 CSS custom properties you can override at runtime through
provideNgOatThemeandNgOatThemeRef. - Zero Runtime Dependencies — The only peer dependencies are Angular itself. Oat CSS is loaded as a stylesheet, not bundled as JavaScript.
Design principles
🌾 Semantic first
Components render proper HTML elements — <button>, <dialog>, <details>, <table>. No <div> soup. Screen readers and search engines understand your markup without extra effort.
⚡ Signal-native
Every piece of state is an Angular signal. Components work out of the box in zoneless applications with provideExperimentalZonelessChangeDetection(). No zone.js required.
🖥️ SSR-safe
All browser API access is guarded behind isPlatformBrowser and afterNextRender. Every component renders correctly on the server.
♿ Accessible
ARIA roles, keyboard navigation, focus trapping in dialogs, and proper aria-expanded / aria-controls attributes wherever needed.
A note of gratitude
This project wouldn't exist without Oat UI. Kailash Nadh built something genuinely refreshing — a CSS framework that proves you don't need thousands of utility classes to build beautiful interfaces. Oat's approach of styling semantic HTML elements directly is an idea that deserves way more attention than it gets.
Working with Oat's CSS source was a pleasure. The code is clean, the naming is consistent, and the design token system is well thought out. It made the process of building Angular wrappers significantly easier than it would have been with most other CSS frameworks.
If you haven't checked out oat.ink, I highly recommend it — even if you don't use ng-oat. It's a great example of how CSS frameworks should work.
Requirements
| Dependency | Version |
|---|---|
| Angular | ^21.0.0 |
| TypeScript | ^5.8.0 |
| Node.js | ^20.0.0 || ^22.0.0 || ^24.0.0 |
| Oat CSS | latest (loaded as stylesheet) |
Ready to dive in?
Head over to the Get Started guide to install ng-oat and set up your first project, or jump straight into the component demos to see everything in action.