Tremor
Para montar paneles de control y gráficos en React sin partir de cero el diseño.
Componentes React para construir dashboards y visualizaciones de datos, sobre Tailwind CSS.
Notas y contexto
Qué es
Tremor es una colecciĂłn de componentes React, creada por Tremor Labs, para construir dashboards y visualizaciones de datos. Este repositorio (tremor-npm) es el paquete npm clásico: una librerĂa con más de 20 componentes (gráficos, tablas, tarjetas, indicadores) construidos sobre Tailwind CSS y publicados bajo licencia Apache 2.0. Tremor ha evolucionado hacia un segundo enfoque al estilo de shadcn/ui, con componentes que se copian y pegan en el proyecto, pero este paquete instalable sigue activo y mantenido.
Para qué sirve
- Montar paneles de administraciĂłn y dashboards de analĂtica con componentes ya estilizados.
- Añadir gráficos de áreas, barras, lĂneas o donuts a una app React con poco cĂłdigo.
- Construir tarjetas de métricas (KPI), tablas y listas con un diseño coherente.
- Prototipar rápido interfaces de datos antes de invertir en un diseño propio.
Cuándo usarlo
Encaja cuando necesitas un dashboard React presentable en poco tiempo y ya usas (o aceptas usar) Tailwind CSS. El paquete npm es la vĂa más directa: instalas e importas. Si necesitas control total sobre el cĂłdigo y el estilo, conviene mirar el enfoque copy-and-paste del proyecto Tremor más reciente. Como alternativas para gráficos puros están Recharts (sobre el que Tremor se apoya) o Chart.js, y para componentes generales, shadcn/ui.
Ejemplo
Instalación y uso básico de un gráfico de áreas con el paquete npm:
npm install @tremor/react
import { AreaChart, Card } from “@tremor/react”;
const data = [ { fecha: “Ene”, ventas: 230 }, { fecha: “Feb”, ventas: 310 }, { fecha: “Mar”, ventas: 280 }, ];
export function Panel() {
return (
Requiere tener Tailwind CSS configurado en el proyecto.
Puntos clave
- Más de 20 componentes orientados a datos: gráficos, tablas, tarjetas e indicadores.
- Construido sobre Tailwind CSS, con tipado en TypeScript.
- Gráficos basados en Recharts, con una API más sencilla y opinada.
- Open source bajo Apache 2.0 y con cientos de miles de descargas mensuales.
Ten en cuenta
Depende de Tailwind CSS: sin esa configuración no funciona. El paquete usa tokens de color propios de Tremor, lo que puede chocar con un sistema de diseño existente; el enfoque copy-and-paste más reciente evita esos tokens y da más libertad. Para necesidades de visualización avanzadas o muy personalizadas puede quedarse corto frente a trabajar directamente con Recharts o D3.