Sobre el proyecto
ZenUI Library React es una biblioteca de componentes de UI gratuita y de código abierto construida con React y Tailwind CSS. Se posiciona como un recurso ligero y personalizable destinado a acelerar el desarrollo front-end. El README indica que la biblioteca está optimizada para el rendimiento, es fácil de integrar y no tiene dependencias; su uso se describe como plug-and-play, lo que significa que los componentes se copian y pegan en lugar de instalarse como un paquete.
Lo que enumera el README:
Componentes
- Más de 800 componentes
- Más de 20 plantillas preconstruidas
- Bloques de sitios web
- Kits de comercio electrónico
Animaciones
- Más de 100 componentes animados
Herramientas
- Más de 500 iconos personalizables
- Paleta de opacidad de color
- Extracción de color de una imagen cargada (selector de color)
- Maestro de etiquetas semánticas HTML
- Generador de funciones de atajos de teclado listo para usar (shortKey)
- Generador de configuración de Tailwind para v3
Recursos
- Más de 118 recursos de programación
El proyecto también menciona una galería de plantillas de sitios web y un programa a través del cual los creadores pueden vender plantillas de React, Next.js o Tailwind CSS en la ZenUI Library, con una comisión declarada del 80% por venta y una guía de envío independiente.
Instalación para desarrollo local
Clone el repositorio, cambie al directorio del proyecto, instale las dependencias con npm install y luego inícielo con npm run dev.
Documentación y uso
Los componentes de ZenUI están documentados en la biblioteca en línea de ZenUI. El flujo de trabajo es: encontrar un componente, copiar el fragmento de código y pegarlo en cualquier lugar donde se acepte el marcado HTML o JSX. No hay ningún paso de configuración requerido para el uso básico. Cada componente está construido a partir de clases de Tailwind CSS, por lo que un ejemplo de botón se define puramente con clases de utilidad para el relleno, color de fondo, color de texto, esquinas redondeadas y estado hover, y funciona sin props. Debido a que el estilo se basa en clases, los componentes se personalizan editando o agregando clases: cambiando colores de fondo, ajustando el relleno o aumentando el radio del borde intercambiando valores en la lista de clases. Se pueden aplicar utilidades adicionales de Tailwind para efectos como sombras y transiciones.
Mejores prácticas sugeridas en el README
Comience con el componente predeterminado para comprender su comportamiento antes de personalizarlo; siga el enfoque utility-first de Tailwind en lugar de reescribir CSS; y mantenga notas sobre las modificaciones realizadas en los componentes estándar para facilitar el mantenimiento.
Proyecto y comunidad
- Licencia: MIT
- Contribución: se agradecen las contribuciones de la comunidad, con un archivo CONTRIBUTING.md en el repositorio
- Venta de plantillas: las pautas, los pasos de envío y la información sobre las ganancias se cubren en TEMPLATE_SUBMISSION_GUIDE.md
- Enlaces: sitio web en react-ui.zenui.net, además de canales de X (Twitter), LinkedIn, Facebook y Discord
- Soporte: se proporciona un enlace de Ko-fi
El README no indica benchmarks, versiones de paquetes más allá de la mención del generador de configuración de Tailwind v3, ni detalles sobre el soporte del navegador.
Comments
0 Rating appears after 10 ratings
Sign in to join the discussion.