Created a Framework-Agnostic Component System
Conceived and built Caderno UI from scratch, using canonical custom elements and thin framework adapters to deliver a portable, accessible notebook-inspired component platform.
Context
Component libraries often duplicate behavior across framework-specific implementations. Caderno UI keeps one standards-based element layer as the source of truth while offering ergonomic integration points for native HTML, React, and Astro.
What I did
- Defined the visual language, public component API, cross-framework architecture, accessibility principles, documentation, packaging, and release strategy.
- Built shared design tokens, icons, Lit custom elements, optional motion and chart delivery, typed DOM events, slots, CSS properties, and shadow parts.
- Created thin React wrappers and Astro facades that consume the canonical custom elements without duplicating their behavior.
- Established semantic markup, keyboard behavior, focus handling, pre-upgrade content resilience, and no-JavaScript fallbacks as library requirements.
- Implemented documentation, compatibility tests, package validation, Changesets releases, trusted publishing, provenance checks, and GitHub Pages deployment.
Outcomes
- Published an MIT-licensed component platform that serves native HTML, React, and Astro from one standards-based implementation.
- Eliminated framework-specific behavior duplication inside the library by keeping adapters as thin facades.