Guía de adopción de la interfaz de usuario de Shadcn: descripción general, ejemplos y alternativas

Share on X (Twitter)Share on FacebookShare on LinkedInShare on Email

Nota del editor: este artículo se revisó para garantizar su precisión el 10 de mayo de 2024 y se actualizó para incluir información sobre por qué los desarrolladores deben y no deben usar Shadcn UI, casos de uso de Shadcn UI y cómo se compara con otras bibliotecas de UI y componentes.

Shadcn UI adopta un enfoque diferente al de otras bibliotecas de UI y componentes como Material UI y Chakra UI. Mientras que estos ofrecen acceso a los componentes a través de sus paquetes, Shadcn UI permite descargar el código fuente de cada componente de UI a su base de código.

Además, según su creador, Shadcn UI no es en realidad una biblioteca de componentes. ¿Qué es exactamente? ¡Exploraremos eso y más en este artículo!

Aprenderemos sobre Shadcn UI, sus características, sus beneficios y por qué los desarrolladores lo adoran y lo disfrutan constantemente. Durante el proceso, crearemos algunas interfaces de usuario con él. ¡Comencemos!

¿Qué es Shadcn UI?

Shadcn UI no es en realidad una biblioteca de componentes ni un marco de interfaz de usuario. Según la documentación, es una colección de componentes reutilizables que podemos copiar y pegar en nuestras aplicaciones. Esta colección de componentes reutilizables fue creada por Shadcn, quien también ha creado excelentes proyectos de código abierto como Taxonomy, Next.js para Drupal y Reflexjs.

Shadcn UI está desarrollado con Tailwind CSS y Radix UI y actualmente es compatible con Next.js, Gatsby, Remix, Astro, Laravel y Vite. Sin embargo, existe una guía oficial para integrarlo manualmente con otras tecnologías.

Aunque Shadcn UI se lanzó hace relativamente poco, en marzo de 2023, se ha convertido rápidamente en una de las soluciones de interfaz de usuario más populares del ecosistema de desarrollo web. Todo el mundo parece hablar de ella y desarrollar con ella, incluyendo a Vercel. Al momento de escribir este artículo, cuenta con casi 60 mil estrellas en GitHub.

Shadcn UI se popularizó tan rápido que se lanzó rápidamente una extensión no oficial de Svelte, que al momento de escribir este artículo cuenta con más de 4000 estrellas en GitHub. El impacto de la biblioteca ha sido tan grande que su creador consiguió un trabajo en Vercel, lo que significa que Shadcn UI ahora cuenta con el respaldo de Vercel.

Por qué deberías y no deberías usar Shadcn UI

Aunque es una biblioteca de interfaz de usuario relativamente nueva, Shadcn UI ha ganado popularidad rápidamente y está siendo adoptada por varios creadores de código abierto y marcas como Vercel. Su amplia adopción es una gran razón para usarla: es probable que encuentres tutoriales, guías y soporte de la comunidad.

Aquí hay algunas otras razones por las que deberías usar Shadcn UI:

• Ofrece componentes de excelente diseño.: Uno de los principales atractivos de Shadcn UI son sus componentes bien diseñados. Si creas un sitio web con Shadcn UI, te garantizamos un sitio web estéticamente atractivo.
• Proporciona numerosos componentes: Shadcn UI ofrece diversas opciones de componentes, desde elementos básicos de la interfaz de usuario, como botones y entradas, hasta componentes más complejos, como ventanas emergentes, menús desplegables y menús de navegación. Esto le ofrece una amplia gama de componentes para su aplicación.
• Desarrollado con Tailwind CSS: Shadcn utiliza Tailwind CSS, un framework CSS popular y orientado a la utilidad, para el estilo. Esto permite personalizar fácilmente los componentes para que se ajusten a los requisitos de marca y diseño de la aplicación.

Sin embargo, Shadcn UI no es para todos los desarrolladores ni para todos los proyectos. Aquí te explicamos por qué no deberías usar Shadcn UI:

