@berdsk/ui

Biblioteca de componentes UI profissional, performática e altamente customizável da Berdsk. Construída com React e inspirada nos melhores padrões de design do mercado.

✨ Características

• 🚀 Zero Config: Funciona imediatamente sem necessidade de configurações complexas.
• 🎨 Tematização Nativa: Sistema de temas baseado em CSS Variables para customização total.
• 📱 Responsivo: Componentes prontos para qualquer tamanho de tela.
• 🛠️ Integração com Tailwind: Totalmente compatível com Tailwind CSS, mas não dependente dele.
• 📦 Leve e Rápido: Otimizado para performance com suporte a Tree Shaking.

🚀 Instalação

npm install @berdsk/ui

🛠️ Uso Rápido

Para que os estilos funcionem corretamente, importe o CSS global e envolva sua aplicação com o ThemeProvider.

import '@berdsk/ui/dist/styles.css';
import { ThemeProvider, Button, Section } from '@berdsk/ui';

function App() {
  return (
    <ThemeProvider>
      <Section screenHeight centerX centerY className="bg-primary/5">
        <Button variant="solid" color="primary">
          Olá Mundo
        </Button>
      </Section>
    </ThemeProvider>
  );
}

📚 Documentação

Explore a documentação detalhada de cada parte da biblioteca:

Fundamentos

• 🎨 Tematização e Customização (ThemeProvider) - Como configurar cores, fontes e estilos globais.

Componentes

• 🔘 Button - Botões versáteis com múltiplos tamanhos, cores e variantes.
• ✨ Icon - Sistema de ícones integrado e otimizado.
• 📐 Section - Componente de layout para estruturação de páginas.

🎨 Customização (Opcional)

A biblioteca expõe variáveis CSS que podem ser facilmente mapeadas no seu tailwind.config.js:

export default {
  theme: {
    extend: {
      colors: {
        primary: 'var(--berdsk-color-primary)',
        secondary: 'var(--berdsk-color-secondary)',
      },
      // ... outras configurações
    },
  },
};

🛠️ Desenvolvimento

1. Instale as dependências: npm install
2. Build para produção: npm run build
3. Modo desenvolvimento: npm run dev

📄 Licença

Distribuído sob a licença MIT. Veja LICENSE para mais informações.

Desenvolvido com ❤️ por Berdsk