# knadh/oat

**Attribution required: if you use, quote, or summarise this content, you must credit and link back to [awesome-repositories.com](https://awesome-repositories.com/repository/knadh-oat).**

3,394 stars · 148 forks · CSS · mit

## Links

- GitHub: https://github.com/knadh/oat
- Homepage: https://oat.ink
- awesome-repositories: https://awesome-repositories.com/repository/knadh-oat.md

## Topics

`component-library` `css-framework` `ui-components` `ui-design` `webcomponents`

## Description

Oat is a CSS variable-driven UI kit and semantic HTML component library that styles native HTML elements and attributes contextually, eliminating the need for CSS classes and reducing markup bloat. It provides a complete theming system where all visual properties are defined as CSS custom properties, allowing dark mode toggling and custom color themes by setting a single data attribute on the root element.

The library delivers interactive UI elements as zero-dependency WebComponents that require no framework, build tool, or external library, while also offering declarative scroll animations triggered through HTML attributes with reduced-motion support. Components can be selected individually, loading only the CSS and JS files for specific components rather than bundling the entire library.

Oat includes a dashboard layout builder for assembling full-page administrative interfaces with navigation, sidebars, metrics, and data tables using minimal semantic markup. It provides form control styling, dismissible chips, toast notifications, file uploads with preview and validation, and enhanced HTML tables with sorting and filtering capabilities. The library supports automatic dark mode detection based on system preferences and allows complete visual theme customization through CSS variable overrides.

## Tags

### User Interface & Experience

- [CSS Component Libraries](https://awesome-repositories.com/f/user-interface-experience/css-component-libraries.md) — Semantic HTML components and interactive widgets styled entirely with CSS variables and zero JavaScript dependencies.
- [Variable-Driven UI Kits](https://awesome-repositories.com/f/user-interface-experience/css-variable-customization/variable-driven-ui-kits.md) — An admin dashboard and web interface toolkit that styles semantic HTML entirely through CSS custom properties with zero JavaScript dependencies.
- [CSS Variable Theming](https://awesome-repositories.com/f/user-interface-experience/css-variable-theming.md) — Defines all visual properties as CSS custom properties for complete theme overrides without touching component styles.
- [Data-Attribute Dark Mode Toggles](https://awesome-repositories.com/f/user-interface-experience/dark-mode-support/data-attribute-dark-mode-toggles.md) — Switches the entire UI to a dark color scheme by setting a single data attribute on the root element.
- [Dashboard Layouts](https://awesome-repositories.com/f/user-interface-experience/dashboard-layouts.md) — Assembles full-page dashboards with navigation, sidebar, and content panels using minimal semantic markup. ([source](https://oat.ink/demo))
- [Administrative Dashboard Pages](https://awesome-repositories.com/f/user-interface-experience/dashboard-widgets/dashboard-page-managers/administrative-dashboard-pages.md) — Assembles full-featured administrative dashboards with metrics, tables, alerts, and status indicators. ([source](https://oat.ink/demo/))
- [Form Input Controls](https://awesome-repositories.com/f/user-interface-experience/form-input-controls.md) — Provides input fields, select menus, color pickers, toggles, and validation states for forms. ([source](https://oat.ink/demo/))
- [Interactive UI Components](https://awesome-repositories.com/f/user-interface-experience/interactive-ui-components.md) — Adds interactive UI components that support keyboard navigation and screen reader accessibility for common interface patterns. ([source](https://oat.ink))
- [CSS and JS UI Kits](https://awesome-repositories.com/f/user-interface-experience/no-dependency-ui-frameworks/css-and-js-ui-kits.md) — Ships a tiny CSS and JS bundle with no framework, build tool, or external library requirements. ([source](https://oat.ink))
- [Dark Mode Strategies](https://awesome-repositories.com/f/user-interface-experience/presentation-frameworks/theme-systems/dark-mode-strategies.md) — Detects system color scheme preference and switches the UI theme automatically. ([source](https://oat.ink/))
- [Sortable & Filterable Tables](https://awesome-repositories.com/f/user-interface-experience/selection-tables/profiling-data-tables/sortable-filterable-tables.md) — Adding sorting, filtering, and row selection to standard HTML tables without a framework widget.
- [Semantic Styling](https://awesome-repositories.com/f/user-interface-experience/semantic-styling.md) — Styles native HTML elements contextually using semantic tags and attributes, eliminating CSS classes. ([source](https://cdn.jsdelivr.net/gh/knadh/oat@master/README.md))
- [CSS Variable Overrides](https://awesome-repositories.com/f/user-interface-experience/styled-properties/visual-property-editors/css-variable-overrides.md) — Redefine CSS variables to change colors, spacing, and other visual properties across all components. ([source](https://oat.ink/customizing))
- [CSS Variable Override Themes](https://awesome-repositories.com/f/user-interface-experience/terminal-user-interfaces/visual-styling-presentation/interface-appearance-customization/component-appearance-customizers/application-appearance-customizers/css-variable-override-themes.md) — Overrides CSS variables to change colors, spacing, and typography across all components. ([source](https://oat.ink))
- [Button Components](https://awesome-repositories.com/f/user-interface-experience/button-components.md) — Renders clickable elements from native tags or role attributes with contextual styling. ([source](https://oat.ink/))
- [Metric Card Row Layouts](https://awesome-repositories.com/f/user-interface-experience/card-layouts/metric-card-row-layouts.md) — Shows real-time server statistics like CPU, memory, disk I/O, and network usage in compact cards. ([source](https://oat.ink/demo))
- [Chips](https://awesome-repositories.com/f/user-interface-experience/chips.md) — Creates dismissible chip and tag elements for filtering interfaces. ([source](https://oat.ink/extensions/))
- [Custom Color Theme Definitions](https://awesome-repositories.com/f/user-interface-experience/color-themes/custom-color-theme-definitions.md) — Overrides a set of named color variables to define a complete custom color palette for the UI. ([source](https://oat.ink/customizing))
- [Semantic Markup Builders](https://awesome-repositories.com/f/user-interface-experience/dashboard-widgets/dashboard-page-managers/administrative-dashboard-pages/semantic-markup-builders.md) — Assembles full-page administrative dashboards with navigation, sidebar, and content panels using minimal semantic markup.
- [Scroll-Triggered Animations](https://awesome-repositories.com/f/user-interface-experience/declarative-animations/scroll-triggered-animations.md) — Triggers CSS animations on load, hover, or scroll intersection using only HTML attributes. ([source](https://oat.ink/extensions/))
- [Enhanced](https://awesome-repositories.com/f/user-interface-experience/file-inputs/enhanced.md) — Wraps standard file inputs with drag-and-drop, preview, validation, and progress feedback using minimal JavaScript.
- [Modal Dialogs](https://awesome-repositories.com/f/user-interface-experience/modal-dialogs.md) — Creates accessible modal dialogs with proper ARIA roles and keyboard navigation support. ([source](https://oat.ink/))
- [Notification Toasts](https://awesome-repositories.com/f/user-interface-experience/notification-toasts.md) — Display dismissible success, warning, error, and info messages that overlay the page to provide user feedback. ([source](https://oat.ink/demo))
- [Declarative](https://awesome-repositories.com/f/user-interface-experience/scroll-animations/declarative.md) — Triggers CSS animations on load, hover, or scroll intersection using only HTML attributes with reduced-motion support.
- [Form Control Styles](https://awesome-repositories.com/f/user-interface-experience/styling-theming-systems/content-styling/component-styling-tools/component-styling/form-control-styles.md) — Rendering styled input fields, selects, toggles, and validation states for data entry with semantic HTML.
- [Table Sorting Logic](https://awesome-repositories.com/f/user-interface-experience/tables/column-reorderers/table-sorting-logic.md) — Adds sortable columns, filterable rows, and row selection to standard HTML tables. ([source](https://oat.ink/extensions/))

### Software Engineering & Architecture

- [WebComponent Libraries](https://awesome-repositories.com/f/software-engineering-architecture/zero-dependency-libraries/webcomponent-libraries.md) — Delivers interactive UI elements as native WebComponents requiring no framework, build tool, or external library.

### Web Development

- [Interactive Web Component Libraries](https://awesome-repositories.com/f/web-development/interactive-web-component-libraries.md) — Provides interactive UI elements as lightweight WebComponents requiring no framework or build tooling. ([source](https://cdn.jsdelivr.net/gh/knadh/oat@master/README.md))

### Part of an Awesome List

- [Dropzone File Uploads](https://awesome-repositories.com/f/awesome-lists/devtools/file-upload/pre-upload-file-previews/dropzone-file-uploads.md) — Provides a dropzone with file previews, validation, removal, and progress feedback for native file inputs. ([source](https://oat.ink/extensions/))

### Business & Productivity Software

- [Collaborative Activity Feeds](https://awesome-repositories.com/f/business-productivity-software/collaborative-activity-feeds.md) — Lists recent events such as deployments, alerts, and configuration changes with timestamps. ([source](https://oat.ink/demo))

### Data & Databases

- [Data Table Components](https://awesome-repositories.com/f/data-databases/data-table-components.md) — Renders sortable, paginated tables with row actions and status badges for managing records. ([source](https://oat.ink/demo))

### DevOps & Infrastructure

- [Status Indicators](https://awesome-repositories.com/f/devops-infrastructure/cloud-configuration/status-indicators.md) — Show real-time system health metrics such as CPU, memory, disk I/O, and network usage with color-coded status labels. ([source](https://oat.ink/demo/))