Configurando o projeto e implementando o primeiro componente Cult UI
Controle total: Você possui 100% do código. Pode modificar, adaptar e evoluir sem depender de atualizações externas.
Sem bloat: Apenas os componentes que você usa. Não há código desnecessário no seu bundle final.
Customização: Cada componente pode ser totalmente personalizado para suas necessidades específicas.
Vamos expandir nossa função de utilitários para incluir variantes e animações:
Agora você tem um setup robusto para trabalhar com Cult UI:
Botões são fundamentais em qualquer interface. O Neumorph Button do Cult UI demonstra conceitos importantes como variantes, estados e animações suaves.
Neumorfismo:
Efeito visual que simula botões "pressionados" ou "elevados" usando sombras internas e externas.
forwardRef:
Permite que o componente passe referências para o elemento DOM, essencial para integração com formulários.
Variantes:
Sistema para diferentes estilos do mesmo componente, mantendo consistência visual.
Estados:
Loading, disabled, hover, active - todos os estados interativos tratados adequadamente.
Teste todas as variantes e estados do componente
💡 Dica: Use as abas acima para alternar entre visualização e código. Copie o código e cole diretamente no seu projeto!
Exemplo real de uso do Neumorph Button em um SaaS de restaurante
Mesa 12, 15, 8
💡 Dica: Use as abas acima para alternar entre visualização e código. Copie o código e cole diretamente no seu projeto!
Performance: Use React.memo() para componentes que re-renderizam frequentemente.
Acessibilidade: O componente já inclui focus states e aria attributes.
Customização: Modifique as variantes e tamanhos conforme seu design system.
Mobile: Use tamanhos 'sm' e 'md' para interfaces mobile.
Parabéns! Você acabou de implementar seu primeiro componente Cult UI e aplicar em um cenário real.