• Propiedad y responsabilidad:Dado que el código de cada componente reside en su base de código, usted es responsable de mantener los componentes y sus dependencias y de corregir cualquier error o problema que pueda surgir.
• Agrupación y rendimiento: Cualquier componente que utilice se incluye en la agrupación de su aplicación. Esto puede aumentar el tamaño total de la agrupación y afectar el rendimiento. Deberá usar manualmente técnicas de optimización del rendimiento, como la división de código, para optimizar el tamaño de la agrupación, lo que requiere un esfuerzo adicional.
• Requiere conocimientos de Tailwind CSS: si bien no es un problema importante, se requieren conocimientos de Tailwind CSS para usar Shadcn UI de manera efectiva.

Debes sopesar estas razones para usar o no Shadcn UI, junto con sus ventajas y desventajas (que analizaremos a continuación), antes de decidir si es o no la opción correcta para tu próximo proyecto.

Pros y contras de Shadcn UI

A continuación, se muestra un resumen de los beneficios que puede disfrutar al construir con Shadcn UI:

• Facilidad de uso: Cualquier persona con conocimientos básicos de HTML, CSS, JavaScript y uno o dos frameworks puede empezar a usar Shadcn UI rápidamente. Se accede fácilmente a sus componentes mediante copiar y pegar o el método de instalación CLI. He utilizado diferentes bibliotecas de componentes como Material UI y Chakra UI, y Shadcn UI cumple con creces en ese aspecto.
• Accesibilidad: Los componentes de Shadcn UI son totalmente accesibles y cumplen con los estándares de las Pautas de Accesibilidad al Contenido Web (WCAG). Admite lectores de pantalla, navegación mediante teclado y otras funciones de accesibilidad. Puede usar Shadcn UI para crear aplicaciones atractivas y accesibles para todos los usuarios.
• Control y extensibilidad precisos: Shadcn UI proporciona acceso directo al código fuente de cada componente, lo que permite ajustar fácilmente el código a casos de uso específicos y necesidades de la aplicación. Esta facilidad de personalización distingue a Shadcn UI de otras soluciones de interfaz de usuario y facilita su uso. El fácil acceso al código del componente también mejora la flexibilidad y facilita el escalado y el mantenimiento de las aplicaciones.

Sin embargo, toda la tecnología tiene sus desventajas, incluida Shadcn UI. Aquí tienes algunas desventajas que debes conocer antes de decidirte a usar Shadcn UI en futuros proyectos:

• manual de instalacion de componentes: Instalar o copiar manualmente todos los componentes necesarios puede ser un engorro. Este paso adicional no es un gran problema, pero puede agregar más estrés a la experiencia del desarrollador, especialmente para quienes están acostumbrados a importar componentes desde un paquete.
• Base de código más grande: en segundo lugar, si bien tener acceso directo al código de los componentes es beneficioso en términos de modularidad y extensibilidad, también da como resultado una base de código más grande que requiere más mantenimiento.

A continuación, analizaremos algunos casos de uso general de Shadcn UI.

Casos de uso para la interfaz de usuario de Shadcn

Si bien esta no es una lista exhaustiva de posibles casos de uso, puedes aplicar Shadcn UI de las siguientes maneras:

• Creación de sitios web y aplicaciones visualmente atractivas: los proyectos de interfaz de usuario de Shadcn están bien diseñados, lo que los convierte en una excelente opción para crear interfaces de usuario estéticas para sitios web y aplicaciones.
• Prototipado y desarrollo rápido: puede acelerar significativamente el desarrollo al construir con los componentes de Shadcn UI, lo que le permite concentrarse en las funciones prioritarias.
• Creación de bibliotecas de componentes y sistemas de diseño.: Shadcn UI es una biblioteca altamente personalizable y extensible, lo que la convierte en una excelente opción para crear bibliotecas de componentes o sistemas de diseño. Puede modificar fácilmente el código fuente de los componentes de Shadcn UI para adaptarlo a las necesidades y directrices de diseño de su proyecto.

Conozcamos un poco mejor Shadcn UI explorando varias de sus características.

Características de la interfaz de usuario de Shadcn

