Building Caderno UI
A shared library for interfaces that feel like personal notes on white paper.
The problem
SeniorPath needed a consistent reading and annotation interface. Keeping a separate component catalog and styles in the app meant the same fix had to be made twice, with different results.
The decisions
- Implement behavior and styles once, in Lit custom elements. React adapters map properties and events; Astro components add server-rendered content.
- Use slots for text, icons, and actions. Applications supply their own links and router components.
- Define the white background, blue ink, fonts, and borders in shared tokens. Keep slotted text readable before JavaScript loads.
- Provide imports per component. Charts and page animations load only when the application imports them.
Where it is used
SeniorPath uses the Astro components. This documentation also uses the library. A small React / Next.js notes app demonstrates forms, navigation, delete confirmation, and notifications. ItsKanban board adds task movement, undo, and keyboard controls using the same public components.
See tests and known limitations. Package, browser and integration checks run before publication.