apps/docs/content/docs/react/releases/v3-0-0-beta-4.mdx
This release introduces the new Theme Builder for visual theme customization, three new components (Autocomplete, Breadcrumbs, Toast), adds secondary variant to Tabs, primary/secondary variants to Input and InputGroup, TextArea support for InputGroup, and ⚠️ breaking changes removing Link's underline variants and the isInSurface prop from form components.
<DocsImage src="https://heroui-assets.nyc3.cdn.digitaloceanspaces.com/docs/versions/[email protected]" darkSrc="https://heroui-assets.nyc3.cdn.digitaloceanspaces.com/docs/versions/[email protected]" alt="HeroUI v3 Beta 4" href="/docs/changelog/v3-0-0-beta-4" />
Update to the latest version:
<Tabs items={["npm", "pnpm", "yarn", "bun"]}>
<Tab value="npm">
bash npm i @heroui/styles@beta @heroui/react@beta
</Tab>
<Tab value="pnpm">
bash pnpm add @heroui/styles@beta @heroui/react@beta
</Tab>
<Tab value="yarn">
bash yarn add @heroui/styles@beta @heroui/react@beta
</Tab>
<Tab value="bun">
bash bun add @heroui/styles@beta @heroui/react@beta
</Tab>
</Tabs>
We're excited to introduce the Theme Builder - a powerful visual tool for creating and customizing HeroUI themes. Build your perfect theme with real-time preview and export ready-to-use CSS.
Key features:
Try it now at v3.heroui.com/themes.
This release introduces 3 new essential components:
<ComponentPreview name="autocomplete-default" />
<ComponentPreview name="breadcrumbs-basic" />
<ComponentPreview name="toast-variants" />
Added a new secondary variant to Tabs with an underline indicator style. The secondary variant supports both horizontal and vertical orientations.
<ComponentPreview name="tabs-secondary" />
Usage:
<Tabs variant="secondary">
<Tabs.ListContainer>
<Tabs.List aria-label="Options">
<Tabs.Tab id="overview">
Overview
<Tabs.Indicator />
</Tabs.Tab>
<Tabs.Tab id="analytics">
Analytics
<Tabs.Indicator />
</Tabs.Tab>
</Tabs.List>
</Tabs.ListContainer>
<Tabs.Panel id="overview">Content</Tabs.Panel>
<Tabs.Panel id="analytics">Content</Tabs.Panel>
</Tabs>
Added primary and secondary variants to the Input component:
primary (default): Standard styling with shadow, suitable for most use casessecondary: Lower emphasis variant without shadow, suitable for use in Surface components<ComponentPreview name="input-variants" />
The InputGroup component received several improvements:
TextArea Support: Use InputGroup.TextArea for multiline text inputs with prefix and suffix elements.
<ComponentPreview name="input-group-with-textarea" />
Variants: Added primary and secondary variants matching the Input component.
<ComponentPreview name="input-group-variants" />
Added a new outline variant to both Button and ButtonGroup components for outlined styling.
<ComponentPreview name="button-outline-variant" />
Added size support to AlertDialog component, allowing you to control the dialog size.
<ComponentPreview name="alert-dialog-sizes" />
Faster animation and increased stroke width for better feedback on Checkbox.
<ComponentPreview name="checkbox-basic" />
The Link component now uses Tailwind CSS classes for text decoration instead of built-in variants. This provides more flexibility and follows Tailwind conventions.
Available Tailwind utilities:
underline - Always visible underlineno-underline - Remove underlinehover:underline - Underline appears on hoverdecoration-primary, decoration-secondary, etc. - Set underline colordecoration-1, decoration-2, decoration-4 - Control thicknessunderline-offset-1, underline-offset-2, etc. - Adjust spacing<ComponentPreview name="link-underline-and-offset" />
The Link component's built-in underline and underlineOffset props have been removed. Use Tailwind CSS classes instead for text decoration.
Before:
<Link href="#" underline="hover" underlineOffset={4}>
Link text
</Link>
After:
<Link href="#" className="hover:underline underline-offset-4">
Link text
</Link>
Available Tailwind classes:
underline, no-underline, hover:underline - Decoration linedecoration-primary, decoration-muted, etc. - Decoration colordecoration-solid, decoration-dashed, decoration-dotted - Decoration styledecoration-1, decoration-2, decoration-4 - Decoration thicknessunderline-offset-1, underline-offset-2, underline-offset-4 - Underline offsetFor more details, see the Link documentation.
isInSurface PropThe isInSurface prop and automatic surface detection have been removed from form-based components. Instead, use the variant="secondary" prop when placing form components inside Surface, Card, or other surface-based containers.
Before:
<Surface>
<Input isInSurface />
</Surface>
After:
<Surface>
<Input variant="secondary" />
</Surface>
Affected components:
The secondary variant provides lower emphasis styling without shadow, which is appropriate for use on surface backgrounds.
:not(:focus) to focus-visible selectors to prevent conflicts with hover statesBUTTON_GROUP_CHILD re-export for type declarationsHeroUI now provides direct exports from react-aria-components for easier access to primitives and utilities. These exports are particularly useful for React Aria Framework setup.
Providers:
RouterProvider - Configure React Aria links to use your client-side routerI18nProvider - Set the locale used by React Aria componentsHooks and Utilities:
isRTL - Check if a locale is right-to-leftuseLocale - Access the current locale and directionuseFilter - Filter and sort collectionsComponents:
Collection - Collection component for managing listsListBoxLoadMoreItem - ListBox item for loading more itemsi18n Utilities:
getLocalizationScript - Get localization script for server-side rendering (from react-aria-components/i18n)All of these can be imported directly from @heroui/react:
import {
RouterProvider,
I18nProvider,
isRTL,
useLocale,
useFilter,
getLocalizationScript
} from "@heroui/react";
Thanks to everyone who contributed to this release!
<PRContributors />