Tremorv3devtest NPM

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