Shadcn Introductory Tutorial - Create a Dashboard in Shadcn/ui (merged with V0)

Learn how to create a dashboard using Shadcn/ui in React through the Nextjs framework, using its latest version 15, combined with TailwindCSS, Typescript and other additional packages such as Recharts. We will also use v0 to add logic to our application and create user interfaces more quickly using this Vercel AI service.
⭐ Recommended Courses
Nodejs course ⮕ fazt.dev/nodejs
Python course⮕ faztweb.com/py...
React course ⮕ • Curso de Reactjs desde...
Nextjs course ⮕ • Curso de Nextjs desde ...
Javascript course for React ⮕ • Javascript para Aprend...
🎒 Recommended Services
SiteGround ⮕ bit.ly/31u9ZEk
Railway ⮕ railway.app?referralCode=fazt
Namecheap ⮕ namecheap.pxf....
DigitalOcean ⮕ m.do.co/c/8ef2...
🎒 Other Services
Ledger ⮕ (Hardware Wallet) bit.ly/3ijsVNW
Cloudinary ⮕ bit.ly/3ohNlJ7
Notion ⮕ affiliate.noti...
🗣 Social Networks
Github ⮕ github.com/fazt
Twitter ⮕ / fazttech
Discord ⮕ faztweb.com/so...
#nextjs #shadcn #reactjs #webdevelopment #webdeveloper #programming #programming #dev0

[@luiseduardodelgadogallardo3294]

"Y bueno, aquí las tarjetas otra vez han generado más bugs, para el que cree que esto va a reemplazar a los programadores, pero bueno..' Eres un amor 💝 jajaja

[@DevCoreX]

Me acabas de leer la mente bro, recién estaba buscando bibliotecas de interfaz ui y estaba intentando entender shadcn, y justo sacas video, sé que recibes estos comentarios comunmente, pero es increíble que es verdad jajaja

[@asolounbit]

Amigo Fazt, soy de colombia Empece con node, express y react y mas videos de tu canal me han servido mucho, pero en colombia de lo que he investigado trabajan mas con java, sprint boot, angular y docker y kubernetes , actual mente ya he creado varios sitios web con las tecnologia que aprendi con tigo, y las implemente en la empresa donde laboro, no tiene nada que ver con programacion, pero he realizado sitio web para la empresa y 13 app mas para automatizar correo y formularios propios con backend y forntend, compre un servidor casero, y aprendi a configurarlo no profesionalmente, pero lo hice con el fin de poner empractica todo lo aprendido, la empresa con el tiempo me empeso a reconocer con bonos, pero eso no fue mi fin, mi finalida era solo aprender y poner empractica lo que aprendia, y ahora termine la universidad - y quiero empezar en el mundo de desarollo. pero en colombia manejan esas tecnologia nombradas de java y angular, que me sugieres, aprendo estas nuevas tecnologias o continuo con las que tengo. es que es como un empezar de nuevo.

[@esmeralda.1_a612]

Este material está perfecto, me acabas de salvar!! Nuevo sub!!

[@mishelrodri]

Justo estaba buscando un vídeo de shadcn Pero no encontraba uno actualizado!!! 😭🙏 Gracias!!!!

[@oigresrol]

que rayos? acaso lees mi mente o mi roadmap o road de mi carrera? como sabias que andaba necesitando esto?

[@Espron]

Se ha rifado, Sr. Fazt. Muchas gracias

[@sebastianjulonchamana2987]

he probado shadcn y rescato lo sig: - cn es bastante interesante, te permite estilizar los componentes que descargaste de vercel vx o de lso nativos de shadcn - con shadcn no vas a desarrollar mas rapido pero me parece que sus componentes si son bastante familiarizables con los usuarios - los formularios se adaptan a formik zod, hook form y tambien se adapta bastante a tailwind, el componente Avatar tiene una prop llamada fallback que sirve para en caso no pongas foto puedes poner para q muestre una foto por default, los select son normalitos, los input basicos, botones basicos, etc. - el sidebar visualmente es muy bueno de hecho se eso fue lo primero que me llamo la atencion - el hecho q los componentes no se instalen, sino se crean, eso es bastante interesante ya que muchas librerias suelen ocupar mucho espacio y aveces puede perjudicar el rendimiento al hacer el build

