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: about 2 months 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 (over 2 years ago)
• Default Branch: main
• Last Pushed: 2024-04-21T16:47:15.000Z (5 months ago)
• Last Synced: 2024-05-22T01:43:04.415Z (4 months ago)
• Topics: dropdown, headless-ui, headlessui, popover, popovers, position, positioning, react, tailwindcss, vue
• Language: TypeScript
• Homepage: https://headlessui-float.vercel.app
• Size: 2.05 MB
• Stars: 335
• Watchers: 1
• Forks: 10
• Open Issues: 2
• 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.





## 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.dev/)

* [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)