logo x-n ui

Installation

There are 2 ways to include x-nui into your project:

  • - Including it from a <script> tag
  • - Importing it as a module

From a script tag

For the menu, tooltip and listbox components they rely on a third-party library, Popper , which provides dynamic positioning and viewport detection. Make sure to include popper.min.js before the x-nui JavaScript or use cdn.bundle.min.js that contains Popper. 

<html>
<head>
    <script defer src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js"></script>
    <script defer src="https://cdn.jsdelivr.net/npm/xnui-ui@0.X.X/dist/cdn.min.js"></script>
    <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
</head>
</html>

Or:

<html>
<head>
    <script defer src="https://cdn.jsdelivr.net/npm/xnui-ui@0.X.X/dist/cdn.bundle.min.js"></script>
    <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
</head>
</html>

As a module

If you prefer the more robust approach, you can install x-nui via NPM and import it into a bundle.

Run the following command to install it. 

npm i xnui-ui

Now import x-nui into your bundle and initialize it like so: 

import Alpine from 'alpinejs'
import plugins from 'xnui-ui'
Alpine.plugin(plugins)
window.Alpine = Alpine
window.Alpine.start()