Tremor

The react library to build dashboards fast.

README



Tremor Logo
npm Read the documentation License Apache 2.0 Follow

DocumentationDemo DashboardWebsite

The react library to build dashboards fast


Tremor lets you create simple and modular components to build insightful dashboards in a breeze. Fully open-source, made by data scientists and software engineers with a sweet spot for design.



Tremor Banner



Getting Started


You can use tremor either within a React or Next.js Project.
For new projects, we recommend using Next.js, as it also provides a simple deployment workflow through the Vercel platform.

Option A: Using Create React App


In your terminal, we create a new React project:

  1. ``` sh
  2. npx create-react-app my-project --template typescript
  3. cd my-project
  4. ```
Using the --template typescript option is optional here.

Install tremor from your command line via npm.

  1. ``` sh
  2. npm install @tremor/react
  3. ```

Import the tremor stylesheet into the App.js / App.tsx  file:
  1. ```tsx
  2. import '@tremor/react/dist/esm/tremor.css';
  3. ```
Note, if you are importing other CSS files along with tremor.css, make sure to add the above import statement as the last one, in order to avoid unintentional CSS conflicts.

Finally, run the dev server.
  1. ``` sh
  2. npm start
  3. ```

Option B: Using NextJS

⚠️ Note: Since we have not fully migrated to Next.js 13 yet, if you are using the app directory introduced in Next.js 13, wrap your tremor components in another component by using the "use client" directive. More infos on the directive and the usage of third-party libraries in Next.js 13 can be found in the Next.js docs.

In your terminal, we create a new Next project:

  1. ``` sh
  2. npx create-next-app my-project --typescript
  3. cd my-project
  4. ```
Using the --typescript option is optional here.

Install tremor from your command line via npm.

  1. ``` sh
  2. npm install @tremor/react
  3. ```

Import the tremor stylesheet into the _app.js / _app.tsx  file:

  1. ``` sh
  2. import '@tremor/react/dist/esm/tremor.css'
  3. ```
Note, if you are importing other CSS files along with tremor.css, make sure to add the above import statement as the last one, in order to avoid unintentional CSS conflicts.

Finally, run the dev server

  1. ``` sh
  2. npm run dev
  3. ```



💡 Hint: Since we are in beta, please be aware that there might be breaking changes in the future. If you want to see how you can build your first dashboard, have a look at our documentation.

Example


With tremor creating an analytical interface is easy.



  1. ``` js
  2. //Card.tsx
  3. import { Card, Text, Metric, Flex, ProgressBar } from "@tremor/react";

  4. export default () => (
  5.   <Card maxWidth="max-w-sm">
  6.     <Text>Sales</Text>
  7.     <Metric>$ 71,465</Metric>
  8.     <Flex marginTop='mt-4'>
  9.         <Text>32% of annual target</Text>
  10.         <Text>$ 225,000</Text>
  11.     </Flex>
  12.     <ProgressBar percentageValue={ 32 } marginTop="mt-2" />
  13.   </Card>
  14. );
  15. ```

Tremor Banner

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.



License



Copyright ©  2022 Tremor. All rights reserved.