oat-glassed

v0.2.2

Published

7 days ago

Ultra-lightweight, zero dependency, semantic HTML/CSS/JS UI library

0High
0Medium
0Low

jolly-good

ui components component-library

Oat Glassed

Ultra-lightweight, zero-dependency, semantic UI component library with glassmorphism design.

Live Demo & Docs • Changelog • Contributing • npm

Why Oat Glassed?

Zero dependencies — pure HTML, CSS, and vanilla JS. No framework lock-in.
~11KB total — 8KB CSS + 3KB JS (gzipped). Smaller than most single components in other libraries.
Semantic first — styles apply to native HTML elements and ARIA attributes, not utility classes. Write clean markup, get beautiful UI.
Glassmorphism design — modern frosted-glass aesthetic with automatic light/dark mode.
WebComponents — interactive elements use native <ot-*> custom elements with proper lifecycle, keyboard nav, and accessibility.
Progressive enhancement — everything works without JavaScript where possible. JS enhances, never gates.
Performance-optimized — contain: paint, will-change hints, reduced blur/saturate for smooth 60fps glassmorphism.

Quick Start

CDN (fastest)

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/oat-glassed@latest/oat-glassed.min.css" />
<script src="https://cdn.jsdelivr.net/npm/oat-glassed@latest/oat-glassed.min.js"></script>

<link rel="stylesheet" href="https://unpkg.com/oat-glassed@latest/oat-glassed.min.css" />
<script src="https://unpkg.com/oat-glassed@latest/oat-glassed.min.js"></script>

npm

npm install oat-glassed

import "oat-glassed/oat-glassed.min.css";
import "oat-glassed/oat-glassed.min.js";

Then just write semantic HTML:

<button>Default</button>
<button class="primary">Primary</button>
<button class="danger">Danger</button>

<dialog open>
  <h3>Glassmorphism dialog</h3>
  <p>No classes needed. Just semantic HTML.</p>
</dialog>

Components

CSS Components (no JS required)

Interactive WebComponents (JS)

Theming

Oat Glassed uses CSS custom properties for full theme control. Override any variable on :root:

:root {
  --primary: oklch(0.65 0.25 270);
  --background: oklch(0.15 0.02 260);
  --glass-blur: 16px;
  --glass-saturate: 140%;
  --radius-medium: 8px;
  --space-4: 1.5rem;
}

Key design tokens

Light and dark modes are automatic via prefers-color-scheme using CSS light-dark().

Toast API

// Simple text toast
window.ot.toast("File saved successfully", {
  variant: "success",       // "info" | "success" | "danger" | "warning"
  duration: 4000,           // ms, 0 = persistent
  placement: "top-right",   // "top-right" | "top-center" | "bottom-right" | "bottom-center" | "bottom-left"
});

// Custom element toast
window.ot.toast.el(myElement, { placement: "bottom-center" });

// Clear all toasts
window.ot.toast.clear();

Bundle Size

| File | Raw | Gzipped | | :--- | ---: | ---: | | oat-glassed.min.css | 41.8 KB | 8.2 KB | | oat-glassed.min.js | 7.8 KB | 2.9 KB | | Total | 49.6 KB | ~11.1 KB |

Individual source files are also available in the css/ and js/ directories if you prefer to import only what you need.

Browser Support

Oat Glassed targets modern evergreen browsers:

Chrome / Edge 110+
Firefox 115+
Safari 16.4+

Uses modern CSS features: @layer, light-dark(), oklch(), backdrop-filter, Popover API.

Development

# Build CSS + JS
make dist

# Build CSS only
make css

# Build JS only
make js

# Show bundle sizes
make size

# Clean build artifacts
make clean

Build tooling is intentionally minimal — just esbuild via npx and gzip. No webpack, no PostCSS, no config files.

Accessibility

Keyboard navigation for all interactive components (Arrow keys, Home, End, Enter, Escape)
ARIA attributes managed automatically (aria-selected, aria-expanded, aria-controls, aria-labelledby)
Semantic HTML elements used wherever possible (<dialog>, <details>, <output>, <meter>, <progress>)
Progressive enhancement — tooltips fall back to native title, accordions work without JS
Screen reader tested

What's Different from Upstream Oat

Oat Glassed builds on Oat UI with a frosted-glass aesthetic inspired by shadcn defaults and Tailwind conventions, optimised for smooth 60fps rendering — --glass-blur is tuned to 18px, --glass-saturate to 140%, glass components use contain: paint, and fixed/sticky surfaces carry will-change hints for GPU compositing. Five new components are added: Nav, Tag, Avatar, Empty State, and Command Palette. An index.js entry point bundles all modules, the build uses npx esbuild instead of a global install, and docs are updated to reflect the Oat Glassed identity.

Contributing

Contributions are welcome! Please read the Contributing Guide before opening a PR.

Bug fixes — open an issue first to confirm, then send a PR with screenshots of visual changes.
New features — open an issue to discuss before sending a PR. The library aims to stay minimal (~10KB gzipped).
Typos & minor fixes — go straight to a PR.

Support Upstream

Oat Glassed is a fork of Oat UI by Kailash Nadh. If you find this project useful, please also consider:

Starring and contributing to the upstream Oat repository
Following the upstream PR guidelines when your contribution applies to the base library as well

Credits

Forked from Oat UI by Kailash Nadh. Glassmorphism redesign and additional components by good-lly.

License

MIT