awesome-repositories.com
Blog
MCP
awesome-repositories.com

Découvrez les meilleurs dépôts open-source grâce à notre recherche par IA.

ExplorerRecherches sélectionnéesAlternatives open sourceLogiciels auto-hébergésBlogPlan du site
ProjetÀ proposNotre méthodologiePresseServeur MCP
Mentions légalesConfidentialitéConditions d'utilisation
© 2026 Bringes Technology SRL·VAT RO45896025·hello@awesome-repositories.com
·
knadh avatar

knadh/oat

0
View on GitHub↗

Oat

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.

Recherche par IA

Explorez plus de dépôts awesome

Décrivez vos besoins en langage naturel — l'IA classe des milliers de projets open source sélectionnés par pertinence.

Start searching with AI
oat.ink
↗

Features

  • CSS Component Libraries - Semantic HTML components and interactive widgets styled entirely with CSS variables and zero JavaScript dependencies.
  • WebComponent Libraries - Delivers interactive UI elements as native WebComponents requiring no framework, build tool, or external library.
  • Variable-Driven UI Kits - An admin dashboard and web interface toolkit that styles semantic HTML entirely through CSS custom properties with zero JavaScript dependencies.
  • CSS Variable Theming - Defines all visual properties as CSS custom properties for complete theme overrides without touching component styles.
  • Data-Attribute Dark Mode Toggles - Switches the entire UI to a dark color scheme by setting a single data attribute on the root element.
  • Dashboard Layouts - Assembles full-page dashboards with navigation, sidebar, and content panels using minimal semantic markup.
  • Administrative Dashboard Pages - Assembles full-featured administrative dashboards with metrics, tables, alerts, and status indicators.
  • Form Input Controls - Provides input fields, select menus, color pickers, toggles, and validation states for forms.
  • Interactive UI Components - Adds interactive UI components that support keyboard navigation and screen reader accessibility for common interface patterns.
  • CSS and JS UI Kits - Ships a tiny CSS and JS bundle with no framework, build tool, or external library requirements.
  • Dark Mode Strategies - Detects system color scheme preference and switches the UI theme automatically.
  • Sortable & Filterable Tables - Adding sorting, filtering, and row selection to standard HTML tables without a framework widget.
  • Semantic Styling - Styles native HTML elements contextually using semantic tags and attributes, eliminating CSS classes.
  • CSS Variable Overrides - Redefine CSS variables to change colors, spacing, and other visual properties across all components.
  • CSS Variable Override Themes - Overrides CSS variables to change colors, spacing, and typography across all components.
  • Interactive Web Component Libraries - Provides interactive UI elements as lightweight WebComponents requiring no framework or build tooling.
  • Dropzone File Uploads - Provides a dropzone with file previews, validation, removal, and progress feedback for native file inputs.
  • Collaborative Activity Feeds - Lists recent events such as deployments, alerts, and configuration changes with timestamps.
  • Data Table Components - Renders sortable, paginated tables with row actions and status badges for managing records.
  • Status Indicators - Show real-time system health metrics such as CPU, memory, disk I/O, and network usage with color-coded status labels.
  • Button Components - Renders clickable elements from native tags or role attributes with contextual styling.
  • Metric Card Row Layouts - Shows real-time server statistics like CPU, memory, disk I/O, and network usage in compact cards.
  • Chips - Creates dismissible chip and tag elements for filtering interfaces.
  • Custom Color Theme Definitions - Overrides a set of named color variables to define a complete custom color palette for the UI.
  • Semantic Markup Builders - Assembles full-page administrative dashboards with navigation, sidebar, and content panels using minimal semantic markup.
  • Scroll-Triggered Animations - Triggers CSS animations on load, hover, or scroll intersection using only HTML attributes.
  • Enhanced - Wraps standard file inputs with drag-and-drop, preview, validation, and progress feedback using minimal JavaScript.
  • Modal Dialogs - Creates accessible modal dialogs with proper ARIA roles and keyboard navigation support.
  • Notification Toasts - Display dismissible success, warning, error, and info messages that overlay the page to provide user feedback.
  • Declarative - Triggers CSS animations on load, hover, or scroll intersection using only HTML attributes with reduced-motion support.
  • Form Control Styles - Rendering styled input fields, selects, toggles, and validation states for data entry with semantic HTML.
  • Table Sorting Logic - Adds sortable columns, filterable rows, and row selection to standard HTML tables.
