Lightweight & Semantic UI Component Library – Oat UI

Oat UI is a lightweight, classless UI component library built with vanilla JavaScript, semantic HTML, and CSS/CSS3.

The library styles native HTML elements directly through semantic tags and attributes. You don’t need classes for basic styling.

Features:

• Ultra-Lightweight: The entire library is 6KB CSS and 2.2KB JS when minified and gzipped.
• Zero Dependencies: Oat UI runs as a fully standalone library. It requires no JavaScript frameworks, CSS preprocessors, or Node.js toolchain.
• Semantic HTML First: Native elements like <button>, <input>, and <dialog> receive automatic styling. Semantic attributes like role="button" work out of the box.
• Built-in Accessibility: ARIA roles are enforced throughout the component system. Keyboard navigation works properly on all interactive elements.
• CSS Variable Theming: You can customize the entire color scheme by overriding a small set of CSS variables. Dark mode activates automatically with data-theme="dark" on the body element.
• Web Components for Dynamic UI: Complex components like tabs and dropdowns use native Web Components.
• Browser Compatibility: The library works on all modern browsers that support CSS custom properties and Web Components.

How To Use It:

1. Install the package through npm.

# NPM
$ npm install @knadh/oat

// Import the core CSS
import '@knadh/oat/oat.min.css';

// Import the Web Components JavaScript
import '@knadh/oat/oat.min.js';

2. You can also directly load the following JS & CSS files in the HTML document.

<!-- Load the minified CSS for component styling -->
<link rel="stylesheet" href="https://unpkg.com/@knadh/oat/oat.min.css">

<!-- Load the minified JS for interactive components (defer ensures DOM loads first) -->
<script src="https://unpkg.com/@knadh/oat/oat.min.js" defer></script>

3. Oat UI applies styles to semantic HTML automatically. You don’t need to add classes for standard elements:

<!-- Headings receive automatic typography styling -->
<h1>Hello World</h1>

<!-- Paragraphs get proper spacing and line height -->
<p>This paragraph is styled automatically.</p>

<!-- Buttons inherit the primary theme colors -->
<button>Click me</button>

4. Browse the official documentation to see all available components. Copy the HTML markup for any component you need. Paste it into your project. The styles apply automatically.

<!-- Accordion Component -->
<details>
  <summary>What is Oat?</summary>
  <p>Oat is a minimal, semantic-first UI component library with zero dependencies.</p>
</details>
<details>
  <summary>How do I use it?</summary>
  <p>Include the CSS and JS files, then write semantic HTML. Most elements are styled by default.</p>
</details>
<details>
  <summary>Is it accessible?</summary>
  <p>Yes! It uses semantic HTML and ARIA attributes. Keyboard navigation works out of the box.</p>
</details>

5. The library exposes all design properties through CSS custom properties (CSS variables). You can override these to match your brand.

• --background (color): Sets the main page background color. Default is white.
• --foreground (color): Controls the primary text color across all content. Default is near-black.
• --card (color): Defines the background color for card components. Default is white.
• --card-foreground (color): Sets the text color inside cards. Default matches foreground.
• --primary (color): Controls the primary button background and link colors. Default is dark brown.
• --primary-foreground (color): Sets the text color on primary buttons. Default is off-white.
• --secondary (color): Defines the background for secondary buttons. Default is light gray.
• --secondary-foreground (color): Controls text color on secondary buttons. Default is dark.
• --muted (color): Sets the background for muted or subtle UI elements. Default is light gray.
• --muted-foreground (color): Controls text color for muted elements. Default is medium gray.
• --faint (color): Provides an even subtler background than muted. Default is very light gray.
• --faint-foreground (color): Sets text color for faint elements. Default is lighter gray than muted.
• --accent (color): Defines accent background colors. Default is light gray.
• --accent-foreground (color): Controls text on accent backgrounds. Default is dark.
• --danger (color): Sets the error or destructive action color. Default is red.
• --danger-foreground (color): Controls text color on danger backgrounds. Default is white.
• --success (color): Defines the success state color. Default is green.
• --success-foreground (color): Sets text on success backgrounds. Default is white.
• --warning (color): Controls the warning state color. Default is orange.
• --warning-foreground (color): Sets text on warning backgrounds. Default is dark.
• --border (color): Defines the border color for boxes and containers. Default is medium gray.
• --input (color): Controls the border color for form inputs. Default is medium gray.
• --ring (color): Sets the focus ring color for keyboard navigation. Default is dark brown.

