---
title: v1.0.1
description: Toast race condition fix, disabled state styling with disabled modifier, backdrop style variable
github:
  pull: 360
---

<div className="flex items-center gap-3 mb-6">
  <span className="text-sm text-muted">April 1, 2026</span>
</div>

HeroUI Native v1.0.1 is a patch release focused on reliability and developer experience. It resolves a race condition in the Toast provider that caused stale animation values, corrects disabled-state styling across seven components to use the native `disabled:` modifier, and introduces a new `--backdrop` theme variable for overlay components.

## Installation

Update to the latest version:

<Tabs items={["npm", "pnpm", "yarn", "bun"]}>
<Tab value="npm">
  ```bash
  npm i heroui-native
  ```
</Tab>
<Tab value="pnpm">
  ``` bash
  pnpm add heroui-native
  ```
</Tab>
<Tab value="yarn">
  ```bash
  yarn add heroui-native
  ```
</Tab>
<Tab value="bun">
  ```bash
  bun add heroui-native
  ```
</Tab>
</Tabs>

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

## Try It on Your Device

<NativeTryOnDevice />

## API Enhancements

### `--backdrop` Theme Variable

A new `--backdrop` top-level style variable has been added to the theme system, providing a dedicated color token for the dimming layer behind overlay components such as Dialog and Bottom Sheet. The default value is `oklch(0% 0 0 / 20%)` for a subtle but visible backdrop effect.

**New capability:**

```tsx
import { Dialog } from "heroui-native";

// Dialog and Bottom Sheet overlays now use bg-backdrop automatically
<Dialog>
  <Dialog.Content>
    {/* Content renders over the themed backdrop */}
  </Dialog.Content>
</Dialog>
```

The `--backdrop` variable is included in all built-in themes for both light and dark modes, and the corresponding `bg-backdrop` Tailwind utility is available for use in custom component styles.

**Related PR:** [#366](https://github.com/heroui-inc/heroui-native/pull/366)

## Style Fixes

### Disabled State Modifier

Updated disabled-state styling across seven components to use the `disabled:` modifier prefix instead of applying styles unconditionally. This ensures disabled styles (`opacity-disabled`, `pointer-events-none`) are only applied when the component is in an actual disabled state, respecting the native `disabled` modifier from Uniwind.

**Affected components:**

- [Button](/docs/native/components/button)
- [Checkbox](/docs/native/components/checkbox)
- [Input](/docs/native/components/input)
- [Menu](/docs/native/components/menu)
- [Switch](/docs/native/components/switch)
- [Tabs](/docs/native/components/tabs)
- [TagGroup](/docs/native/components/tag-group)

All `isDisabled` variant classes now use the `disabled:` modifier prefix (e.g., `disabled:opacity-disabled disabled:pointer-events-none`), ensuring proper scoping to the disabled pseudo-state and eliminating styling conflicts when the disabled state is toggled dynamically.

**Related PR:** [#361](https://github.com/heroui-inc/heroui-native/pull/361)

## Bug Fixes

This release includes fixes for the following issues:

- **[Issue #359](https://github.com/heroui-inc/heroui-native/issues/359)**: Fixed a race condition in the Toast provider where the `total` SharedValue could drift out of sync with the actual toast count. The manual increment/decrement approach was prone to stale-closure mismatches when `hide` and `show` ran in the same tick or when auto-dismiss raced with a manual hide. The `total` value is now derived from `toasts.length` via a `useEffect`, ensuring animated interpolations (opacity, scale, translateY) always reflect the real toast count.

- **[Issue #356](https://github.com/heroui-inc/heroui-native/issues/356)**: Resolved disabled-state styles being applied unconditionally when `isDisabled` was true, preventing developers from theming or customizing the disabled appearance. All seven affected components now use the `disabled:` modifier prefix, correctly scoping styles to the disabled pseudo-state.

**Related PRs:**

- [#360](https://github.com/heroui-inc/heroui-native/pull/360)
- [#361](https://github.com/heroui-inc/heroui-native/pull/361)

## Updated Documentation

The following documentation pages have been updated to reflect the changes in this release:

- [Colors](/docs/native/getting-started/colors) - Added the new `--backdrop` variable to the color reference
- [Theming](/docs/native/getting-started/theming) - Updated theming guide with the new `--backdrop` variable documentation

## Links

- [Component Documentation](../components)
- [GitHub Repository](https://github.com/heroui-inc/heroui-native)

## Contributors

Thanks to everyone who contributed to this release!
