https://www.tremor.so/

 
 
ComponentsBlocksPlatformDocumentation
 
 
11.3K+
 
11.3K+
Open menu
 
NewTremor v3.0: Theming & Darkmode

The React library to build dashboards fast

The React library to build dashboards fast

ProgressBar.tsx

<Card>

<Text>Ticket Sales</Text>

<Metric=$ 71,465</Metric>

<FlexclassName="mt-3">

<Text><Bold>32%</Bold>of annual target</Text>

<Text>$ 223,328</Text>

</Flex>

<ProgressBarvalue={ 32 } className="mt-3"/>

</Card>

Ticket Sales

$ 71,465

32% of annual target

$ 223,328

Newsletter revenue over time

Year: 2022 * Last update: Fri Jul 28 2023

ProgressBar.tsx

<Card>

<FlexalignItems="start">

<Block>

<Text>Ticket Sales</Text>

<Metric>$ 71,465</Metric>

</Block>

<BadgeDeltatext="12%"deltaType="increase"/>

</Flex>

<FlexclassName="mt-3">

<Text><Bold>32%</Bold>of annual target</Text>

<Text>$ 223,328</Text>

</Flex>

<ProgressBarvalue={ 32 } className="mt-3"/>

</Card>

Ticket Sales

$ 71,465

23.5%

32% of target

$ 223,328

Built on top of:

Modular components to build dashboards in a breeze. Fully
open-source, made by data scientists and software engineers with a
sweet spot for design.

 
Get started
npm install @tremor/react

20+ components

*

Apache-2.0 license

*

TypeScript Support

Trusted by great engineering teams

tinybirdVercelneoncalcomupstash

Some examples built with our components

Total Sales

23.1%

$ 442,276

from $ 382,482

ViennaValencia

Product A

$ 100,838

(38%)

Product B

$ 90,224

(34%)

Product C

$ 74,301

(28%)

Product Z

$ 108,799

(82%)

Product E

$ 13,268

(10%)

Product N

$ 10,614

(8%)

View more

KPI Cards

Data bars, metric cards, or delta badges are put together to show
summarizing information of data.

Profit Performance

April 2022

  * Switzerland

    $ 453,963

  * Norway

    $ 25,093

  * Germany

    $ 73,661

Lists and Tables

Modular lists and tables that go along with badges, icons, or
visualization elements.

Population growth rate

From 1951 to 2021 * ourworldindata.org

Charts

Charts are hard, so we already pushed the pixels that you can focus
on data. A set of basic charts ready to be fed by data. No need to
take care of the grunt work.

Lena's Webshop

Uptime

99%

Advanced Visualizations

tooltip bars, performance monitors, and many more components to
visualize complex use cases gracefully.

Dropdown
Similar Businesses
Multiselectbox
Select...
DateRangePicker
Select
Select

Powerful Utilities and More...

Buttons, icons, inputs, date picker, layout elements, tabs, page
shells, and many more components to build interfaces.

Some examples built
with the library:

Total Sales

23.1%

$ 442,276

from $ 382,482

ViennaValencia

Product A

$ 100,838

(38%)

Product B

$ 90,224

(34%)

Product C

$ 74,301

(28%)

Product Z

$ 108,799

(82%)

Product E

$ 13,268

(10%)

Product N

$ 10,614

(8%)

View more

KPI Cards

Data bars, metric cards, or delta badges are put together to show
summarizing information of data.

Profit Performance

April 2022

  * Switzerland

    $ 453,963

  * Norway

    $ 25,093

  * Germany

    $ 73,661

Lists and Tables

Modular lists and tables that go along with badges, icons, or
visualization elements.

Population growth rate

From 1951 to 2021 * ourworldindata.org

Charts

Charts are hard, so we already pushed the pixels that you can focus
on data. A set of basic charts ready to be fed by data. No need to
take care of the grunt work.

Lena's Webshop

Uptime

99%

Advanced Visualizations

tooltip bars, performance monitors, and many more components to
visualize complex use cases gracefully.

Dropdown
Similar Businesses
Multiselectbox
Select...
DateRangePicker
Select
Select

Powerful Utilities and More...

Buttons, icons, inputs, date picker, layout elements, tabs, page
shells, and many more components to build interfaces.

