Backlog

In Progress

To Release

Done

Main Roadmap

A slideshow component for cycling through elements<img data-width="100%" data-align="left" alt="" data-featurebase-content-key="68bd915b1cb93d59ff8b332f/post/6923343847fce20849fb7923/019ab183-aea1-7a5f-9f79-1ac359c2fbc2/b64u-Q2xlYW5TaG90IDIwMjUtMTEtMjMgYXQgMTMuMTkuNDFAMngucG5n.png" src="https://68bd915b1cb93d59ff8b332f.featurebase-attachments.com/c/post/6923343847fce20849fb7923/019ab183-aea1-7a5f-9f79-1ac359c2fbc2/b64u-Q2xlYW5TaG90IDIwMjUtMTEtMjMgYXQgMTMuMTkuNDFAMngucG5n.png?X-Amz-Expires=3600&amp;X-Amz-Date=20260314T050000Z&amp;X-Amz-Algorithm=AWS4-HMAC-SHA256&amp;X-Amz-Credential=DO801TYC4FCVNNEKURKM%2F20260314%2Ffra1%2Fs3%2Faws4_request&amp;X-Amz-SignedHeaders=host&amp;X-Amz-Signature=f931438b89221c9b8ba9b85a42b6a5c989e6817f8b6d5b60344a467e543b7e7d" data-featurebase-content-filename="CleanShot 2025-11-23 at 13.19.41@2x.png">

Planned

Stable

Carousel

Junior Garcia

<a target="_blank" rel="noopener noreferrer nofollow" class="link" href="https://www.radix-ui.com/primitives/docs/components/scroll-area">https://www.radix-ui.com/primitives/docs/components/scroll-area</a>

Beta

ScrollBar

A migration mcp to make the v2 → v3 migration simpler

v2 to v3 MCP

A table displays data in rows and columns and enables a user to navigate its contents via directional navigation keys, and optionally supports row selection and sorting.

Completed

Table

A calendar consists of a grouping element containing one or more date grids (e.g. months), and a previous and next button for navigating between date ranges. Each calendar grid consists of cells containing button elements that can be pressed and navigated to using the arrow keys to select a date.<img data-width="100%" data-align="left" alt="" data-featurebase-content-key="68bd915b1cb93d59ff8b332f/post/68bd9a0b5b338647309bef66/019b0501-5d12-72c7-9f63-88f42bf5be43/b64u-Q2xlYW5TaG90IDIwMjUtMTItMDkgYXQgMTMuMjUuMjZAMngucG5n.png" src="https://68bd915b1cb93d59ff8b332f.featurebase-attachments.com/c/post/68bd9a0b5b338647309bef66/019b0501-5d12-72c7-9f63-88f42bf5be43/b64u-Q2xlYW5TaG90IDIwMjUtMTItMDkgYXQgMTMuMjUuMjZAMngucG5n.png?X-Amz-Expires=3600&amp;X-Amz-Date=20260314T050000Z&amp;X-Amz-Algorithm=AWS4-HMAC-SHA256&amp;X-Amz-Credential=DO801TYC4FCVNNEKURKM%2F20260314%2Ffra1%2Fs3%2Faws4_request&amp;X-Amz-SignedHeaders=host&amp;X-Amz-Signature=cfdb762d338daa35fdde650214125d03e00bd63b70e7101ab29648e91fba0439" data-featurebase-content-filename="CleanShot 2025-12-09 at 13.25.26@2x.png">Figma Link:<a target="_blank" rel="noopener noreferrer nofollow" class="link" href="https://www.figma.com/community/file/1546526812159103429">https://www.figma.com/community/file/1546526812159103429</a>

High Priority

Calendar

<a target="_blank" rel="noopener noreferrer nofollow" class="link" href="https://www.figma.com/community/file/1546526812159103429">https://www.figma.com/community/file/1546526812159103429</a><img data-width="100%" data-align="left" alt="" data-featurebase-content-key="68bd915b1cb93d59ff8b332f/post/6910a6f36e864bc176b28f8e/019a690c-0471-7ec4-9418-02a9e6baa712/b64u-Q2xlYW5TaG90IDIwMjUtMTEtMDkgYXQgMTEuMzYuMjBAMngucG5n.png" data-featurebase-content-filename="CleanShot 2025-11-09 at 11.36.20@2x.png" src="https://68bd915b1cb93d59ff8b332f.featurebase-attachments.com/c/post/6910a6f36e864bc176b28f8e/019a690c-0471-7ec4-9418-02a9e6baa712/b64u-Q2xlYW5TaG90IDIwMjUtMTEtMDkgYXQgMTEuMzYuMjBAMngucG5n.png?X-Amz-Expires=3600&amp;X-Amz-Date=20260314T050000Z&amp;X-Amz-Algorithm=AWS4-HMAC-SHA256&amp;X-Amz-Credential=DO801TYC4FCVNNEKURKM%2F20260314%2Ffra1%2Fs3%2Faws4_request&amp;X-Amz-SignedHeaders=host&amp;X-Amz-Signature=7c83de42df4b2da20edd64cf4f3eea17d768a754c098908914728516821e3b39">

