Realised that i could not add classnames to some table Components like tableHead, I think adding an optional classname prop to the components for extra styling would be lovely. Would love that. Open to even working with the team to accomplish that. Thank you.

Amber is mapped to orange

When there are enough data bars, some names are hidden even though its shown in the legend. A solution could be to allow to rotate the x labels by some degree to allow more names to be shown or even make it automatically given the amount of bars and space available

Hello:

In an existing next.js project, I am trying to import the tremor.css as per your documentation but received an error.

I first added the tremor npm using npm install @tremor/react

Then, I tried importing the css using import '@tremor/react/dist/esm/tremor.css';

Then, for a bit nothing seems to have and the cursor changes till finally I get the following message:

import-im6.q16: attempt to perform an operation not allowed by the security policy `@tremor/react/dist/esm/tremor.css' @ error/blob.c/OpenBlob/2624.```

I tried importing a Card in the component while it does not give me an error, it as expected did not apply the css

Thanks

SUPER nice job on the lib so far, it's been a joy to use so kudos to y'all! ⭐️

I would love to be able to show trends on top of both single and grouped bar charts. I have attached a (ugly) example, please ask if you need more context!

When the value of the date picker and dropdown is empty the height is normal and as shown in the documentation.

When a value is selected the height of them seems to change and look a bit more blocky, anything I can do to fix the sizing?

Hello! Can this library be used on Deno Deploy? I have tried importing it with https://esm.sh/ to no success. Any pointers are greatly appreciated!

When I add

 <ProgressBar percentageValue={ 32 } marginTop="mt-2" />

it correctly displays the progressbar when automatically reloading the site, but throws the error TypeError: Cannot read properties of null (reading 'useState') when I manually load the site.
Full error message:

cont_2-frontend-1  | Warning: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
cont_2-frontend-1  | 1. You might have mismatching versions of React and the renderer (such as React DOM)
cont_2-frontend-1  | 2. You might be breaking the Rules of Hooks
cont_2-frontend-1  | 3. You might have more than one copy of React in the same app
cont_2-frontend-1  | See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.
cont_2-frontend-1  | TypeError: Cannot read properties of null (reading 'useState')
cont_2-frontend-1  |     at Object.useState (/node_modules/react/cjs/react.development.js:1622:21)
cont_2-frontend-1  |     at /node_modules/@tremor/react/dist/cjs/index.js:249:382363
cont_2-frontend-1  |     at renderWithHooks (/frontend/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5658:16)
cont_2-frontend-1  |     at renderIndeterminateComponent (/frontend/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5731:15)
cont_2-frontend-1  |     at renderElement (/frontend/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5946:7)
cont_2-frontend-1  |     at renderNodeDestructiveImpl (/frontend/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6104:11)
cont_2-frontend-1  |     at renderNodeDestructive (/frontend/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6076:14)
cont_2-frontend-1  |     at renderForwardRef (/frontend/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5859:5)
cont_2-frontend-1  |     at renderElement (/frontend/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6005:11)
cont_2-frontend-1  |     at renderNodeDestructiveImpl (/frontend/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6104:11)
cont_2-frontend-1  | error - TypeError: Cannot read properties of null (reading 'useState')
cont_2-frontend-1  |     at Object.useState (/node_modules/react/cjs/react.development.js:1622:21)
cont_2-frontend-1  |     at /node_modules/@tremor/react/dist/cjs/index.js:249:382363
cont_2-frontend-1  |     at renderWithHooks (/frontend/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5658:16)
cont_2-frontend-1  |     at renderIndeterminateComponent (/frontend/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5731:15)
cont_2-frontend-1  |     at renderElement (/frontend/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5946:7)
cont_2-frontend-1  |     at renderNodeDestructiveImpl (/frontend/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6104:11)
cont_2-frontend-1  |     at renderNodeDestructive (/frontend/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6076:14)
cont_2-frontend-1  |     at renderForwardRef (/frontend/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5859:5)
cont_2-frontend-1  |     at renderElement (/frontend/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6005:11)
cont_2-frontend-1  |     at renderNodeDestructiveImpl (/frontend/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6104:11) {
cont_2-frontend-1  |   page: '/'
cont_2-frontend-1  | }

Am I doing something wrong or is this an issue with tremor?

Current implementation doesn't seem to support TS. Will there be a release for TS?

I was looking to do something like this where the x axis shows the month, and the tooltip shows the hour as well as the population growth rate, is it possible?

