Construir interfaces de aplicações pode ser desafiador. Para garantir que elas sejam utilizáveis, acessíveis e manuteníveis, muitos aspectos precisam ser considerados. Uma dessas etapas é a estilização de componentes front-end, que pode envolver a criação de classes CSS usando pré-processadores como SASS e LESS, e a aplicação dessas classes usando escopo local ou global, importando o(s) arquivo(s) nas páginas e/ou componentes que as utilizam.
Felizmente, hoje em dia contamos com uma variedade de ferramentas para tornar esse trabalho mais fácil, rápido e produtivo, com padronização e possibilidades de customização. Uma dessas ferramentas é o Chakra UI.
O que é o Chakra UI?
O Chakra UI é uma biblioteca de componentes de interface de usuário para React que oferece uma experiência de desenvolvimento rápida e fácil. Ele fornece um conjunto de componentes prontos para uso, bem como estilos e temas personalizáveis, tornando-o uma escolha popular para desenvolvedores que procuram criar interfaces de usuário elegantes e acessíveis.
Se você já usou o Material UI antes, vai perceber uma semelhança. A diferença é que o Material UI usa conceitos de Material Design. Já o Chakra UI foi baseado na Theme UI, seguindo as especificidades dessa biblioteca, mas fornecendo mais componentes, uma melhor API de estilo e componentes mais intuitivos, com um foco maior na criação de código flexível, combinável e escalável. Além disso, já conta com padrões de acessibilidade.
Ele oferece uma maneira muito rápida de usar componentes pré-construídos, para que não precisemos criá-los do zero. O Chakra UI ajuda muito na criação de interfaces para React e pode acelerar o processo. Além disso, como já citamos, você tem a opção de personalizar praticamente qualquer coisa do tema Chakra padrão para dar à sua aplicação um toque pessoal.
LEIA TAMBÉM
Ao utilizar ferramentas como o Chakra UI, podemos economizar tempo e nos concentrar no que realmente importa: a lógica do aplicativo!
Neste tutorial, apresentaremos um passo a passo para a instalação, configuração e utilização do Chakra UI e seus componentes em uma aplicação simples, mas com os fundamentos básicos para que você possa começar a se aventurar.
Passo a passo
Antes de começar, certifique-se de ter um projeto React existente configurado. Caso contrário, você pode criar um novo projeto com create-react-app.
Você também poderá acompanhar o tutorial através do código-fonte deste exemplo.
Agora vamos para a parte divertida: o código!
Instalação do Chakra UI
Para começar a utilizar o Chakra UI em seu projeto React, você precisa instalar a biblioteca através do gerenciador de pacotes do Node.js, o NPM (ou Yarn, se preferir), seguindo as instruções da documentação oficial. Para isso, abra o terminal no diretório do seu projeto e execute o seguinte comando:
npm i @chakra-ui/react @emotion/react @emotion/styled framer-motion
ou
yarn add @chakra-ui/react @emotion/react @emotion/styled framer-motion
Este comando instalará as dependências necessárias do Chakra UI, incluindo o pacote principal @chakra-ui/react, as bibliotecas de estilização @emotion/react e @emotion/styled e o pacote framer-motion para animações.
Configurando o Chakra UI Provider
O Chakra UI usa um componente Provider para fornecer estilos e temas para toda a sua aplicação. Para configurar o Provider, você precisará importá-lo do pacote @chakra-ui/react e usá-lo em torno do componente App em seu arquivo index.js ou App.js.
Estamos utilizando um projeto gerado pelo create-react-app sem o template typescript. Seguindo o exemplo deste tutorial, você deve ir até o arquivo index.js e lá adicionar o seu provider.
Observe que o componente Provider é usado em torno do componente App, fornecendo estilos e temas para toda a aplicação.
Usando componentes Chakra UI
Agora que você tem o Provider configurado, pode começar a usar os componentes do Chakra UI. A biblioteca oferece uma ampla gama de componentes, desde botões e formulários até modais e barras de progresso.
Você pode conhecer melhor os componentes do Chakra UI consultando a seção Components da documentação oficial.
Cada componente traz estilizações e comportamentos intrínsecos, conforme você poderá ver na documentação, e você pode customizá-los através de propriedades, semelhantes às propriedades que utilizamos no CSS.
Vamos fazer uma primeira alteração no nosso projeto, utilizando um componente Heading. Abra o arquivo App.js e substitua o conteúdo pelo seguinte código:
O componente Heading é um componente de texto que renderiza um título em negrito e com tamanho grande. Ao inspecionar o elemento, você pode ver que o Chakra UI adicionou uma série de propriedades CSS ao Heading, como font-weight, font-size e line-height.
Podemos alterar os estilos padrão do Chakra UI através das props, e falaremos sobre isso na sequência.
Outro componente bastante utilizado é o Container. Vamos substituir a div que tem a classe “App” para um container do Chakra UI.
Lembra que falamos sobre as possibilidades de customização? Neste exemplo estamos utilizando o elemento Container para substituir a div com o className App, estilizando-o através das propriedades do componente para manter os padrões do css que tínhamos antes:
Agora que substituímos a div App pelo Container, podemos ver que o layout da nossa aplicação já está mais organizado e bem definido. Além disso, agora temos mais opções de customização para aprimorar ainda mais a aparência e comportamento da nossa aplicação.
Outra opção para estilização de um componente é utilizar um objeto com as propriedades, semelhante ao que fazemos com styled-components ou classes CSS. Vamos ver um exemplo utilizando um Box (que renderiza um elemento div):
O resultado final será o seguinte:
Cada elemento do Chakra UI renderiza um elemento HTML de acordo com a documentação, mas você pode modificar isso através da propriedade as. Um Container, conforme falamos, renderiza uma div, você pode modificar para uma section, por exemplo, utilizando o atributo as, como em as=”section”
Que tal exercitar adicionando algumas propriedades ao elemento Box, ou mesmo alguns elementos novos? Você pode trabalhar com filtros, hover, disposição dos elementos, margem, padding, quaisquer outras propriedades, a critério da sua criatividade.
Recomendamos dar uma olhada em especial nos componentes que trazem estilizações de flex/grid, como o próprio Flex, Stack e Grid. Também recomendamos uma olhada especial na seção de Estilos responsivos e useBreakpointValue, pois o Chakra traz uma série de breakpoints que você poderá utilizar para tornar seus componentes responsivos já durante a criação dos mesmos. Não é demais?
Estilizações globais
Outra opção para personalizar estilos é criar estilos globais que afetam toda a aplicação.
Para criar estilos globais, você pode criar um objeto com os estilos desejados e passá-lo para a propriedade styles do ChakraProvider. Por exemplo:
Nesse exemplo, estamos definindo estilos globais para o body da página, definindo uma cor de fundo (bg) e uma cor de texto (color).
Em nossa aplicação, o resultado será o seguinte:
Você pode personalizar praticamente qualquer estilo de qualquer elemento dessa maneira, caso necessite de customizações que se apliquem a toda a aplicação. Lembrando que este exemplo é bastante simples, o padrão normalmente utilizado é separar estes estilos globais em um arquivo separado.
Wrapping up
Além dos componentes básicos que já vimos, o Chakra UI oferece diversos outros componentes úteis para a construção de interfaces. Há componentes para lidar com botões, formulários, tabelas, ícones, menus, modais e muito mais. A documentação do Chakra UI é extensa e bem organizada, o que facilita muito o processo de aprendizado.
Outra vantagem do Chakra UI é a sua compatibilidade com o React. A popularidade do React se deve, em parte, à sua facilidade de uso e à sua eficiência no gerenciamento do estado da aplicação. Combinado com o Chakra UI, é possível criar aplicações web modernas e dinâmicas em pouco tempo.
Além disso, como já falamos, o Chakra UI é altamente customizável. Os estilos dos componentes são definidos em arquivos CSS-in-JS, o que permite uma grande flexibilidade no design das interfaces. É possível personalizar as cores, fontes, espaçamentos, bordas e muito mais.
Por fim, o Chakra UI é compatível com diversas outras ferramentas e bibliotecas, como o TypeScript, o Next.js e o Gatsby. Isso torna a integração do Chakra UI em projetos já existentes muito mais fácil e rápida.
Em resumo, o Chakra UI é uma ótima opção para quem busca construir interfaces de usuário atraentes, responsivas e customizáveis em conjunto com o React. Com a sua ampla variedade de componentes e a sua documentação detalhada, é fácil começar a utilizar o Chakra-UI em seus projetos.
No entanto, é importante lembrar que a escolha da biblioteca de UI é apenas uma das decisões a serem tomadas ao desenvolver um projeto. É preciso levar em consideração diversos fatores, como a usabilidade, acessibilidade e performance da interface, além da manutenção e escalabilidade do código.
Por isso, é importante avaliar cuidadosamente as opções disponíveis e escolher a que melhor atende às necessidades do seu projeto.
E bora codar!
