You need to design and maintain a reusable component library shared across several web applications. Describe your approach to architecture, decisions around styling (CSS-in-JS vs. CSS modules vs. plain CSS), theming, handling component state or props, documentation/versioning, and how you would ensure backwards compatibility.

I’d organize the library as a monorepo with isolated packages (components, tokens, utils) and consume it via package manager or internal registry. For styling I prefer CSS Modules plus a token system for primitives — it gives predictable class scoping and small runtime overhead; I use CSS-in-JS selectively for dynamic styles that require runtime theming. Theming is token-driven (colors, spacing, type) with a runtime theme provider and CSS custom properties so apps can switch themes without rebuilding. Components are pure and prop-driven; local state is minimized and surfaced via callbacks. Documentation is Storybook with visual regression and a living changelog; CI enforces tests and bundle size budgets. For compatibility I follow semver, automated codemods for breaking changes, deprecation warnings for two release cycles, and run a compatibility test-suite across 6 apps. This reduced duplication by ~60% and cut onboarding time from 2 weeks to 4 days in my last role.