Theme
Design your own

defuss-shadcn / Introduction / index

A UI component system
that scales with AI.

Themeable components built on semantic HTML, modern CSS, and vanilla JavaScript. No framework. No build step for consumers - dist/ is committed and ready to use as-is. The simplest possible foundation for AI-driven prototyping.

Every demo on this site runs on the shipped all.css / all.js from the jsDelivr CDN, pinned to this release - if a demo renders, the CDN install will also work for you.

Statistics

Components

232

ATM · MOL · ORG · BLK · TPL

With JavaScript

63

interactive, State API–driven

CSS-only

169

zero behavior, pure markup

Bundle

278 KiB gzip

all.min.css + all.min.js

Shared code

34 KiB gzip

core.min.js + core.min.css

Section bundles

19

min 2 · mean 15 · max 59 KiB gzip

Themeable

Full shadcn semantic token model. 43 tweakcn presets ship as drop-in theme files - swap one and every component updates instantly; light and dark are two palettes of one identity (the same radius in both, gated).

Component Skills

Every component ships a structured skill, every interactive one also a *.schema.json contract. Install skills/defuss-shadcn/SKILL.md in your agent - it carries every component skill with it. Three task skills plan UI, write themes and review markup, with bundled checkers.

Observable state

Interactive components expose a State API (el.api.setState('open')), so agents and tests can drive every documented state by name.

Accessible

Built on native HTML elements and WAI-ARIA patterns (menus and menubars with nested submenus, tabs, dialogs, trees, comboboxes, one-time-code fields, virtualized lists). Keyboard navigation, focus management, and screen reader support by default - and every theme preset's nav text is contrast-gated (WCAG AA) by verify.

Standalone HTML

Plain HTML, CSS and ES modules - no framework, no build pipeline, and 169 of 232 components need no JavaScript at all. The interactive ones run on one tiny core runtime, df$: defuss-query for DOM selection and events and defuss-morph for HTML reconciling, plus the shared State API helpers - shipped once as core.js, inside all.js. The footprint (counts per type, JS/CSS-only split, byte sizes) is published as dist/stats.json.

Comments, ideas or improvements? Edit this page's source on GitHub