Jan 15, 20265 min read

Web Components for design systems: when and why

Framework-agnostic components that survive tech stack changes.

Design SystemsWeb ComponentsArchitecture

Estimated reading time

TL;DR

Web Components let you ship once and use anywhere.
They work with React, Vue, Svelte and vanilla JS.
The trade-off is SSR complexity — solvable but not trivial.
If SSR is your primary concern, Web Components add friction. Know your constraints.

Nord Design System uses Web Components and serves multiple product lines with one codebase.
Framework-agnostic components reduce migration cost when stacks change.
React 17 to 18 migration across 200 components: 6 weeks. Same components as Web Components: 0 weeks.

Want help implementing this? Let's talk about your system or workflow.

Jan 15, 20265 min read

Framework-agnostic components that survive tech stack changes.

Design SystemsWeb ComponentsArchitecture

Estimated reading time

Web Components let you ship once and use anywhere.
They work with React, Vue, Svelte and vanilla JS.
The trade-off is SSR complexity — solvable but not trivial.
If SSR is your primary concern, Web Components add friction. Know your constraints.

Nord Design System uses Web Components and serves multiple product lines with one codebase.
Framework-agnostic components reduce migration cost when stacks change.
React 17 to 18 migration across 200 components: 6 weeks. Same components as Web Components: 0 weeks.

Want help implementing this? Let's talk about your system or workflow.