Chasing the holy grail: reusable web components and design tokens
summary
Company builds a reusable UI kit that runs in React, Angular and plain CMS pages by shipping web components (built with Stencil, considered alongside Lit), versioning tokens with Style Dictionary and documenting in Storybook. A five‑person funded platform team takes ~6–12 months to land initial work, inner‑source contributions ramp in about two weeks, and global theming costs ~10 KB gzipped. The hard parts are design tokens naming, accessibility and theming across Shadow DOM (use parts, elementInternals, and expect 5–10 parts per component).
AI-written summary · about
chapters (8)
- 0:00Start
- 0:04Reusable web components and design tokens
- 3:51Many design systems, teams and projects/repositories
- 27:23Accessibility is harder with id referencing in Shadow DOM
- 34:122. Shared (aliases global) 3. Component (aliases global and shared)
- 35:57precision vs coverage
- 40:03We needed the designers to use the tokens or they would fail...
- 55:54Would I use design tokens again?
related talks
56mChasing the holy grail Reusable Web Components and Design Tokens
22m'Centralizing the Frontend with Design Systems and Web Components'
28mFrom Sketch to Code Designing a Component Kit
24mDesigning Components for Fun, Profit and Sanity
46mBuilding Reusable Components ... That Are Actually Reusable
01h 04mBuilding Design Systems for Scale: From Tokens and Components to Motion & AI Tools
29mDesign at scale with Web Components (and ducks)
22mInclusive development through web components