# Tremor NPM: React Components for Building Charts and Dashboards

This repository profile is provided by osrepos.com, an open source repository discovery platform.

Source: osrepos.com
Repository profile: https://osrepos.com/repo/tremorlabs-tremor-npm
Generated for open source discovery and AI-assisted research.

Tremor NPM provides a comprehensive collection of over 20 open-source React components, meticulously crafted on top of Tailwind CSS, to simplify the process of visualizing data. It empowers developers to effortlessly build stunning charts and interactive dashboards, making complex data accessible and engaging. This library is an excellent choice for creating analytical interfaces with a strong emphasis on modern design and user experience.

GitHub: https://github.com/tremorlabs/tremor-npm
OSRepos URL: https://osrepos.com/repo/tremorlabs-tremor-npm

## Summary

Tremor NPM provides a comprehensive collection of over 20 open-source React components, meticulously crafted on top of Tailwind CSS, to simplify the process of visualizing data. It empowers developers to effortlessly build stunning charts and interactive dashboards, making complex data accessible and engaging. This library is an excellent choice for creating analytical interfaces with a strong emphasis on modern design and user experience.

## Topics

- react-components
- reactjs
- tailwindcss
- typescript
- ui-system
- data-visualization
- dashboards

## Repository Information

Last analyzed by OSRepos: Tue Feb 17 2026 16:01:02 GMT+0000 (Western European Standard Time)
Detail views: 3
GitHub clicks: 4

## Safety Notice

OSRepos shares public repositories for knowledge and discovery only. Review source code, dependencies, licenses, and security implications before running or installing anything.

## Content

## Introduction

Tremor NPM is a powerful collection of 20+ open-source React components designed specifically for building charts and dashboards. Built on top of Tailwind CSS, Tremor aims to make data visualization simple and elegant. It's developed by data scientists and software engineers who prioritize both functionality and design, offering a robust solution for creating analytical interfaces.

## Installation

To get started with Tremor NPM, you'll need to set up Tailwind CSS in your project first. Once Tailwind CSS is configured, you can follow the detailed installation guide on the official documentation.

[Installation Guide](https://npm.tremor.so/docs/getting-started/installation)

## Examples

Tremor makes creating analytical interfaces straightforward. Here's an example demonstrating how to use `AreaChart` and `Card` components:

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>
  );
}


## Why Use Tremor NPM?

Tremor NPM stands out for several reasons:
*   **Ease of Use**: Simplifies complex data visualization with intuitive React components.
*   **Tailwind CSS Integration**: Seamlessly integrates with Tailwind CSS for highly customizable and modern designs.
*   **Open Source**: Fully open-source, fostering community contributions and transparency.
*   **Comprehensive Components**: Offers a wide range of components for various chart types and dashboard layouts.
*   **Design-First Approach**: Developed with a keen eye for aesthetics, ensuring your dashboards look professional and engaging.

## Links

*   **Documentation**: [https://npm.tremor.so/docs/getting-started/installation](https://npm.tremor.so/docs/getting-started/installation)
*   **Website**: [https://npm.tremor.so](https://npm.tremor.so)
*   **GitHub Repository**: [https://github.com/tremorlabs/tremor-npm](https://github.com/tremorlabs/tremor-npm)