const chartdata = [
  {
    month: "Oct",
    hour: "8th 01:00"
    "Population growth rate": 1.74,
  },
  {
    month: "Oct",
    hour: "8th 02:00"
    "Population growth rate": 1.93,
  },
  {
    month: "Oct",
    hour: "8th 03:00"
    "Population growth rate": 1.9,
  },
  {
    month: "Oct",
    hour: "8th 04:00"
    "Population growth rate": 1.98,
  },
  {
    month: "Oct",
    hour: "8th 05:00"
    "Population growth rate": 2,
  },
];

The DatePicker component is really clean and awesome but its tedious to use as a birth input for example because it only supports navigating by months. Adding some sort of year selector would make it perfect

Maybe let dropdowns not have to be for selecting an option, but rather for performing actions e.g. Edit, Archive, Delete, etc.

This could also allow for an IconDropdown component that only shows an Icon (e.g. three vertical dots) instead of text.

Hello, it would be nice to have the size on the Legend component which would change the size of the text but also the round

Using the 'Tracker' component white isn't a valid colour option, it defaults to blue, so does leaving colour blank.
Having white would be useful against the white background so it can visually show a reduction of tracking blocks whilst staying the same size as a comparison tracker, currently when reducing tracking block count it resizes, it would be nice to have some customisability. and not have it auto fill/fit to the width.

I'm finding it very easy to create and customize dashboards even with little to no prior React experience. It would be great if there's capability to add horizontal or vertical lines to mark significant points in a chart in the future.

Would be nice to be able to set the enabled property on buttons.

Admittedly, I don't have a ton of experience with Tailwind, so I am not sure if this is on them or with Tremor, but importing Tremor's CSS styles globally the ul and the li elements, which broke some existing things I didn't want styled. Is it possible to scope your styles, or use Tremor without global styles?

It would be nice to give a prop to a DatePicker for setting the relative date range. For instance, one could choose to give a default range when rendering the DatePicker.

curious if your guidance would be to implement it with a table or if a custom Tremor component makes sense

Hello, I can't use SelectBox and MultiSelectBox in forms and the page refreshes itself. Is this a bug or is there a problem in my code?

It would have been great if there was a way to display x numbers of calendars in the datepicker (preferably two). This is useful when you went to let your users pick a range that can be longer that a month without the extra clicks

I'm trying to add a simple variation of small-caps to a Title component. I don't think this is possible today unless Tremor components pass through the styles or className props. I prefer to use Tailwind (I love that Tremor is built on top of it) and I would love to be able to add tailwind classes to Tremor components.

import {
Card,
Title,
Text,
Tab,
TabList,
ColGrid,
Block,
} from '@tremor/react';

import { useState } from 'react';

export default function Example() {
const [selectedView, setSelectedView] = useState(1);
return (

        <TabList defaultValue={ 1 } handleSelect={ (value) => setSelectedView(value) } marginTop="mt-6">
            <Tab value={ 1 } text="Page 1" />
            <Tab value={ 2 } text="Page 2" />
        </TabList>

        { selectedView === 1 ? (
            <>
                <ColGrid numColsMd={ 2 } numColsLg={ 3 } gapX="gap-x-6" gapY="gap-y-6" marginTop="mt-6">
                    <Card>
                        { /* Placeholder to set height */ }
                        <div className="h-28" />
                    </Card>
                    <Card>
                        { /* Placeholder to set height */ }
                        <div className="h-28" />
                    </Card>
                    <Card>
                        { /* Placeholder to set height */ }
                        <div className="h-28" />
                    </Card>
                </ColGrid>

                <Block marginTop="mt-6">
                    <Card>
                        <div className="h-80" />
                    </Card>
                </Block>
            </>
        ) : (
            <Block marginTop="mt-6">
                <Card>
                    <div className="h-96" />
                </Card>
            </Block>
        ) }
    </main>
);

}

Hey! I love the project and what you've built so far ⚡

I noticed that the guide for getting started in the README defines getting started using create-react-app whereas the installation guide on the website describes that the way to get started is by using Next.js! Just wanted to bring this to your attention; not sure if you intend to have instructions for both or just the shinier next.js :)

Again, great work! 🚀

I noticed that the y-axis will always start at 0. So for example if all your values are somewhere between 80 and 100 you get very little detail in the line charts. Is there currently a way to (dynamically) adjust the y-axis so you preserve more detail? Or would this need to be a new feature?

I noticed that the handleSelect in the Toggle component is triggered when the component is rendered. I've got the following Toggle inside a ReactModal and as soon as the modal is opened the handleSelect triggers, causing unwanted API requests. I'm not completely sure if I'm making a mistake somewhere so I'm wondering if more people have noticed this behaviour.

