# @topsort/tremor

> The React library to build dashboards faster.

Latest version **3.14.3** (published 2024-02-19) · Apache 2.0 license · 0 weekly downloads

## Install

```sh
npm install @topsort/tremor
pnpm add @topsort/tremor
yarn add @topsort/tremor
bun add @topsort/tremor
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 3.14.3 |
| Published | 2024-02-19 |
| First published | 2024-02-16 |
| Weekly downloads | 0 |
| License | Apache 2.0 |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 8 |
| Unpacked size | 451.1 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | tremor |
| Maintainers | jbergstroem, pablo_topsort |

## Links

- npm: https://www.npmjs.com/package/@topsort/tremor
- Repository: https://github.com/Topsort/tremor
- Homepage: https://github.com/Topsort/tremor#readme
- Issues: https://github.com/Topsort/tremor/issues
- npm.io page: https://npm.io/package/@topsort/tremor

## Dependencies (8)

- [date-fns](https://npm.io/package/date-fns.md) ^2.30.0
- [recharts](https://npm.io/package/recharts.md) ^2.10.3
- [tailwind-merge](https://npm.io/package/tailwind-merge.md) ^1.14.0
- [react-day-picker](https://npm.io/package/react-day-picker.md) ^8.9.1
- [@headlessui/react](https://npm.io/package/@headlessui/react.md) ^1.7.18
- [@floating-ui/react](https://npm.io/package/@floating-ui/react.md) ^0.19.2
- [react-transition-state](https://npm.io/package/react-transition-state.md) ^2.1.1
- [@headlessui/tailwindcss](https://npm.io/package/@headlessui/tailwindcss.md) ^0.2.0

## Recent versions

- 3.14.3 (latest) — 2024-02-19
- 3.14.2 — 2024-02-19
- 3.14.1 — 2024-02-19
- 3.14.0 — 2024-02-16

## README

<br />
<br />
<p align="center">
  <a href="https://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://www.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://tremor.so/docs/getting-started/introduction">
    <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/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://www.tremor.so/docs/getting-started/installation">Documentation</a> &bull;
  <a href="https://www.tremor.so">Website</a>
</h3>
<br />

<h1>Fork of Tremor</h1>
<p>Note! You are currently looking at a fork of the original Tremor project. This fork carries <a href="https://github.com/tremorlabs/tremor/pull/857">a patch to support multiple y axes</a> and will be maintained until it (or a similar patch) hopefully lands upstream. Use at your own risk.</p>

  <h1>The react library to build dashboards fast</h1>
</div>

[Tremor](https://tremor.so/) provides React components to build charts and dashboards. Fully open-source, made by data scientists and software engineers with a sweet spot for design.

<br />

![Tremor Banner](images/banner-github-readme.png)

<br />

## Getting Started

See our [Installation Guide](https://www.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
//Card.tsx
import { Card, ProgressBar } from "@tremor/react";
export default () => (
<Card className="max-w-sm">
  <span className="text-tremor-default text-tremor-content">Sales</span>
  <p className="text-tremor-metric text-tremor-content-strong font-semibold">$71,465</p>
  <div className="flex items-center justify-between">
    <span className="text-tremor-default text-tremor-content">32% of annual target</span>
    <span className="text-tremor-default text-tremor-content">$ 225,000</span>
  </div>
  <ProgressBar value={32} className="mt-2" />
</Card>
);
```

<br />

![Tremor Example](images/example.png)


## Community and Contribution

We are always looking for new ideas or other ways to improve Tremor. If you have developed anything cool or found a bug, send us a pull request. Check out our Contributor License Agreement [here](https://www.tremor.so/contributors).

## License

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

Copyright &copy; 2024 Tremor. All rights reserved.

---
_Source: https://npm.io/package/@topsort/tremor · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._