Crie painéis impressionantes em React usando o Tremor

Construir uma interface de usuário complexa no React, como um painel, pode ser assustador se você estiver fazendo isso do zero. Felizmente, você não precisa fazer isso.

Uma das melhores bibliotecas de componentes que você pode usar é a Tremor, que permite criar painéis modernos e responsivos no React com pouco esforço. Descubra como usar o Tremor para criar painéis no React.

O que é tremor?

O Tremor é uma biblioteca de componentes de interface do usuário moderna, de código aberto e de baixo nível para criar painéis no React. Tremor se baseia em Tailwind CSS, React e Recharts (outra biblioteca de gráficos baseada em componentes para React). Além disso, ele usa ícones de Heroicons.

Possui mais de 20 componentes com todos os elementos essenciais para construir uma interface analítica fantástica, como gráficos, cartões e elementos de entrada. A biblioteca inclui componentes pequenos e modulares, como emblemas, botões, menus suspensos e guias, que você pode combinar para criar painéis completos.

O que faz o Tremor se destacar é que ele é altamente opinativo, então, desde que você esteja de acordo com as decisões da biblioteca, você pode abrir um painel de aparência profissional rapidamente.

O Tremor oferece suporte à personalização, é claro, e facilita isso por meio do sistema de props do React.

Como começar com Tremor

Comece criando um novo aplicativo React usando o pacote create-react-app (ou Vite, se preferir).

Você precisará ter Node.js e npm instalados em seu sistema. Você pode confirmar isso executando node –version e, em seguida, npm –version em uma linha de comando. Se algum dos comandos estiver ausente, você poderá instalá-los usando um processo simples; consulte este guia para instalar Node.js e npm no Windows, por exemplo.

Configurando seu projeto React com o Tremor

1. Abra seu terminal e navegue até o diretório de sua preferência usando o comando cd .
2. Execute npx create-react-app tremor-tutorial . Este comando criará um novo aplicativo React chamado tremor-tutorial em seu sistema no diretório atual.
3. Alterne para o diretório do aplicativo executando cd tremor-tutorial .
4. Instale o Tremor em seu projeto React usando o seguinte comando: npm install @tremor/react
5. Depois de instalar o Tremor, importe o pacote em seu App.js (ou main.jsx se você usou o Vite) adicionando a seguinte linha na parte inferior de suas importações: import "@tremor/react/dist/esm/tremor.css";

Embora Tremor use Tailwind CSS, você não precisa instalá-lo em seu aplicativo React para usar a biblioteca. Isso ocorre porque o Tremor já tem o Tailwind configurado internamente. No entanto, se você quiser, confira nosso tutorial sobre como instalar Tailwind CSS no React.

Em seguida, instale Heroicons em seu projeto usando o seguinte comando:

npm i heroicons@1.0.6 @tremor/react

Agora, vamos remover o código desnecessário em nosso arquivo src/App.js . Aqui está nosso código inicial no App.js :

import "./App.css";
import "@tremor/react/dist/esm/tremor.css";
export default function App() {
  return (
    <div>
      <h1>Our Awesome React Dashboard</h1>
    </div>
  );
}


Em seguida, crie uma subpasta de componentes dedicada em sua pasta src . Nessa pasta de componentes , crie um novo arquivo Dashboard.js e adicione o seguinte código:

function Dashboard() {
  return <div>Dashboard</div>;
}


export default Dashboard;


Importe o componente Dashboard no App.js adicionando a seguinte instrução após outras importações:

import Dashboard from "./components/Dashboard";


Por fim, exiba o componente em seu aplicativo React adicionando <Dashboard /> abaixo do elemento h1 .

Criando um painel com o Tremor

Para criar um painel completo usando Tremor, com o mínimo de confusão, selecione um dos blocos disponíveis. Os blocos são layouts pré-construídos compostos de diferentes pequenos componentes modulares.

Um bom ponto de partida é a seção de blocos do Tremor , que mostra diferentes tipos de componentes de blocos pré-construídos que você pode usar. Os shells de layout, por exemplo, permitem que você reúna diferentes componentes para criar um painel.

Primeiro, adicione o seguinte código ao seu arquivo Dashboard.js :

import {
  Card,
  Title,
  Text,
  ColGrid,
  AreaChart,
  ProgressBar,
  Metric,
  Flex,
} from "@tremor/react";


function Dashboard() {
  return (
    <main>
      <Title>Sales Dashboard</Title>
      <Text>This is a sample dashboard built with Tremor.</Text>

O bloco shell contém componentes diferentes que você importa na parte superior do arquivo. Se você visualizar isso em seu navegador, verá apenas dois blocos vazios.

Você pode preencher seus blocos com os componentes pré-construídos do Tremor, como um gráfico, cartão ou tabela. Você pode extrair dados de uma API (REST ou GraphQL) ou armazená-los em uma matriz de objetos dentro do seu componente.

Para adicionar um componente ao seu bloco shell, substitua a linha <div className=”h-96″/> pelo seguinte:

<Title>Performance</Title>


<Text>Comparison between Sales and Profit</Text>

Depois disso, adicione o seguinte array antes de sua declaração de retorno (esses são os dados que a seção principal do painel exibirá):

// Data to display in the main section
const data = [
  {
    Month: "Jan 21",
    Sales: 2890,
    Profit: 2400,
  },
  {
    Month: "Feb 21",
    Sales: 1890,
    Profit: 1398,
  },
//. ..
  {
    Month: "Jan 22",
    Sales: 3890,
    Profit: 2980,
  },
];


const valueFormatter = (number) =>

Em seguida, adicione o seguinte código ao seu arquivo após valueFormatter :

// Data to display in KPI section
const categories = [
  {
    title: "Sales",
    metric: "$ 12,699",
    percentageValue: 15.9,
    target: "$ 80,000",
  },
  {
    title: "Profit",
    metric: "$ 45,564",
    percentageValue: 36.5,
    target: "$ 125,000",
  },
  {
    title: "Customers",
    metric: "1,072",
    percentageValue: 53.6,
    target: "2,000",
  },
  {
    title: "Yearly Sales Overview",
    metric: "$ 201,072",
    percentageValue: 28.7,
    target: "$ 700,000",
  },
];


Para a matriz de categorias de objetos, você precisa mapear cada objeto para exibir os dados em componentes Card separados. Primeiro, exclua o componente Card na seção KPI e substitua-o por este código:

{categories.map((item) => (
  <Card key={item.title}>
    <Text>{item.title}</Text>
    <Metric>{item.metric}</Metric>
    <Flex marginTop="mt-4">
      <Text
        truncate={true}
      >{`${item.percentageValue}% (${item.metric})`}</Text>


      <Text>{item.target}</Text>
    </Flex>

E é isso. Você criou seu primeiro painel com o Tremor. Visualize seu painel executando npm start . Deve ser semelhante à captura de tela acima.

Personalizando os componentes do tremor

Tremor permite personalização usando adereços. Você precisará revisar a documentação do componente que deseja personalizar e verificar todas as propriedades incluídas com seus valores padrão.

Por exemplo, se você tiver um <LineChart />, poderá ocultar o eixo x passando a propriedade showXAxis={false} ou alterar a altura usando height={h-40} . Para props que declaram valores encontrados no Tailwind CSS, como dimensionamento, espaçamento, cores e o resto, você deve usar as classes utilitárias do Tailwind.

Crie painéis React complexos com facilidade

Graças a bibliotecas de componentes como o Tremor, você não precisa criar cada parte de sua IU do zero. O uso de uma biblioteca como o Tremor pode economizar tempo e dor de cabeça na criação de interfaces de usuário responsivas complexas.