{"name":"Tremor NPM: React Components for Building Charts and Dashboards","description":"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","url":"https://osrepos.com/repo/tremorlabs-tremor-npm","source":"osrepos.com","sourceDescription":"This repository profile is provided by osrepos.com, an open source repository discovery platform.","repositoryProfile":"https://osrepos.com/repo/tremorlabs-tremor-npm","generatedFor":"open source discovery and AI-assisted research","markdown":"https://osrepos.com/repo/tremorlabs-tremor-npm.md","json":"https://osrepos.com/repo/tremorlabs-tremor-npm.json","topics":["react-components","reactjs","tailwindcss","typescript","ui-system","data-visualization","dashboards"],"keywords":["react-components","reactjs","tailwindcss","typescript","ui-system","data-visualization","dashboards"],"stars":null,"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.","content":"## Introduction\n\nTremor 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.\n\n## Installation\n\nTo 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.\n\n[Installation Guide](https://npm.tremor.so/docs/getting-started/installation)\n\n## Examples\n\nTremor makes creating analytical interfaces straightforward. Here's an example demonstrating how to use `AreaChart` and `Card` components:\n\njsx\n\"use client\";\nimport { AreaChart, Card } from \"@tremor/react\";\n\nconst chartdata = [\n  {\n    date: \"Jan 23\",\n    \"Route Requests\": 289,\n    \"Station Requests\": 233,\n  },\n  // ...\n  {\n    date: \"Oct 23\",\n    \"Route Requests\": 283,\n    \"Station Requests\": 247,\n  },\n];\n\nexport default function Example() {\n  return (\n    <Card className=\"max-w-4xl\">\n      <span className=\"text-tremor-default text-tremor-content dark:text-dark-tremor-content\">\n        Total Requests\n      </span>\n      <p className=\"text-tremor-metric font-semibold text-tremor-content-strong dark:text-dark-tremor-content-strong\">\n        6,568\n      </p>\n      <AreaChart\n        className=\"mt-2 h-80\"\n        data={chartdata}\n        index=\"date\"\n        categories={[\"Route Requests\", \"Station Requests\"]}\n        colors={[\"indigo\", \"rose\"]}\n        yAxisWidth={33}\n      />\n    </Card>\n  );\n}\n\n\n## Why Use Tremor NPM?\n\nTremor NPM stands out for several reasons:\n*   **Ease of Use**: Simplifies complex data visualization with intuitive React components.\n*   **Tailwind CSS Integration**: Seamlessly integrates with Tailwind CSS for highly customizable and modern designs.\n*   **Open Source**: Fully open-source, fostering community contributions and transparency.\n*   **Comprehensive Components**: Offers a wide range of components for various chart types and dashboard layouts.\n*   **Design-First Approach**: Developed with a keen eye for aesthetics, ensuring your dashboards look professional and engaging.\n\n## Links\n\n*   **Documentation**: [https://npm.tremor.so/docs/getting-started/installation](https://npm.tremor.so/docs/getting-started/installation)\n*   **Website**: [https://npm.tremor.so](https://npm.tremor.so)\n*   **GitHub Repository**: [https://github.com/tremorlabs/tremor-npm](https://github.com/tremorlabs/tremor-npm)","metrics":{"detailViews":3,"githubClicks":4},"dates":{"published":null,"modified":"2026-02-17T16:01:02.000Z"}}