Shadcn UI ofrece varias funciones que puedes aprovechar para mejorar tu experiencia de desarrollo. Analizamos con más funciones detalladas como los temas y el editor de temas, la interfaz de línea de comandos (CLI), los múltiples componentes y más.

Temas, editor de temas y modos claro/oscuro

Shadcn UI ofrece temas seleccionados que puedes copiar y pegar en tus aplicaciones. Puedes agregar tokens de tema manualmente a través del código fuente, pero también puedes obtener los mismos resultados con el editor de temas de Shadcn UI.

La interfaz del editor de temas te permite configurar temas con propiedades como el color, la radio del borde y el modo claro u oscuro. También puedes elegir entre dos estilos: defaulty . Los estilos incluyen componentes únicos, animaciones, iconos y más.new-york

El defaultestilo tiene campos de entrada más grandes y utiliza iconos de Lucide-React y Tailwindcss-Animate para animaciones. El estilo tiene botones más pequeños, tarjetas con sombras y utiliza iconos de base.new-york

También puedes crear fácilmente temas personalizados mediante la interfaz gráfica de Shadcn UI. El editor genera un fragmento de código con tus definiciones de estilos personalizados. Después, simplemente copia el código y pégalo en tu aplicación:

Aquí tienes un ejemplo del código de salida del editor de temas. Proporciona tokens de estilo tanto para el modo claro como para el oscuro:

@capa base { : raíz { -- fondo : 0 0 % 100 % ; -- primer plano : 222,2 84 % 4,9 % ; -- tarjeta : 0 0 % 100 % ; - tarjeta-primer plano: 222,2 84% 4,9%; -- elemento emergente : 0 0 % 100 % ; -- elemento emergente - primer plano : 222,2 84 % 4,9 % ; -- principal : 221,2 83,2 % 53,3 % ; - principal-primer plano: 210 40% 98%; - secundaria: 210 40% 96,1%; -- secundario - primer plano : 222,2 47,4 % 11,2 % ; -- silenciado : 210 40 % 96,1 % ; - silenciado-primer plano: 215,4 16,3% 46,9%; -- acento : 210 40 % 96,1 % ; -- acento - primer plano : 222,2 47,4 % 11,2 % ; -- destructivo : 0 84,2 % 60,2 % ; - destructivo-primer plano: 210 40% 98%; -- frontera : 214,3 31,8 % 91,4 % ; - entrada: 214,3 31,8% 91,4%; -- anillo : 221,2 83,2 % 53,3 % ; -- radio : 0,3rem ; } . oscuro { -- fondo : 222,2 84 % 4,9 % ; - imprimación plana: 210 40% 98%; -- tarjeta : 222,2 84 % 4,9 % ; - tarjeta-primer plano: 210 40% 98%; -- ventana emergente : 222,2 84 % 4,9 % ; -- ventana emergente - primer plano : 210 40 % 98 % ; -- principal : 217,2 91,2 % 59,8 % ; -- principal - primer plano : 222,2 47,4 % 11,2 % ; - secundaria: 217,2 32,6% 17,5%; -- secundario - primer plano : 210 40 % 98 % ; -- silenciado : 217,2 32,6 % 17,5 % ; - silenciado-primer plano: 215 20,2% 65,1%; -- acento : 217,2 32,6 % 17,5 % ; -- acento - primer plano : 210 40 % 98 % ; -- destructivo : 0 62,8 % 30,6 % ; - destructivo-primer plano: 210 40% 98%; -- frontera : 217,2 32,6 % 17,5 % ; -- entrada : 217,2 32,6 % 17,5 % ; -- anillo : 224,3 76,3 % 48 % ; } }                                                                                                                                       

Shadcn UI admite el modo oscuro en las aplicaciones Next.js y Vite. En las aplicaciones Next.js, Shadcn UI utiliza temas next para activar el modo oscuro. Cuando un usuario alterna entre el modo claro y el oscuro, la aplicación alterna entre los tokens de tema claro y oscuro.

CLI

Puede usar la CLI de Shadcn UI para integrar la biblioteca con sus aplicaciones, agregar dependencias y aplicar las configuraciones pertinentes. También puede agregar componentes de UI a sus aplicaciones con la CLI.tailwind.config.js

