# kern ui **Attribute-driven, zero-build UI library.** Configure in HTML. Theme in CSS. Control in JS. No build step. Ever. ```html ``` **41 KB CSS · 12 KB JS — 7 KB + 3 KB gzipped — Zero dependencies** --- ## Table of contents - [Why Kern](#why-kern) - [Quick start](#quick-start) - [Theming](#theming) - [Components A–Z](#components) - [Layout utilities](#layout) - [JavaScript API](#javascript-api) - [Modular imports](#modular-imports) - [Project structure](#project-structure) - [Browser support](#browser-support) --- ## Why Kern Most UI libraries demand a build step, a framework, or hundreds of KB of JS. Kern does not. - **Attributes, not classes.** `

``` ### npm ```bash npm install kern-ui ``` ```js import 'kern-ui'; // full library import { KernDialog } from 'kern-ui/components/dialog.js'; // single component ``` ```css @import 'kern-ui/dist/kern.css'; /* full CSS */ @import 'kern-ui/src/components/button.css'; /* single component */ ``` --- ## Theming ### Dark / light mode ```html ``` ```js Kern.setTheme('dark'); // sets attribute + persists to localStorage Kern.setTheme('light'); ``` ### Accent colors Six built-in presets. One attribute change repaints every interactive element. | Value | Hue | | -------- | ----------------- | | `amber` | 38° warm gold | | `blue` | 214° classic blue | | `violet` | 262° purple | | `green` | 142° emerald | | `rose` | 346° pink-red | | `cyan` | 192° teal | | `orange` | 24° orange | | `red` | 4° red | ```html ``` ```js Kern.setAccent('violet'); ``` **Custom accent — one CSS variable change:** ```css :root { --k-accent-h: 220; /* hue: 0–360 */ --k-accent-s: 85%; --k-accent-l: 52%; } ``` ### Border radius presets ```html ``` ```js Kern.setRadius('round'); Kern.setRadius('default'); // removes the attribute ``` ### Key CSS custom properties Override any token at `:root` or scoped to a selector: ```css :root { /* Fonts */ --k-font-sans: 'Inter', sans-serif; --k-font-mono: 'JetBrains Mono', monospace; /* Component sizing */ --k-btn-height: 36px; --k-btn-height-sm: 28px; --k-btn-height-lg: 44px; --k-input-height: 36px; --k-card-padding: 1.25rem; --k-sidebar-width: 260px; /* Colors (dark mode example) */ --k-bg: hsl(0, 0%, 5%); --k-surface: hsl(0, 0%, 8%); --k-surface-2: hsl(0, 0%, 11%); --k-text: hsl(0, 0%, 95%); --k-text-2: hsl(0, 0%, 65%); --k-text-3: hsl(0, 0%, 40%); --k-border: hsl(0, 0%, 16%); } ``` Full token reference: [`src/tokens/`](src/tokens/) --- ## Components ### Button ```html

``` --- ### Form inputs ```html

Email address We'll never share your email.

Looks good! Enter a valid email address. ``` --- ### Select ```html

Country

``` --- ### Checkbox & Radio ```html Notifications Marketing emails Disabled Starter Pro Unavailable ``` --- ### Switch ```html

Dark mode

Compact switch

Disabled ``` --- ### Range ```html

Volume — 70%

``` --- ### Input group ```html

https://

@kern.ui

$ USD

``` --- ### Card ```html

Card title

Supporting description.

New

Card body content.

…

``` --- ### Badge ```html Default Accent Success Warning Danger Info Solid New Online Critical Offline ``` --- ### Alert ```html

Heads up

This is an informational alert.

…

``` --- ### Avatar ```html

``` --- ### Tooltip Pure CSS — no JavaScript required. ```html 3 ``` --- ### Tabs Web Component. Arrow keys, Home, End keyboard navigation built in. ```html

Overview content

Analytics content

Settings content

Billing content

… ``` **JS API:** ```js const tabs = document.querySelector('kern-tabs'); tabs.goto(2); // switch to panel at index 2 (with focus) tabs.setActive(0); // switch without moving focus // Event emitted on every tab change tabs.addEventListener('kern:tab-change', e => { console.log('Active index:', e.detail.index); }); ``` --- ### Accordion ```html

An attribute-driven UI library. No build step required.

Drop in one CSS and one JS file via CDN or npm.

…

``` --- ### Breadcrumb ```html ``` --- ### Pagination ```html

…

``` --- ### Stepper ```html

Account

Profile

Payment

Done

