Backlog

Next up

In Progress

Done

Main Roadmap

Link: <a target="_blank" rel="noopener noreferrer nofollow" class="link" href="https://www.figma.com/design/ZmGWr2Jqedlfik5kZPLCAs/HeroUI-Figma-Kit-V3--Community-?node-id=5375-72314&amp;t=HvoI4m3D2BjB9sZo-0">https://www.figma.com/design/ZmGWr2Jqedlfik5kZPLCAs/HeroUI-Figma-Kit-V3--Community-?node-id=5375-72314&amp;t=HvoI4m3D2BjB9sZo-0</a> believe this is needed too

In Review

DateTime Picker

Joji Toon

I have been Native apps for a bit and of the biggest pain points is a app-bar. With custom back buttons, titles, and custom right actions

App-Bar

Rumaiz Ahmed

im surprised no one mentioned it yet but table as display data is kinda useful no?

Table

Harith Iqbal

Hello,I’ve been using HeroUI Native and so far it’s amazing. One thing I’m wondering is with greater adoption of iOS 26 and Liquid Glass, how is the team thinking about this integration? Will this be something abstracted/handled by the library? Or is it not considered for now, and we should manually handle this instead, maybe like:<pre><code>isLiquidGlassSupported() 
? &lt;Host&gt;{liquid glass stuff}&lt;/Host&gt; 
: &lt;HeroUI&gt;…&lt;/HeroUI&gt;</code></pre>Thank you!

Expo-UI/Liquid Glass

Gary Chiu

Variations of a list with list items. Users with avatars, subtitles, accessory items, etc…

ListBox

Trent Kocurek

Can we have a text area component 🙏

TextArea

ted-iykyk

As in <a target="_blank" rel="noopener noreferrer nofollow" class="link" href="https://ui.shadcn.com/docs/components/combobox">https://ui.shadcn.com/docs/components/combobox</a>

Combobox

Pontus Karlsson

Carousel

Javier Fuentes

A number stepper would be another good component to add. Example: <a target="_blank" rel="noopener noreferrer nofollow" class="link" href="https://github.com/jadghadry/react-native-custom-stepper">https://github.com/jadghadry/react-native-custom-stepper</a>

Number Stepper

Jon Insley

<img data-width="100%" data-align="left" alt="" data-featurebase-content-key="68bef9e7984ca8913bb30823/post/6944281afea84cef1d1f9d9d/019b323a-6004-7066-ad5f-2b04b130fea8/b64u-Q2FwdHVyYSBkZSBwYW50YWxsYSAyMDI1LTEyLTE4IGEgbGEocykgMTEuMTAuMzjigK9hLsKgbS4ucG5n.png" src="https://68bef9e7984ca8913bb30823.featurebase-attachments.com/c/post/6944281afea84cef1d1f9d9d/019b323a-6004-7066-ad5f-2b04b130fea8/b64u-Q2FwdHVyYSBkZSBwYW50YWxsYSAyMDI1LTEyLTE4IGEgbGEocykgMTEuMTAuMzjigK9hLsKgbS4ucG5n.png?X-Amz-Expires=3600&amp;X-Amz-Date=20260210T230000Z&amp;X-Amz-Algorithm=AWS4-HMAC-SHA256&amp;X-Amz-Credential=DO801TYC4FCVNNEKURKM%2F20260210%2Ffra1%2Fs3%2Faws4_request&amp;X-Amz-SignedHeaders=host&amp;X-Amz-Signature=ca3c4b1c08d598712dd3e3849c3b0d781c86bef6edabba49da9db387dd78067d" data-featurebase-content-filename="Captura de pantalla 2025-12-18 a la(s) 11.10.38 a.&nbsp;m..png"><h1>Step / Stepper Component</h1><h2>Overview</h2>The Step / Stepper component is used to visually represent progress through a multi-step flow, such as onboarding, subscription setup, checkout, KYC, or form wizards.It helps users:<ul><li>Understand where they are in the process</li><li>See completed, current, and pending steps</li><li>Reduce drop-off by setting clear expectations</li></ul><div data-type="horizontalRule"><hr></div><h2>Use Cases</h2><ul><li>Onboarding flows</li><li>Subscription or plan selection</li><li>Multi-step forms</li><li>Payment or verification processes (OTP, review, confirmation)</li><li>Long tasks with checkpoints</li></ul>

