Sobre o projeto
ZenUI Library React é uma biblioteca de componentes UI gratuita e de código aberto construída com React e Tailwind CSS. Ela é posicionada como um recurso leve e customizável destinado a acelerar o desenvolvimento front-end. O README afirma que a biblioteca é otimizada para desempenho, fácil de integrar e não possui dependências; o uso é descrito como plug-and-play, o que significa que os componentes são copiados e colados em vez de instalados como um pacote.
O que o README lista:
Componentes
- Mais de 800 componentes
- Mais de 20 templates pré-construídos
- Blocos de website
- Kits de e-commerce
Animações
- Mais de 100 componentes animados
Ferramentas
- Mais de 500 ícones customizáveis
- Paleta de opacidade de cores
- Extração de cor de uma imagem carregada (color picker)
- Mestre de tags semânticas HTML
- Gerador de função de atalho de teclado pronto (shortKey)
- Gerador de configuração Tailwind para v3
Recursos
- Mais de 118 recursos de programação
O projeto também menciona uma galeria de templates de websites e um programa através do qual criadores podem vender templates de React, Next.js ou Tailwind CSS na ZenUI Library, com uma comissão declarada de 80% por venda e um guia de submissão separado.
Instalação para desenvolvimento local
Clone o repositório, entre no diretório do projeto, instale as dependências com npm install e, em seguida, inicie com npm run dev.
Documentação e uso
Os componentes ZenUI estão documentados na biblioteca online ZenUI. O fluxo de trabalho é: encontrar um componente, copiar o trecho de código e colá-lo em qualquer lugar onde a marcação HTML ou JSX seja aceita. Não há etapa de configuração obrigatória para o uso básico. Cada componente é construído a partir de classes Tailwind CSS, portanto, um exemplo de botão é definido puramente com classes utilitárias para preenchimento, cor de fundo, cor do texto, cantos arredondados e estado de hover, e funciona sem props. Como a estilização é baseada em classes, os componentes são personalizados editando ou adicionando classes: alterando cores de fundo, ajustando o preenchimento ou aumentando o raio da borda trocando valores na lista de classes. Utilitários adicionais do Tailwind podem ser aplicados para efeitos como sombras e transições.
Melhores práticas sugeridas no README
Comece com o componente padrão para entender seu comportamento antes de personalizar; siga a abordagem utility-first do Tailwind em vez de reescrever o CSS; e mantenha notas sobre as modificações feitas nos componentes padrão para facilitar a manutenção.
Projeto e comunidade
- Licença: MIT
- Contribuição: contribuições da comunidade são bem-vindas, com um arquivo CONTRIBUTING.md no repositório
- Vendas de templates: diretrizes, etapas de submissão e informações de ganhos são cobertas no TEMPLATE_SUBMISSION_GUIDE.md
- Links: website em react-ui.zenui.net, além de canais no X (Twitter), LinkedIn, Facebook e Discord
- Suporte: um link do Ko-fi é fornecido
O README não menciona benchmarks, versões de pacotes além da menção ao gerador de configuração Tailwind v3, ou detalhes de suporte ao navegador.
Comments
0 Rating appears after 10 ratings
Sign in to join the discussion.