defuss-shadcn / Introduction / index
A UI component system
that scales with local 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.
This site dogfoods the system: every demo is styled and driven by the same all.css / all.js bundle and theme it documents - loaded from the jsDelivr CDN, pinned to the release this site documents: the same URLs as the CDN quick start with the version filled in. If a demo renders, the CDN install works. The utility classes in the code samples come from the shipped sizing, layout + accessibility modules, not docs CSS.
Statistics
219 components - 51 with JavaScript, 168 CSS-only - 307.9 KiB minified + compressed - 190.3 KiB as the all.css/all.js bundle. Measured from the shipped files. Full details in: dist/stats.json - updated on every build.
Components
219
ATM · MOL · ORG · BLK · TPL
With JavaScript
51
interactive, State API–driven
CSS-only
168
zero behavior, pure markup
Bundle
190.3 KiBgzip
all.min.css + all.min.js
Core runtime
24.2 KiBgzip
core.min.js + core.min.css
Themeable
Full shadcn semantic token model. 43 tweakcn presets ship as drop-in theme files - swap one and every component updates instantly.
Component Skills
Every component ships a structured skill and a *.schema.json contract. Install skills/defuss-shadcn/SKILL.md in your agent - it carries every component skill with it.
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.
Framework Free
Runs in any browser, zero dependencies, no build pipeline required - and 168 of 219 components need no JavaScript at all. The few general helpers components share (e.g. df$.shadcn.shared.debounce) ship inside core, not as a utility library. The shipped footprint (counts per type, JS/CSS-only split, byte sizes raw/minified/gzipped) is published as dist/stats.json.
Comments, ideas or improvements? Edit this page's source on GitHub