Charting a new course: Announcing on click events for more interactivity!

Hello! In the last two weeks, our phenomenal contributors, along with our team, have been working to introduce new feature: Chart Interactivity. This enhancement has been on the wish list of our users for a long time. Additionally, we have given a facelift to some charts and tabs.

• Area Chart, Line Chart, Bar Chart, Scatter Chart, Donut Chart: New onValueChange prop to activate and make use of click events on all of our charts.

  A heartfelt "thank you" to our community MVPs mbauchet and jzfrank for helping us get this feature out there. #702 #696 #673 #672

• Legend: Added new props onClickLegendItem and activeItem.

• Tab: Improved styling and padding on the `solid` variant. #674
• Area Chart, Line Chart, Bar Chart, Scatter Chart, Donut Chart: Changed default setting: Prop showAnimation is now `false`.
• Area Chart, Line Chart, Bar Chart, Scatter Chart, Donut Chart: Fixed border color bug in dark mode #698
• Area Chart, Line Chart, Bar Chart, Scatter Chart Gridlines are now solid, not dotted. Also, the color changed from `tremor-border` to `tremor-content-subtle`
• Button: Added `cursor-not-allowed` to disabled state.
• ProgressBar: Changed background color from `tremor-brand-faint` to `tremor-brand-muted`

Better Datepicker and Multiselect

Hello all, this week we're introducing a new prop to both the date picker and the date range picker. Additionally, we're enhancing how selected items are displayed in the multiselect component.

• Date (Range) Picker: New weekStartsOn property to set a desired index for the first day of the week. E.g. 0 = Sunday. #643
• MultiSelect: New display of selected items with the option to clear items individually. #638

  Thanks to GitHub user jzfrank for those PRs.

• Fixes remove scroll utility from css #652
• Fixes toggling on MultiSelect click #655
• Make Grid RSC compliant #639
• Improved MultiSelectSearch with spaces and added new placeholderSearch prop. #651
• Fixes multiselect overflow-x scrollbar on Firefox #669
• Improved conditinal rendering on tabs and added extra Margins in Tab and Button #667
• Adds bold style to Today in Calendar #659
• Fixes NumberInput does not pass event value through onChange issue #649

Introducing a new member to the family: Scatter Chart

Hi everyone, we are thrilled to announce the release of our brand new chart: the <ScatterChart>! This addition opens up exciting possibilities for displaying data. We would like to extend a huge thank you to the GitHub user mbauchet.

• ScatterChart: New chart component, allows to visualize relationships between two or three variables. #586
• TableFoot, TableFooterCell: Enhancing tables with footer sections for concise data summaries. #595
• DatePicker, DateRangePicker: New enableYearNavigation property adds two navigation buttons to skip through years. Thanks to GitHub user sahiljaidka224 for this PR #513

• TextInput, NumberInput: Fixed a bug that when error was false, an error message was shown anyways.

New number input component

Today, we’re adding <NumberInput> as our new component. We were not really sure about our initial design. This is why we reached out to Twitter for a quick poll. Against our expectations, it felt like we brought together the entire design community on Twitter: We received more than 180 Twitter comments of users telling us how we should style the new component. In the end, Konstantin's suggestion won the race. It's always great to see how tiny details can lead to interesting discussions and let us connect to people around the globe with the same dedication to detail.

• NumberInput: New number input component, allowing numeric data entry with customizable precision and bounds. #519
• AreaChart, LineChart: There is a new curve type `monotone` in the AreaChart and LineChart. #561
• TextInput: Added 3 new types: password, url, email

New Date Picker component and select improvements

There a new Date Picker component to select a single date. We also merged PRs from our community, improving select components.

• DatePicker: New DatePicker component which allow for single selecting dates
• Single Select: Adding the functionality to clear state in Single Select component #508

Fixes to pie chart and datepicker, new Button tooltip

We merged PRs from our community, improving the Button by adding a tooltip. We also improved the themeability of the donut charts' pie variant. There was also a minor DateRangePicker fix, plus upgrading our charts.

• DonutChart: The donut chart's pie variant has now a stroke to separate invidual slices. #506
• Button: Adds tooltip property to the button. #471
• DateRangePicker: Resolved a width issues with truncated text.

Community PRs and quality of life updates

We merged two PRs from our community, improving the BarList and animations of our charts.

• BarList: Adds the possibility to set individual colors for BarList component #397, PR#490
• AreaChart, BarChart, DonutChart, LineChart, DataBars: Adds animationDuration property to charts to set timing #421, PR#430

Small improvements before the big release

Howdy, many pennies make a dollar. That's why we fixed some tiny details under the hood. The next changelog will create more buzz, trust us and stay tuned!

• Tooltip (Button, Icon): Set max width in tooltip field.
• LineChart, BarChart, AreaChart, DonutChart: Adds a noDataText prop to the component. Adding the option to display text when the data is empty.
• Library housekeeping: Export component props.

New decimal option for charts and improvements to date range picker

