A shared component library for a fleet of sites
I had several web applications with different content and branding that all needed the same dashboard, blog layouts, media handling and editorial tools. The components had been copied between applications, so a bug fixed in one stayed broken in the others.
What I built
A shared UI package distributed through npm.
- Blog: the posts grid, post content, media display and featured media embed.
- Dashboard: the posts manager, markdown editor, media picker, hero manager, footer editor and settings, plus six dashboard pages.
- Embeds: link preview cards and renderers for YouTube, X and Instagram.
- Layout: header, footer, bottom navigation and theme provider, all configured through typed props.
It comes to 49 source files with CommonJS and ES module builds and full TypeScript declarations.
Around it I standardized the tooling across the fleet: Jest and Testing Library, ESLint and Prettier, TypeScript strict mode, and Husky running lint, build and test before every commit.
What came of it
All the components are versioned together. Renovate opens a pull request in each application when the package updates. Each site customizes its logo, colors and navigation through props, with no duplicated code. The fleet carries more than 2,200 test files across more than 10 repositories.
