[{"data":1,"prerenderedAt":92},["ShallowReactive",2],{"navigation":3,"\u002Fblog\u002Fbuilding-a-reusable-component-library":26,"\u002Fblog\u002Fbuilding-a-reusable-component-library-surround":89},[4],{"title":5,"path":6,"stem":7,"children":8,"page":25},"Blog","\u002Fblog","blog",[9,13,17,21],{"title":10,"path":11,"stem":12},"How I Built a Reusable Component Library from Scratch","\u002Fblog\u002Fbuilding-a-reusable-component-library","blog\u002Fbuilding-a-reusable-component-library",{"title":14,"path":15,"stem":16},"From Idea to Production: My End-to-End Engineering Process","\u002Fblog\u002Ffrom-idea-to-production","blog\u002Ffrom-idea-to-production",{"title":18,"path":19,"stem":20},"Web Performance Is a Feature","\u002Fblog\u002Fweb-performance-is-a-feature","blog\u002Fweb-performance-is-a-feature",{"title":22,"path":23,"stem":24},"The Case for Boring Technology and Maintainable Code","\u002Fblog\u002Fwriting-maintainable-code","blog\u002Fwriting-maintainable-code",false,{"id":27,"title":10,"author":28,"body":32,"color":77,"date":78,"description":79,"extension":80,"icon":81,"image":82,"layout":83,"meta":84,"minRead":85,"navigation":86,"path":11,"seo":87,"stem":12,"__hash__":88},"blog\u002Fblog\u002Fbuilding-a-reusable-component-library.md",{"name":29,"avatar":30},"Rong Yuthean",{"src":31,"alt":29},"\u002Fprofile.jpg",{"type":33,"value":34,"toc":73},"minimark",[35,39,42,45,48,64,67,70],[36,37,38],"p",{},"After years of copying the same components between projects, I finally built a proper shared component library. The process was challenging but incredibly rewarding, and I want to share my approach for other engineers considering the same journey.",[36,40,41],{},"I started by auditing five of our applications, looking for duplicated components and patterns. The results were eye-opening: seven slightly different button implementations, three date pickers, and inconsistent handling of loading and error states.",[36,43,44],{},"Rather than designing everything upfront, I built the library iteratively alongside a real product. Each component was extracted only once it had proven itself in production code.",[36,46,47],{},"The core of the library includes:",[49,50,51,55,58,61],"ul",{},[52,53,54],"li",{},"Strongly typed components with TypeScript props and emitted events",[52,56,57],{},"Design tokens exposed as CSS variables for theming",[52,59,60],{},"Accessibility built in, with keyboard navigation and ARIA attributes tested automatically",[52,62,63],{},"Visual regression tests and auto-generated documentation",[36,65,66],{},"The biggest challenge wasn't technical but organizational: getting teams to trust and adopt a shared dependency. Semantic versioning, clear changelogs, and codemods for breaking changes made upgrades painless.",[36,68,69],{},"The payoff has been enormous: new features ship roughly 40% faster, UI bugs have dropped significantly, and every app now looks and behaves consistently.",[36,71,72],{},"If you're considering building your own library, start small with your most-used components, test them in real products, and automate everything you can. A good component library should feel like a trusted teammate, not a set of restrictions.",{"title":74,"searchDepth":75,"depth":75,"links":76},"",2,[],"#8b5cf6","2025-03-05","A practical guide to creating a shared, type-safe component library, from initial audit to publishing, and the lessons learned along the way.","md","i-lucide-blocks",null,"grid",{},6,true,{"title":10,"description":79},"IXFwShXjMdisclgIXRJ0eIYjlbaTcoMEMnrlitGpKmA",[82,90],{"title":14,"path":15,"stem":16,"description":91,"children":-1},"A detailed breakdown of how I take a feature from requirements to a reliable production release, with practical tips for engineers at every stage.",1793207677059]