Ship faster with beautiful components
HeroUI Pro
Back to blog
avatar
Junior Garcia@jrgarciadev

HeroUI v2.7.0

HeroUI v2.7.0

HeroUI version v2.7.0 introduces the highly anticipated Toast component, along with exciting new features including NumberInput component, Theme Generator, new Spinner variants, Table virtualization support, and numerous improvements and bug fixes.

What's New in v2.7.0?

Upgrade today by using one of the following methods:

  1. Upgrading HeroUI using the cli
  1. Upgrading HeroUI using package managers

Toast Component

The new Toast component provides a flexible and accessible way to show temporary notifications in your application. It comes with built-in support for different placements, variants, and animations. Inspired by Sonner, our Toast component brings a beautiful, minimal, and customizable notification system to HeroUI.

Setup

First, add the ToastProvider to your application:

Basic Usage

Features

  • Multiple placement options (top, bottom, left, right, center)
  • Different variants (solid, bordered, flat)
  • Custom timeout duration
  • Progress indicator
  • Promise support for loading states
  • Customizable icons and styling
  • Accessibility built-in

For more examples and detailed documentation about the Toast component, visit our Toast documentation.

NumberInput Component

A new specialized input component for numerical values with built-in validation, formatting, and keyboard controls.

For more examples and detailed documentation about the NumberInput component, visit our NumberInput documentation.

New Spinner Variants

The Spinner component now includes new design variants, offering more options for loading states in your applications.

For more examples and detailed documentation about the Spinner component, visit our Spinner documentation.

Theme Generator

The new Theme Generator is a powerful web-based tool that allows you to create and customize your themes visually. Simply visit our Theme Generator to:

  • Create custom color schemes
  • Preview components with your theme in real-time
  • Generate the theme code automatically
  • Export your theme configuration
  • Test different color combinations
  • Ensure proper contrast and accessibility

This tool makes it easier than ever to maintain consistent design across your application without having to write theme configuration manually.

For more information about theming and customization, visit our Theme documentation.

Table Virtualization

The Table component now supports virtualization, significantly improving performance when working with large datasets.

For more examples and detailed documentation about the Table component, visit our Table documentation.

New Global Props

We've added new global configuration options to the HeroUIProvider that allow you to set default behaviors across your application:

Label Placement

You can now set a global default for label placement across all form-based components. This affects components that have the labelPlacement property, including:

  • Input
  • Select
  • Autocomplete
  • DatePicker
  • DateRangePicker
  • TimeInput
  • NumberInput
  • And more...

Spinner Variant

You can set a global default spinner variant that will be used by all components that show loading states, including:

  • Select
  • Autocomplete
  • Button
  • And other components that use loading indicators

You can combine multiple global props to maintain consistent behavior throughout your application:

For more information about global configuration options, visit our Provider documentation.

Keyboard Support

Enhanced keyboard support with the addition of fn, win, and alt keys for better accessibility and user interaction.

Type Improvements

Better TypeScript support with exported PressEvent type for onPress event handling:

What's Next?

We're actively working on Tailwind CSS v4 support! You can check out our progress at tv4.heroui.com. We'll be releasing a beta version soon (PR #4656).

We're building an exciting new application that will revolutionize frontend development with HeroUI, making your workflow smoother than ever. Stay tuned for updates! 🔥

Breaking Changes

  • Renamed wrapper slot to tabWrapper in Tabs component
  • Deprecated dateInputClassNames in favor of new styling approach
  • Replaced directional terms left & right with start & end for better RTL support

Release Changes

Features 🚀

Documentation 📘

Bug Fixes 🐛

Enhancements ✨

Chore ⚙️

For more details about this release, check out our GitHub release page.

Special thanks to HeroUI Team members @wingkwong, @macci001, @vinroger, @ryo-manba, @winchesHe, @tianenpang and contributors for their contributions to this release.

Thanks for reading and happy coding! 🚀

Community

We're excited to see the community adopt NextUI, raise issues, and provide feedback. Whether it's a feature request, bug report, or a project to showcase, please get involved!

Contributing

PR's on HeroUI are always welcome, please see our contribution guidelines to learn how you can contribute to this project.