<Toggle defaultValue={"2"} color="emerald" handleSelect={(value) => postMood(value)}>
                    <ToggleItem value={"1"} text="Great"/>
                    <ToggleItem value={"2"} text="Okay"/>
                    <ToggleItem value={"3"} text="Bad"/>
</Toggle>

Is there any possibility that in the future, there will be an option to add zoom and pan to charts?

About 2-3 months ago, it released the second version of heroicons, but you still use the icons of the first version on your site. I have listed the icons that need to be changed.

Documentation

https://www.tremor.so/docs/components/dropdown
❌ import { CubeIcon, CubeTransparentIcon } from "@heroicons/react/solid";
✅ import { CubeIcon, CubeTransparentIcon } from "@heroicons/react/24/solid";

https://www.tremor.so/docs/components/icons
❌ import { MailIcon } from "@heroicons/react/solid";
✅ import { EnvelopeIcon } from "@heroicons/react/24/solid";

❌ import { HandIcon } from "@heroicons/react/outline";
✅ import { HandRaisedIcon } from "@heroicons/react/24/outline";

❌ import { CashIcon } from "@heroicons/react/outline";
✅ import { BanknotesIcon } from "@heroicons/react/24/outline";

https://www.tremor.so/docs/components/select
❌ import { CalculatorIcon } from "@heroicons/react/outline";
✅ import { CalculatorIcon } from "@heroicons/react/24/outline";

https://www.tremor.so/docs/components/table
❌ import { StatusOnlineIcon } from "@heroicons/react/outline";
✅ import { SignalIcon } from "@heroicons/react/24/outline";

https://www.tremor.so/docs/components/toggles
❌ import { CheckIcon, CollectionIcon, ReceiptRefundIcon } from "@heroicons/react/outline";
✅ import { CheckIcon, RectangleStackIcon, ReceiptRefundIcon } from "@heroicons/react/24/outline";

https://www.tremor.so/docs/layout/block
❌ import { SwitchHorizontalIcon } from '@heroicons/react/solid';
✅ import { ArrowsRightLeftIcon } from "@heroicons/react/24/solid";

https://www.tremor.so/blocks/landing-zone
❌ import { CogIcon, ShieldExclamationIcon, CheckCircleIcon, ArrowNarrowRightIcon,} from '@heroicons/react/solid';
✅ import { CogIcon, ShieldExclamationIcon, CheckCircleIcon, ArrowLongRightIcon,} from '@heroicons/react/24/solid';

❌ import { ShoppingBagIcon, CashIcon, UsersIcon, ShoppingCartIcon, ArrowNarrowRightIcon,} from '@heroicons/react/solid';
✅ import { ShoppingBagIcon, BanknotesIcon, UsersIcon, ShoppingCartIcon, ArrowLongRightIcon} from '@heroicons/react/24/solid';

❌ import { ArrowNarrowRightIcon } from '@heroicons/react/solid';
✅ import { ArrowLongRightIcon } from '@heroicons/react/24/solid';

❌ import { ArrowCircleRightIcon, ArrowCircleUpIcon, ArrowCircleDownIcon, ArrowNarrowRightIcon } from '@heroicons/react/solid';
✅ import { ArrowRightCircleIcon, ArrowUpCircleIcon, ArrowDownCircleIcon, ArrowLongRightIcon } from '@heroicons/react/24/solid';

❌ import { CashIcon, ChatAlt2Icon, SupportIcon, UsersIcon, InformationCircleIcon, ArrowNarrowRightIcon } from '@heroicons/react/solid';
✅ import { BanknotesIcon, ChatBubbleLeftRightIcon, LifebuoyIcon, UsersIcon, InformationCircleIcon, ArrowLongRightIcon } from '@heroicons/react/24/solid';

https://www.tremor.so/blocks/charts
❌ import { CheckCircleIcon } from '@heroicons/react/solid';
✅ import { CheckCircleIcon } from '@heroicons/react/24/solid';

https://www.tremor.so/blocks/kpi-cards
❌ import { CashIcon, TicketIcon, UserGroupIcon } from '@heroicons/react/solid';
✅ import { BanknotesIcon, TicketIcon, UserGroupIcon } from '@heroicons/react/24/solid';

❌ import { TrendingUpIcon, TrendingDownIcon, ArrowNarrowRightIcon } from '@heroicons/react/solid';
✅ import { ArrowTrendingUpIcon, ArrowTrendingDownIcon, ArrowLongRightIcon } from '@heroicons/react/24/solid';