``` | State | Attr | Appearance | | -------- | ------------- | -------------------- | | Upcoming | *(none)* | Numbered circle | | Current | `data-active` | Accent-filled circle | | Complete | `data-done` | ✓ checkmark | --- ### Dialog Wraps native ``. Provides focus trapping, ESC-to-close, backdrop click to close, and auto-focus on first focusable element. ```html ``` **Sizes:** `data-size="sm"` · *(default)* · `data-size="lg"` · `data-size="xl"` · `data-size="full"` **JS API:** ```js // Open by ID Kern.dialog('confirm-dialog'); // Via element reference const wc = document.querySelector('kern-dialog'); wc.open(); wc.close(); wc.toggle(); // Events wc.addEventListener('kern:dialog-open', () => {}); wc.addEventListener('kern:dialog-close', () => {}); ``` --- ### Drawer ```html

Notifications

``` **Sides:** `data-side="right"` *(default)* · `data-side="left"` **Sizes:** `data-size="sm"` · *(default)* · `data-size="lg"` ```js Kern.drawer('my-drawer'); const wc = document.querySelector('kern-drawer'); wc.open(); wc.close(); wc.toggle(); ``` --- ### Dropdown Web Component. Click outside, Escape, and full keyboard navigation handled automatically. ```html … ``` **JS API:** ```js const dd = document.querySelector('kern-dropdown'); dd.open(); dd.close(); dd.toggle(); ``` --- ### Toast Global API — no HTML boilerplate required. `` is created automatically. ```js // Quick string Kern.toast('Changes saved.'); // Full options Kern.toast({ title: 'Payment received', message: '$1,240 from Alex Morgan.', color: 'success', // success | warning | danger | accent | (default) duration: 4000, // ms — set 0 for persistent toast dismissible: true, position: 'bottom-right', // top-right | top-left | top-center // bottom-right | bottom-left | bottom-center }); ``` **Optional explicit placement:** ```html ``` **JS API on the element:** ```js const toaster = document.querySelector('kern-toaster'); toaster.add({ title: 'Done', color: 'success' }); toaster.clear(); // dismiss all toasts ``` --- ### Progress & Spinner ```html

…

``` --- ### Skeleton ```html

``` --- ### Table Client-side column sort via `data-sort` on ``. Click cycles: unsorted → ascending → descending. ```html

Name	Role	Status	Joined
Jane Doe	Admin	Active	Jan 12, 2024

``` **Table variants:** | Attribute | Effect | | ---------------------------- | -------------------------- | | `data-hover` | Row highlight on hover | | `data-variant="striped"` | Alternating row background | | `data-variant="bordered"` | Cell borders | | `data-variant="compact"` | Reduced padding | | `data-variant="comfortable"` | Increased padding | --- ## Layout ### Grid Responsive column grid. Collapses to 1 column on mobile. ```html

…

``` ### Stack & Row ```html

…

``` ### Divider ```html

Or continue with

Section break

