# React Wheel Picker

Backed by [▲Vercel OSS Program](https://vercel.com/blog/summer-2025-oss-program#react-wheel-picker)

iOS-like wheel picker for React with smooth inertia scrolling and infinite loop support.

- Natural touch scrolling with smooth inertia, mouse drag and scroll for desktop.
- Infinite loop scrolling.
- Unstyled core for complete style customization.
- Full keyboard navigation and type-ahead search.

→ Check out the live demo: https://react-wheel-picker.chanhdai.com

## Documentation

Please read the [documentation](https://react-wheel-picker.chanhdai.com/docs/getting-started) for setup and API usage.

## License

Licensed under the [MIT license](./LICENSE).

## Sponsors

This project is proudly supported by:

<table>
  <tbody>
    <tr>
      <td colspan="3"><strong>Open Source Program</strong></td>
    </tr>
    <tr>
      <td>
        <a href="https://vercel.com/blog/summer-2025-oss-program#react-wheel-picker">
          <picture>
            <source
              media="(prefers-color-scheme: dark)"
              srcset="https://assets.chanhdai.com/images/sponsors/vercel-oss-program-2025-dark.svg"
            />
            <img
              src="https://assets.chanhdai.com/images/sponsors/vercel-oss-program-2025.svg"
              alt="Vercel OSS Program"
            />
          </picture>
        </a>
      </td>
      <td>
        <a href="https://claude.com?utm_source=react-wheel-picker">
          <picture>
            <source
              media="(prefers-color-scheme: dark)"
              srcset="https://assets.chanhdai.com/images/sponsors/claude-dark.svg"
            />
            <img
              src="https://assets.chanhdai.com/images/sponsors/claude.svg"
              alt="Claude"
            />
          </picture>
        </a>
      </td>
      <td>
        <a href="https://openpanel.dev/open-source?utm_source=react-wheel-picker">
          <picture>
            <source
              media="(prefers-color-scheme: dark)"
              srcset="https://assets.chanhdai.com/images/sponsors/openpanel-dark.svg"
            />
            <img
              src="https://assets.chanhdai.com/images/sponsors/openpanel.svg"
              alt="OpenPanel"
            />
          </picture>
        </a>
      </td>
    </tr>
    <tr>
      <td>
        <a href="https://www.mintlify.com/oss-program?utm_source=react-wheel-picker">
          <picture>
            <source
              media="(prefers-color-scheme: dark)"
              srcset="https://assets.chanhdai.com/images/sponsors/mintlify-dark.svg"
            />
            <img
              src="https://assets.chanhdai.com/images/sponsors/mintlify.svg"
              alt="Mintlify"
            />
          </picture>
        </a>
      </td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td colspan="3"><strong>Platinum Sponsors</strong></td>
    </tr>
    <tr>
      <td>
        <a href="https://www.nixtla.io?utm_source=react-wheel-picker">
          <picture>
            <source
              media="(prefers-color-scheme: dark)"
              srcset="https://assets.chanhdai.com/images/sponsors/nixtla-dark.svg"
            />
            <img
              src="https://assets.chanhdai.com/images/sponsors/nixtla.svg"
              alt="Nixtla"
            />
          </picture>
        </a>
      </td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td colspan="3"><strong>Gold Sponsors</strong></td>
    </tr>
    <tr>
      <td>
        <a href="https://shadcnstudio.com?utm_source=chanhdai.com&utm_medium=banner&utm_campaign=github">
          <picture>
            <source
              media="(prefers-color-scheme: dark)"
              srcset="https://assets.chanhdai.com/images/sponsors/shadcnstudio-dark.svg"
            />
            <img
              src="https://assets.chanhdai.com/images/sponsors/shadcnstudio.svg"
              alt="shadcnstudio.com"
            />
          </picture>
        </a>
      </td>
      <td>
        <a href="https://shadcnspace.com">
          <picture>
            <source
              media="(prefers-color-scheme: dark)"
              srcset="https://assets.chanhdai.com/images/sponsors/shadcnspace-dark.svg"
            />
            <img
              src="https://assets.chanhdai.com/images/sponsors/shadcnspace.svg"
              alt="Shadcn Space"
            />
          </picture>
        </a>
      </td>
      <td></td>
    </tr>
    <tr>
      <td colspan="3"><strong>Silver Sponsors</strong></td>
    </tr>
    <tr>
      <td>
        <a href="https://shadcncraft.com?atp=ncdai&utm_source=react-wheel-picker">
          <picture>
            <source
              media="(prefers-color-scheme: dark)"
              srcset="https://assets.chanhdai.com/images/sponsors/shadcncraft-dark.svg"
            />
            <img
              src="https://assets.chanhdai.com/images/sponsors/shadcncraft.svg"
              alt="shadcncraft"
            />
          </picture>
        </a>
      </td>
      <td>
        <a href="https://www.shadcnblocks.com?via=ncdai&utm_source=react-wheel-picker">
          <picture>
            <source
              media="(prefers-color-scheme: dark)"
              srcset="https://assets.chanhdai.com/images/sponsors/shadcnblocks-dark.svg"
            />
            <img
              src="https://assets.chanhdai.com/images/sponsors/shadcnblocks.svg"
              alt="Shadcnblocks"
            />
          </picture>
        </a>
      </td>
      <td>
        <a href="https://reactbits.dev?utm_source=react-wheel-picker">
          <picture>
            <source
              media="(prefers-color-scheme: dark)"
              srcset="https://assets.chanhdai.com/images/sponsors/reactbits-dark.svg"
            />
            <img
              src="https://assets.chanhdai.com/images/sponsors/reactbits.svg"
              alt="React Bits"
            />
          </picture>
        </a>
      </td>
    </tr>
    <tr>
      <td>
        <a href="https://obelinf.com?utm_source=react-wheel-picker">
          <picture>
            <source
              media="(prefers-color-scheme: dark)"
              srcset="https://assets.chanhdai.com/images/sponsors/obelinf-dark.svg"
            />
            <img
              src="https://assets.chanhdai.com/images/sponsors/obelinf.svg"
              alt="Obelinf"
            />
          </picture>
        </a>
      </td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td colspan="3"><strong>Spark Supporters</strong></td>
    </tr>
    <tr>
      <td>
        <a href="https://uirules.com?utm_source=react-wheel-picker">
          <picture>
            <source
              media="(prefers-color-scheme: dark)"
              srcset="https://assets.chanhdai.com/images/sponsors/uirules-dark.svg"
            />
            <img
              src="https://assets.chanhdai.com/images/sponsors/uirules.svg"
              alt="UI Rules"
            />
          </picture>
        </a>
      </td>
      <td>
        <a href="https://shoogle.dev?utm_source=react-wheel-picker">
          <picture>
            <source
              media="(prefers-color-scheme: dark)"
              srcset="https://assets.chanhdai.com/images/sponsors/shoogle-dark.svg"
            />
            <img
              src="https://assets.chanhdai.com/images/sponsors/shoogle.svg"
              alt="Shoogle"
            />
          </picture>
        </a>
      </td>
      <td></td>
    </tr>
  </tbody>
</table>

> Using this package at work? [Sponsor me](https://github.com/sponsors/ncdai) to help with support and maintenance.