A new clear allowing decimals in the charts axis. There is a new option to clear the selected date range in the picker.

• DateRangePicker: Adds a enableClear prop to the component. This adds a clear button to reset the date range.
• LineChart, BarChart, AreaChart: Adds a allowDecimals prop to the component. Adding the option to display the numbers in the Y axis, with or without decimals.

Support for Next.js 13

All of Tremor's components now work gracefully with the latest version of Next.js. Thanks to Ben from our community.

New chart Area and Line Chart properties

Minor fixes and updates to peer dependencies plus new curve types for our charts.

• AreaChart: Adds a connectNulls and curveType prop to the component.
• LineChart: Adds a connectNulls and curveType prop to the components.
• SelextBox: Fixed a bug in the SelextBox' text input when focused, which lead to not being able to search or type.

New disabled property and improved TextInput

This release adds a new disabled property some input components and password support for our textual input.

• DateRangePicker: Added disabled property.
• Dropdown: Added disabled property.
• SelectBox, MultiSelectBox: Added disabled property.
• TextInput: Added password type.

🎉 Our major release is here: className exposure and full switch to Tailwind CSS

This major release is the first step towards a production-ready version of Tremor. Over the past few months, we have rewritten the library to make it fit for the future. We added the long-awaited exposure of className (#75) and support for other HTML attributes, enabling you to overwrite or extend our root styles with Tailwind CSS.

The improvements in this release resulted in removed properties (see migration guide below). This also means that Tailwind CSS has now become a prerequisite to using Tremor at full capacity (including our Blocks).

• If you use Tremor in an existing project remove the Tremor stylesheet import in the _app.js / _app.tsx file.

• `tailwind.config.js`: With this release, you must add the path to the Tremor package in the content section in your Tailwind CSS configuration. If you use Tremor in an existing project, remove the Tremor stylesheet import in the _app.js / _app.tsx file.

  Action: Add './node_modules/@tremor/**/*.{js,ts,jsx,tsx}' in your `tailwind.config.js` content section.

  Attention: See Installation Guideline for more.

• Breaking AreaChart, LineChart, BarChart, DonutChart: dataKey has been replaced with index.

  Action: Replace <AreaChart dataKey="date" /> with <AreaChart index="date" />

• Breaking marginTop has been removed. To set margins with Tailwind CSS, use className instead.

  Action: Replace marginTop="mt-4" with className="mt-4"

• Breaking height has been removed. To set height with Tailwind CSS, use className instead.

  Action: Replace height="h-72" with className="h-72" or className="h-[500px]"

• Breaking yAxisWidth prop has been changed to take in a numeric pixel value instead of a Tailwind utility.

  Action: Replace yAxisWidth="w-12" with yAxisWidth= { 48 }

• Breaking maxWidth has been removed. To set a maximum width with Tailwind CSS, use className instead.

  Action: Replace maxWidth="max-w-md" with className="max-w-md"

• Breaking spaceX has been removed. To set the space between items, use className instead.

  Action: Replace spaceX="space-x-3" with className="space-x-3"

• Breaking truncate has been removed. To truncate text, use className instead.

  Action: Replace truncate={ true } with className="truncate"

• Breaking ColGrid: has been renamed to Grid

  Action: Replace <ColGrid></ColGrid> with <Grid></Grid>

• Breaking Tracking: has been renamed to Tracker

  Action: Replace <Tracking /> with <Tracker />

• Breaking Dropdown, SelectBox, MultiSelectBox, TabList, Toggle: The type of the value property has been changed to string .

  Action: Cast the input for value to string

• Breaking Accordion, Card: shadow removed. Use className instead. Note that we provide a shadow by default. To remove shadows altogether, use className="shadow-none"

  Action: Replace <Card shadow={ true }></Card> with <Card className="shadow"></Card>

• Breaking Badge, BadgeDelta, Callout, Button: text has been removed. Please use children instead. #81

  Action: Replace <Badge text="Your Text" /> with <Badge>Your Text</Badge>

• Breaking Card: hFull has been removed. Use className instead.

  Action: Replace <Card hFull={ true }></Card> with <Card className="h-full"></Card>

• Breaking Table, Metric: textAlignment has been removed. Use className instead. #135, #295, #318

  Action: Replace <TableHeaderCell textAlignment="text-left"></TableHeaderCell> with <TableHeaderCell className="text-left"></TableHeaderCell>

• Breaking Grid: gapX and gapY has been removed. Use className instead.

  Action: Replace <Grid gapX="gap-x-6"></Grid> with <Grid className="gap-x-6"></Grid>

• Breaking Block: This component has been removed. Use a `div` instead.

  Action: Replace <Block truncate="true"></Block> with <div className="truncate"></div>

• Breaking Footer: This component has been removed. Use a `div` with a border instead.

  Action: Replace <Footer height="h-20"></Footer> with <div className="h-20 mt-6 pt-4 border-t border-slate-200"></div>

Quality of life improvements to the Date Range Picker

This release adds two new features to the Date Range Picker component. There is a new locale property, helping you in bringing your dashboard to more users around the world. We also added a dropdownPlaceholder property and added support for an endDate to our options prop.

• DateRangePicker: Add i18n Support to support multiple languages. For this, use the new locale prop. PR #292, #205
• DateRangepicker: Added endDate key to the options array object in order to support arbitrary date ranges in the dropdown options instead of only relative ones. Discussed here Disc #275, #86
• DateRangepicker: A new dropdownPlaceholder prop allows for setting the dropdown placeholder text separately.

Improvements to the Button component

We merged the Button and ButtonInline components. Hence, this release adds two new features to the resulting Button component. A variant property for styling as well as the option to pass text child elements.

• Button: Added new variant property, replacing the importance property for button styling. PR #273
• Button: Added new option to pass text as a child element, deprecating the text property.
• ButtonInline: Is now deprecated. Please use Button with variant set to 'light'

Mastering the basics

We are excited to announce that our input components have undergone some updates! We have added a variety of new features to improve accessibility and control.

• Added a new value and property enabling a controllable state.
• Added new onValueChange property to replace handleSelect (handleSelect is deprecated)
• Enabled KeyListeners, e.g. ESC key to dismiss an opened Dropdown and Arrow Up/Down to skim through options.

• Added defaultValue for uncontrolled mode
• Added id property

• Added a new DateRangePicker component which will replace the current Datepicker (Datepicker is deprecated)
• It supports a controlled and uncontrolled state, through the value and the defaultValue properties. The input format is a tuple in the following format: [startDate, endDate, dropdownOption (optional)]
• The default dropdown options can be replaced through the options property

Text input is finally here!

After a long wait, the text input component is finally available. Along the way we also added some improvements to existing components.

• Text Input: Create interactive applications by getting textual data from the user. #179, #145

• Dropdown, MultiSelectBox, and SelectBox: Added optional icon property to insert an icon within the input box
• AreaChart, LineChart, and BarChart: Added optional minValue and maxValue properties to control the minimun and maximum values on a chart's axis. PR#240
• Buttons: Now support three types button, submit, reset, and three new corresponding event handlers, onClick, onSubmit, onReset. Warning: The handleClick property will be deprecated in the next major release. Please use onClick from now on. #205, PR#188

Celebrating our first community-built release

This release is almost solely built on issues and pull requests created by our community. It features new props of our existing components to build cooler stuff and cover new edge cases. Thank you eykrehbein, dmytro-tinybird, souravmondal93, jelleag, and bernsno for contributing.

• Donut Chart: Added variant property to select between a pie or donut chart
• Bar List: Added optional href key in data to incorporate links
• Area Chart / Bar Chart / Line Chart: Added optional autoMinValue property to adjust the minimum value in relation to the magnitude of the data
• Area Chart: Added optional stack to cumulate the chart data visually
• Datepicker: Added the ability to select a single date (No idea how we could have missed this)
• Datepicker: Added the relative filter option for today tdy
• Buttons: Added loading state with optional loading and loadingText property. If loading is enabled, a spinner is shown which can be complemented by a loadingText

New chart component, icon support in Tab and Bar List, enhanced Datepicker and Button props

You asked, we delivered: the donut chart. Our newest component comes with neat features, like a sum that is automatically calculated and a tooltip your users will love. We also tweaked our existing components. Our buttons now have a disabled variant and you can now provide a default date range in the datepicker. More fixes summarized below.

• Donut Chart: Display the relationship of parts data to the whole
• Button and Button Inline: Added optional disabled property to set the status of a button to disabled
• Datepicker: Added optional defaultRelativeFilterOption property to set a default relative date selection on render
• Tabs: Added optional icon property to insert an icon in a tab
• Bar List: Added the ability to include an icon in your data array via an icon key

• Datepicker: Clears relative selection when absolute dates are selected
• Datepicker: Prevent defaultStartDate and defaultEndDate to exceed minDate and maxDate respectively
• Datepicker: Prevent modal from exceeding viewport

Fixed a top margin issue in Lists

This release fixes one issue regarding the marginTop property when using a list

• Fixes to list element specificity PR #146

Improvements to the color mapping used in Charts

This release fixes one issue regarding Chart categories color mapping

• Ensures that colors are always mapped to the correct categories in Legend and Tooltip #115

Minor fixes to the SelectBox and Barlist

This release fixes two issues regarding SelectBox and BarList components

• Fixes issue how to use SelectBox and MultiSelectBox in forms #122
• Fixed BarList issue where two children with the same key are encountered #117
• Added type="button" to all HTML button elements
• Moved resize-observer-polyfill module to devDependencies
• Fixed styling issue of ArrowHeadHeadDownIcon in the SelectBox

Changes to the global CSS styling

We eliminated the global CSS styles which had caused issues for some users. With this release the CSS styles are now scoped to Tremor components only, thus any CSS conflicts in existing projects should be resolved.

• Fixed an issue where global CSS styles were overwritten