Shadcn/ui: Componentes accesibles y personalizables
por Fernando Herrera, {d/t} - DevTalles
Introducción a Shadcn/ui con su CLI, construyendo un dashboard administrativo en Next.js y Tailwind con alertas, botones, diálogos, tarjetas y más.
Recomendado, valoración editorial 4 de 5
verificado 2026-10-01 — sigue siendo gratis en Udemy
Empezar en UdemyRespuesta rápida
Curso gratis de Programación en Udemy impartido por Fernando Herrera, {d/t} - DevTalles (1 h 50 min). Nuestra valoración: 4/5, recomendado. Comprobamos que sigue siendo gratis el 1 de octubre de 2026.
- Veredicto
- 4/5 · Recomendado
- Para quién
- Desarrolladores web que quieren una primera toma de contacto con Shadcn/ui y su CLI.
- Duración
- 1 h 50 min · 22 lecciones
- Precio
- Gratis en Udemy
- Autor
- Fernando Herrera, {d/t} - DevTalles
- Plan sugerido
- 2 sem. · 3 h/sem.
- Verificado
- el 1 de octubre de 2026
Nuestro veredicto
Recomendado, valoración editorial 4 de 5Introducción práctica y bien acotada a Shadcn/ui, construida sobre un dashboard en Next.js con Tailwind. Es útil para empezar a usar la librería y su CLI, aunque el propio autor aclara que no pretende ser exhaustiva. Va bien a quien ya tiene nociones de React.
Puntos fuertes
- Proyecto práctico: un dashboard administrativo en Next.js sobre el que se aplican los componentes.
- Estructura clara en cuatro bloques y 22 lecciones, con un ritmo manejable (unas 2 horas).
- La descripción detalla los componentes que se tratan y los objetivos de aprendizaje.
A tener en cuenta
- El propio autor indica que solo cubre lo que cabía en 2 horas, así que es una introducción.
- No se indica el año de publicación ni la versión de Shadcn/ui, y es una librería que evoluciona rápido.
- Saber TypeScript o Next.js ayuda mucho, así que quien parta de cero puede sentirse perdido en algunos puntos.
De qué trata
Curso de Udemy de unos 110 minutos y 22 lecciones que presenta Shadcn/ui, una librería de componentes que da control total sobre el código de cada uno. Se organiza en cuatro bloques: introducción, preparación del proyecto, componentes de Shadcn/ui y despedida.
Sobre un dashboard administrativo en Next.js con Tailwind, explica la anatomía de la librería, el uso de su CLI y varios componentes: alertas, botones, diálogos, medallas, calendarios, avatars y tarjetas. También trata la personalización de los componentes. Es una introducción, no un recorrido exhaustivo.
- Configuración de Next.js con Tailwind
- Anatomía de Shadcn/ui y uso del CLI
- Alertas, botones, diálogos y tarjetas
- Medallas, calendarios y avatars
- Estructura de un dashboard administrativo
Para quién es este curso
- Desarrolladores web que quieren una primera toma de contacto con Shadcn/ui y su CLI.
- Personas que conocen algo de React, Next.js o Tailwind y quieren montar un dashboard administrativo con componentes ya hechos.
- Quienes buscan entender la anatomía de la librería y cómo personalizar sus componentes.
Mejor busca otro si…
- Quien ya usa Shadcn/ui con soltura y busca contenido avanzado, pues el curso es una introducción de unas 2 horas.
Antes de empezar
- Saber TypeScript o Next.js no es obligatorio, pero la descripción indica que ayudaría mucho.
- Nociones básicas de desarrollo web con React y Tailwind CSS (el proyecto se construye sobre ellos).
Qué sabrás hacer al terminar
- Configurar un proyecto de Next.js con Tailwind CSS para usar Shadcn/ui.
- Añadir componentes de Shadcn/ui a un proyecto mediante su CLI.
- Usar componentes como alertas, botones, diálogos, medallas, calendarios, avatars y tarjetas.
- Personalizar componentes de la librería.
- Estructurar un dashboard administrativo en Next.js.
Estructura del curso
- 01
Introducción
Presentación del curso y de la librería Shadcn/ui, con el enfoque y los objetivos de la formación.
- 02
Preparación del proyecto
Creación y configuración del proyecto en Next.js con Tailwind, base del dashboard administrativo que se construye después.
- 03
Shadcn/ui - Componentes
Bloque principal: anatomía de la librería y uso de componentes como alertas, botones, diálogos, medallas, calendarios, avatars y tarjetas dentro del dashboard, con su personalización.
- 04
Despedida del curso
Cierre del curso.
Capítulos del vídeo
- 01Introducción
- 02Preparación del proyecto
- 03Shadcn/ui - Componentes
- 04Despedida del curso
Plan de estudio sugerido
2 semanas · unas 3 h por semana
- 1.Sesión 1: Introducción y Preparación del proyecto; deja Next.js y Tailwind funcionando en tu equipo.
- 2.Sesión 2: primera parte de Shadcn/ui - Componentes; instala componentes con el CLI y prueba botones y alertas.
- 3.Sesión 3: resto del bloque de componentes (diálogos, medallas, calendarios, avatars, tarjetas) y montaje del dashboard.
- 4.Sesión 4: Despedida y práctica propia; personaliza los componentes y añade uno que no aparezca en el curso.
El plan cuenta con tiempo para pausar y practicar, no solo con la duración del vídeo. Si quieres adaptarlo a tu semana, lee cómo montar tu plan de estudio semanal.
Consejos para seguirlo
- Sigue el curso con tu propio proyecto de Next.js abierto y escribe el código en lugar de solo mirarlo.
- Pausa en el bloque de componentes para probar cada uno y cambiar sus estilos con Tailwind; así entenderás su anatomía.
- Si no conoces TypeScript, repasa lo básico antes de empezar para seguir mejor el código.
- Al terminar, amplía el dashboard con otros componentes de la documentación oficial.
Antes y después de este curso
- Antes de este cursoCURSO REACT.JS - Aprende desde ceroSi necesitas reforzar React antes de trabajar con componentes en Next.js.
- Antes de este cursoCURSO DE CSS COMPLETO: De Principiante a Front-EndAyuda a asentar los estilos antes de personalizar componentes con Tailwind.
Cómo lo presenta Fernando Herrera, {d/t} - DevTalles
Alertas, Diálogos, Botones, Dashboard administrativo, tarjetas, anatomía ,TypeScript, Tailwind, NextJS
Bienvenidos a nuestro curso de Shadcn/ui con React gratuito! Importante: El curso cubre lo que pudimos alojar en 2 horas de contenido, por lo cual es una buen inicio a la librería de componentes que está llamando mucho la atención debido a que nos da el control absoluto a los componentes que…
Extracto de la descripción original en Udemy.
Preguntas frecuentes
+¿Necesito saber TypeScript o Next.js?
No es necesario, pero según la descripción ayudaría mucho conocerlos, ya que el dashboard se construye con Next.js y Tailwind.
+¿Cuánto dura el curso?
Unos 110 minutos repartidos en 22 lecciones. Contando pausas y práctica, puedes calcular unas 4-6 horas en total.
+¿Qué componentes se tratan?
Según la descripción: alertas y controles, botones, diálogos, medallas, calendarios, avatars y tarjetas, además de la anatomía de la librería y su CLI.
+¿Es un curso completo de Shadcn/ui?
No. El autor lo presenta como una introducción que cubre lo que cabía en unas 2 horas, para dar el empujón inicial con la librería.
Análisis editorial elaborado con ayuda de IA a partir de la descripción, los capítulos y la duración publicados en Udemy, y revisado según nuestro método. El contenido del curso es obra de Fernando Herrera, {d/t} - DevTalles; si ves algún error, avísanos.
Guías para sacarle partido
Más cursos de Programación
Agentic AI – Complete Course for Beginners
Curso de unas 24 horas para construir sistemas de agentes de IA con LangChain y LangGraph: Pydantic, flujos de trabajo, memoria, RAG y despliegue en AWS y Render.
Aprende Accesibilidad Web paso a paso
Introducción práctica a la accesibilidad web: pautas y leyes, contenido, navegación, diseño e interacción accesibles, relación con el SEO y evaluación de sitios.
Aprende Godot - Curso completo desde cero
Crea tu primer videojuego 3D en Godot 4 desde cero: escenas, nodos, GDScript, físicas, animaciones, sonido y exportación a .exe.
Aprende JavaScript Ahora! curso completo desde cero para principiantes
Curso de JavaScript desde cero: entorno, variables, tipos, operadores, control de flujo, diez ejercicios y objetos con funciones constructoras.