mirror of
https://github.com/nextui-org/nextui.git
synced 2025-12-08 19:26:11 +00:00
159 lines
6.5 KiB
Plaintext
159 lines
6.5 KiB
Plaintext
---
|
|
title: "HeroUI v2.8.0"
|
|
description: "TailwindCSS v4, improvements and bug fixes."
|
|
date: "2025-07-15"
|
|
image: "/blog/v2.8.0.jpg"
|
|
tags: ["heroui", "v2.8.0", "release", "tailwind v4", "improvements", "theme"]
|
|
author:
|
|
name: "WK Wong"
|
|
username: "@wingkwong"
|
|
link: "https://github.com/wingkwong"
|
|
avatar: "https://avatars.githubusercontent.com/u/35857179?v=4"
|
|
---
|
|
|
|
import closeToast from "@/content/components/toast/close.ts";
|
|
import inputLabelPlacement from "@/content/components/input/label-placements.ts";
|
|
import selectIsClearable from "@/content/components/select/is-clearable.ts";
|
|
import selectEndContent from "@/content/components/select/end-content.ts";
|
|
import tableSortIcon from "@/content/components/table/sort-icon.ts";
|
|
import customTooltipContent from "@/content/components/slider/custom-tooltip.ts";
|
|
|
|
<img
|
|
src="/blog/v2.8.0_2x.jpg"
|
|
width={700}
|
|
height={350}
|
|
alt="HeroUI v2.8.0"
|
|
className="w-full border border-transparent dark:border-default-200/50 object-fit rounded-xl shadow-lg"
|
|
/>
|
|
|
|
HeroUI version **v2.8.0** introduces TailwindCSS v4, improvements and bug fixes.
|
|
|
|
## What's New in v2.8.0?
|
|
|
|
- [TailwindCSS v4](#tailwindcss-v4) - Support for TailwindCSS and upgrades to various dependencies.
|
|
- [Overlay Enhancement](#overlay-enhancement) - Enhanced overlay and outside interactions across multiple components.
|
|
- [Component Enhancement](#component-enhancement) - Enhanced component capabilities.
|
|
- [What's Next?](#whats-next) - Upcoming features and improvements
|
|
- [Breaking Changes](#breaking-changes) - Important changes that may affect existing implementations
|
|
- [Release Changes](#release-changes) - Detailed list of features, documentation updates, bug fixes and enhancements
|
|
|
|
<Spacer y={4} />
|
|
|
|
**Upgrade today by using one of the following methods**:
|
|
|
|
1. Upgrading HeroUI using the `cli`
|
|
|
|
<PackageManagers
|
|
commands={{
|
|
cli: "heroui upgrade --all",
|
|
npm: "npx heroui-cli@latest upgrade --all",
|
|
}}
|
|
/>
|
|
|
|
2. Upgrading HeroUI using package managers
|
|
|
|
<PackageManagers
|
|
commands={{
|
|
npm: "npm install @heroui/react@latest",
|
|
pnpm: "pnpm add @heroui/react@latest",
|
|
yarn: "yarn add @heroui/react@latest",
|
|
bun: "bun add @heroui/react@latest",
|
|
}}
|
|
/>
|
|
|
|
<Spacer y={4} />
|
|
|
|
## TailwindCSS v4
|
|
|
|
HeroUI is now compatible with TailwindCSS v4. With this update, HeroUI CLI has also been enhanced to support initializing new starter templates pre-configured with TailwindCSS v4.
|
|
|
|
To upgrade your existing projects, please refer to [migration guide](/docs/guide/tailwind-v4#migration-steps).
|
|
|
|
## Overlay Enhancement
|
|
|
|
The handling of overlay and outside interaction for components such as Popover, Modal, Dropdown, Select, and Tooltip have been improved to ensure consistent dismissal behaviour.
|
|
|
|
## Component Enhancement
|
|
|
|
### Toast
|
|
|
|
- The return type of `addToast` has been changed from `void` to `string` where the returned string value is the unique key value of the newly created toast.
|
|
- A new method `closeToast(key: string): void` has been introduced to accept a key value of `string` type and provide a way to close the specific toast with its unique key programmatically.
|
|
- The Toast closing order has been updated from Last In, First Out (LIFO) to First In, First Out (FIFO).
|
|
|
|
<CodeDemo title="Close Toast" files={closeToast} showEditor={false}/>
|
|
|
|
### Input
|
|
|
|
The Input component now features a new label placement option `outside-top`. Previously, labels would always remain inside the input field if there was no placeholder.
|
|
|
|
The new `outside-top` option ensures that labels are consistently displayed at the top of the input field, regardless of whether a placeholder is present, similar to the existing `outside-left` placement.
|
|
|
|
<CodeDemo title="Label Placement" files={inputLabelPlacement} />
|
|
|
|
### Select
|
|
|
|
Two new properties `isClearable` and `onClear` have been introduced in the Select component. A clear button is visible when a value is selected and a callback function triggered upon clearing the selection for custom handling.
|
|
|
|
<CodeDemo title="Clearable" files={selectIsClearable} />
|
|
|
|
`endContent` has been introduced in the Select component.
|
|
|
|
<CodeDemo title="End Content" files={selectEndContent} />
|
|
|
|
### Table
|
|
|
|
The table header previously utilized either a chevron-up or chevron-down icon for sorting, which was not configurable. A new `sortIcon` property has been introduced, allowing users to customize the default sort icon. This icon will only be applied when `allowsSorting` is set to true.
|
|
|
|
<CodeDemo
|
|
asIframe
|
|
title="Sort Icon"
|
|
resizeEnabled={false}
|
|
displayMode="visible"
|
|
files={tableSortIcon}
|
|
previewHeight="520px"
|
|
iframeSrc="/examples/table/sort-icon"
|
|
/>
|
|
|
|
### Slider
|
|
|
|
The `getTooltipValue` property has been introduced to customize the content displayed in the tooltip by returning a string or a number from the function. The existing `tooltipValueFormatOptions` prop can be used for additional formatting when number is returned. If `tooltipProps.content` is set, it will take precedence over the value generated by `getTooltipValue`.
|
|
|
|
<CodeDemo title="Custom Tooltip" files={customTooltipContent} />
|
|
|
|
## What's Next?
|
|
|
|
We're excited to share that HeroUI v3 (Alpha) is just around the corner! You are expected to create stunning interfaces with 50% smaller bundle size, lightning-fast native CSS animations, and effortless customization that adapts to your design vision.
|
|
|
|
As an Alpha version, we're actively gathering feedback and refining the current components, including Button, Accordion, Avatar, TextArea, Checkbox, and more. Your input is invaluable in shaping the future of the library.
|
|
|
|
## Breaking Changes
|
|
|
|
- The component style have been updated to align TailwindCSS v4.
|
|
- `loadingIcon` now renames to `loadingComponent` in Toast component
|
|
|
|
## Release Changes
|
|
|
|
<Spacer y={1} />
|
|
|
|
As always, we are incredibly grateful for your continued support and contributions. There are many exciting milestones ahead, and we invite you to join us on this journey.
|
|
|
|
Special thanks to HeroUI Team members [@winchesHe](https://github.com/winchesHe), [@macci001](https://github.com/macci001), [@Vishvsalvi](https://github.com/Vishvsalvi), and contributors for their contributions to this release.
|
|
|
|
<Spacer y={6} />
|
|
|
|
Thanks for reading and happy coding! 🚀
|
|
|
|
---
|
|
|
|
## Community
|
|
|
|
We're excited to see the community adopt HeroUI, raise issues, and provide feedback.
|
|
Whether it's a feature request, bug report, or a project to showcase, please get involved!
|
|
|
|
<Community />
|
|
|
|
## Contributing
|
|
|
|
PRs on HeroUI are always welcome, please see our [contribution guidelines](https://github.com/heroui-inc/heroui/blob/main/CONTRIBUTING.md) to learn how you can contribute to this project.
|