Pular para o conteúdo principal

Componentes Ocean

O Ocean Design System fornece uma biblioteca abrangente de componentes React reutilizáveis, totalmente tipados e acessíveis.

Filosofia dos componentes​

Nossos componentes são construídos seguindo os princípios:

  • TypeScript nativo - Tipagem completa para melhor experiência de desenvolvimento
  • Composição sobre configuração - Componentes flexíveis que se combinam bem
  • Design consistente - Todos os componentes seguem o mesmo sistema de design
  • Performance - Otimizados para renderização eficiente

Categorias de componentes​

🔤 Inputs​

Componentes para entrada de dados do usuário:

🧭 Navigation​

Componentes para navegação:

📊 Data Display​

Componentes para exibição de dados:

💬 Feedback​

Componentes para feedback do usuário:

📐 Layout​

Componentes para estruturação:

✏️ Typography​

Componentes tipográficos:

🛠️ Utilities​

Componentes utilitários:

Padrões de uso​

Importação​

// Importação individual (recomendado)
import { Button } from '@useblu/ocean-react';

// Ou importação específica para melhor tree-shaking
import { Button } from '@useblu/ocean-react/Button';

Props padrão​

Todos os componentes Ocean compartilham algumas props comuns:

interface CommonProps {
  className?: string;
  'data-testid'?: string;
  id?: string;
}

Contribuindo​

Encontrou um bug ou tem uma sugestão de melhoria?

Próximos passos​