@nojsui/core

Tokens, base styles and components for NojsUI — a UI kit built with HTML + CSS only. Every component ships zero JavaScript; behaviour comes from the platform (popover, <dialog>, Invoker Commands, <details>, radio groups, CSS anchor positioning, scroll-driven animations).

npm install @nojsui/core

Usage

Load the two globals once, then the components you actually use:

<link rel="stylesheet" href="node_modules/@nojsui/core/tokens.css" />
<link rel="stylesheet" href="node_modules/@nojsui/core/base.css" />
<link rel="stylesheet" href="node_modules/@nojsui/core/components/dialog/dialog.css" />

Or from a bundler that understands package exports:

@import "@nojsui/core/tokens.css";
@import "@nojsui/core/base.css";
@import "@nojsui/core/components/dialog/dialog.css";

tokens.css is required — components read only tokens, never raw values. base.css carries the reset, the :focus-visible ring, color-scheme and the reduced-motion defaults.

What's inside

| Path | Contents | | --- | --- | | tokens.css | @property tokens: color (light-dark()), space, type scale, radius, motion | | base.css | reset, focus ring, color-scheme, prefers-reduced-motion defaults | | components/<name>/<name>.css | all styles for one component | | components/<name>/<name>.html | the canonical demo markup to copy | | components/<name>/README.md | usage, keyboard contract, a11y notes, theming table, degradation table | | components/<name>/support.json | generated Baseline support data (from web-features) |

Components: accordion, breadcrumb, carousel, command-menu, dialog, drawer, popover, select, tabs, toast, tooltip.

Theming

Every component exposes public --sk-<component>-<property> custom properties that it reads but never declares, each falling back to a global token. Override one component without touching its selectors:

.sk-tooltip { --sk-tooltip-bg: oklch(30% 0.05 260); }

Each component's README has a ## Theming table listing every knob, its default and what it controls.

Browser support

• Tier A — Chrome/Edge current, Safari 27+, Firefox current: full experience.
• Tier B — one major back / Safari 26: degraded but usable, documented per component.
• Tier C — anything with <dialog>, <details> and popover: unstyled but functional.

Every non-Baseline-widely-available feature sits behind @supports with a working fallback. See each component's degradation table for specifics.

Links

• Docs and live demos: https://nojsui.com

MIT © SekiUI