Step

Menus display a list of choices on temporary elevated surfaces. Their placement varies based on the element that opens them.<img data-width="100%" data-align="left" data-featurebase-content-key="68bef9e7984ca8913bb30823/post/68ca7725878362bcda80cf10/019956e1-254c-7c7c-8421-358e31f903ff/b64u-U2NyZWVuc2hvdCAyMDI1LTA5LTE3IGF0IDExLjUxLjU4LnBuZw.png" data-featurebase-content-filename="Screenshot 2025-09-17 at 11.51.58.png" src="https://68bef9e7984ca8913bb30823.featurebase-attachments.com/c/post/68ca7725878362bcda80cf10/019956e1-254c-7c7c-8421-358e31f903ff/b64u-U2NyZWVuc2hvdCAyMDI1LTA5LTE3IGF0IDExLjUxLjU4LnBuZw.png?X-Amz-Expires=3600&amp;X-Amz-Date=20260210T230000Z&amp;X-Amz-Algorithm=AWS4-HMAC-SHA256&amp;X-Amz-Credential=DO801TYC4FCVNNEKURKM%2F20260210%2Ffra1%2Fs3%2Faws4_request&amp;X-Amz-SignedHeaders=host&amp;X-Amz-Signature=01218008f2dff722bc1bb6186c46471b7eb21d0fe4380be828fa4d57eda1149b">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> Please follow the contribution guide to get more details about component composition:<a target="_blank" rel="noopener noreferrer nofollow" class="link" href="https://github.com/heroui-inc/heroui-native/blob/alpha/CONTRIBUTING.md">https://github.com/heroui-inc/heroui-native/blob/alpha/CONTRIBUTING.md</a>

Planned

Volodymyr Serbulenko

A slider allows a user to select one or more values within a range.<img data-width="100%" data-align="left" data-featurebase-content-key="68bef9e7984ca8913bb30823/post/68c1966cb0b8d4a678ef0522/01993433-6aa3-77f4-9327-38bce4a96f76/b64u-U2NyZWVuc2hvdCAyMDI1LTA5LTEwIGF0IDE4LjE2LjM4LnBuZw.png" data-featurebase-content-filename="Screenshot 2025-09-10 at 18.16.38.png" src="https://68bef9e7984ca8913bb30823.featurebase-attachments.com/c/post/68c1966cb0b8d4a678ef0522/01993433-6aa3-77f4-9327-38bce4a96f76/b64u-U2NyZWVuc2hvdCAyMDI1LTA5LTEwIGF0IDE4LjE2LjM4LnBuZw.png?X-Amz-Expires=3600&amp;X-Amz-Date=20260210T230000Z&amp;X-Amz-Algorithm=AWS4-HMAC-SHA256&amp;X-Amz-Credential=DO801TYC4FCVNNEKURKM%2F20260210%2Ffra1%2Fs3%2Faws4_request&amp;X-Amz-SignedHeaders=host&amp;X-Amz-Signature=0751645f455d1aa079e471ebd480d623ceeff64f158cf8cdae4e14660c36ee9c">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> Please follow the contribution guide to get more details about component composition:<a target="_blank" rel="noopener noreferrer nofollow" class="link" href="https://github.com/heroui-inc/heroui-native/blob/alpha/CONTRIBUTING.md">https://github.com/heroui-inc/heroui-native/blob/alpha/CONTRIBUTING.md</a>

Slider

