Skip to content

tremorlabs/tremor

main
Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?
Code

Latest commit

Co-authored-by: gitstart <gitstart@users.noreply.github.com>
Co-authored-by: RubensRafael <rubensrafael2@live.com>
Co-authored-by: gitstart_bot <gitstart_bot@users.noreply.github.com>
Co-authored-by: Nitesh Singh <nitesh.singh@gitstart.dev>
c4b5598

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
January 5, 2023 19:43
March 20, 2023 19:48
April 20, 2022 15:04
May 29, 2022 13:27



Tremor Logo


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. For other Frameworks, see our Installation Guide.


Using NextJS

In your terminal, we create a new Next project:

npx create-next-app my-project --typescript 
cd my-project

Install tremor from your command line via npm.

npm install @tremor/react

Install Tailwind CSS and its peer dependencies

npm install -D tailwindcss postcss autoprefixer 
npx tailwindcss init -p

Add the paths to all of your template files in your tailwind.config.js file.

/** @type {import('tailwindcss').Config} */

module.exports = {
    content: [
    "./app/**/*.{js,ts,jsx,tsx}",
    "./pages/**/*.{js,ts,jsx,tsx}",
    "./components/**/*.{js,ts,jsx,tsx}",
+   './node_modules/@tremor/**/*.{js,ts,jsx,tsx}',
    
    // Or if using src directory:
    "./src/**/*.{js,ts,jsx,tsx}",
    ],
    theme: {
    extend: {},
    },
    plugins: [],
}

Add the @tailwind directives for each Tailwind's layers to your globals.css file.

@tailwind base;
@tailwind components;
@tailwind utilities;

Start the dev server

npm run dev

💡 Hint: Since we are in beta, please be aware that there might be breaking changes in the future.

Example

With tremor creating an analytical interface is easy.


//Card.tsx
import { Card, Text, Metric, Flex, ProgressBar } from "@tremor/react";
export default () => (
  <Card className="max-w-sm">
    <Text>Sales</Text>
    <Metric>$ 71,465</Metric>
    <Flex className='mt-4'>
        <Text>32% of annual target</Text>
        <Text>$ 225,000</Text>
    </Flex>
    <ProgressBar percentageValue={ 32 } className="mt-2" />
  </Card>
);

Tremor Banner


If you want to see how you can build your first dashboard, have a look at our documentation.

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

Apache License 2.0

Copyright © 2023 Tremor. All rights reserved.