Logo

mistral UI

Alpine/Tailwind components

Carefully crafted static and dynamic components made with Tailwind CSS and Alpine.js.

Multiselect

multiselect

Modal

modal

Dropdown

dropdown

Usage

Add x-data attribute to the element:

<select multiple x-data="multiselect">
	<optgroup label="Names">
		<option value="John">John</option>
		<option value="Peter">Peter</option>
		<option value="Jane">Jane</option>
	</optgroup>
	<optgroup label="Cities">
		<option value="Prague">Prague</option>
		<option value="New York">New York</option>
		<option value="Berlin">Berlin</option>
	</optgroup>
</select>

Via CDN

<html>
	<head>
		...

		<script defer src="https://unpkg.com/mistral-ui@1.x.x/dist/cdn.min.js"></script>
	</head>
	...
</html>

Then, initialize desired component in alpine:init listener:

document.addEventListener('alpine:init', () => {
	Alpine.data('multiselect', Mistral.multiselect)
})

Add CDN path to your tailwind.config.js:

module.exports = {
	content: [
		...,
		"https://unpkg.com/mistral-ui@1.x.x/dist/cdn.min.js"
	],
	...
}

Via NPM

Install Mistral UI via npm.

npm i mistral-ui

Add Mistral components path to your tailwind.config.js:

module.exports = {
	content: [
		...,
		"./node_modules/mistral-ui/components/**/*.{html,js}"
	],
	...
}

Import desired component to your main javascript file:

import Alpine from 'alpinejs'
import { multiselect } from 'mistral-ui'

Alpine.data('multiselect', multiselect);
Alpine.start();

Designed by @Zraly.