Puedes copiar y pegar manualmente el código de cada componente desde la documentación o agregarlos mediante la CLI. La CLI proporciona una experiencia de desarrollo superior y es una característica más que facilita el trabajo con Shadcn UI.

Componentes múltiples

Al momento de escribir este artículo, Shadcn UI cuenta con 48 componentes, incluyendo Accordion, Skeleton, Tabley Popover. En lugar de crear componentes desde cero, puede ahorrar tiempo aprovechando los componentes prediseñados de Shadcn UI.

Editar en v0

v0 es la herramienta de IA generativa de Vercel, similar a un chatbot, para crear componentes de interfaz de usuario. Utilice Shadcn UI y Tailwind CSS para generar el código de un componente según las indicaciones que recibe.

La función“Editar en v0”te permite abrir el código de un componente de Shadcn UI en la aplicación v0 y usar un indicador de IA para ajustar el componente a tus necesidades. Necesita una cuenta v0 para usar esta función.

Puedes encontrar el botónEditar en v0en la página de documentación de cada componente de la interfaz de usuario de Shadcn.

Bloques

Los bloques son conjuntos de componentes de Shadcn UI que el creador combina para crear listas de páginas para usar. Por ejemplo, en lugar de combinar botones, formularios y componentes de entrada para crear un formulario en línea, puede usar uno de los bloques de formulario de Shadcn UI.

Los bloques de Shadcn UI son totalmente adaptables y se adaptan a pantallas de ordenadores, tabletas y móviles. Integrarlos es fácil: solo tienes que copiar el código de un bloque específico. Los bloques simplifican el proceso de desarrollo y aumentan tu eficiencia.

Al momento de escribir este artículo, hay cuatro bloques de formulario y siete bloques de panel.

Modo ascensor

El modo de elevación es un nuevo modo en bloques que permite extraer componentes individuales de un bloque y copiar su código. Este modo permite copiar el código de componentes más pequeños que conforman un bloque, como tarjetas, botones y formularios.

Introducción a Shadcn UI

Este tutorial explica cómo integrar Shadcn UI con Next.js. Consulta la guía de instalación para obtener instrucciones sobre la integración con otros frameworks.

Para comenzar, cree una nueva aplicación Next.js ejecutando el siguiente comando:

npx crear - siguiente - aplicación@última mi - aplicación -- mecanografiado -- tailwind -- eslint

A continuación, ejecute el initcomando para inicializar las dependencias para un nuevo proyecto:

npx shadcn - ui@latest init

La CLI le solicitará que realice algunas configuraciones. A continuación, se muestra un ejemplo de las preguntas de configuración:

¿Te gustaría usar TypeScript (recomendado)? no / sí ¿Qué estilo te gustaría usar? › Predeterminado ¿Qué color te gustaría usar como color base? › Pizarra ¿Dónde está tu archivo CSS global? › › app/globals.css ¿Quieres usar variables CSS para los colores? › no / sí ¿ Dónde se encuentra tu tailwind.config.js ? › tailwind.config.js Configura el alias de importación para componentes: › @/components Configura el alias de importación para utilidades: › @/lib/utils ¿Estás usando componentes de React Server? › no / sí                                

¡Listo! Ya puedes empezar a añadir componentes a tus aplicaciones.

Creando un botón con Shadcn UI

Crear un componente de botón con Shadcn UI es tan fácil como copiar su código de la documentación del botón o añadirlo mediante la CLI. Ejecute el siguiente comando para agregarlo mediante la CLI:

npx shadcn - botón para agregar ui@latest

Prefiero usar la CLI porque crea una componentscarpeta automáticamente y simplifica el proceso. Una vez que tengo el componente, solo tengo que exportarlo desde su carpeta, ¡y listo! Aquí está el código:

importar { Button } desde "@/components/ui/button" Botón variante = "contorno" Botón / Botón

El Buttoncomponente tiene seis variantes: default, destructive, outline, secondary, ghosty link.

Creación de un formulario de inicio de sesión con Shadcn UI

