Getting Started

Create your first component

Let us get to speed and build our frist component with Tremor.

Importing a component

We import and assemble a Card component using its default styling.

import { Card } from '@tremor/react';
export default function Example() {  return <Card></Card>;}

Add a Metric and Text component

To create our first KPI, we complement the Card component with some text elements using Tailwind CSS and Tremor's Tailwind CSS theming.

import { Card } from '@tremor/react';
export default function Example() {  return (    <Card className="mx-auto max-w-md">      <h4 className="text-tremor-default text-tremor-content dark:text-dark-tremor-content">        Sales      </h4>      <p className="text-tremor-metric font-semibold text-tremor-content-strong dark:text-dark-tremor-content-strong">        $71,465      </p>    </Card>  );}

Add a ProgressBar with textual details

To make our KPI card more insightful, we add a ProgressBar, providing contextual details about our metric.

import { Card, ProgressBar } from '@tremor/react';
export default function Example() {  return (    <Card className="mx-auto max-w-md">      <h4 className="text-tremor-default text-tremor-content dark:text-dark-tremor-content">        Sales      </h4>      <p className="text-tremor-metric font-semibold text-tremor-content-strong dark:text-dark-tremor-content-strong">        $71,465      </p>      <p className="mt-4 flex items-center justify-between text-tremor-default text-tremor-content dark:text-dark-tremor-content">        <span>32% of annual target</span>        <span>$225,000</span>      </p>      <ProgressBar value={32} className="mt-2" />    </Card>  );}