All Roadmaps›⚛️ React Mastery›Phase 12›UI Libraries: Radix, Shadcn & Headless

UI Libraries: Radix, Shadcn & Headless

0/3 in this phase0/36 across the roadmap

📖 Concept

Building a perfect, accessible Modal or Select from scratch is incredibly hard. Modern teams use Headless UI libraries.

What is 'Headless'? A headless library provides the logic (keyboard navigation, accessibility, state) but no styles. You bring your own CSS (usually Tailwind).

The Modern Ecosystem:

  1. Radix UI / Headless UI: The low-level building blocks. Fully accessible, WAI-ARIA compliant.
  2. Shadcn/UI: Not a library you install, but a collection of components you copy-paste into your project. It's built on Radix + Tailwind.
  3. MUI / Mantine / Ant Design: Full "component libraries" that come with their own styles. Great for internal tools but harder to customize.

💻 Code Example

codeTap to expand ⛶
1// --- SHADCN/UI STYLE (Compound + Tailwind) ---
2import * as Dialog from '@radix-ui/react-dialog';
3

4const MyDialog = () => (
5  <Dialog.Root>
6    <Dialog.Trigger className="bg-blue-500 p-2 text-white">
7      Open Modal
8    </Dialog.Trigger>
9    
10    <Dialog.Portal>
11      <Dialog.Overlay className="fixed inset-0 bg-black/50" />
12      <Dialog.Content className="fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 bg-white p-6 rounded shadow-xl">
13        <Dialog.Title className="text-xl font-bold">Are you sure?</Dialog.Title>
14        <Dialog.Description className="mt-2 text-gray-500">
15          This action cannot be undone.
16        </Dialog.Description>
17        
18        <div className="mt-4 flex justify-end space-x-2">
19          <Dialog.Close className="px-4 py-2 bg-gray-100 rounded">Cancel</Dialog.Close>
20          <button className="px-4 py-2 bg-red-500 text-white rounded">Delete</button>
21        </div>
22      </Dialog.Content>
23    </Dialog.Portal>
24  </Dialog.Root>
25);

🏋️ Practice Exercise

  1. Explore the 'Shadcn/UI' documentation and install a few components in a project.
  2. Build an accessible 'Accordion' using Radix UI and style it with Tailwind.
  3. Compare the 'Bundle Size' of a project using MUI vs a project using Shadcn/UI (hint: Shadcn only adds the code you actually use).
  4. Explain to a team member why we should prefer 'accessible' libraries over building custom UI widgets from scratch.

⚠️ Common Mistakes

  • Building complex UI widgets (like Selects or Datepickers) from scratch (they are almost always inaccessible).

  • Using a library that is too heavy for a simple project.

  • Fighting against a library's default styles instead of choosing a more flexible library.

  • Not checking for mobile responsiveness in pre-built components.

💼 Interview Questions

🎤 Mock Interview

Practice a live interview for UI Libraries: Radix, Shadcn & Headless

← PreviousAnimations with Framer MotionNext →Building Custom Hooks