ContextQMD
Back to Heroui

v3.0.4

apps/docs/content/docs/en/react/releases/v3-0-4.mdx

3.2.44.6 KB
Original Source
<div className="flex items-center gap-3 mb-6"> <span className="text-sm text-muted">May 2026</span> </div>

Patch release: new Typography compound component ported from HeroUI Pro, a docs theme selector for previewing components in different themes, min()-capped border-radius tokens across 45+ component CSS files, reworked Table focus rings, and fixes for Checkbox, Autocomplete, Tooltip, and form field padding.

Installation

Update to the latest version:

<Tabs items={["npm", "pnpm", "yarn", "bun"]}> <Tab value="npm"> bash npm i @heroui/styles@latest @heroui/react@latest </Tab> <Tab value="pnpm"> bash pnpm add @heroui/styles@latest @heroui/react@latest </Tab> <Tab value="yarn"> bash yarn add @heroui/styles@latest @heroui/react@latest </Tab> <Tab value="bun"> bash bun add @heroui/styles@latest @heroui/react@latest </Tab> </Tabs>

<Callout type="info"> **Using AI assistants?** Simply prompt "Hey Cursor, update HeroUI to the latest version" and your AI assistant will automatically compare versions and apply the necessary changes. Learn more about the [HeroUI MCP Server](/docs/ui-for-agents/mcp-server). </Callout>

What's New

Typography Component

New compound component for structured typography, ported from HeroUI Pro (#6479). Renders the right HTML element automatically — <h1>–<h6>, <p>, or <code> — based on the sub-component or type prop.

<ComponentPreview name="typography-typography-scale" />

Sub-components: Typography.Heading, Typography.Paragraph, Typography.Code, Typography.Prose.

Props on all sub-components: align, color, weight, truncate. Typography.Heading accepts level (1–6). Typography.Paragraph accepts size ("base", "sm", "xs").

Wrap mixed content in Typography.Prose for automatic prose spacing:

tsx
<Typography.Prose>
  <Typography.Heading level={3}>Getting Started</Typography.Heading>
  <Typography.Paragraph>Install the package and import the component.</Typography.Paragraph>
</Typography.Prose>

Docs Theme Selector

The documentation site now includes a theme selector that lets you preview every component in different themes — light, dark, brutalism, and more. Your choice is saved to localStorage so it persists across sessions (#6471).

<VideoPlayer src="https://heroui-assets.nyc3.cdn.digitaloceanspaces.com/videos/heroui-oss-3.0.4-4k.mp4" muted />

Border-Radius Design Tokens

All rounded-full and hardcoded border-radius values across ~45 component CSS files now use min() to cap the computed radius (#6465). Components no longer look broken when users set very large custom radius themes — the radius stops growing once it would exceed the element's dimensions.

Table Focus Ring Rework

Table row focus indicators are split across individual cells using per-cell inset shadows instead of a single box-shadow on the row. The ring now looks continuous across all cells and works correctly with virtualized table wrappers.

Bug Fixes

  • Checkbox: removed hardcoded accent-hover background from selected/indeterminate indicator state (#6487)
  • Autocomplete: isDisabled now propagates from root to Trigger and ClearButton via context (#6443)
  • Description: removed unnecessary horizontal padding from description text in form fields (textfield, color-field, date-field, number-field, search-field, time-field) (#6484)
  • Tooltip: changed padding from px-2 py-1 to p-2 and switched border-radius to design token (#6481)
  • Theme Builder: fixed swapped accent-foreground values (#6401)
  • Soft color contrast: accent-soft-foreground now uses a darker shade for light accent themes (Sky, Lavender, Mint), fixing barely-visible text on secondary buttons, chips, and badges. The shared theme now reads from --accent-soft-foreground with a fallback to --accent

Contributors

Thanks to everyone who contributed to this release!

<PRContributors />