figma.com/design/H0xHxBB8qOKjHHAUCsvgHc/HeroUI-Figma-Kit-V3?node-id=5375-72355&amp;p=f&amp;m=dev

Alert

RC-1

Bottom sheets are used everywhere on mobile apps (slack, google maps, spotify, discord etc). Having something like it in heroui-native or at least a demo of using heroui-native component with <a target="_blank" rel="noopener noreferrer nofollow" class="link" href="https://gorhom.dev/react-native-bottom-sheet/">react-native-bottom-sheet</a> would make for a killer demo / tweet 😄References<ul><li><a target="_blank" rel="noopener noreferrer nofollow" class="link" href="https://gorhom.dev/react-native-bottom-sheet/">react-native-bottom-sheet</a> the mostly widely used bottom/action sheet </li><li><a target="_blank" rel="noopener noreferrer nofollow" class="link" href="https://herouiv3.featurebase.app/p/drawer-sheet">https://herouiv3.featurebase.app/p/drawer-sheet</a></li></ul>

Completed

Bottom sheet

Clifford Fajardo

The OTP Input component enables users to enter one-time passwords (OTP).<img data-width="100%" data-align="left" data-featurebase-content-key="68bef9e7984ca8913bb30823/post/68c195dee13b723aa4d6363a/01993431-0fda-75a6-b0dd-e3fe7c46a437/b64u-U2NyZWVuc2hvdCAyMDI1LTA5LTEwIGF0IDE4LjEzLjIyLnBuZw.png" data-featurebase-content-filename="Screenshot 2025-09-10 at 18.13.22.png" src="https://68bef9e7984ca8913bb30823.featurebase-attachments.com/c/post/68c195dee13b723aa4d6363a/01993431-0fda-75a6-b0dd-e3fe7c46a437/b64u-U2NyZWVuc2hvdCAyMDI1LTA5LTEwIGF0IDE4LjEzLjIyLnBuZw.png?X-Amz-Expires=3600&amp;X-Amz-Date=20260210T230000Z&amp;X-Amz-Algorithm=AWS4-HMAC-SHA256&amp;X-Amz-Credential=DO801TYC4FCVNNEKURKM%2F20260210%2Ffra1%2Fs3%2Faws4_request&amp;X-Amz-SignedHeaders=host&amp;X-Amz-Signature=b1f415d0430912a2ee7d4191a34dc0fc23d1ded0ee2863ac03de6708d14fa1fc">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> Please follow the contribution guide to get more details about component composition:<a target="_blank" rel="noopener noreferrer nofollow" class="link" href="https://github.com/heroui-inc/heroui-native/blob/alpha/CONTRIBUTING.md">https://github.com/heroui-inc/heroui-native/blob/alpha/CONTRIBUTING.md</a>

OTP Input

Toasts are temporary notifications that provide concise feedback about an action or event.<img data-width="100%" data-align="left" data-featurebase-content-key="68bef9e7984ca8913bb30823/post/68c1974f6eaabecc7e1f3f3f/01993436-c06f-777a-9e16-28cf247a597f/b64u-U2NyZWVuc2hvdCAyMDI1LTA5LTEwIGF0IDE4LjIwLjE1LnBuZw.png" data-featurebase-content-filename="Screenshot 2025-09-10 at 18.20.15.png" src="https://68bef9e7984ca8913bb30823.featurebase-attachments.com/c/post/68c1974f6eaabecc7e1f3f3f/01993436-c06f-777a-9e16-28cf247a597f/b64u-U2NyZWVuc2hvdCAyMDI1LTA5LTEwIGF0IDE4LjIwLjE1LnBuZw.png?X-Amz-Expires=3600&amp;X-Amz-Date=20260210T230000Z&amp;X-Amz-Algorithm=AWS4-HMAC-SHA256&amp;X-Amz-Credential=DO801TYC4FCVNNEKURKM%2F20260210%2Ffra1%2Fs3%2Faws4_request&amp;X-Amz-SignedHeaders=host&amp;X-Amz-Signature=28d60c55737c2d46d18db962f59f8d24b8695eeeb9e4b5dc5f2bca350ac1bbb2">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> Please follow the contribution guide to get more details about component composition:<a target="_blank" rel="noopener noreferrer nofollow" class="link" href="https://github.com/heroui-inc/heroui-native/blob/alpha/CONTRIBUTING.md">https://github.com/heroui-inc/heroui-native/blob/alpha/CONTRIBUTING.md</a>

