Evolving Our UI Library: From Custom Components to a Hybrid Radix Approach

"Building and maintaining an internal UI component library is one of those challenges that seems straightforward until you're deep into it. At subito, we've experienced this journey firsthand, evolving from building custom components in-house, to experimenting with external Tailwindcss (often simply referred to as Tailwind) based libraries like Spark, and ultimately adopting a hybrid approach centered around Radix. This is the story of our lessons learned and the pragmatic decisions that shaped our current approach."

"Initially, we wanted to build our own components starting from native HTML elements as a foundation. We had specific design requirements and wanted full control over our component behavior while building on top of standard browser elements like <select>, <input>, and <button>. However, we quickly discovered that building truly accessible and cross-browser compatible components is far more complex than it appears on the surface."

"The main challenges we encountered included: Browser inconsistencies: What works perfectly in Chrome might behave differently in Safari or Firefox Accessibility requirements: Implementing proper ARIA attributes, keyboard navigation, and screen reader support requires deep expertise Performance optimization: Ensuring components perform well across different devices and scenarios Maintenance overhead: Every custom component becomes a long-term commitment that needs updates, bug fixes, and feature enhancements"

Subito shifted from fully custom UI components toward a hybrid strategy centered on Radix after testing Tailwind-based libraries like Spark. Initial in-house development used native HTML elements to retain control and meet specific design needs, but revealed significant challenges: inconsistent browser behavior, complex accessibility requirements, performance tuning, and high long-term maintenance. External Tailwind solutions reduced some burdens but introduced trade-offs in control and integration. The hybrid approach uses accessible primitives for reliability while preserving styling flexibility, balancing developer efficiency, cross-browser compatibility, and maintainability to lower costs and improve component quality across products.

Read at DEV Community