[@Victor-dd7el]

que es cn?

[@sebastianjulonchamana2987]

@@Victor-dd7el cn es la funcion nativa que q le pasas parametros a tu boton de shadcn o cualquier componente de este

[@omarjimenez996]

Excelente video Fast. Una pregunta ajena al tema, ¿qué utilizas para que tu terminal tenga intellisense?

[@DigiTutos]

Que genial. 😊

[@benatn]

Que genial, has uno con react y shadcn porfa

[@rodolfolopezp]

Excelente 👌

[@eliuddyn]

Amazing 🔥🔥

[@boje]

Saludos Fazt!

[@FaztCode]

Saludos @boje :)

[@ExoticGamerrrYT-op5xi]

Buenas fazt necesito saber como se llama la extensión q tienes para que te auto-importe el componente cuando escribe su nombre, porfaaa

[@claudio-guevara479]

Hola fazt 👋 te quería hacer una consulta, conoces alguna librería de node o alguna api para humanizar las respuestas de openai? Saludos, gran video

[@Moru-d9s]

La carpeta components de la pagina web no me funciona 😭 Se va directamente al componente acordion, ¿paso algo con shadcn?

[@Moru-d9s]

Ahora note que en la propia pagina se muestran abajo los otros componentes xD

[@rodolfolopezp]

Se puede usar con app en vez de src?

[@FaztCode]

Si puedes usarlo sin necesidad de colocarlo dentro de la carpeta src

[@rodolfolopezp]

@FaztCode Gracias FAZT. Lo puse en la raíz y funcióna bien

[@josephwilfredofloresregalado]

Podrias hacer algo parecido pero con Angular porfavor u.u

[@yamirmogollonosorio4027]

Genial pero no sería mejor crear todo

[@FaztCode]

Si seria mejor, porque tendrias mas control, pero en si es un video para aquellos que les gusta este enfoque, depende cada quien elegir

[@davidjacobs7966]

nada como crear los componentes uno mismo y entender el codigo de uno mismo.

[@alt.galdamez]

Claro, pero para el desarrollo de MVPs o cualquier proyecto que requiera poco tiempo es bueno usar componentes ya hechos.

[@davidjacobs7966]

@@alt.galdamez suena buena idea. pero no deberiamos tener componentes ya hechos de nuestros proyectos anteriores que podemos acoplar en nuestros nuevos proyectos?

[@alt.galdamez]

@@davidjacobs7966 Claro, en la teoría suena bien, pero en la práctica es mucho más complejo. Crear componentes al nivel de shadcn, React Aria, MUI, etc. Es muy complejo, ya que debes encargarte de la accesibilidad, responsive design, ajustarlos a cada navegador en caso de alguna incompatibilidad, permitir al usuario extenderlo lo máximo posible, etc. Por eso muchas empresas gigantes usan librerías de componentes como "React Aria" y ya solo se encargan de darles los estilos que necesiten. ¿Has hecho un combo box? Es un dolor de cabeza y hacer uno desde cero toma tiempo y debes tener en cuenta las variables que mencione arriba.

[@alt.galdamez]

@@davidjacobs7966 Sí, pero luego te darás cuenta que desarrollar componentes al nivel de "shadcn", "React Aria" o cualquier otra librería es bastante complejo, y que tus componentes les faltan cosas como, responsive design, accesibilidad y ajustes a cada navegador en casos de incompatibilidad. No es lo mismo hacer un button propio a montar un dragger o un combobox con search, te darás cuenta que son muy complejos, por eso muchas empresas usan librerías de componentes para acelerar sus procesos y encargarse de el estilo que estar peleando con problemas de accesibilidad.

[@caballerosalas]

@@davidjacobs7966 reinventar la rueda no es la mejor alternativa en ingenieria

[@caballerosalas]

AI dubbed video's are so annoying

[@d1lluvi0ddd]

a ninguna ia le sale tan bien como al faztito