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

Começar por criando um novo aplicativo React usando o criar-reagir-aplicativo pacote (ou Vite se preferir).

Você precisará ter Node.js e npm instalados em seu sistema. Você pode confirmar isso executando nó --versão e então npm --versão em uma linha de comando. Se algum dos comandos estiver ausente, você poderá instalá-los usando um processo simples; veja este guia para instalando 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 cd comando.
2. Correr 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/reagir

5. Depois de instalar o Tremor, importe o pacote em seu App.js (ou main.jsx se você usou Vite) adicionando a seguinte linha na parte inferior de suas importações:

   importar"@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 instalando Tailwind CSS no React.

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

npm i [email protected] @tremor/react

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

importar"./App.css";
importar"@tremor/react/dist/esm/tremor.css";
exportarpadrãofunçãoAplicativo() {
retornar (


Nosso incrível painel React</h1> 
 </div>
 );
}

Em seguida, crie um dedicado componentes subpasta em sua origem pasta. Naquilo componentes pasta, crie uma nova Dashboard.js arquivo e adicione o seguinte código:

funçãoPainel() {
retornar<div>Paineldiv>;
}
exportarpadrão Painel;

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

importar Painel de"./componentes/Painel";

Por fim, exiba o componente em seu aplicativo React adicionando abaixo de h1 elemento.

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 é bloqueios de tremor seção 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 Dashboard.js arquivo:

importar {
 Cartão,
 Título,
 Texto,
 ColGrid,
 AreaChart,
 Barra de progresso,
 Métrica,
 Flex,
} de"@tremor/reagir";
funçãoPainel() {
retornar (


 {/* Seção principal */}
 "mt-6">
 
"h-96" /> 
 </Card>
 {/* Seção KPI */}
 2} gapX="gap-x-6" gapY="gap-y -6" marginTop="mt-6">
 
 {/* Espaço reservado para definir a altura */}
 
"h-28" />
 </Card> 
 </ColGrid>
 </main>
 );
}
exportar Padrão Painel;
O bloco shell contém diferentes componentes 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 o 
 linha com o seguinte:
 
 
Depois isso, adicione a seguinte matriz antes de sua declaração return (este é o dado que a seção principal do painel irá exibir):
 
 // Dados a serem exibidos em o seção principal
const dados = [
 {
 Mês: "21 de janeiro",
 Vendas: 2890,
 Lucro: 2400,
 },
 {
 Mês: "Fev 21",
 Vendas: 1890,
 Lucro: 1398,
 },
 // ...
 {
 Mês: "22 de janeiro",
 Vendas: 3890,
 Lucro: 2980,
 },
];
const valueFormatter = (número) =>< /span>
$ ${Intl.NumberFormat("us").format (number).toString()};
Em seguida, adicione o seguinte código ao seu arquivo após valueFormatter:
 
 // Dados a serem exibidos no KPI seção
const categorias = [
 {
 título: "Vendas",
 métrica: "$ 12.699",
 valor percentual: 15,9,
 meta: "$ 80.000",
 },
 {
 título: "Lucro",
 métrica: "$ 45.564" span>,
 valor percentual: 36,5,
 meta: "$ 125.000",
 },
 {
 título: "Clientes",
 métrica: "1.072",
 valor percentual:  53.6,
 meta: "2.000",
 },
 {
 título: "Visão geral de vendas anuais",
 métrica: "US$ 201.072",
 valor percentual: 28,7,
 meta: "$ 700.000",
 },
];
Para o matriz categories 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) => span> (
 
 {item.title}</Text>
 {item.metric}</Metric> 
 "mt-4">
  truncate={true}
 >{`${item.percentageValue}% (${item.metric} )`}</Text>
 {item.target}</Text>
 </Flex>
  percentValue={ item.percentageValue}
 marginTop="mt-2"
 />
 </Card>
))}
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
O Tremor permite a 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 , poderá ocultar o eixo x passando a propriedade showXAxis={false} ou alterar a altura usando altura={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 única de sua interface do usuário do zero. Usar uma biblioteca como Tremor pode economizar tempo e dor de cabeça na criação de interfaces de usuário responsivas complexas.