¡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

Ejemplo de uso: un Dialog accesible

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

typescript

Radix UI no tiene opinión sobre el estilo, lo que te permite integrarlo perfectamente con cualquier sistema de diseño, ya sea Tailwind CSS, CSS Modules, o Styled Components.

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

Ejemplo de componente con ShadCN UI y TypeScript

typescript

Configuración de temas

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

typescript

¿Por qué elegir esta stack? 🧐

Productividad máxima
- Componentes listos para usar
- TypeScript integrado
- Excelente DX (Experiencia del Desarrollador)
Rendimiento óptimo
- Tamaño de bundle mínimo
- Renderizado del lado del servidor
- Hidratación progresiva
Mantenibilidad
- Código fuente accesible
- Personalización fácil
- Comunidad activa
Accesibilidad
- WCAG 2.1 por defecto
- Pruebas de asistencia
- Documentación completa

Buenas prácticas para tu proyecto 🚀

Organización de componentes

typescript

Uso con React Hook Form y Zod

typescript

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!

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

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

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}

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}

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;

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

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>;