¿Qué es shadcn ui?
No es una Biblioteca Tradicional
La distinción más significativa de shadcn/ui es que no es una biblioteca tradicional todo-en-uno. En lugar de instalar la biblioteca completa, copias componentes individuales en tus proyectos.
Este enfoque permite una personalización completa y elimina dependencias y elementos innecesarios que no necesitas.
Control Completo
Como estás copiando código en bruto, tienes control total sobre los estilos y la funcionalidad. Modificar o extender la funcionalidad de los componentes para adaptarse a necesidades específicas no trae complicaciones tradicionales al usar bibliotecas convencionales.
Diseñado para React y Next.js
shadcn/ui está construido para utilizarse con React, Next.js, Astro, Remix, y Gatsby. También soporta la renderización del lado del servidor (SSR) y la generación de sitios estáticos (SSG).
Calidad de los Componentes
La colección ofrece una amplia gama de componentes bien diseñados. Desde formularios y botones hasta modelos más complejos y menús desplegables.
Cada componente está construido siguiendo las mejores prácticas de diseño, incluyendo gestión de estados y atributos de accesibilidad.
Cómo usar shadcn/ui
A continuación, un ejemplo de cómo usar shadcn con Next.js.
1. Crear proyecto
Ejecuta el comando init para crear un nuevo proyecto de Next.js o para configurar uno existente:
npx shadcn@latest init
Puedes usar el indicador -d para los valores predeterminados, por ejemplo new-york, zinc y yes para las variables CSS.
npx shadcn@latest init -d
2. Configurar components.json
Se te harán algunas preguntas para configurar components.json:
¿Qué estilo te gustaría usar? › New York¿Qué color te gustaría usar como color base? › Zinc¿Quieres usar variables CSS para los colores? › no / sí
3. Encuentra los componentes que necesitas
Ahora puedes agregar componentes a tu proyecto. Visita la documentación de componentes de shadcn para encontrar los componentes que necesitas.
Agregar un componente es sencillo, solo usa el comando add, por ejemplo, el componente button:
npx shadcn@latest add button
Otra forma de usar componentes de shadcn ui es usar Vercel's v0. Es una IA generativa que utiliza componentes shadcn para crear páginas web.
Ventajas de shadcn/ui
1. Ligero
Al copiar solo los componentes que necesitas, tu proyecto se mantiene liviano y libre de bloatware innecesario en tu base de código.
2. Personalizable
shadcn/ui te ofrece control total sobre cada componente. Esta libertad es especialmente valiosa para proyectos con requisitos específicos de marca o diseño.
3. Código Abierto y Gratuito
shadcn/ui es completamente de código abierto. Los desarrolladores pueden contribuir al proyecto o adaptarlo según sea necesario para sus casos de uso únicos. Es gratuito y no tiene restricciones de licencia, lo que lo convierte en una excelente herramienta para proyectos tanto profesionales como personales.
Casos de uso de shadcn ui
1. Interfaces Altamente Personalizadas
Si estás construyendo un proyecto que requiere control detallado sobre la apariencia de tu interfaz, shadcn/ui te permite ajustar los componentes a tus especificaciones exactas.
2. Proyectos Next.js
Los desarrolladores que trabajan en aplicaciones Next.js encontrarán que shadcn/ui se adapta perfectamente, especialmente con su compatibilidad con SSR y Tailwind CSS.
3. Prototipado de Sistemas de Diseño
Para equipos que construyen sus propios sistemas de diseño, shadcn/ui ofrece un excelente punto de partida. La flexibilidad de personalizar componentes facilita el prototipado y la refinación de un conjunto de componentes reutilizables.
Kit de Figma de shadcn ui
Hay un gran Kit de UI para Figma creado por Pietro Schirano. Contiene todos los componentes con propiedades personalizables, tipografía, etc. Cópialo aquí.
Conclusión
shadcn/ui es una excelente opción para desarrolladores que buscan componentes de frontend livianos y listos para usar. Aunque no es una biblioteca de UI en el sentido tradicional, tiene todos los componentes que puedas necesitar para un típico proyecto web.
En lugar de complicaciones confusas para ajustar bibliotecas de UI promedio, obtienes el código fuente completo de cada componente que puedes estilizar y modificar según tus necesidades.
Para más información, visita shadcn/ui en GitHub.