Toast

The Pagination component allows you to display active page and navigate between multiple pages.

Pagination

<a target="_blank" rel="noopener noreferrer nofollow" class="link" href="https://www.figma.com/community/file/1546526812159103429">https://www.figma.com/community/file/1546526812159103429</a><img data-width="100%" data-align="left" alt="" data-featurebase-content-key="68bd915b1cb93d59ff8b332f/post/6910a6c540a613558e975150/019a690b-50f2-7930-b340-593fee0e9387/b64u-Q2xlYW5TaG90IDIwMjUtMTEtMDkgYXQgMTEuMzUuMjlAMngucG5n.png" data-featurebase-content-filename="CleanShot 2025-11-09 at 11.35.29@2x.png" src="https://68bd915b1cb93d59ff8b332f.featurebase-attachments.com/c/post/6910a6c540a613558e975150/019a690b-50f2-7930-b340-593fee0e9387/b64u-Q2xlYW5TaG90IDIwMjUtMTEtMDkgYXQgMTEuMzUuMjlAMngucG5n.png?X-Amz-Expires=3600&amp;X-Amz-Date=20260314T050000Z&amp;X-Amz-Algorithm=AWS4-HMAC-SHA256&amp;X-Amz-Credential=DO801TYC4FCVNNEKURKM%2F20260314%2Ffra1%2Fs3%2Faws4_request&amp;X-Amz-SignedHeaders=host&amp;X-Amz-Signature=758ff2b0afd4445731b2774f592593387dc5c7cf4ac2677e8f55dae5c2c77004">

DatePicker

Displays a dialog with custom content that requires attention or provides additional information.<img data-width="100%" data-align="left" alt="" data-featurebase-content-key="68bd915b1cb93d59ff8b332f/post/68bd9ac079ab3a0255904836/019a693c-7b88-72b3-995d-eadcc8d6d42f/b64u-Q2xlYW5TaG90IDIwMjUtMTEtMDkgYXQgMTIuMjkuMDVAMngucG5n.png" data-featurebase-content-filename="CleanShot 2025-11-09 at 12.29.05@2x.png" src="https://68bd915b1cb93d59ff8b332f.featurebase-attachments.com/c/post/68bd9ac079ab3a0255904836/019a693c-7b88-72b3-995d-eadcc8d6d42f/b64u-Q2xlYW5TaG90IDIwMjUtMTEtMDkgYXQgMTIuMjkuMDVAMngucG5n.png?X-Amz-Expires=3600&amp;X-Amz-Date=20260314T050000Z&amp;X-Amz-Algorithm=AWS4-HMAC-SHA256&amp;X-Amz-Credential=DO801TYC4FCVNNEKURKM%2F20260314%2Ffra1%2Fs3%2Faws4_request&amp;X-Amz-SignedHeaders=host&amp;X-Amz-Signature=15073513a2cea7ba9cee72a3b0e7b303101ad275d62e5453ff9c1fce5015f3ba">Figma Link:<a target="_blank" rel="noopener noreferrer nofollow" class="link" href="https://www.figma.com/community/file/1546526812159103429">https://www.figma.com/community/file/1546526812159103429</a>

Modal

Theme Builder

Date Range Picker

DateRangePicker

Badges are used as a small numerical value or status descriptor for UI elements.

Badge

RangeCalendar

Displays a panel that slides in from the edge of the screen, containing supplementary content.

Next release

Drawer

Progress bars show either determinate or indeterminate progress of an operation over time.<ul><li>Linear</li><li>Circular</li></ul>

ProgressBar

<a target="_blank" rel="noopener noreferrer nofollow" class="link" href="https://react-spectrum.adobe.com/react-aria/Toolbar.html">https://react-spectrum.adobe.com/react-aria/Toolbar.html</a>

Toolbar

A toggle button allows a user to toggle a selection on or off, for example switching between two states or modes.

ToggleButton

A toggle button group allows a user to toggle multiple options, with single or multiple selection.

ToggleButtonGroup

A meter represents a quantity within a known range, or a fractional value.

