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 — это набор из более чем 20 open-source React-компонентов для создания графиков и дашбордов, разработанный командой Tremor Labs.
Это отдельное приложение или библиотека, которую я подключаю к своему проекту?Это библиотека компонентов, а не приложение: вы устанавливаете её в свой React-проект и импортируете только нужные компоненты. Сама по себе она не запускается.
Как начать с ней работать?Добавьте пакет в свой проект через npm и следуйте официальному Installation Guide, ссылка на который есть в README.
Для работы нужен Tailwind CSS в моём проекте?Да — в README сказано, что для работы библиотеки в проекте также должен быть настроен Tailwind CSS. Среди runtime-зависимостей — Recharts, Headless UI, date-fns и react-day-picker.
Она работает только в React-приложениях?Да — это React-компоненты, поэтому нужен React-проект; вставить их во Vue, Svelte или обычную HTML-страницу не получится.
На чём строятся графики внутри?За отрисовку графиков отвечает Recharts — это главная runtime-зависимость библиотеки, наряду с Headless UI для ненавязчивых базовых компонентов, а также date-fns и react-day-picker.
Зачем команда это создала?Чтобы снова сделать визуализацию данных простой: Tremor создают дата-сайентисты и разработчики с любовью к дизайну, поэтому готовые аккуратные компоненты — главная идея проекта.
Можно ли использовать это в коммерческих проектах?Да — проект полностью open-source под лицензией 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