tremor-npm README

The project's README from github.com/tremorlabs/tremor-npm. As one markdown file: README.md.



Tremor Logo



npm Read the documentation License Apache 2.0 Join Slack Follow at Tremorlabs

Documentation • Website


React components to build charts and dashboards

Tremor NPM 20+ open-source components built on top of Tailwind CSS to make visualizing data simple again. Fully open-source, made by data scientists and software engineers with a sweet spot for design.


Tremor Banner


Getting Started

See our Installation Guide. To make use of the library we also need Tailwind CSS setup in the project.

Example

With Tremor creating an analytical interface is easy.

"use client";
import { AreaChart, Card } from "@tremor/react";

const chartdata = [
  {
    date: "Jan 23",
    "Route Requests": 289,
    "Station Requests": 233,
  },
  // ...
  {
    date: "Oct 23",
    "Route Requests": 283,
    "Station Requests": 247,
  },
];

export default function Example() {
  return (
    <Card className="max-w-4xl">
      <span className="text-tremor-default text-tremor-content dark:text-dark-tremor-content">
        Total Requests
      </span>
      <p className="text-tremor-metric font-semibold text-tremor-content-strong dark:text-dark-tremor-content-strong">
        6,568
      </p>
      <AreaChart
        className="mt-2 h-80"
        data={chartdata}
        index="date"
        categories={["Route Requests", "Station Requests"]}
        colors={["indigo", "rose"]}
        yAxisWidth={33}
      />
    </Card>
  );
}

Tremor Example

Community and Contribution

We are always looking for new ideas or other ways to improve Tremor NPM. If you have developed anything cool or found a bug, send us a pull request. Check out our Contributor License Agreement here.

License

Apache License 2.0

Copyright © 2025 Tremor Labs, Inc. All rights reserved.

tremor-npm (tremorlabs/tremor-npm)

Searching Database…

16.5K ·GitHub
Tremor-npm
What is this?Tremor NPM is a set of 20+ open-source React components for building charts and dashboards, made by Tremor Labs.
Is this a standalone app or a library I add to my project?It's a component library, not an app: you install it into your own React project and import only the components you need. Nothing runs standalone.
How do I get started with it?Add the package to your project via npm and follow the official Installation Guide linked in the README.
Does my project need Tailwind CSS for this to work?Yes — the README says the project also needs Tailwind CSS set up for the library to work. Runtime dependencies include Recharts, Headless UI, date-fns and react-day-picker.
Does it only work in React apps?Yes — these are React components, so you need a React project; they can't be dropped into Vue, Svelte or plain HTML pages.
What powers the charts under the hood?Recharts does the actual chart rendering — it's the library's main runtime dependency, alongside Headless UI for unstyled primitives, plus date-fns and react-day-picker.
Why did the team build this?To make visualizing data simple again: Tremor is made by data scientists and software engineers with a sweet spot for design, so polished, ready-made components are the core idea.
Can I use it in commercial projects?Yes — it's fully open-source under the Apache License 2.0, so commercial use is fine with no paid tier.
What are similar projects?react-bits, rare-ui, chakra-ui, ink-kit, victory, Monocharts, arc-library, mdxcn
Which topics is it in?react-components, reactjs, ui-library, charts, tailwindcss, component-library, data-visualization, ui-components, dashboard, react, free, npm
Creator
tremorlabs
Size
11.2 MB
Stars
16.5K
Updated
CommitJan 13Releasev3.18.7Jan 13
Age
4y
Commits · 90 Days