{"id":773356,"date":"2026-07-01T13:33:09","date_gmt":"2026-07-01T13:33:09","guid":{"rendered":"https:\/\/www.newsbeep.com\/ca\/773356\/"},"modified":"2026-07-01T13:33:09","modified_gmt":"2026-07-01T13:33:09","slug":"heroui-v3-lands-as-a-ground-up-rewrite-for-react-and-react-native-built-on-tailwind-css-v4","status":"publish","type":"post","link":"https:\/\/www.newsbeep.com\/ca\/773356\/","title":{"rendered":"HeroUI v3 Lands as a Ground-Up Rewrite for React and React Native, Built on Tailwind CSS v4"},"content":{"rendered":"

HeroUI<\/a>, the React component library formerly known as NextUI, has released HeroUI v3<\/a>, a ground-up rewrite that the team frames as one design system for web and native. The March 2026 release ships more than 75 web components, 21 of them new, alongside a brand-new React Native library built from scratch with 37 components.<\/p>\n

HeroUI v3 is built on React Aria Components<\/a> for accessibility and Tailwind CSS v4<\/a> for styling, exposing CSS variables, OKLCH colours and BEM modifiers for customisation. Every animation has moved to CSS with no JavaScript runtime, and the library adopts a compound component API that drops the old provider wrapper and works out of the box with React 19 and Next.js.<\/p>\n

The rewrite also leans heavily into AI-assisted development, shipping an MCP Server<\/a>, Agent Skills and an llms.txt file so coding assistants can read component docs directly, plus a Figma Kit v3<\/a> with 1:1 component parity.<\/p>\n

On npm<\/a> the core @heroui\/react package now records around 341,000 weekly downloads, the separate heroui-native package adds roughly 11,000 a week, and the GitHub repository<\/a> sits near 27,700 stars.<\/p>\n

Several point releases have landed since 3.0. v3.0.3<\/a> upgraded React Aria Components to 1.17.0 and dropped around 90 percent of its transitive dependencies for faster installs, while adding a Typography component. v3.1.0<\/a> in late May added Chinese documentation, expanded soft colour tokens, a shared themeable scrollbar system and SSR fixes for useTheme, and v3.2.0<\/a> arrived on 16 June 2026 as the current line, with monthly minor releases now the stated cadence.<\/p>\n

A long-time NextUI and v2 user writing on Reddit<\/a> praised the themes page and documentation but lamented that input label animations, prebaked units and autocomplete were “all gone” in v3:<\/p>\n

<\/p>\n

I have just started a new project using v3. The themes page is pretty and the documentation is bang on as usual, but I keep finding things missing which I loved in v2… The choice of animations for labels on inputs, the ability to have units prebaked into them, the autocomplete… all gone.<\/p>\n

<\/p>\n

On GitHub<\/a>, developers questioned the roadmap and missing pieces such as Navbar, with one noting “there’s some lack of transparency of the project timeline for sure.”<\/p>\n

Teams moving from v2 should plan carefully, because v2 and v3 cannot coexist in the same project. The official migration guide<\/a> offers both a full migration<\/a> and an incremental migration<\/a> path, supported by a dedicated migration MCP server, and some components such as Image have been removed entirely in favour of native elements.<\/p>\n

HeroUI is an open-source, production-ready React and React Native component library created by Junior Garc\u00eda and backed by Y Combinator, distributed under the Apache 2.0 license with full release notes available on GitHub<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"HeroUI, the React component library formerly known as NextUI, has released HeroUI v3, a ground-up rewrite that the…\n","protected":false},"author":2,"featured_media":773357,"comment_status":"","ping_status":"","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[6],"tags":[49,48,188346,4113,274459,15853,274460,61,188345,31278],"class_list":["post-773356","post","type-post","status-publish","format-standard","has-post-thumbnail","category-technology","tag-ca","tag-canada","tag-css","tag-development","tag-heroui-v3-rewrite","tag-react","tag-react-native","tag-technology","tag-web-components","tag-web-development"],"_links":{"self":[{"href":"https:\/\/www.newsbeep.com\/ca\/wp-json\/wp\/v2\/posts\/773356","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.newsbeep.com\/ca\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.newsbeep.com\/ca\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.newsbeep.com\/ca\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.newsbeep.com\/ca\/wp-json\/wp\/v2\/comments?post=773356"}],"version-history":[{"count":0,"href":"https:\/\/www.newsbeep.com\/ca\/wp-json\/wp\/v2\/posts\/773356\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.newsbeep.com\/ca\/wp-json\/wp\/v2\/media\/773357"}],"wp:attachment":[{"href":"https:\/\/www.newsbeep.com\/ca\/wp-json\/wp\/v2\/media?parent=773356"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.newsbeep.com\/ca\/wp-json\/wp\/v2\/categories?post=773356"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.newsbeep.com\/ca\/wp-json\/wp\/v2\/tags?post=773356"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}