From d8a0a71846f7ca381c2704c50796b18eef2cb7be Mon Sep 17 00:00:00 2001
From: Jiri Zraly <jirka@blueboard.cz>
Date: Thu, 9 Jun 2022 16:37:54 +0200
Subject: [PATCH] updated readme

---
 README.md | 53 +++++++++++++++++++++++++++++------------------------
 1 file changed, 29 insertions(+), 24 deletions(-)

diff --git a/README.md b/README.md
index 8064fb6..a6a6db2 100644
--- a/README.md
+++ b/README.md
@@ -10,30 +10,7 @@ npm i mistral-ui
 
 ## Usage
 
-### Static HTML components
-
-Just copy & paste into your HTML.
-
-```html
-<span class="text-neutral">badge</span>
-```
-
-### Dynamic components using Alpine.js
-
-Import component into your man js file:
-
-```javascript
-import Alpine from 'alpinejs'
-
-// If you want to use the Multiselect component:
-import { multiselect } from 'mistral-ui'
-Alpine.data('multiselect', multiselect);
-
-window.Alpine = Alpine
-Alpine.start();
-```
-
-Copy & paste the HTML form the [component detail page](https://mistralui.com/component-multiselect):
+Add a `x-data` attribute to your element:
 
 ```html
 <select multiple x-data="multiselect">
@@ -48,4 +25,32 @@ Copy & paste the HTML form the [component detail page](https://mistralui.com/com
     <option value="Berlin">Berlin</option>
   </optgroup>
 </select>
+```
+
+### via CDN
+
+1. Put this script tag into your head section:
+
+```html
+<script defer src="https://unpkg.com/mistral-ui@1.x.x/dist/cdn.min.js"></script>
+```
+
+2. Initialize desired component via Alpine's `alpine:init` event:
+
+```javascript
+document.addEventListener('alpine:init', () => {
+	Alpine.data('multiselect', Mistral.multiselect)
+})
+```
+
+### via NPM
+
+1. Import component into your man js file:
+
+```javascript
+import Alpine from 'alpinejs'
+import { multiselect } from 'mistral-ui'
+
+Alpine.data('multiselect', multiselect);
+Alpine.start();
 ```
\ No newline at end of file