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
这是什么？Tremor NPM 是一套由 Tremor Labs 开发的开源 React 组件，包含 20 多个组件，用于构建图表和仪表盘。
它是独立的应用，还是要添加到我项目里的库？它是一个组件库，不是应用：你需要把它安装到自己的 React 项目中，只导入需要的组件。它无法单独运行。
我该怎么上手？通过 npm 把这个包添加到你的项目，然后按照 README 中链接的官方安装指南操作。
我的项目需要配置 Tailwind CSS 才能用它吗？需要——README 中说明，这个库要正常工作，项目还需要配置好 Tailwind CSS。它的运行时依赖包括 Recharts、Headless UI、date-fns 和 react-day-picker。
它只能在 React 应用里用吗？是的——这些是 React 组件，所以你必须有一个 React 项目；它们没法直接放进 Vue、Svelte 或纯 HTML 页面里使用。
图表底层是用什么实现的？实际的图表渲染由 Recharts 完成——它是这个库的主要运行时依赖，另外还有用于无样式基础组件的 Headless UI，以及 date-fns 和 react-day-picker。
团队为什么要做这个？为了让数据可视化重新变得简单：Tremor 由一群兼具设计品味的数据科学家和软件工程师打造，因此提供精美、开箱即用的组件正是它的核心理念。
我可以在商业项目中使用它吗？可以——它基于 Apache License 2.0 完全开源，可以自由用于商业用途，没有付费版本。
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