<h2 align="center">Headless UI Float Vue</h2>

<p align="center">
  Easily use <a href="https://headlessui.dev/">Headless UI</a> for Vue 3 with <a href="https://floating-ui.com/">Floating UI</a> (New version Popper.js) to position floating elements.
</p>

<p align="center">
  <a href="https://www.npmjs.com/package/headlessui-float-vue"><img src="https://img.shields.io/npm/v/headlessui-float-vue?style=flat-square" alt="NPM Version"></a>
  <a href="https://github.com/ycs77/headlessui-float/blob/main/packages/headlessui-float-vue/LICENSE.md"><img src="https://img.shields.io/badge/license-MIT-brightgreen?style=flat-square" alt="Software License"></a>
  <a href="https://www.npmjs.com/package/headlessui-float-vue"><img src="https://img.shields.io/npm/dt/headlessui-float-vue?style=flat-square" alt="NPM Downloads"></a>
</p>

<hr>

## Features

* 💙 Easily use Headless UI & Tailwind CSS
* 💬 Floating UI (New version Popper.js) position floating elements
* 🔔 Auto-update floating elements
* ♾️ Support Transition
* 🚪 Support Portal (Teleport)
* ➡️ Support Arrow

## Demo

[**Online Demo**](https://stackblitz.com/github/ycs77/headlessui-float/tree/main/examples/example-vue?file=src%2FApp.vue)

## Documentation

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

## Credits

* [Headless UI](https://headlessui.dev/)
* [Floating UI](https://floating-ui.com/)
* This package is inspired from the [headlessui#154 example](https://github.com/tailwindlabs/headlessui/issues/154)

## License
Under the [MIT LICENSE](LICENSE.md)