Testimonials

Twitter voices

Already loved by developers from all over the world

  * 
        Tremor makes it so easy to build beautiful dashboards. The
        ReactJS / Next.js ecosystem just keeps getting better and
        better 

    [image]
    Guillermo Rauch
    CEO @ Vercel
  * 
        tremor.so is dope

    [image]
    Peer Richelsen
    Co-CEO @ Cal.com
  * 
        Made quite some progress in the last week  Huge thanks
        @tremorlabs for saving me weeks of creating custom components

    [image]
    Eyk Rehbein
    CS student and web engineer
  * 
        I mostly hate React with burning passion, but then there are
        tools like this that the Vue ecosystem just doesn't have...
        alas [?][?]

    [image]
    Philipp Tsipman
    Founder @ Creative Change
  * 
        Love this idea of a utility-focused design system. Really
        hits the core of what a good design system should be--
        specialized components for your specific product. No reason
        to reinvent the wheel! Excited to incorporate Tremor into
        BarHop's admin site

    [image]
    Mike Carbone
    Software Engineer @ Newsela
  * 
        OMG I just saw tremor.so for the first time and it will be a
        GIANT HELP from now on

    [image]
    Emiliano Negri
    Software Engineer
  * 
        Tremor is going to take over. Intuitive, easy to use, and
        clean design. Lastest v2 release is 

    [image]
    Marc Anthony Card
    VP of Product Technology & Integrations
  * 
        Tremor is the kind of library I prefer when creating tools,
        tbh. Just like Shopify Polaris, I don't want to think about
        styling, but just calling components, maybe change the color
        theme and start building

    [image]
    Harshdeep Singh Hura
    Ecommerce consultant

  * 
        I am in love with the @tremorlabs viz library & we've been
        working to adopt it in our Starter Kits. Today we merged the
        migration to Tremor in our Web Analytics Starter Kit. It's
        beautiful 

    [image]
    Alasdair Brown
    DevRel Lead @ Tinybird
  * 
        Love how clean the dashboard library from @tremorlabs is 

    [image]
    Anthony Morris
    Senior Software Engineer @ Stripe
  * 
        Creating dashboards quickly  @tremorlabs

    [image]
    Drew Bredvick
    Sales Engineering Manager @ Vercel
  * 
        ... If anyone else is looking for a super clean dashboard
        library then @tremorlabs have done an amazing job!

    [image]
    Michael Bell
    Software Engineer
  * 
        Tremor looks interesting. Cool React components to build
        dashboards tremor.so

    [image]
    Flavio Copes
    Creator of Bootcamp.dev
  * 
        Fantastic set of UI modular components @tremorlabs to build
        dashboards with React. It comes with pre-built modular KPI
        cards.

    [image]
    Andrej Baranovskij
    Full-Stack Engineer @ Katanaml.io
  * 
        Using http://tremor.so for some dashboards for a project and
        they're coming out pretty nice.

    [image]
    Bilal Tahir
    Front-end Engineer
  * 
        Just found http://tremor.so, didn't think I needed charts in
        the portal that I'm building but now I think they would be
        awesome.

    [image]
    Carter McKay
    Data and Web Engineer

  * 
        This is a game changer for anyone using @tailwindcss!

    [image]
    Robert Bodley
    Software Engineer @ Amazon
  * 
        It is a solid 10/10 for me and I am sure this project will
        take over the dashboarding business in the upcoming months!

    [image]
    Dries Augustyns
    Founder @ useplunk
  * 
        We've loved working with the @tremorlabs team and
        contributing to the project. It's moving fast and they're
        releasing really meaningful changes. We expect to continue
        working with Tremor on additional starter kits like this one.

    [image]
    Tinybird
    Serverless analytical backend for developers.
  * 
        Nice! I recently stumbled upon Tremor. Great job!

    [image]
    Marcel Pociot
    CTO @ Beyond Code
  * 
        Great sample implementations on their Blocks page tremor.so/
        blocks, uses Tailwind for styling, Recharts internally for
        charts and has a steady set of updates and attention to
        detail.

    [image]
    Joost Schuur
    JavaScript Developer @ Playmob
  * 
        I was definitely hand-rolling all my own components. Which
        feels more and more dumb the more I view this library :)

    [image]
    Chris Pennington
    Creator of Coding in Public
  * 
        I was immediately sold out when I've found out about
        Datepicker, Select and Toggle components. Something I
        desperately needed and I've struggled to find a good and easy
        implementation using @tailwindcss You guys simply nailed it!
        Every single component is just 

    [image]
    Besfort Oruci
    Software Developer
  * 
        Super excited to see the Tremor release, Looking forward to
        using it in my side projects and maybe internally at
        Mentimeter :) it looks fantastic

    [image]
    Geordi Dearns
    Engineering Manager @ Mentimeter

  * 
        Tremor makes it so easy to build beautiful dashboards. The
        ReactJS / Next.js ecosystem just keeps getting better and
        better 

    [image]
    Guillermo Rauch
    CEO @ Vercel
  * 
        Super excited to see the Tremor release, Looking forward to
        using it in my side projects and maybe internally at
        Mentimeter :) it looks fantastic

    [image]
    Geordi Dearns
    Engineering Manager @ Mentimeter
  * 
        It is a solid 10/10 for me and I am sure this project will
        take over the dashboarding business in the upcoming months!

    [image]
    Dries Augustyns
    Founder @ useplunk
  * 
        I am in love with the @tremorlabs viz library & we've been
        working to adopt it in our Starter Kits. Today we merged the
        migration to Tremor in our Web Analytics Starter Kit. It's
        beautiful 

    [image]
    Alasdair Brown
    DevRel Lead @ Tinybird
  * 
        Creating dashboards quickly  @tremorlabs

    [image]
    Drew Bredvick
    Sales Engineering Manager @ Vercel
  * 
        Love how clean the dashboard library from @tremorlabs is 

    [image]
    Anthony Morris
    Senior Software Engineer @ Stripe

