📖 Manual de Radix UI para principiantes

1. ¿Qué es Radix UI?


Radix UI es una librería de componentes accesibles y sin estilos predefinidos para React.

  • Su enfoque es "unstyled": te da la funcionalidad y accesibilidad, y vos elegís cómo estilarlos (por ejemplo, con Tailwind).
  • Está diseñada para cumplir con las normas de accesibilidad (ARIA), lo cual es clave para usuarios con lectores de pantalla, teclados, etc.
  • Se integra perfectamente con Next.js, Vite o CRA.

👉 En resumen: Radix UI te da la lógica y accesibilidad, vos le das el estilo.


2. Un poco de historia

  • Radix UI fue creada por Modulz, los mismos detrás de Stitches y WorkOS.
  • La motivación fue evitar reinventar la rueda con componentes complejos (ej: modales, menús, popovers), garantizando accesibilidad y buenas prácticas.
  • A diferencia de librerías como Material UI o Chakra UI, Radix no impone diseño: es agnóstico y flexible.

3. Instalación

Si ya tenés un proyecto con React y necesitas hacer un Modal:


npm install @radix-ui/react-dialog

(instalás los paquetes que necesites, no hace falta todo Radix junto)


Y, por supuesto vamos a usar Tailwind👍.

4. Principios de uso

  • Cada componente de Radix está dividido en primitivas (Root, Trigger, Content, etc.).
  • Ejemplo: un Dialog (modal) se arma con piezas:
    • Dialog.Root → envuelve todo.
    • Dialog.Trigger → botón que abre.
    • Dialog.Content → contenido del modal.
    • Dialog.Close → botón de cierre.

Esto parece mucho, pero da control total.

cientific cartoon style