archive-gh-me/nextui
1
0
Fork 0
mirror of https://github.com/nextui-org/nextui.git synced 2025-12-08 19:26:11 +00:00
Code Issues Projects Releases Wiki Activity
nextui/apps/docs/content/blog/v2.2.0.mdx
Junior Garcia 7ebe0e664f
Org name change (#4594) 
* chore: kapa-ai temporary disabled

* chore: org renamed
2025-01-18 17:16:34 -03:00

444 lines
16 KiB
Plaintext
Raw Blame History

---
title: "Introducing v2.2.0 🚀"
description: "NextUI v2.2.0 is here! Dive into client-side router support, discover 3 new components including the Autocomplete, and more."
date: "2023-11-03"
image: "/blog/v2.2.0.jpg"
tags: ["nextui", "autocomplete", "breadcrumbs", "client side router", "slider"]
author:
name: "Junior Garcia"
username: "@jrgarciadev"
link: "https://x.com/jrgarciadev"
avatar: "/avatars/junior-garcia.jpeg"
---
import {autocompleteContent} from "@/content/components/autocomplete";
import {sliderContent} from "@/content/components/slider";
import {breadcrumbsContent} from "@/content/components/breadcrumbs";
<img
src="/blog/v2.2.0_2x.jpg"
width={700}
height={350}
alt="NextUI v2.2.0"
className="w-full border border-transparent dark:border-default-200/50 object-fit rounded-xl shadow-lg"
/>
We are excited to announce the latest update to NextUI, version **2.2.0**! This release introduces 3 new components,
support for client-side routing, and more.
## What's New in v2.2.0?
- [Client Side Routing](#client-side-routing) - Allows you to seamlessly incorporate client-side routers.
- [Autocomplete](/docs/components/autocomplete) - Combines a text input with a listbox, allowing users to filter a list of options.
- [Slider](/docs/components/slider) - Allows users to make selections from a range of values.
- [Breadcrumbs](/docs/components/breadcrumbs) - Displays a hierarchy of links to the current page or resource in an application.
- [Other Changes](#other-changes) - Includes styling improvements, accessibility and usability enhancements.
<Spacer y={4} />
## Client Side Routing
By default, links perform native browser navigation when they are interacted with. However, many apps and
frameworks use client side routers to avoid a full page reload when navigating between pages.
NextUI now natively supports client-side routing in components such as [Link](/docs/components/link), [Tabs](/docs/components/tabs),
[Breadcrumbs](/docs/components/breadcrumbs), [Listbox](/docs/components/listbox), [Dropdown](/docs/components/dropdown) and many others offering
the flexibility to be rendered as HTML links, allowing you to seamlessly incorporate client-side routers. See the [Routing](/docs/guide/routing) guide to
learn how it set it up in your app.
The `HeroUIProvider` component configures all NextUI components within it to navigate using the
client side router you provide.
> **Note**: Client side routing is based on [React Aria Routing](https://react-spectrum.adobe.com/react-aria/routing.html).
### Next.js Example
- App Router
Go to your `app/providers.tsx` or `app/providers.jsx` (create it if it doesn't exist) and add the
`useRouter` hook from `next/navigation`, it returns a router object that can be used to perform navigation.
```tsx
// app/providers.tsx
"use client";
import {HeroUIProvider} from "@heroui/react";
export function Providers({children}: {children: React.ReactNode}) {
const router = useRouter();
return <HeroUIProvider navigate={router.push}>{children}</HeroUIProvider>;
}
```
- Pages Router
Go to pages`/_app.js` or `pages/_app.tsx` (create it if it doesn't exist) and add the`useRouter` hook
from `next/router`, it returns a router object that can be used to perform navigation.
```tsx
// pages/_app.tsx
import type {AppProps} from "next/app";
import {useRouter} from "next/router";
import {HeroUIProvider} from "@heroui/react";
function MyApp({Component, pageProps}: AppProps) {
const router = useRouter();
return (
<HeroUIProvider navigate={router.push}>
<Component {...pageProps} />
</HeroUIProvider>
);
}
export default MyApp;
```
- Usage
Now that you have set up the `HeroUIProvider` in your app, you can use the `href` prop in the `Tabs`,
`Listbox` and `Dropdown` items to navigate between pages.
The [Link](/docs/components/link) component will also use the `navigate` function from the
`HeroUIProvider` to navigate between pages.
```jsx
import {
Tabs,
Tab,
Listbox,
ListboxItem,
Dropdown,
DropdownTrigger,
DropdownMenu,
DropdownItem,
Button,
Link,
} from "@heroui/react";
function App() {
return (
<>
<Tabs aria-label="Navigation">
<Tab key="home" href="/home">
Home
</Tab>
<Tab key="about" href="/about">
About
</Tab>
</Tabs>
<Listbox aria-label="Navigation">
<ListboxItem key="home" href="/home">
Home
</ListboxItem>
<ListboxItem key="about" href="/about">
About
</ListboxItem>
</Listbox>
<Dropdown>
<DropdownTrigger>
<Button>Open</Button>
</DropdownTrigger>
<DropdownMenu aria-label="Navigation">
<DropdownItem key="home" href="/home">
Home
</DropdownItem>
<DropdownItem key="about" href="/about">
About
</DropdownItem>
</DropdownMenu>
</Dropdown>
<Link href="/home">Home</Link>
<Link href="/about">About</Link>
</>
);
}
```
<Spacer y={4} />
## Autocomplete
Creating an autocomplete component that is both accessible and customizable is a challenging task. We've spent a lot of time
researching and testing different approaches to come up with a solution that works for everyone. The result is a
component that is easy to use, fully accessible, and highly customizable.
The new **Autocomplete** component includes:
- Support for selecting a single option.
- Support for disabled options.
- Support for groups of items in sections.
- Support for filtering a list of options by typing.
- Support for controlled and uncontrolled options, selection and input value.
- Support for custom filter functions.
- Async loading and infinite scrolling support.
- Required and invalid states exposed to assistive technology via ARIA.
- Support for description and error message help text linked to the input via ARIA.
- And much more...
We recommend to read this [Blog post](https://react-spectrum.adobe.com/blog/building-a-combobox.html) from [react-aria](https://react-spectrum.adobe.com/react-aria) team to learn more
about the Autocomplete component.
### Usage
<CodeDemo title="Usage" files={autocompleteContent.usage} />
### Custom Items
You can customize the autocomplete items by modifying the `AutocompleteItem` children.
<CodeDemo title="Custom Items" files={autocompleteContent.customItems} />
### Customizable
The autocomplete component is highly customizable, you can customize the popover, listbox and
input components.
<CodeDemo title="Custom Styles" files={autocompleteContent.customStyles} />
Go to the [Autocomplete](/docs/components/autocomplete) component page to learn more about it.
<Spacer y={4} />
## Slider
The **Slider** component allows users to make selections from a range of values. It is a great way to allow users to
select a value from a fixed range, such as volume or temperature, or to select a value from a range that changes
frequently, such as stock prices or budgets.
### Usage
<CodeDemo title="Usage" files={sliderContent.usage} />
### Range Support
If you pass an array of values to the `value` prop or to the `defaultValue` prop, the slider will become a range slider.
<CodeDemo title="Range Slider" files={sliderContent.range} />
### With Tooltip
The slider component also supports a tooltip to display the current value.
<CodeDemo title="With Tooltip" files={sliderContent.tooltip} />
### Slider steps
You can use the `showSteps` prop to display small dots on each step.
<CodeDemo title="With Visible Steps" files={sliderContent.visibleSteps} />
### Slider Custom Styles
You can customize the `Slider` component by passing custom Tailwind CSS classes to the component slots.
<CodeDemo title="Custom Styles" files={sliderContent.customStyles} />
Go to the [Slider](/docs/components/slider) component page to learn more about it.
<Spacer y={4} />
## Breadcrumbs
The **Breadcrumbs** is an essential component for navigating hierarchical content. It displays a hierarchy of links to the
current page or resource in an application.
### Usage
<CodeDemo title="Usage" files={breadcrumbsContent.usage} />
### Breadcrumbs as menu
It is possible to use the `Breadcrumbs` component as a horizontal menu. This is useful when you want to display a list
of possible navigations and let the user choose one of them.
<CodeDemo title="Menu Type" files={breadcrumbsContent.menuType} />
### Start & End Content support
You can add any element to the start or end of the breadcrumbs by using the `startContent` and `endContent` props. The
above example uses the `startContent` prop to add icons to the start of the breadcrumbs.
<CodeDemo title="Start & End Content" files={breadcrumbsContent.startEndContent} />
### Collapsing Items support
The `Breadcrumbs` component supports collapsing items, it is useful when you have a lot of items and you want to
collapse them into a dropdown menu.
<CodeDemo title="Customizing the Ellipsis Item" files={breadcrumbsContent.customizingEllipsis} />
### Applying custom styles
You can customize the `Breadcrumbs` component by passing custom Tailwind CSS classes to the component slots.
<CodeDemo title="Custom Styles" files={breadcrumbsContent.customStyles} />
<Spacer y={4} />
Go to the [Breadcrumbs](/docs/components/breadcrumbs) component page to learn more about it.
## Other Changes
- Styling Improvements:
- Transitioned spacing units from pixels (px) to rem units to optimize mobile component sizing.
- Introduced a new `shouldSelectOnPressUp` property for `Tabs/Tab` with a default value of true, allowing tab selection on press-up instead of press-down.
- Updated Chip component's font size to text-tiny for the sm size variant.
- Enhanced the Button component to display only the spinner during loading when it contains an icon.
- Accessibility and Usability Enhancements:
- Resolved Popover component's open state issues for blur/opaque backdrops.
- Enhanced the ScrollShadow API, introducing visibility and onVisibilityChange properties to manage shadow visibility.
- Added `emptyContent`, `topContent`, and `bottomContent` properties to Listbox/Menu/Dropdown for customized content rendering.
- Introduced baseRef to the Input component, allowing control over the parent element's reference.
- Upgraded tailwind-variants to version `0.1.18`, incorporating slot props control.
- Right-to-Left (RTL) Support:
- Implemented RTL support for Accordion,
- Implemented RTL support for Accordion Avatar & AvatarGroup components,
- Implemented RTL support for ButtonGroup.
- Custom Implementations and Fixes:
- Implemented a custom `usePress` hook to address the corner press issue, with a corresponding pull request and issue submitted to the react-aria project.
- Applied the custom `usePress` across all NextUI interactive components for consistent behavior.
- Improved animations and positioning for Input & Select labels.
- Upgraded `react-aria` packages and `framer-motion` for enhanced performance.
- Enhanced TypeScript support for generic items in Menu and DropdownMenu.
- Streamlined package dependencies to exclude globally or individually installed packages, reducing bundle sizes.
- Visual and Interactive Tweaks:
- Removed the outline on Input focus-visible for a cleaner aesthetic.
- Fixed the radius property issue in `ButtonGroup`.
- Introduced the `isActive` prop for `NavbarMenuItem` for active state management.
- Corrected the Pagination custom-items example by adding the key prop.
- Enabled Collection Items support within the `extendVariants` function.
- Added transitions to menu/listbox items for smoother interaction.
- Added a `disableAutosize` property to `Textarea` to control auto-resizing.
- Resolved styling issues in Textarea and animated height adjustments for a fluid user experience.
- Included a `hoverOpacity` key in the themes object within the plugin for customized hover effects.
- Implemented a hover effect for the Button component to enhance user interaction feedback.
- The padding of the CardBody has been updated from `p-5` to `p-3` for consistency with the padding of other Card elements.
<Spacer y={4} />
## Breaking Changes
Unfortunately, we had to make some small styles breaking changes in this release to improve the [Popover](/docs/components/popover) arrow
dynamic positioning. Instead of having a specific slot for the popover arrow, we now use the `before` pseudo element, this allows the
popover to also move the arrow altogether.
This change impacts the Popover, Dropdown, Tooltip and Select implementations.
Popover changes:
```diff-jsx
<Popover
showArrow
backdrop="opaque"
placement="right"
classNames={{
- base: "py-3 px-4 border border-default-200 bg-gradient-to-br from-white to-default-300 dark:from-default-100 dark:to-default-50",
- arrow: "bg-default-200",
+ base: [
+ // the "before" pseudo element is now the popover' arrow
+ "before:bg-default-200"
+ ],
+ content: [ // now we need to use the "content" slot to actually modify the popover' content styles
+ "py-3 px-4 border border-default-200",
+ "bg-gradient-to-br from-white to-default-300",
+ "dark:from-default-100 dark:to-default-50",
],
}}
>
...
</Popover>
```
Tooltip changes:
```diff-jsx
<Tooltip
showArrow
placement="right"
content="I am a tooltip"
classNames={{
- base: "py-2 px-4 shadow-xl text-black bg-gradient-to-br from-white to-neutral-400",
- arrow: "bg-neutral-400 dark:bg-white",
+ base: [
+ // the "before" pseudo element is now the popover' arrow
+ "before:bg-neutral-400 dark:before:bg-white",
+ ],
+ content: [ // now we need to use the "content" slot to actually modify the popover' content styles
+ "py-2 px-4 shadow-xl",
+ "text-black bg-gradient-to-br from-white to-neutral-400",
+ ],
}}
>
<Button variant="flat">Hover me</Button>
</Tooltip>
```
Select changes:
```diff-jsx
<Select
items={users}
label="Assigned to"
className="max-w-xs"
variant="bordered"
popoverProps={{
classNames: {
- base: "p-0 border-small border-divider bg-background",
- arrow: "bg-default-200",
+ base: "before:bg-default-200", // the before pseudo element controls the popover's arrow
+ content: "p-0 border-small border-divider bg-background", // now instead of the "base" slot we use the "content" slot
},
}}
>
...
</Select>
);
}`;
```
Dropdown Changes
```diff-jsx
<Dropdown
showArrow
classNames={{
- base: "py-1 px-1 border border-default-200 bg-gradient-to-br from-white to-default-200 dark:from-default-50 dark:to-black",
- arrow: "bg-default-200",
+ content: "py-1 px-1 border border-default-200 bg-gradient-to-br from-white to-default-200 dark:from-default-50 dark:to-black", // now instead of the "base" slot we use the "content"
+ base: "before:bg-default-200", // the before pseudo element controls the popover's arrow
}}
>
...
</Dropdown>
```
<Spacer y={6} />
We hope you enjoy these new components and the new features. We're excited to see what you build with them!
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!
<Community />
## Contributing
PR's 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.
Reference in New Issue View Git Blame Copy Permalink