Component Libraries — shadcn/ui, Radix, Headless UI
Choose the right component library approach: headless primitives, copy-paste components, or styled libraries.
14 min readreact, shadcn, radix, component-library, web-dev
Building a dropdown menu from scratch means handling keyboard navigation, focus management, ARIA attributes, scroll locking, click-outside detection, and animation. That's a week of work for one component.
Component libraries give you that behavior for free. The question is which kind:
- Styled libraries (Material UI, Chakra UI) — complete UI kits with built-in styling
- Headless libraries (Radix, Headless UI) — behavior and accessibility without styling
- Copy-paste libraries (shadcn/ui) — components you own and customize
Each approach has tradeoffs. This lesson helps you choose and shows you how to use the most popular options.
The Three Approaches
Styled Libraries
Libraries like Material UI and Chakra UI ship with complete visual designs. You install them, use
This lesson is part of the Guild Member curriculum. Plans start at $29/mo.