tremor-npm - GitLite

KO | EN

gitlite — search

#ai #llm #golang #machine-learning #linux #nodejs #windows #cli #kubernetes #pytorch #security #mcp #openai #open-source

tremor-npm

(★ 16,484)

React components to build charts and dashboards

File Explorer

Download Latest Version (.zip)

- - bug-report.yaml
  - config.yaml
  - feature-request.yaml
- - build.yaml
  - lint.yaml
  - release.yaml
- pull_request_template.md
- main.js
- manager.js
- preview.js
- tremorTheme.js
- banner-github-readme.png
- example-dark.png
- example-light.png
- tremor-logo-dark.svg
- tremor-logo-light.svg
- - ArrowDownHeadIcon.tsx
  - ArrowDownIcon.tsx
  - ArrowDownRightIcon.tsx
  - ArrowLeftHeadIcon.tsx
  - ArrowRightHeadIcon.tsx
  - ArrowRightIcon.tsx
  - ArrowUpHeadIcon.tsx
  - ArrowUpIcon.tsx
  - ArrowUpRightIcon.tsx
  - CalendarIcon.tsx
  - ChevronLeftFill.tsx
  - ChevronRightFill.tsx
  - DoubleArrowLeftHeadIcon.tsx
  - DoubleArrowRightHeadIcon.tsx
  - ExclamationFilledIcon.tsx
  - EyeIcon.tsx
  - EyeOffIcon.tsx
  - index.ts
  - LoadingSpinner.tsx
  - MinusIcon.tsx
  - PlusIcon.tsx
  - SearchIcon.tsx
  - XCircleIcon.tsx
  - XIcon.tsx
- - index.ts
- - BaseColorContext.tsx
  - index.ts
  - IndexContext.tsx
  - RootStylesContext.tsx
  - SelectedValueContext.tsx
- - index.ts
  - useInternalState.tsx
  - useOnWindowResize.tsx
- - constants.ts
  - index.ts
  - inputTypes.ts
  - theme.ts
  - tremorTwMerge.ts
  - utils.tsx
- index.ts
- styles.css
.eslintignore
.eslintrc
.gitignore
.prettierrc.json
babel.config.js
CODE_OF_CONDUCT.md
CONTRIBUTING.md
jest.config.js
License
package.json
pnpm-lock.yaml
postcss.config.js
README.md
rollup.config.js
setupTests.js
tailwind.config.js
tsconfig.json

# Installation Guide

1. Get the code

git clone https://github.com/tremorlabs/tremor-npm

Downloads the entire project code from GitHub to your computer.

cd tremor-npm

Moves into the project folder you just downloaded.

2. Node.js

Easy Recommended

Prerequisites

Git Needed to download the project code from GitHub.
Node.js Node.js must be installed to use npm. The LTS version is recommended.

<img alt="npm" src="https://img.shields.io/npm/dm/@tremor/react?color=3b82f6&label=npm&logo=npm&labelColor=334155">

Type this command into your terminal and run it.

✅ After running the command, open the address shown in the terminal (usually something like http://localhost:3000) in your browser.

Pulled directly from this repo's README.

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

<br />
<br />
<p align="center">
  <a href="https://npm.tremor.so">
    <picture>
       <source media="(prefers-color-scheme: dark)" srcset="images/tremor-logo-dark.svg">
      <source media="(prefers-color-scheme: light)" srcset="images/tremor-logo-light.svg">
    <img alt="Tremor Logo" src="images/tremor-logo-light.svg" height="50"/>
    </picture>
  </a>
</p>
<div align="center">
<br />
<br />

<div align="center">
  <a href="https://npmjs.com/package/@tremor/react">
    <img alt="npm" src="https://img.shields.io/npm/dm/@tremor/react?color=3b82f6&label=npm&logo=npm&labelColor=334155">
  </a>
  <a href="https://npm.tremor.so/docs/getting-started/installation">
    <img alt="Read the documentation" src="https://img.shields.io/badge/Docs-blue?style=flat&logo=readthedocs&color=3b82f6&labelColor=334155&logoColor=f5f5f5" height="20" width="auto">
  </a>
  <a href="https://github.com/tremorlabs/tremor-npm/blob/main/License">
    <img alt="License Apache 2.0" src="https://img.shields.io/badge/license-Apache 2.0-blue.svg?style=flat&color=3b82f6&labelColor=334155 " height="20" width="auto">
  </a>
  <a href="https://join.slack.com/t/tremor-community/shared_invite/zt-21ug6czv6-RckDPEAR6GdYOqfMGKOWpQ">
    <img src="https://img.shields.io/badge/Join-important.svg?color=4A154B&label=Slack&logo=slack&labelColor=334155&logoColor=f5f5f5" alt="Join Slack" />
  </a>
  <a href="https://twitter.com/intent/follow?screen_name=tremorlabs">
    <img src="https://img.shields.io/badge/Follow-important.svg?color=000000&label=@tremorlabs&logo=X&labelColor=334155&logoColor=f5f5f5" alt="Follow at Tremorlabs" />
  </a>
</div>
<h3 align="center">
  <a href="https://npm.tremor.so/docs/getting-started/installation">Documentation</a> &bull;
  <a href="https://npm.tremor.so">Website</a>
</h3>
<br />
  <h1>React components to build charts and dashboards</h1>
</div>

[Tremor NPM](https://npm.tremor.so/) 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.

<br />

![Tremor Banner](https://raw.githubusercontent.com/tremorlabs/tremor-npm/main/images/banner-github-readme.png)

<br />

## Getting Started

See our [Installation Guide](https://npm.tremor.so/docs/getting-started/installation). To make use of the library we also need Tailwind CSS setup in the project.

## Example

With Tremor creating an analytical interface is easy.

```jsx
"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>
  );
}
```

<br />

<picture>
  <source media="(prefers-color-scheme: dark)" srcset="images/example-dark.png">
  <source media="(prefers-color-scheme: light)" srcset="images/example-light.png">
  <img alt="Tremor Example" src="images/example-light.png"/>
</picture>

## 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](https://tremor.so/contributors).

## License

[Apache License 2.0](https://github.com/tremorlabs/tremor-npm/blob/main/License)

Copyright &copy; 2025 Tremor Labs, Inc. All rights reserved.