Radix UI vs Base UI (shadcn/ui)

 ¿Cómo es eso de que Shadcn/ui se puede utilizar con Radix UI pero también con Base UI?

Shadcn/ui ahora permite elegir entre dos librerías de componentes base: Radix UI o Base UI. Ambas ofrecen primitives accesibles y altamente personalizables, pero con diferencias en arquitectura y estilo de implementación. Podés usar cualquiera como base para tus componentes, según tus preferencias.

🔹 ¿Qué son Radix UI y Base UI?

Característica	Radix UI	Base UI
Origen	Original base de shadcn/ui	Alternativa moderna creada por el mismo equipo
Estilo de API	Usa asChild con Slot	Usa render prop con useRender
Modularidad	Paquetes separados por componente	Paquete único @base-ui/react
Popularidad	Muy extendido en la comunidad React	Más nuevo, pero con adopción creciente
Migración	Fácil gracias a documentación oficial	Compatible con shadcn/ui desde diciembre 2025

🔹 ¿Cómo se elige entre Radix y Base UI?

Cuando ejecutás:

bash

npx shadcn-ui@latest init

El CLI te pregunta si querés usar Radix UI o Base UI como librería de componentes base. Esto define cómo se construyen los componentes como Dialog, Popover, Tabs, etc.

🔹 ¿Qué cambia entre una y otra?

Ejemplo con Radix UI (asChild):

tsx

<Button asChild>
  <a href="/contact">Contacto</a>
</Button>

Ejemplo con Base UI (render prop):

tsx

<Button render={() => <a href="/contact">Contacto</a>} />

👉 Ambos logran lo mismo, pero con estilos de API distintos.

🔹 ¿Puedo migrar de Radix a Base UI?

Sí. Shadcn/ui publicó una guía oficial para migrar componentes existentes de Radix a Base UI. La migración implica cambiar el uso de Slot por useRender, y ajustar props como asChild.

✨ ¿Cuál conviene usar?

• Radix UI: si ya tenés experiencia o componentes basados en Radix.

• Base UI: si preferís una API más moderna, con menos dependencias y un solo paquete.

• Ambos son compatibles con shadcn/ui y tienen soporte completo.

¿Querés que te muestre cómo se ve el mismo Dialog en ambas versiones para comparar estilos y decidir cuál te conviene más?

¿Puedo saber si estoy usando Radix UI o Base UI mirando el package.json?

Exacto, Gabriel 👌. Podés saberlo mirando tu package.json porque cada opción instala dependencias distintas:

🔹 Si usás Radix UI

En tu package.json vas a ver dependencias como:

json

"dependencies": {
  "@radix-ui/react-dialog": "...",
  "@radix-ui/react-popover": "...",
  "@radix-ui/react-tabs": "...",
  // etc.
}

👉 Radix UI instala un paquete por cada primitive (react-dialog, react-popover, etc.).

🔹 Si usás Base UI

En cambio, si elegiste Base UI, vas a ver algo así:

json

"dependencies": {
  "@base-ui/react": "..."
}

👉 Base UI se distribuye como un solo paquete (@base-ui/react) que contiene todos los primitives.

✨ Conclusión

• Si ves muchos paquetes con prefijo @radix-ui/react-* → estás usando Radix UI.

• Si ves solo @base-ui/react → estás usando Base UI.

¿Querés que te muestre cómo se vería el mismo Dialog implementado con Radix y con Base UI, para que compares directamente las diferencias en código?

Sí.

Perfecto, Gabriel 🙌. Te muestro cómo se vería el mismo Dialog implementado con Radix UI y con Base UI, para que compares directamente las diferencias en código:

🔹 Con Radix UI

Radix usa el patrón asChild y Slot para permitir que un componente hijo se renderice dentro del trigger.

tsx

import * as Dialog from "@radix-ui/react-dialog";
import { Button } from "@/components/ui/button";

export function RadixDialogExample() {
  return (
    <Dialog.Root>
      <Dialog.Trigger asChild>
        <Button variant="outline">Abrir popup</Button>
      </Dialog.Trigger>
      <Dialog.Content className="p-6 bg-white rounded-lg shadow-lg">
        <Dialog.Title>Editar jabón</Dialog.Title>
        <Dialog.Description>
          Modificá los datos y guardalos en el back end.
        </Dialog.Description>
        <form className="space-y-4">
          <input type="text" placeholder="Nombre" className="border p-2 w-full" />
          <textarea placeholder="Descripción" className="border p-2 w-full" />
        </form>
        <Dialog.Close asChild>
          <Button variant="secondary">Cerrar</Button>
        </Dialog.Close>
      </Dialog.Content>
    </Dialog.Root>
  );
}

👉 Notá el uso de asChild en Dialog.Trigger y Dialog.Close.

🔹 Con Base UI

Base UI usa un enfoque distinto: el prop render para definir cómo se renderiza el trigger o el contenido.

tsx

import { Dialog } from "@base-ui/react";
import { Button } from "@/components/ui/button";

export function BaseUIDialogExample() {
  return (
    <Dialog>
      <Dialog.Trigger render={() => <Button variant="outline">Abrir popup</Button>} />
      <Dialog.Content className="p-6 bg-white rounded-lg shadow-lg">
        <Dialog.Title>Editar jabón</Dialog.Title>
        <Dialog.Description>
          Modificá los datos y guardalos en el back end.
        </Dialog.Description>
        <form className="space-y-4">
          <input type="text" placeholder="Nombre" className="border p-2 w-full" />
          <textarea placeholder="Descripción" className="border p-2 w-full" />
        </form>
        <Dialog.Close render={() => <Button variant="secondary">Cerrar</Button>} />
      </Dialog.Content>
    </Dialog>
  );
}

👉 Notá el uso de render={() => ...} en lugar de asChild.

✨ Diferencias clave

• Radix UI → asChild + Slot.

• Base UI → render prop.

• Ambos permiten inyectar cualquier JSX dentro del trigger o del contenido, pero con estilos de API distintos.

¿Querés que te arme un diagrama comparativo visual mostrando cómo fluye el trigger → content → close en Radix vs Base UI?

Sí.

Aquí tenés el diagrama comparativo visual entre Radix UI y Base UI aplicado al flujo de un Dialog ✨:

• Radix UI

  • Usa Dialog.Trigger asChild → el botón se pasa como hijo.

  • Usa Dialog.Content → renderiza el contenido del popup.

  • Usa Dialog.Close asChild → el botón de cerrar se pasa como hijo.

  • El patrón clave es asChild + Slot.

• Base UI

  • Usa Dialog.Trigger render={() => ...} → el botón se pasa mediante una función.

  • Usa Dialog.Content → igual que Radix, renderiza el contenido.

  • Usa Dialog.Close render={() => ...} → el botón de cerrar se pasa mediante función.

  • El patrón clave es render prop.

👉 Ambos siguen el mismo flujo: Trigger → Content → Close, pero con APIs distintas. Radix se apoya en composición con Slot, mientras que Base UI usa funciones de render.

¿Querés que te prepare un ejemplo extendido donde el mismo Dialog contenga un formulario con React Query y te muestre cómo cambia la implementación entre Radix y Base UI?