In the modern web development landscape, UI libraries often fall into two categories: high-abstraction "black boxes" that are difficult to customize, or low-level utility collections that require significant boilerplate. When I started building @srcroot/ui, the goal was to find the "Goldilocks zone"—a design system that provides a robust, accessible foundation without ever getting in the developer's way.
The result is what I call "The Invisible UI": a system built on the core principle of Deep Polymorphism.
What is Deep Polymorphism?
Traditional React components often limit you to a specific HTML element. A <Button> is always a <button>. If you need it to be a link, you often have to use a different component or a hacky prop.
In @srcroot/ui, every core component supports the asChild pattern (via Radix UI) or a direct as prop. This means:
- A
Buttoncan be an<a>tag for navigation. - A
Cardcan be a<section>or an<article>for better SEO. - A
Headingcan be any level from to while maintaining consistent visual styling.