Toast

A select displays a collapsible list of options and allows a user to select one or more of them.<img data-width="100%" data-align="left" data-featurebase-content-key="68bef9e7984ca8913bb30823/post/68c19629778083ddadaaf5ac/01993432-6c0f-7865-a811-fa5864755297/b64u-U2NyZWVuc2hvdCAyMDI1LTA5LTEwIGF0IDE4LjE1LjMyLnBuZw.png" data-featurebase-content-filename="Screenshot 2025-09-10 at 18.15.32.png" src="https://68bef9e7984ca8913bb30823.featurebase-attachments.com/c/post/68c19629778083ddadaaf5ac/01993432-6c0f-7865-a811-fa5864755297/b64u-U2NyZWVuc2hvdCAyMDI1LTA5LTEwIGF0IDE4LjE1LjMyLnBuZw.png?X-Amz-Expires=3600&amp;X-Amz-Date=20260210T230000Z&amp;X-Amz-Algorithm=AWS4-HMAC-SHA256&amp;X-Amz-Credential=DO801TYC4FCVNNEKURKM%2F20260210%2Ffra1%2Fs3%2Faws4_request&amp;X-Amz-SignedHeaders=host&amp;X-Amz-Signature=91e007c66b8d735c6ad921a0dc69c101bfa5904af793bb529cdef27d375cf6a2">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> Please follow the contribution guide to get more details about component composition:<a target="_blank" rel="noopener noreferrer nofollow" class="link" href="https://github.com/heroui-inc/heroui-native/blob/alpha/CONTRIBUTING.md">https://github.com/heroui-inc/heroui-native/blob/alpha/CONTRIBUTING.md</a>

Select

Tabs organise content into multiple sections and allow users to navigate between them.<img data-width="100%" data-align="left" data-featurebase-content-key="68bef9e7984ca8913bb30823/post/68c19493ed9e97c495c14a71/01993428-cacb-702f-963b-41faaf51a91d/b64u-U2NyZWVuc2hvdCAyMDI1LTA5LTEwIGF0IDE4LjA0LjExLnBuZw.png" data-featurebase-content-filename="Screenshot 2025-09-10 at 18.04.11.png" src="https://68bef9e7984ca8913bb30823.featurebase-attachments.com/c/post/68c19493ed9e97c495c14a71/01993428-cacb-702f-963b-41faaf51a91d/b64u-U2NyZWVuc2hvdCAyMDI1LTA5LTEwIGF0IDE4LjA0LjExLnBuZw.png?X-Amz-Expires=3600&amp;X-Amz-Date=20260210T230000Z&amp;X-Amz-Algorithm=AWS4-HMAC-SHA256&amp;X-Amz-Credential=DO801TYC4FCVNNEKURKM%2F20260210%2Ffra1%2Fs3%2Faws4_request&amp;X-Amz-SignedHeaders=host&amp;X-Amz-Signature=2aefe6d3de4ba105b6fa540dd682cc9ce58c6f9ffd994c5baa240e2c3713eeb6"><img data-width="100%" data-align="left" data-featurebase-content-key="68bef9e7984ca8913bb30823/post/68c19493ed9e97c495c14a71/01993428-f46a-767e-a5dc-d5c9cc4753f5/b64u-U2NyZWVuc2hvdCAyMDI1LTA5LTEwIGF0IDE4LjA0LjE3LnBuZw.png" data-featurebase-content-filename="Screenshot 2025-09-10 at 18.04.17.png" src="https://68bef9e7984ca8913bb30823.featurebase-attachments.com/c/post/68c19493ed9e97c495c14a71/01993428-f46a-767e-a5dc-d5c9cc4753f5/b64u-U2NyZWVuc2hvdCAyMDI1LTA5LTEwIGF0IDE4LjA0LjE3LnBuZw.png?X-Amz-Expires=3600&amp;X-Amz-Date=20260210T230000Z&amp;X-Amz-Algorithm=AWS4-HMAC-SHA256&amp;X-Amz-Credential=DO801TYC4FCVNNEKURKM%2F20260210%2Ffra1%2Fs3%2Faws4_request&amp;X-Amz-SignedHeaders=host&amp;X-Amz-Signature=97e21515b89982fb6c02850c8f1c62bc3fe4f51b409c3f4d241ebac8d8f339d2">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> Please follow the contribution guide to get more details about component composition:<a target="_blank" rel="noopener noreferrer nofollow" class="link" href="https://github.com/heroui-inc/heroui-native/blob/alpha/CONTRIBUTING.md">https://github.com/heroui-inc/heroui-native/blob/alpha/CONTRIBUTING.md</a>