``` --- ## JavaScript API The `Kern` global is available immediately after the script loads. ```js // Notifications Kern.toast(messageOrOptions) // Overlays Kern.dialog(idOrElement) // open a kern-dialog Kern.drawer(idOrElement) // open a kern-drawer // Theming (all persist to localStorage) Kern.setTheme('dark' | 'light') Kern.setAccent('violet' | 'amber' | 'blue' | 'green' | 'rose' | 'cyan') Kern.setRadius('none' | 'sharp' | 'default' | 'round') // Dynamic content — re-run behavior init on injected HTML Kern.init(rootElement) // default: document ``` **Re-initializing dynamic content:** Kern's `MutationObserver` handles most dynamic insertion automatically. For content injected outside the observed tree, call `Kern.init()` manually: ```js const partial = document.getElementById('server-partial'); Kern.init(partial); ``` --- ## Modular imports ### CSS — import only what you need ```css /* Tokens only (for custom components using Kern variables) */ @import 'kern-ui/src/tokens/index.css'; /* Tokens + base + specific components */ @import 'kern-ui/src/tokens/index.css'; @import 'kern-ui/src/base/index.css'; @import 'kern-ui/src/components/button.css'; @import 'kern-ui/src/components/card.css'; @import 'kern-ui/src/components/form.css'; @import 'kern-ui/src/components/table.css'; /* Full library */ @import 'kern-ui/src/kern.css'; ``` ### JS — import only what you need ```js // Individual web components import { KernTabs } from 'kern-ui/src-js/components/tabs.js'; import { KernDialog } from 'kern-ui/src-js/components/dialog.js'; import { KernDrawer } from 'kern-ui/src-js/components/drawer.js'; import { KernDropdown } from 'kern-ui/src-js/components/dropdown.js'; import { KernToaster } from 'kern-ui/src-js/components/toaster.js'; // Behaviors (no web components, pure vanilla JS) import { initAccordions } from 'kern-ui/src-js/behaviors/accordion.js'; import { initToggles } from 'kern-ui/src-js/behaviors/toggle.js'; import { initTableSort } from 'kern-ui/src-js/behaviors/table-sort.js'; // API object only (no auto-boot) import { Kern } from 'kern-ui/src-js/api.js'; // Full library (registers WCs, boots, sets window.Kern) import 'kern-ui/src-js/kern.js'; ``` --- ## Project structure ``` kern-ui/ ├── src/ CSS source — 42 modular files │ ├── tokens/ │ │ ├── colors.css Neutral scale, semantic surfaces, status colors │ │ ├── accent.css HSL accent system + 8 presets │ │ ├── typography.css Font family + size scale │ │ ├── spacing.css Space scale (4px base grid) │ │ ├── radius.css Radius scale + preset overrides │ │ ├── shadow.css Shadow scale (sm → xl) │ │ ├── motion.css Easing curves + duration tokens │ │ ├── z-index.css Z-index scale │ │ ├── components.css Per-component size/spacing tokens │ │ └── index.css │ ├── base/ │ │ ├── reset.css │ │ ├── typography.css h1–h6, p, a, code, pre, kbd, mark, blockquote │ │ └── index.css │ ├── components/ 22 component files (one per component) │ │ ├── button.css │ │ ├── form.css │ │ ├── card.css │ │ ├── badge.css │ │ ├── alert.css │ │ ├── avatar.css │ │ ├── tooltip.css │ │ ├── tabs.css │ │ ├── accordion.css │ │ ├── breadcrumb.css │ │ ├── pagination.css │ │ ├── stepper.css │ │ ├── dialog.css │ │ ├── drawer.css │ │ ├── dropdown.css │ │ ├── toast.css │ │ ├── progress.css │ │ ├── skeleton.css │ │ ├── table.css │ │ ├── switch.css │ │ ├── sidebar.css │ │ └── index.css │ ├── layout/ │ │ ├── grid.css │ │ ├── stack.css │ │ ├── divider.css │ │ └── index.css │ ├── utils/ │ │ ├── helpers.css sr-only, truncate, container, surface utils │ │ ├── keyframes.css All @keyframes (spin, pulse, slide-in, etc.) │ │ ├── responsive.css Mobile breakpoint overrides │ │ └── index.css │ └── kern.css Root entry — @imports everything │ ├── src-js/ JS source — 12 ESM modules │ ├── components/ │ │ ├── tabs.js — keyboard nav, ARIA, goto() API │ │ ├── dropdown.js — positioning, keyboard, outside-click │ │ ├── dialog.js — focus trap, backdrop, auto-focus │ │ ├── drawer.js — slide panels, body scroll lock │ │ └── toaster.js — toast queue, 6 positions, auto-dismiss │ ├── behaviors/ │ │ ├── accordion.js initAccordions(root) — single/multi open │ │ ├── toggle.js initToggles(root) — data-toggle="id" attr │ │ └── table-sort.js initTableSort(root) — asc/desc, numeric detection │ ├── utils.js emit(), esc(), firstFocusable(), $, $$ │ ├── api.js Kern.toast/dialog/drawer/setTheme/setAccent/setRadius/init │ ├── boot.js DOMContentLoaded listener + MutationObserver │ └── kern.js Root ESM entry — re-exports all, runs boot │ ├── dist/ Production builds │ ├── kern.css Readable concatenated CSS (43 KB) │ ├── kern.min.css Minified CSS (41 KB · 7 KB gzipped) │ ├── kern.js IIFE bundle (15 KB) │ └── kern.min.js Minified IIFE (12 KB · 3 KB gzipped) │ ├── docs/ │ ├── demo.html Complete demo — all 26 components + 7 app pages │ └── showcase.html Themed app showcase (analytics/inbox/travel/SaaS/shop) │ ├── scripts/ │ └── build.js CSS build — resolves @imports, concatenates, minifies │ ├── package.json └── README.md ``` --- ## Browser support Kern targets all evergreen browsers. No Internet Explorer. No polyfills. | Feature used | Chrome | Firefox | Safari | | --------------------- | ------ | ------- | ------ | | CSS custom properties | 49 | 31 | 9.1 | | Custom Elements v1 | 54 | 63 | 10.1 | | Native `