¡Entiende Radix UI y ShadCN UI en 2 minutos: Potencia tus interfaces React!

¡Hola, creador de interfaces React! 🎨 Hoy nos sumergimos en Radix UI y ShadCN UI, dos bibliotecas esenciales para crear componentes de interfaz de usuario modernos, accesibles y estilizados sin tener que reinventar la rueda. Este blog está desarrollado con Next.js 15, TypeScript, Zod para la validación de datos, y ShadCN UI para los componentes de interfaz. ¿Listo para explorar?

Radix UI: componentes accesibles por defecto 🎯

Radix UI es una biblioteca de componentes React que enfatiza la accesibilidad y el rendimiento. Cada componente está optimizado para el renderizado del lado del servidor (SSR) y cumple con los estándares ARIA, lo que lo convierte en una opción ideal para aplicaciones profesionales. 🚀

¿Por qué elegir Radix UI?

• ♿️ Accesibilidad WCAG 2.1 integrada
• 🎯 Cero dependencias CSS
• 🔄 Soporte completo de SSR
• ⌨️ Navegación por teclado
• 📱 Soporte táctil nativo
• 🎨 API de estilo flexible

Instalación de Radix UI

Para comenzar con Radix UI, instala los componentes que necesites:

bash
1# Instalación de un componente específico
2npm install @radix-ui/react-dialog
3
4# O instalación de varios componentes
5npm install @radix-ui/react-dialog @radix-ui/react-dropdown-menu @radix-ui/react-tooltip

Ejemplo de uso: un Dialog accesible

Aquí tienes un ejemplo de Dialog con gestión del foco y eventos del teclado:

typescript
1import * as Dialog from '@radix-ui/react-dialog';
2import { useCallback } from 'react';
3
4export default function MyDialog() {
5  const handleOpenChange = useCallback((open: boolean) => {
6    console.log('Estado del Dialog:', open);
7  }, []);
8
9  return (
10    <Dialog.Root onOpenChange={handleOpenChange}>
11      <Dialog.Trigger asChild>
12        <button className="button-primary">Abrir diálogo</button>
13      </Dialog.Trigger>
14
15      <Dialog.Portal>
16        <Dialog.Overlay className="fixed inset-0 bg-black/50 animate-fade-in" />
17        <Dialog.Content className="dialog-content">
18          <Dialog.Title className="text-xl font-bold">
19            ¡Bienvenido 👋
20          </Dialog.Title>
21          <Dialog.Description className="mt-2">
22            Este diálogo es completamente accesible: ¡prueba a usar Tab,
23            Escape, o los lectores de pantalla!
24          </Dialog.Description>
25
26          <Dialog.Close asChild>
27            <button className="button-secondary mt-4">
28              Cerrar
29            </button>
30          </Dialog.Close>
31        </Dialog.Content>
32      </Dialog.Portal>
33    </Dialog.Root>
34  );
35}

ShadCN UI: Radix UI con estilo y buenas prácticas 🌈

ShadCN UI no es solo una simple colección de componentes estilizados: es una caja de herramientas completa que combina Radix UI, Tailwind CSS y las mejores prácticas de desarrollo React. Incluye:

• 🎨 Temas oscuros/claros
• 🔄 Animaciones fluidas
• 📱 Diseño responsive
• 🎯 Variantes de componentes
• ⚡️ Rendimiento optimizado

Instalación de ShadCN UI

bash
1# Instalación inicial
2npx shadcn@latest init
3
4# Agregar componentes específicos
5npx shadcn@latest add button
6npx shadcn@latest add dialog

Ejemplo de componente con ShadCN UI y TypeScript

typescript
1import { Button } from '@/components/ui/button';
2import { useState } from 'react';
3
4interface Props {
5  variant?: 'default' | 'destructive' | 'outline' | 'ghost';
6  children: React.ReactNode;
7}
8
9export default function MyButton({ variant = 'default', children }: Props) {
10  const [loading, setLoading] = useState(false);
11
12  return (
13    <Button
14      variant={variant}
15      disabled={loading}
16      onClick={() => setLoading(true)}
17      className="transition-all hover:scale-105"
18    >
19      {loading ? 'Cargando...' : children}
20    </Button>
21  );
22}

Configuración de temas

ShadCN UI permite una personalización avanzada de los temas:

typescript
1// tailwind.config.ts
2import { Config } from 'tailwindcss';
3
4export default {
5  darkMode: ['class'],
6  theme: {
7    extend: {
8      colors: {
9        primary: {
10          DEFAULT: 'hsl(var(--primary))',
11          foreground: 'hsl(var(--primary-foreground))',
12        },
13        // Agrega tus colores personalizados
14      },
15      keyframes: {
16        'fade-in': {
17          '0%': { opacity: '0' },
18          '100%': { opacity: '1' },
19        },
20      },
21      animation: {
22        'fade-in': 'fade-in 0.2s ease-out',
23      },
24    },
25  },
26} satisfies Config;

¿Por qué elegir esta stack? 🧐

1. Productividad máxima

   • Componentes listos para usar
   • TypeScript integrado
   • Excelente DX (Experiencia del Desarrollador)

2. Rendimiento óptimo

   • Tamaño de bundle mínimo
   • Renderizado del lado del servidor
   • Hidratación progresiva

3. Mantenibilidad

   • Código fuente accesible
   • Personalización fácil
   • Comunidad activa

4. Accesibilidad

   • WCAG 2.1 por defecto
   • Pruebas de asistencia
   • Documentación completa

Buenas prácticas para tu proyecto 🚀

1. Organización de componentes

typescript
1// Estructura tus componentes por dominio
2src/
3  components/
4    ui/          // Componentes ShadCN UI
5    layout/      // Diseño
6    forms/       // Componentes de formulario
7    features/    // Componentes específicos

2. Uso con React Hook Form y Zod

typescript
1import { z } from 'zod';
2import { useForm } from 'react-hook-form';
3import { zodResolver } from '@hookform/resolvers/zod';
4
5const schema = z.object({
6  email: z.string().email(),
7  password: z.string().min(8),
8});
9
10type FormData = z.infer<typeof schema>;

En resumen 📝

En dos minutos, hemos explorado:

• Radix UI para componentes React accesibles y eficientes
• ShadCN UI para un sistema de diseño completo basado en Tailwind
• Las mejores prácticas de organización y uso
• La integración con TypeScript y Zod

¡La combinación de estas herramientas te permite crear interfaces modernas, accesibles y mantenibles, manteniendo una excelente experiencia de desarrollo! 🎉

---

Gracias por tomarte el tiempo de descubrir Radix UI y ShadCN UI. ¡No dudes en consultar la documentación oficial de Radix UI y la de ShadCN UI para profundizar en tus conocimientos! ¡Hasta pronto para más buenas prácticas de React!