Meter

Table is lagging with 50+ rows because of rerender of each row. HeroUI v2 havent this problem with same rows. TanStack doesnt helped. Problem source: Table.Content (TablePrimitive from react-aria-components) and Table.Row (RowPrimitive) currently doesnt using React.memo. Please fix.

Table might use React.memo!

mrn0_user

<img src="https://68bd915b1cb93d59ff8b332f.featurebase-attachments.com/c/post/69ae5d4d113d494b1dcfa0f1/019cd11a-cbe5-7038-859f-f5004c2e446a/b64u-MDE5Y2QxMWEtY2JhMy03Y2Q3LTk4NTYtNmRkYWRlZWE5MjBk.webp?X-Amz-Expires=3600&amp;X-Amz-Date=20260314T050000Z&amp;X-Amz-Algorithm=AWS4-HMAC-SHA256&amp;X-Amz-Credential=DO801TYC4FCVNNEKURKM%2F20260314%2Ffra1%2Fs3%2Faws4_request&amp;X-Amz-SignedHeaders=host&amp;X-Amz-Signature=eebb63c428a5f6524338622f254a3f91d49fa59511fe8940b19f8598bc68f13b" data-width="100%" data-align="left" alt="Изображение" data-featurebase-content-key="68bd915b1cb93d59ff8b332f/post/69ae5d4d113d494b1dcfa0f1/019cd11a-cbe5-7038-859f-f5004c2e446a/b64u-MDE5Y2QxMWEtY2JhMy03Y2Q3LTk4NTYtNmRkYWRlZWE5MjBk.webp" data-featurebase-content-filename="019cd11a-cba3-7cd7-9856-6ddadeea920d">firefox.<img src="https://68bd915b1cb93d59ff8b332f.featurebase-attachments.com/c/post/69ae5d4d113d494b1dcfa0f1/019cd11a-fdcf-7bc3-b8b2-ceec2a320747/b64u-MDE5Y2QxMWEtZmQ4NC03MzBiLTgwZTQtMzFkYTI0ZWJiNjlm.webp?X-Amz-Expires=3600&amp;X-Amz-Date=20260314T050000Z&amp;X-Amz-Algorithm=AWS4-HMAC-SHA256&amp;X-Amz-Credential=DO801TYC4FCVNNEKURKM%2F20260314%2Ffra1%2Fs3%2Faws4_request&amp;X-Amz-SignedHeaders=host&amp;X-Amz-Signature=231fb9cefd22a6f2e19e412ad8a4a0e2c6b6423aa5cc55bc97f56972c95375b5" data-width="100%" data-align="left" alt="Изображение" data-featurebase-content-key="68bd915b1cb93d59ff8b332f/post/69ae5d4d113d494b1dcfa0f1/019cd11a-fdcf-7bc3-b8b2-ceec2a320747/b64u-MDE5Y2QxMWEtZmQ4NC03MzBiLTgwZTQtMzFkYTI0ZWJiNjlm.webp" data-featurebase-content-filename="019cd11a-fd84-730b-80e4-31da24ebb69f">chrome.Rounding for header NOT APPLIED on firefox.<img src="https://68bd915b1cb93d59ff8b332f.featurebase-attachments.com/c/post/69ae5d4d113d494b1dcfa0f1/019cd11b-c192-7731-81b9-0bcca660c89d/b64u-MDE5Y2QxMWItYzEyMS03YzlkLWFmNGItMmViMjhiMGUxOGI5.webp?X-Amz-Expires=3600&amp;X-Amz-Date=20260314T050000Z&amp;X-Amz-Algorithm=AWS4-HMAC-SHA256&amp;X-Amz-Credential=DO801TYC4FCVNNEKURKM%2F20260314%2Ffra1%2Fs3%2Faws4_request&amp;X-Amz-SignedHeaders=host&amp;X-Amz-Signature=c30b876aa3ed9110e0267ed76a2713556f4e4f273f16846aea330d8bad12ffd7" data-width="100%" data-align="left" alt="Изображение" data-featurebase-content-key="68bd915b1cb93d59ff8b332f/post/69ae5d4d113d494b1dcfa0f1/019cd11b-c192-7731-81b9-0bcca660c89d/b64u-MDE5Y2QxMWItYzEyMS03YzlkLWFmNGItMmViMjhiMGUxOGI5.webp" data-featurebase-content-filename="019cd11b-c121-7c9d-af4b-2eb28b0e18b9">firefox. Look at bottom borders, rounding broken. thats appers only in firefox. chrome is good atp.

HeroUI v3

Main Roadmap