GitHub - good-lly/oat-glassed: Ultra-lightweight, zero dependency, semantic UI library. ~11KB min+gz.

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

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

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