:root {
    /* Default light theme variables */    --background: #fff;
    --foreground: #09090b;
    --card: #fff;
    --card-foreground: #09090b;
    --primary: #574747;
    --primary-foreground: #fafafa;
    --secondary: #f4f4f5;
    --secondary-foreground: #574747;
    --muted: #f4f4f5;
    --muted-foreground: #71717a;
    --faint: #fafafa;
    --accent: #f4f4f5;
    --danger: #df514c;
    --danger-foreground: #fafafa;
    --success: #4caf50;
    --success-foreground: #fafafa;
    --warning: #ff8c00;
    --warning-foreground: #09090b;
    --border: #d4d4d8;
    --input: #d4d4d8;
    --ring: #574747;

    /* ==================== */    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;
    --space-14: 3.5rem;
    --space-16: 4rem;
    --space-18: 4.5rem;

    --radius-small: 0.125rem;
    --radius-medium: 0.375rem;
    --radius-large: 0.75rem;
    --radius-full: 9999px;

    --bar-height: 0.5rem;

    --font-sans: system-ui, sans-serif;
    --font-mono: ui-monospace, Consolas, monospace;

    --text-1: 3rem;
    --text-2: 2.25rem;
    --text-3: 1.875rem;
    --text-4: 1.5rem;
    --text-5: 1.25rem;
    --text-6: 1rem;
    --text-7: 0.875rem;
    --text-8: 0.75rem;
    --text-regular: var(--text-6);

    --leading-normal: 1.5;

    --font-normal: 400;
    --font-medium: 500;
    --font-semibold: 600;
    --font-bold: 600;

    --shadow-small: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --shadow-medium: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
    --shadow-large: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);

    --transition-fast: 120ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition: 200ms cubic-bezier(0.4, 0, 0.2, 1);

    --z-dropdown: 50;
    --z-modal: 200;
}

/* Dark Mode */[data-theme="dark"] {
    color-scheme: dark;
    --background: #09090b;
    --foreground: #fafafa;
    --card: #18181b;
    --card-foreground: #fafafa;
    --primary: #fafafa;
    --primary-foreground: #18181b;
    --secondary: #27272a;
    --secondary-foreground: #fafafa;
    --muted: #27272a;
    --muted-foreground: #a1a1aa;
    --faint: #1e1e21;
    --accent: #27272a;
    --danger-foreground: #fafafa;
    --success-foreground: #fafafa;
    --warning-foreground: #09090b;
    --border: #52525b;
    --input: #52525b;
    --ring: #d4d4d8;
}

6. Enable Dark Mode by adding the data-theme="dark" attribute to your body element. The library automatically switches to the bundled dark theme:

<body data-theme="dark">
  <!-- Your content -->
</body>

Alternatives:

• Pico CSS: A semantic CSS framework that also styles HTML elements directly. Pico focuses more on class-free styling but lacks Web Components for complex interactions.
• MVP.css: Another classless CSS framework for semantic HTML. MVP targets simple static sites and doesn’t include JavaScript components.
• Water.css: A drop-in stylesheet collection that styles raw HTML. Water.css focuses purely on typography and forms with zero JavaScript.
• Classless CSS Frameworks: Discover more open-source classless CSS frameworks at CSSScript.com.

The post Lightweight & Semantic UI Component Library – Oat UI appeared first on CSS Script.