High Priority

Tabs

The generic pressable with two feedback variant:<ul><li>highlight (iOS default)</li><li>ripple (Android default)</li></ul>

PressableFeedback

Skeleton is a placeholder to show a loading state and the expected shape of a component.<img data-width="100%" data-align="left" data-featurebase-content-key="68bef9e7984ca8913bb30823/post/68c195066eb7fe4c8434acf4/0199342d-8e0d-7f84-bd36-ce508432c3b9/b64u-U2NyZWVuc2hvdCAyMDI1LTA5LTEwIGF0IDE4LjEwLjE1LnBuZw.png" data-featurebase-content-filename="Screenshot 2025-09-10 at 18.10.15.png" src="https://68bef9e7984ca8913bb30823.featurebase-attachments.com/c/post/68c195066eb7fe4c8434acf4/0199342d-8e0d-7f84-bd36-ce508432c3b9/b64u-U2NyZWVuc2hvdCAyMDI1LTA5LTEwIGF0IDE4LjEwLjE1LnBuZw.png?X-Amz-Expires=3600&amp;X-Amz-Date=20260210T230000Z&amp;X-Amz-Algorithm=AWS4-HMAC-SHA256&amp;X-Amz-Credential=DO801TYC4FCVNNEKURKM%2F20260210%2Ffra1%2Fs3%2Faws4_request&amp;X-Amz-SignedHeaders=host&amp;X-Amz-Signature=95008a9fbc9c397d741949c0c3e631cc8cfab432bfd55850f6e472d54b5454b6">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> Please follow the contribution guide to get more details about component composition:<a target="_blank" rel="noopener noreferrer nofollow" class="link" href="https://github.com/heroui-inc/heroui-native/blob/alpha/CONTRIBUTING.md">https://github.com/heroui-inc/heroui-native/blob/alpha/CONTRIBUTING.md</a>

Skeleton

Dialogs inform users about a specific task and may contain critical information, require decisions, or involve multiple tasks.

Dialog

Popover is a non-modal dialog that floats around its trigger. It's commonly used for displaying additional rich content on top of something.

Popover with Bottom Sheet presentation variant

Adds dynamic gradient shadows to scrollable content based on scroll position and overflow.Link:<a target="_blank" rel="noopener noreferrer nofollow" class="link" href="https://github.com/heroui-inc/heroui-native/blob/alpha/src/components/scroll-shadow/scroll-shadow.md">https://github.com/heroui-inc/heroui-native/blob/alpha/src/components/scroll-shadow/scroll-shadow.md</a>