[How We Built Our Design System (2)] Building Flexible and Robust Components with Radix Primitives and Panda CSS

The YDS v2 component library was redesigned around Radix Primitives and Panda CSS. The goal was to secure web accessibility, extensibility, and maintainability together, while still maintaining the fine-grained control needed for an in-house design system.

Off-the-shelf UI libraries let you start quickly, but the more unique your design system is, the higher the cost of overriding default styles becomes. Conversely, building everything from scratch means taking full responsibility for accessibility, keyboard navigation, focus management, and browser compatibility, which creates a heavy operational burden. To solve this dilemma, Yogiyo FE chose a direction where logic and accessibility are delegated to Radix, while styling and product requirements are driven by the internal design system.

The core design leverages Radix's Open Component Architecture to flexibly inject the props, event listeners, and refs needed for each part.

• Wrapped components using the Tabs.Root / List / Trigger / Content structure
• Merged the internal listRef and the external forwardRef using composeRefs
• Calculated the active tab position to precisely place the Indicator
• Used data attributes like data-state="active", which Radix automatically injects, as branching criteria for styling

In the example Tab component, the active, hover, focus-visible, and disabled states of the Trigger were handled declaratively within Panda CSS's slot recipe. This enabled state-based styling without toggling classes in JavaScript, and detailed UX aspects such as font-weight expression for the active tab or the disabled state could also be managed consistently.

The styling system was migrated from styled-components to Panda CSS. This choice was made to reduce the performance overhead created by runtime CSS generation and to align with the RSC flow that has emerged since React 18. The fact that styled-components moved to Maintenance mode in March 2025 was also part of the background for this transition.

Sass/CSS Modules and Tailwind CSS were also considered as alternatives, but considering the coupling between component logic and styling, the maintenance risk of string-based styling, and the team's migration cost, the zero-runtime CSS-in-TS category was chosen. Among these, Panda CSS was well documented and offered a styled pattern, which helped lower the learning curve.

The token library was also designed not simply as a plain CSS file distribution, but to transform and provide data suited to the characteristics of each consumption environment. Ultimately, the core goal was to preserve the consistency of the design system while making the implementation more flexible and robust.