https://github.com/ycs77/headlessui-float

Easily use Headless UI with Floating UI to position floating elements.
https://github.com/ycs77/headlessui-float

dropdown headless-ui headlessui popover popovers position positioning react tailwindcss vue

Last synced: 6 days ago
JSON representation

Easily use Headless UI with Floating UI to position floating elements.

• Host: GitHub
• URL: https://github.com/ycs77/headlessui-float
• Owner: ycs77
• License: mit
• Created: 2022-02-24T17:03:03.000Z (almost 3 years ago)
• Default Branch: main
• Last Pushed: 2025-01-19T16:53:59.000Z (18 days ago)
• Last Synced: 2025-01-29T15:38:17.591Z (8 days ago)
• Topics: dropdown, headless-ui, headlessui, popover, popovers, position, positioning, react, tailwindcss, vue
• Language: TypeScript
• Homepage: https://headlessui-float.vercel.app
• Size: 3.33 MB
• Stars: 354
• Watchers: 1
• Forks: 13
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Funding: .github/FUNDING.yml
  • License: LICENSE.md

Awesome Lists containing this project

README

        
Headless UI Float




  Easily use Headless UI with Floating UI (New version Popper.js) to position floating elements.





> [!NOTE]

> [Headless UI](https://headlessui.com/) has [released version 2.0](https://tailwindcss.com/blog/headless-ui-v2#built-in-anchor-positioning) (currently for React only), which builds in anchor positioning with Floating UI, making this package unnecessary.

## Features

* 💙 Easily use Headless UI & Tailwind CSS

* 💬 Floating UI (New version Popper.js) position floating elements

* 🔔 Auto-update floating elements

* ♾️ Support Transition

* 🚪 Support Portal

* ➡️ Support Arrow

## Documentation

[Documentation](https://headlessui-float.vercel.app/) | [繁體中文文檔](https://headlessui-float.vercel.app/zh-tw/)

## Packages

| Name                                       | Version                                         | Downloads                                           |

| ------------------------------------------ | ----------------------------------------------- | --------------------------------------------------- |

| [`@headlessui-float/react`][react-link-gh] | [![NPM Version][react-version]][react-link-npm] | [![NPM Downloads][react-downloads]][react-link-npm] |

| [`@headlessui-float/vue`][vue-link-gh]     | [![NPM Version][vue-version]][vue-link-npm]     | [![NPM Downloads][vue-downloads]][vue-link-npm]     |

| [`@headlessui-float/nuxt`][nuxt-link-gh]   | [![NPM Version][nuxt-version]][nuxt-link-npm]   | [![NPM Downloads][nuxt-downloads]][nuxt-link-npm]   |

[react-version]: https://img.shields.io/npm/v/@headlessui-float/react?style=flat-square

[react-downloads]: https://img.shields.io/npm/dt/@headlessui-float/react?style=flat-square

[vue-version]: https://img.shields.io/npm/v/@headlessui-float/vue?style=flat-square

[vue-downloads]: https://img.shields.io/npm/dt/@headlessui-float/vue?style=flat-square

[nuxt-version]: https://img.shields.io/npm/v/@headlessui-float/nuxt?style=flat-square

[nuxt-downloads]: https://img.shields.io/npm/dt/@headlessui-float/nuxt?style=flat-square

[react-link-gh]: https://github.com/ycs77/headlessui-float/tree/main/packages/react

[react-link-npm]: https://www.npmjs.com/package/@headlessui-float/react

[vue-link-gh]: https://github.com/ycs77/headlessui-float/tree/main/packages/vue

[vue-link-npm]: https://www.npmjs.com/package/@headlessui-float/vue

[nuxt-link-gh]: https://github.com/ycs77/headlessui-float/tree/main/packages/nuxt

[nuxt-link-npm]: https://www.npmjs.com/package/@headlessui-float/nuxt

## Sponsor

If you think this package has helped you, please consider [Becoming a sponsor](https://www.patreon.com/ycs77) to support my work~ and your avatar will be visible on my major projects.



  

    

  





  



## Credits

* [Headless UI](https://headlessui.com/)

* [Floating UI](https://floating-ui.com/)

* This package is inspired by the [headlessui#154 example](https://github.com/tailwindlabs/headlessui/issues/154)

## License

Under the [MIT LICENSE](LICENSE.md)