Show more
More defaults, less code

A blazingly fast workflow

Get more than 20 components with beautiful defaults and simple props.
From charts to input and layout elements, we covered all the
essential components to lift the tedious front-end work from your
shoulders. Get ahead with our simple API approach in no time.

Read the docs
ProgressBar.tsx

<Card>

<Text>Ticket Sales</Text>

<Metric>$ 71,465</Metric>

<FlexclassName="mt-3">

<Text><Bold>32%</Bold>of annual target</Text>

<Text>$ 223,328</Text>

</Flex>

<ProgressBarvalue={ 32 }className="mt-3"/>

</Card>

Ticket Sales

$ 71,465

32% of annual target

$ 223,328

Combines design and analytics

Never build dashboards from scratch again

Creating analytical interfaces is hard. We have distilled all our
knowledge from building dashboards into Tremor. Besides our
components, we provide a varierty of templates built on top of Tremor
to give developers a head start on building great interfaces.

See our blocks
Text

Activity summary

Metric

300.2 hours

Tabs
LenaEmmaLeon
BarList

Running

Paddle tennis

Functional strength

Yoga

Cycling

45h

35h

71h

120h

91h

BarList

Super Cycle

Squash

Volleyball

Running

Treadmill

15h

35h

71h

120h

41h

BarList

Tennis

Trail running

Super cycle

Yoga

Hiking

28h

29h

23h

34h

12h

Copy this template

Tremor Platform

Connect to your database, write queries and build interactive
dashboards. All in one place, blazingly fast.

 
Apply for Early Access
1
Connect to data source
2
Write queries, get APIs
3
Create and connect charts
1
Connect to data source
2
Write queries, get APIs
3
Create and connect charts
Embedded analytics
1
Connect to data source
2
Write queries, get APIs
3
Create and connect charts
1
Connect to data source
2
Write queries, get APIs
3
Create and connect charts
Embedded analytics

Footer

The react library to build dashboards fast. Built in Athens, Vienna,
London, and San Francisco.

   

Resources

  * Components
  * Blocks
  * Documentation
  * About

Community

  * Resources
  * Changelog
  * Journal
  * Spotlight

Subscribe to our newsletter

Get notified about new components and other important updates.

[                    ]Notify me
(c) 2023 Tremor. All rights reserved.

  * Imprint
  * Privacy
  * Terms and Conditions
  * Contributors