Si trabajas con shadcn/UI, el último cambio anunciado en su changelog afecta directamente a la manera en que se construyen los componentes UI. A partir de la versión X.Y, la librería pasa a usar Base UI como capa base, reemplazando a Radix UI. Este movimiento busca reducir la complejidad y alinearse con la estrategia de diseño de React 19.

Índice

shadcn/UI adopta Base UI como componente predeterminado, dejando atrás Radix software development concept illustration, - imagen ilustrativa
Ilustración por IA

Cambios en la configuración predeterminada

Antes, cada componente importaba directamente módulos de Radix (por ejemplo, Dialog, Popover), mientras que ahora el mismo código se resuelve a través de Base UI. La capa de abstracción de shadcn/UI sigue intacta; lo que cambia son los paquetes subyacentes.

Impacto en proyectos existentes

Los proyectos que no personalizan directamente los componentes de Radix no sufrirán rupturas inmediatas, ya que shadcn/UI reexporta los mismos nombres de componentes. Sin embargo, sí existen implicaciones en:

  • El tamaño del bundle: Base UI es ligeramente más ligero que la combinación de Radix + dependencias auxiliares.
  • Propiedades específicas de accesibilidad que difieren entre ambas librerías.
  • Estilos predeterminados: algunas clases CSS predeterminadas cambian su nombre o estructura.

Guía de migración paso a paso

Aunque el cambio es transparente para la mayoría de los usuarios, se recomienda revisar los siguientes pasos antes de actualizar a la nueva versión.

// Antes: uso de Radix a través de shadcn/UI
import { Button } from 'ui'

function App() {
  return 
}

// Después: sin cambios en el código, pero verificando la versión
import { Button } from 'ui'

function App() {
  // Verifica que la versión de 'ui' sea >= X.Y
  return 
}

Si utilizas componentes de Radix directamente, reemplázalos por sus equivalentes de Base UI. Por ejemplo:

// Código legado con Radix
import { Dialog } from '@radix-ui/react-dialog'

function Legacy() {
  return (
    
      {/* ... */}
    
  )
}

// Código actualizado con Base UI
import { Dialog } from '@base-ui/react-dialog'

function Updated() {
  return (
    
      {/* ... */}
    
  )
}

Buenas prácticas y futuro

Adoptar Base UI abre la puerta a nuevas funcionalidades como el slot API y una alineación más estrecha con los patrones de React 19. Se aconseja:

  • Revisar la documentación oficial de Base UI para comprender las API específicas.
  • Ejecutar pruebas de accesibilidad automatizadas después de la migración.
  • Mantenerse atento a los próximos releases de shadcn/UI, que incluirán más componentes nativos basados en Base UI.

Conclusión

El cambio de Radix a Base UI en shadcn/UI es una evolución natural que simplifica la arquitectura de la librería y reduce la carga de dependencias. Los desarrolladores deberán validar sus implementaciones, pero la transición está diseñada para ser lo más fluida posible.

Referencias