Me encanta que, en lo que respeta a los formularios, Shadcn UI va más allá de ofrecer componentes de formulario como Input, Textarea, Checkboxy RadioGroup. También proporciona un Formcomponente que envuelve react-hook-form.

Estas son algunas de las cosas Formque proporcionan el componente:

• Un componente para crear campos de formulario controlados.FormField /
• Soporte para validación con bibliotecas de validación de formularios como Valibot, Yup y Zod
• Manejo de mensajes de error

Puede acceder al componente ejecutando el siguiente comando:

npx shadcn - ui@latest agrega entrada de formulario

A continuación, configure los componentes para el formulario, de la siguiente manera:

"usar cliente"importar { zodResolver } de "@hookform/resolvers/zod" importar { useForm } de "react-hook-form" importar * como z de "zod" importar { Botón } desde "@/components/ui/button" importar { Formulario , Control de formulario , Descripción de formulario , Campo de formulario , Elemento de formulario , Etiqueta de formulario , Mensaje de formulario , } desde "@/components/ui/form" importar { Entrada } desde "@/components/ui/input" const FormSchema = z . object ({ nombre de usuario : z . string (). min ( 2 , { mensaje : "El nombre de usuario debe tener al menos 2 caracteres." , }), }) función de exportación InputForm ( ) { formulario constante = useForm ({ resolver : zodResolver ( FormSchema ) }) función onSubmit ( datos ) {pre className= "mt-2 w-[340px] rounded-md bg-slate-950 p-4" { JSON .stringify(datos, null , 2 )}/pre } return(Form {...formulario} formulario onSubmit={formulario.handleSubmit(onSubmit)} className="w-2/ 3 espacio-y - 6 " FormField control={formulario.control} name=" nombredeusuario " render={({campo}) = (FormItem FormLabelNombredeusuario/FormLabel FormControl Entrada marcador de posición=" Ingresarnombredeusuario " {...campo} / /FormControlFormMessage / /FormItem )} / Button type="submit "Enviar/Button /form /Form ) }               

Aquí está el formulario en línea creado con el código anterior:

Shadcn UI frente a otras bibliotecas de UI y componentes

Si bien Shadcn UI se ha convertido rápidamente en una opción predilecta para crear sitios web y aplicaciones, no es la única opción disponible. La siguiente tabla muestra un desglose de cómo se compara Shadcn UI con otras bibliotecas de componentes:

Conclusión

Shadcn UI es una gran innovación en comparación con las bibliotecas de componentes existentes, ya que permite a los desarrolladores crear interfaces de usuario atractivas con un estilo único. Cumple con todos los requisitos en cuanto a experiencia de usuario y velocidad de desarrollo, a la vez que ofrece a los desarrolladores un control preciso sobre los componentes que utilizan.

Ninguna biblioteca es una solución universal, pero según las tendencias actuales, antes de que Shadcn UI se convierta en una de las principales opciones en el ecosistema frontend. Ya está siendo adoptada por grandes empresas como Vercel.

Por ejemplo, la aplicación v0 de Vercel es una herramienta impulsada por IA que utiliza Shadcn UI, Tailwind CSS y mensajes de texto para generar código de UI que los desarrolladores pueden copiar y pegar en sus aplicaciones.

Shadcn UI es una solución de interfaz de usuario relativamente nueva, y espero ver que se le añadan más componentes con el tiempo. ¿Qué opinas de esta nueva herramienta? ¿La probarás en futuros proyectos? ¿Ya la usas? ¡Deja un comentario! ¡Me encantaría saberlo!

Además de registrar las acciones y el estado de Redux, LogRocket registra registros de consola, errores de JavaScript, seguimientos de pila, solicitudes/respuestas de red con encabezados y cuerpos, metadatos del navegador y registros personalizados. También instrumenta el DOM para registrar el HTML y el CSS de la página, recreando vídeos con la máxima precisión incluso de las aplicaciones móviles y de página única más complejas.

Pruébelo gratis.

Si quieres conocer otros artículos parecidos a Guía de adopción de la interfaz de usuario de Shadcn: descripción general, ejemplos y alternativas puedes visitar la categoría Guias.