3,394 stars·148 forks·CSS·mit·15 vues

Historique des stars

Graphique de l'historique des stars pour knadh/oatGraphique de l'historique des stars pour knadh/oat

Questions fréquentes

Que fait knadh/oat ?

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.

Quelles sont les fonctionnalités principales de knadh/oat ?

Les fonctionnalités principales de knadh/oat sont : CSS Component Libraries, WebComponent Libraries, Variable-Driven UI Kits, CSS Variable Theming, Data-Attribute Dark Mode Toggles, Dashboard Layouts, Administrative Dashboard Pages, Form Input Controls.

Quelles sont les alternatives open-source à knadh/oat ?

Les alternatives open-source à knadh/oat incluent : picturepan2/spectre — Spectre is a comprehensive CSS framework and UI utility toolkit designed for building responsive web interfaces. It… hunvreus/basecoat — Basecoat is a zero-runtime UI library and themable interface framework consisting of a set of accessible web… coreui/coreui-free-react-admin-template — This project is a React-based administrative template and UI kit designed for building dashboards. It provides a… lusaxweb/vuesax — Vuesax is a frontend framework and UI component library for Vue.js applications. It provides a customizable design… picocss/pico — Pico is a lightweight, classless CSS framework designed to provide consistent, accessible, and responsive visual… skeletonlabs/skeleton — Skeleton is a design system and accessible UI component library built on Tailwind CSS. It provides a collection of…

Alternatives open source à Oat

Projets open source similaires, classés selon le nombre de fonctionnalités partagées avec Oat.
  • picturepan2/spectreAvatar de picturepan2

    picturepan2/spectre

    11,317Voir sur GitHub↗

    Spectre is a comprehensive CSS framework and UI utility toolkit designed for building responsive web interfaces. It functions as a CSS component library that provides pre-styled interface elements and helper classes to facilitate frontend UI development. The framework is distinguished by a pure-CSS component architecture that avoids dependence on external JavaScript runtimes. It utilizes a SASS-based build pipeline that supports class prefixing, stylesheet pruning, and a variable-based theme system for creating custom design systems. The project covers a wide range of layout and interface ca

    CSS
    Voir sur GitHub↗11,317
  • hunvreus/basecoatAvatar de hunvreus

    hunvreus/basecoat

    3,653Voir sur GitHub↗

    Basecoat is a zero-runtime UI library and themable interface framework consisting of a set of accessible web components. It provides a collection of pre-styled interface elements and utility classes designed to function as static assets without requiring a dedicated JavaScript framework runtime. The project features a dedicated UI component scaffolder, providing a command line interface to automate the generation of project folder structures and the installation of component templates. Visual styles are managed through a system of CSS variables and utility classes, allowing for global theme a

    JavaScriptalpinecomponentscomponents-library
    Voir sur GitHub↗3,653
  • coreui/coreui-free-react-admin-templateAvatar de coreui

    coreui/coreui-free-react-admin-template

    4,940Voir sur GitHub↗

    This project is a React-based administrative template and UI kit designed for building dashboards. It provides a comprehensive collection of pre-styled layouts, an accessible component library, and a Sass-based UI framework for creating administrative interfaces. The template is specifically structured as an AI-optimized project, utilizing coding patterns and organization designed to help AI assistants generate consistent, production-ready React code. It features a flexible styling system using Sass variables and CSS custom properties to support customizable light and dark themes. The kit co

    JavaScriptadminadmin-dashboardadmin-panel
    Voir sur GitHub↗4,940
  • lusaxweb/vuesaxAvatar de lusaxweb

    lusaxweb/vuesax

    5,596Voir sur GitHub↗

    Vuesax is a frontend framework and UI component library for Vue.js applications. It provides a customizable design system and a set of pre-styled user interface elements designed to accelerate the development of web interfaces. The project is distinguished by a themeable visual toolkit that supports dynamic color updates and server-side style customization to maintain brand identity. It also features a specialized data table component with built-in support for inline cell editing and server-side processing for pagination, filtering, and sorting. The library covers a broad surface of UI capab

    Vue
    Voir sur GitHub↗5,596
    • Voir les 30 alternatives à Oat→