Tremor React

Tremor React is an open-source component library purpose-built for dashboards: charts (area, bar, line, donut, funnel, scatter), KPI cards, tables, and a full set of form/input elements (select, date picker, multi-select, number input) that all share one consistent design language out of the box. Built on top of Tailwind CSS and Recharts, it lets teams assemble an analytical interface — metric card plus trend chart plus filter controls — in a handful of components instead of hand-rolling chart styling and layout from scratch.

Every component ships with light and dark theme support via Tremor’s own tremor-* Tailwind design tokens, so charts and inputs stay visually consistent without per-component theme wiring. The library is organized into clear families (chart elements, input elements, layout elements, list elements, text elements, vis elements), each exported from a single @tremor/react entry point, making it straightforward to import just the pieces a given dashboard screen needs.

What You Get

• A full chart suite (Area, Bar, Line, Donut, Funnel, Scatter) built on Recharts with consistent Tremor styling and color palettes
• Dashboard-oriented input elements: Select, MultiSelect, SearchSelect, DatePicker, DateRangePicker, Calendar, NumberInput, Switch, Tabs
• Layout and text primitives (Card, Grid, Metric, Text, Badge) for assembling KPI tiles and dashboard sections quickly
• Built-in light/dark theme support via dedicated tremor-* Tailwind design tokens, no custom theming layer required
• A component library organized by clear family folders (chart/input/layout/list/spark/text/vis-elements), each independently importable

Common Use Cases

• Building an internal analytics dashboard with charts, KPI cards, and filter controls without hand-styling each piece
• Adding a metrics/reporting screen to a SaaS product using consistent light/dark themed charts and tables
• Prototyping a data-heavy admin panel quickly by composing pre-styled chart and input components
• Standardizing chart and form-control visual language across multiple internal tools built on Tailwind CSS

Under The Hood

Architecture - The library exports a flat public surface from src/index.ts (export * from "./components"), backed by component families under src/components/ (chart-elements, input-elements, layout-elements, list-elements, spark-elements, text-elements, util-elements, vis-elements), each with its own index.ts barrel file; src/lib holds shared input-type definitions and utilities, src/hooks and src/contexts provide cross-component state (e.g. theme context), and Storybook stories under src/stories double as living documentation for each component. Tech Stack - Built on React with Tailwind CSS for styling (own tailwind.config.js defining the tremor-* design-token scale), Recharts for the underlying chart rendering, Radix-adjacent primitives via @headlessui/react and @floating-ui/react for accessible interactive components (Select, DatePicker), date-fns and react-day-picker for date handling, and tailwind-merge for class composition; bundled with Rollup, released via semantic-release. Code Quality - The src/tests directory contains 39 test files exercising individual components (chart types, inputs, layout elements) with Jest, and Storybook’s addon-a11y is wired into the dev workflow for accessibility checks alongside interaction tests; components are organized one-per-folder with colocated stories, keeping the surface area of any single file manageable. API Design - Each component family follows a consistent prop pattern (colors, data/categories/index props on charts; value/onValueChange on inputs) so switching between chart types or input types requires minimal relearning, and the single top-level @tremor/react import keeps consumer setup to one install plus a Tailwind config extension rather than per-component configuration.