❌ import { ArrowCircleDownIcon, CogIcon, MinusCircleIcon, CheckCircleIcon } from '@heroicons/react/solid';
✅ import { ArrowDownCircleIcon, CogIcon, MinusCircleIcon, CheckCircleIcon } from '@heroicons/react/24/solid';

❌ import { BriefcaseIcon, DesktopComputerIcon, ShieldExclamationIcon, ShoppingBagIcon, ArrowNarrowRightIcon, LightningBoltIcon, HomeIcon, TruckIcon } from '@heroicons/react/solid';
✅ import { BriefcaseIcon, ComputerDesktopIcon, ShieldExclamationIcon, ShoppingBagIcon, ArrowLongRightIcon, BoltIcon, HomeIcon, TruckIcon } from '@heroicons/react/24/solid';

I'm trying new app folder which is in beta now since Next.js 13.

But using the app folder, I have an error message that I don't have in pages folder.

I have pushed a minimal repos for testing purpose: https://github.com/srod/nextjs-13-tremor

git clone https://github.com/srod/nextjs-13-tremor.git
cd nextjs-13-tremor
npm install && npm run dev

Access example page: http://localhost:3000/example

error - (sc_server)/node_modules/@tremor/react/dist/cjs/index.js (6:41848) @ eval
error - TypeError: Super expression must either be null or a function
    at eval (webpack-internal:///(sc_server)/./node_modules/@tremor/react/dist/cjs/index.js:1884:57)
    at eval (webpack-internal:///(sc_server)/./node_modules/@tremor/react/dist/cjs/index.js:1892:6)
    at eval (webpack-internal:///(sc_server)/./node_modules/@tremor/react/dist/cjs/index.js:1952:2)
    at Object.(sc_server)/./node_modules/@tremor/react/dist/cjs/index.js (/Users/rodolphe/Downloads/nextjs-13-tremor/.next/server/app/example/page.js:251:1)
    at __webpack_require__ (/Users/rodolphe/Downloads/nextjs-13-tremor/.next/server/webpack-runtime.js:33:42)
    at eval (webpack-internal:///(sc_server)/./app/example/page.tsx:6:71)
    at Object.(sc_server)/./app/example/page.tsx (/Users/rodolphe/Downloads/nextjs-13-tremor/.next/server/app/example/page.js:229:1)
    at __webpack_require__ (/Users/rodolphe/Downloads/nextjs-13-tremor/.next/server/webpack-runtime.js:33:42)
    at Object.page (webpack-internal:///(sc_server)/./node_modules/next/dist/build/webpack/loaders/next-app-loader.js?name=app%2Fexample%2Fpage&appPaths=%2Fexample%2Fpage&pagePath=private-next-app-dir%2Fexample%2Fpage.tsx&appDir=%2FUsers%2Frodolphe%2FDownloads%2Fnextjs-13-tremor%2Fapp&pageExtensions=tsx&pageExtensions=ts&pageExtensions=jsx&pageExtensions=js&rootDir=%2FUsers%2Frodolphe%2FDownloads%2Fnextjs-13-tremor&isDev=true&tsconfigPath=tsconfig.json!:22:124)
    at collectGenerateParams (/Users/rodolphe/Downloads/nextjs-13-tremor/node_modules/next/dist/build/utils.js:710:194) {
  type: 'TypeError',
  page: '/example'
}
null

Hello:

This is more of a question. Is there support for dark mode?

I tried <Text color="blue" dark:color="green">Check</Text> and it gave an error.

Thanks

npm ERR! code ETARGET
npm ERR! notarget No matching version found for recharts@^2.1.13.
npm ERR! notarget In most cases you or one of your dependencies are requesting
npm ERR! notarget a package version that doesn't exist.

I am receiving a weird error when I try to run my App and access a page where the tremor components should be rendered. It used to work before on a previous version of tremor.

Using the latest Tremor version 1.0.11 and followed the instructions in https://www.tremor.so/docs/getting-started/installation
I important tremor correct like suggested in the _app.tsx

The Icon property on the Button component uses PascalCase rather than camelCase for the prop name. Is this intentional or a bug?

import { ReloadIcon } from "someiconlibrary"

<div>                   // here
    <Button text="Reload" Icon={ReloadIcon} importance="primary" />
</div>

Inside of src/tests/input-elements/MultiSelectBox.tsx, it references to a prop called name on MultiSelectBoxItem, which I am assuming has been replaced by text (or even better in the future, children).

If I update the LineChart example data to look like:

const chartdata = [
  {
    year: 1951,
    "Population growth rate": 1.74,
  },
  {
    year: 1952,
    "Population growth rate": 1.63,
  },
  {
    year: 1953,
    "Population growth rate": 1.9,
  },
  {
    year: 1954,
    "Population growth rate": 1.98,
  },
  {
    year: 1955,
    "Population growth rate": 2,
  },
  {
    year: 1999,
    "Population growth rate": 1.8,
  },
];

where there is a gap between 1955 and 1999. it would be great if there were a way to have the x-axis reflect this gap as opposed to displaying the data as though 1999 is just one step above 1955.

This is especially useful for sparse data sets where the readings may not occur linearly

Hi lads!

Any chance of pie charts and donut charts being added in an upcoming update?

Are they on the roadmap, are they already kicked-off?

Hi, 
First of all, congratulations, because a library like this one is something that the web community has never accomplished correctly and yours is awesome.

I noticed that in a lot of components (such as buttons, text, etc.), there is a text prop instead of simply using the children. This way is more aligned with JSX and the React philosophy and would allow some personalization without compromising much of your architecture.

Also, I love your design system, but I think the configuration given is really strange, passing tailwind classes in a separate prop instead of just having a className prop that overwrites your default classes (there are plenty of npm modules for this).

Hi,

I was having a look at optional Tailwind installation step 2 paths added in content: [] does not match Tailwind React installation guide.

I understand that the path could point to where needed, but it would be nicer to be matching with Tailwind documentation which will eliminate any confusions caused by this for new developers looking into the project.

Tremor

Tailwind

I was browsing through documentation and it appears that dropdown component is not responsive on IOS Chrome / Safari when rendered within a container that has a horizontal scrollable view

Hey all, love the library. Super simple and intuitive to get started with.

I'd love to have the option to select a specific shade of a color from the Tailwind palette (e.g. blue-700), which would be useful for cases like a chart using multiple shades of a color:

Something like this:

<BarChart
  data={...}
  categories={['First', 'Second', 'Third', 'Fourth']}
  dataKey="month"
  colors={['blue-700', 'blue-600', 'blue-500', 'blue-400']}
  stack={true}
/>

Is this something you'd consider adding?

Although the docs do have a walkthrough on how to create the dashboard from the demo site, it would be cool if I could just download or clone it, whatever the method you prefer. I just want to quickly copy / paste it and then tinker around. It looks great, and I want to replicate it quickly.

Great lib so far! Thanks

Currently it looks like relative date choices are (last 7 days, last 30 days, MTD, YTD)

What if there was also an option for last quarter or QTD? Or last year? Or All (to beginning of data)

Hello,

in the BarList component the item.value is used as the key prop.

This causes issues with data that has duplicate values in the list:

Warning: Encountered two children with the same key, 2. Keys should be unique so that components maintain their identity across updates. Non-unique keys may cause children to be duplicated and/or omitted — the behavior is unsupported and could change in a future version.

I propose using item.text as the key.

I think it would be useful to have a search bar component to filter rows of a table/list or other data. I've seen your examples of using a MultiSelectbox box for filtering, but I think the search functionality would be helpful too.

The Datepicker component seems to only allow date ranges, is it currently possible to set it to selecting a single date?

Hi team,

I just went through the example dashboard and I have to say it's really great!!

During the 3rd Step "Add a Chart" you are using an Icon from React Hero Icons.
import { InformationCircleIcon } from '@heroicons/react/outline';

As I am noob dev I'm always struggling with all kind of errors and I think it's helpful to implement a short sentence about the import at the beginning or in the 3rd Step.
npm install @heroicons/react

Best,
Richard!

PS: I think it was npm install @heroicons/react@1 because there was a version issue too. I'd have to test this again :/

Hello, just wanted to say that this is an awesome project and l hope to use it in production. However, as other developers have mentioned, I don't think I'll be able to use this library until I have the ability to use custom colors defined in tailwind.config. This is purely for branding reasons of course. Is this feature currently on the roadmap? Or are you guys sticking to the strictly-opinionated model? Respect the decision either way.

Hey! First of all thank you for creating this amazing library. I am giving it a try for some charts and I am going really fast! Just noticed a bug when rendering the dot colors in legend because it does not match properly with the data sometimes. I have prepared a codesanbox with the real data that is giving the error but hiding users personal info:

https://codesandbox.io/s/adoring-thunder-owrnsj?file=/src/App.js

As you can see the colors in the tooltip are rendered exactly as the categories order but the data doesnt always have that order because statistics may change between users even in terms of being undefined or not (which are correctly rendered as value 0).