brainzUI, componentes criados com React, Typescript and TailwindCSS

[ Veja todos os componentes ]

Visão Geral

Este repositório contém a biblioteca de componentes de interface desenvolvida em React e Tailwind CSS para uso em projetos Big Brain e Reeducation.

🔗 Layout no Figma

🎯 Objetivos

1. Padronização – Garantir consistência visual nas interfaces da Brainz.
2. Abstração da camada visual – Facilitar o desenvolvimento front-end, permitindo que os devs foquem na lógica de negócio.
3. Reutilização – Componentes modulares e escaláveis para maior produtividade e manutenção simplificada.

💿 Como instalar?

Make sure you've installed TailwindCSS and daisyUI.

Instale a biblioteca com npm ou yarn:

npm install @brainz_group/brainz-ui
ou
yarn add @brainz_group/brainz-ui

Dentro de src/App.tsx faça a importação dos estilos da biblioteca.

import "@brainz_group/brainz-ui/style.css";

⚡ Como utilizar?

Importe os componentes da brainzUI dentro de seus componentes:

import { Button } from "@brainz_group/brainz-ui";

export default (props) => {
  return <Button color="primary">Clique aqui!</Button>;
};

🎨 Como personalizar?

Classes personalizadas

Você pode customizar os componentes de duas formas:

1. Utilizando as classes utilitárias do Tailwind CSS.
2. Passando classes personalizadas diretamente no atributo className.

Isso garante flexibilidade para adaptar os estilos conforme as necessidades do seu projeto.

Cores personalizadas

Utilizamos variáveis CSS para definir os estilos dos componentes, garantindo flexibilidade e fácil personalização.

Se precisar alterar as cores do projeto, basta substituir os valores das variáveis CSS e acrescentar a propriedade !important, sem a necessidade de modificar os componentes diretamente.

Variáveis utilizadas

As variáveis CSS disponíveis para personalização são:

:root {
  /* NEUTRAL */
  --app-neutral-50: #f7f7f7;
  --app-neutral-100: #e7e7e7;
  --app-neutral-200: #d7d7d7;
  --app-neutral-300: #c7c7c7;
  --app-neutral-400: #b7b7b7;
  --app-neutral-500: #a7a7a7;
  --app-neutral-600: #979797;
  --app-neutral-700: #777777;
  --app-neutral-800: #575757;
  --app-neutral-900: #373737;

  /* PRIMARY */
  --app-primary-100: #94e7f5;
  --app-primary-200: #72d9e8;
  --app-primary-500: #03bac6;
  --app-primary-600: #0297a9;
  --app-primary-700: #01778f;

  /* SECONDARY */
  --app-secondary-100: #fff1b9;
  --app-secondary-200: #fce79c;
  --app-secondary-500: #fecb37;
  --app-secondary-600: #e5a829;
  --app-secondary-700: #d6901a;

  /* TERTIARY */
  --app-tertiary-100: #f9b1a8;
  --app-tertiary-200: #f78d84;
  --app-tertiary-500: #e55b53;
  --app-tertiary-600: #d34741;
  --app-tertiary-700: #b9342f;

  /*ERROR*/
  --app-error-50: #fce9e5;
  --app-error-100: #f5b0a1;
  --app-error-200: #e91500;

  /*SUCCESS*/
  --app-success-50: #eef6eb;
  --app-success-100: #acd49f;
  --app-success-200: #24a31a;

  /*WARNING*/
  --app-warning-50: #fff8e6;
  --app-warning-100: #f9d69e;
  --app-warning-200: #ff9d0c;

  /*INFO*/
  --app-info-50: #edf1ff;
  --app-info-100: #9fc5fd;
  --app-info-200: #1f6afb;
}

Exemplo

Exemplo de paleta de cor personalizada para a cor primary:

:root {
  --app-primary-100: #94f59c !important;
  --app-primary-200: #76e872  !important;
  --app-primary-500: #30c603  !important;
  --app-primary-600: #29a902  !important;
  --app-primary-700: #358f01  !important;
}

Tecnologias utilizadas

• ⚛️ React 18
• 📚 Storybook
• ⛑ TypeScript
• ⛑ Vite
• 📏 Biome JS - Linter e Formatter
• TailwindCSS

Feito com 💗 pelo Time de Produto - Brainz Group