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.
