@tabler/core 1.0.0-beta22 → 1.0.0-beta24

package/docs/ui/components/dropdowns.mdx

@@ -1,14 +1,15 @@
 ---
 title: Dropdowns
-description: Use dropdowns to display lists of options or include more positions in a menu without overwhelming users with too many buttons and long lists. Dropdowns facilitate users' interaction with your website or software and make your design look clear.
+summary: Use dropdowns to display lists of options or include more positions in a menu without overwhelming users with too many buttons and long lists. Dropdowns facilitate users' interaction with your website or software and make your design look clear.
 bootstrapLink: components/dropdowns
+description: Organize options with dropdown menus.
 ---
 
 ## Default dropdown
 
 With small markup changes, you can turn any `.btn` into a dropdown toggle and use it to display more options for users to choose from. Start with the default dropdown and then use additional classes to make your dropdown more user-friendly.
 
-```html example code height="16rem"
+```html example height="16rem"
 <div class="dropdown">
   <a href="#" class="btn dropdown-toggle" data-bs-toggle="dropdown">Open dropdown</a>
   <div class="dropdown-menu">
@@ -23,7 +24,7 @@ With small markup changes, you can turn any `.btn` into a dropdown toggle and us
 
 Use dropdown dividers to separate groups of dropdown items for greater clarity.
 
-```html example code height="16rem"
+```html example height="16rem"
 <div class="dropdown">
   <a href="#" class="btn dropdown-toggle" data-bs-toggle="dropdown">Open dropdown</a>
   <div class="dropdown-menu">
@@ -43,7 +44,7 @@ Use dropdown dividers to separate groups of dropdown items for greater clarity.
 
 Make a dropdown item look active, so that it highlights when a user hovers over a given option.
 
-```html example code height="16rem"
+```html example height="16rem"
 <div class="dropdown">
   <a href="#" class="btn dropdown-toggle" data-bs-toggle="dropdown">Open dropdown</a>
   <div class="dropdown-menu">
@@ -62,7 +63,7 @@ Make a dropdown item look active, so that it highlights when a user hovers over
 
 Make a dropdown item look disabled to display options which are currently not available but can activate once certain conditions are met.
 
-```html code example height="16rem"
+```html example height="16rem"
 <div class="dropdown">
   <a href="#" class="btn dropdown-toggle" data-bs-toggle="dropdown">Open dropdown</a>
   <div class="dropdown-menu">
@@ -81,7 +82,7 @@ Make a dropdown item look disabled to display options which are currently not av
 
 Add a dropdown header to group dropdown items into sections and name them accordingly.
 
-```html code example height="16rem"
+```html example height="16rem"
 <div class="dropdown">
   <a href="#" class="btn dropdown-toggle" data-bs-toggle="dropdown">Open dropdown</a>
   <div class="dropdown-menu">
@@ -100,7 +101,7 @@ Add a dropdown header to group dropdown items into sections and name them accord
 
 Use icons in your dropdowns to add more visual content and make the options easy to identify for users.
 
-```html code example height="16rem"
+```html example height="16rem"
 <div class="dropdown">
   <a href="#" class="btn dropdown-toggle" data-bs-toggle="dropdown">Open dropdown</a>
   <div class="dropdown-menu">
@@ -129,7 +130,7 @@ Use icons in your dropdowns to add more visual content and make the options easy
 
 Add an arrow that points at the dropdown button.
 
-```html code example height="16rem"
+```html example height="16rem"
 <div class="dropdown">
   <a href="#" class="btn dropdown-toggle" data-bs-toggle="dropdown">Open dropdown</a>
   <div class="dropdown-menu dropdown-menu-arrow">
@@ -147,7 +148,7 @@ Add an arrow that points at the dropdown button.
 
 Add a badge to your dropdown items to show additional information related to an item or distinguish it from other elements.
 
-```html code example height="16rem"
+```html example height="16rem"
 <div class="dropdown">
   <a href="#" class="btn dropdown-toggle" data-bs-toggle="dropdown">Open dropdown</a>
   <div class="dropdown-menu">
@@ -167,13 +168,19 @@ Add a badge to your dropdown items to show additional information related to an
 
 Use dropdowns with checkboxes to allow users to select options from a predefined list. Dropdowns with checkboxes are particularly useful for filtering.
 
-```html code example height="16rem"
+```html example height="16rem"
 <div class="dropdown">
   <a href="#" class="btn dropdown-toggle" data-bs-toggle="dropdown">Open dropdown</a>
   <div class="dropdown-menu">
-    <label class="dropdown-item"><input class="form-check-input m-0 me-2" type="radio" /> Option 1</label>
-    <label class="dropdown-item"><input class="form-check-input m-0 me-2" type="radio" /> Option 2</label>
-    <label class="dropdown-item"><input class="form-check-input m-0 me-2" type="radio" /> Option 3</label>
+    <label class="dropdown-item">
+      <input class="form-check-input m-0 me-2" type="radio" /> Option 1
+    </label>
+    <label class="dropdown-item">
+      <input class="form-check-input m-0 me-2" type="radio" /> Option 2
+    </label>
+    <label class="dropdown-item">
+      <input class="form-check-input m-0 me-2" type="radio" /> Option 3
+    </label>
   </div>
 </div>
 ```
@@ -182,7 +189,7 @@ Use dropdowns with checkboxes to allow users to select options from a predefined
 
 Make your dropdown suit the dark mode of your website or software.
 
-```html code example height="16rem"
+```html example height="16rem"
 <div class="dropdown">
   <a href="#" class="btn dropdown-toggle" data-bs-toggle="dropdown">Open dropdown</a>
   <div class="dropdown-menu dropdown-menu-arrow bg-dark text-white">
@@ -221,7 +228,9 @@ Use a dropdown with card content to make it easy for users to get more informati
         <img class="card-img-top" src="/samples/photos/friends-at-a-restaurant-drinking-wine.jpg" alt="How do you know she is a witch?" />
       </a>
       <div class="card-body d-flex flex-column">
-        <h3 class="card-title"><a href="#">How do you know she is a witch?</a></h3>
+        <h3 class="card-title">
+          <a href="#">How do you know she is a witch?</a>
+        </h3>
         <div class="text-secondary">Are you suggesting that coconuts migrate? No, no, no! Yes, yes. A bit. But she's got a wart. You ...</div>
         <div class="d-flex align-items-center pt-4 mt-auto">
           <span class="avatar" style="background-image: url(/samples/avatars/013m.jpg)"></span>

package/docs/ui/components/dropzone.mdx

@@ -1,20 +1,39 @@
 ---
 title: Dropzone
-libs: dropzone
-description: Dropzone is a simple JavaScript library that helps you add file drag and drop functionality to your web forms. It is one of the most popular drag and drop library on the web and is used by millions of people.
+summary: Dropzone is a simple JavaScript library that helps you add file drag and drop functionality to your web forms. It is one of the most popular drag and drop library on the web and is used by millions of people.
+description: Drag-and-drop file upload tool.
 ---
 
-## Default Dropzone
+## Basic usage
 
-```html example code vendors height="240px"
+The basic implementation of Dropzone allows you to quickly enable drag-and-drop file uploads on your web forms. By default, it provides a fallback for browsers that don’t support drag-and-drop functionality. Below is an example of how to set up a simple Dropzone form.
+
+```html
 <form class="dropzone" id="dropzone-default" action="." autocomplete="off" novalidate>
   <div class="fallback">
     <input name="file" type="file" />
   </div>
 </form>
+```
+
+To initialize the Dropzone form, you need to create a new instance of the Dropzone class and pass the form element as an argument. Here’s how you can do it:
 
-<link href="$TABLER_CDN/dist/libs/dropzone/dist/dropzone.css" rel="stylesheet" />
-<script src="$TABLER_CDN/dist/libs/dropzone/dist/dropzone-min.js"></script>
+```html
+<script>
+  document.addEventListener("DOMContentLoaded", function() {
+    new Dropzone("#dropzone-default")
+  })
+</script>
+```
+
+The Dropzone form will now be active and ready to accept file uploads. When a user drags and drops a file onto the form, the file will be uploaded to the server automatically.
+
+```html example vendors height="240px" libs="dropzone" background="surface"
+<form class="dropzone" id="dropzone-default" action="." autocomplete="off" novalidate>
+  <div class="fallback">
+    <input name="..." type="file" />
+  </div>
+</form>
 <script>
   document.addEventListener("DOMContentLoaded", function() {
     new Dropzone("#dropzone-default")
@@ -24,15 +43,20 @@ description: Dropzone is a simple JavaScript library that helps you add file dra
 
 ## Add multiple files
 
-```html example code vendors height="240px"
+To allow users to upload multiple files at once, you can enable the `multiple` attribute in the input field. This is particularly useful for applications that require batch uploads, such as image galleries or document management systems. Here’s how to configure Dropzone to accept multiple files:
+
+```html
+<input name="..." type="file" multiple />
+```
+
+By adding the `multiple` attribute to the input field, users can select multiple files from their local storage and upload them all at once. The Dropzone form will handle the file uploads automatically.
+
+```html example vendors height="240px" libs="dropzone" background="surface"
 <form class="dropzone" id="dropzone-mulitple" action="." autocomplete="off" novalidate>
   <div class="fallback">
     <input name="file" type="file" multiple />
   </div>
 </form>
-
-<link href="$TABLER_CDN/dist/libs/dropzone/dist/dropzone.css" rel="stylesheet" />
-<script src="$TABLER_CDN/dist/libs/dropzone/dist/dropzone-min.js"></script>
 <script>
   document.addEventListener("DOMContentLoaded", function() {
     new Dropzone("#dropzone-mulitple")
@@ -42,7 +66,9 @@ description: Dropzone is a simple JavaScript library that helps you add file dra
 
 ## Custom Dropzone
 
-```html example code vendors height="240px"
+You can further enhance the user experience by customizing the Dropzone interface. For instance, you can modify the drop area with custom messages or styles to make the file upload process more engaging and user-friendly. Below is an example of a custom Dropzone configuration:
+
+```html example vendors height="240px" libs="dropzone" background="surface"
 <form class="dropzone" id="dropzone-custom" action="." autocomplete="off" novalidate>
   <div class="fallback">
     <input name="file" type="file" />
@@ -52,12 +78,11 @@ description: Dropzone is a simple JavaScript library that helps you add file dra
     <span class="dropzone-msg-desc">Your custom description here</span>
   </div>
 </form>
-
-<link href="$TABLER_CDN/dist/libs/dropzone/dist/dropzone.css" rel="stylesheet" />
-<script src="$TABLER_CDN/dist/libs/dropzone/dist/dropzone-min.js"></script>
 <script>
   document.addEventListener("DOMContentLoaded", function() {
     new Dropzone("#dropzone-custom")
   })
 </script>
 ```
+
+By customizing the drop area, you can align the file upload process with your application’s branding or specific requirements.

package/docs/ui/components/empty.mdx

@@ -1,13 +1,14 @@
 ---
 title: Empty states
-description: Empty states or blank pages are commonly used as placeholders for first-use, empty data or error screens. Their aim is to engage users when there is no content to display and that is why their design is extremely important from the point of view of the user experience of your website or app.
+summary: Empty states or blank pages are commonly used as placeholders for first-use, empty data or error screens. Their aim is to engage users when there is no content to display and that is why their design is extremely important from the point of view of the user experience of your website or app.
+description: Engage users in empty or error screens.
 ---
 
 ## Default markup
 
 Use the default empty state to engage users in the critical moments of their experience with your website or app. A good empty state screen should let users know what is happening and what they should do next as well as encourage them to take action.
 
-```html code example height="300px"
+```html example height="300px"
 <div class="empty">
   <div class="empty-icon">
     <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
@@ -39,9 +40,10 @@ Use the default empty state to engage users in the critical moments of their exp
 
 Make your empty state screen more attractive and engaging by adding an illustration. Thanks to a more personalized design, you will improve your brand image and make your website or app more user friendly.
 
-```html code example height="300px"
+```html example height="300px"
 <div class="empty">
-  <div class="empty-img"><img src="..." height="128" alt="" />
+  <div class="empty-img">
+    <img src="..." height="128" alt="" />
   </div>
   <p class="empty-title">Invoices are managed from here</p>
   <p class="empty-subtitle text-secondary">
@@ -94,7 +96,7 @@ Instead of adding an icon or illustration you can simply give the text:
   </p>
   <div class="empty-action">
     <a href="#" class="btn btn-primary">
-      <!-- SVG icon from http://tabler-icons.io/i/arrow-left -->
+      <!-- SVG icon from http://tabler.io/icons/icon/arrow-left -->
       <svg>...</svg>
       Take me home
     </a>

package/docs/ui/components/icons.mdx

@@ -1,12 +1,26 @@
 ---
 title: Icons
-description: Use one of over 3000 icons created specifically for Tabler and make your dashboard look even more attractive. All icons are under MIT license, so you can use them without any problem both in private and commercial projects.
+summary: Use one of over 5000 icons created specifically for Tabler and make your dashboard look even more attractive. All icons are under MIT license, so you can use them without any problem both in private and commercial projects.
 banner: icons
+description: Enhance dashboards with custom icons.
 ---
 
+If you need to add icons to your website, you can use the Tabler Icons library. It contains over 5000 icons that you can use in your projects. All icons are under the MIT license, so you can use them without any problem both in private and commercial projects. You can find the Tabler Icons library [here](https://tabler-icons.io/).
+
 ## Base icon
 
-```html code example centered separated
+To add icon to your code copy the SVG code from the Tabler Icons website and paste it into your HTML file.
+
+```html
+<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-heart" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+  <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
+  <path d="M19.5 12.572l-7.5 7.428l-7.5 -7.428a5 5 0 1 1 7.5 -6.566a5 5 0 1 1 7.5 6.572"></path>
+</svg>
+```
+
+Results can be seen in the example below.
+
+```html example centered separated
 <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-heart" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
   <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
   <path d="M19.5 12.572l-7.5 7.428l-7.5 -7.428a5 5 0 1 1 7.5 -6.566a5 5 0 1 1 7.5 6.572"></path>
@@ -39,7 +53,18 @@ banner: icons
 
 ## Filled icons
 
-```html code example centered separated
+To use filled icons, you need to copy the SVG code from the Tabler Icons website and paste it into your HTML file. 
+
+```html
+<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-heart-filled" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+  <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
+  <path d="M6.979 3.074a6 6 0 0 1 4.988 1.425l.037 .033l.034 -.03a6 6 0 0 1 4.733 -1.44l.246 .036a6 6 0 0 1 3.364 10.008l-.18 .185l-.048 .041l-7.45 7.379a1 1 0 0 1 -1.313 .082l-.094 -.082l-7.493 -7.422a6 6 0 0 1 3.176 -10.215z" stroke-width="0" fill="currentColor"></path>
+</svg>
+```
+
+Look at the example below to see the filled icons.
+
+```html example centered separated
 <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-heart-filled" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
   <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
   <path d="M6.979 3.074a6 6 0 0 1 4.988 1.425l.037 .033l.034 -.03a6 6 0 0 1 4.733 -1.44l.246 .036a6 6 0 0 1 3.364 10.008l-.18 .185l-.048 .041l-7.45 7.379a1 1 0 0 1 -1.313 .082l-.094 -.082l-7.493 -7.422a6 6 0 0 1 3.176 -10.215z" stroke-width="0" fill="currentColor"></path>
@@ -63,7 +88,18 @@ banner: icons
 
 ## Icon colors
 
-```html example code centered separated
+To change the color of the icon, you need to add the `text-` class to the parent element of the icon. Full list of available colors can be found [here](/docs/ui/colors). Color classes can be used with any HTML element.
+
+```html
+<span class="text-red">
+  <!-- SVG icon from http://tabler.io/icons/icon/heart -->
+  <svg>...</svg>
+</span>
+```
+
+Look at the example below to see how the color of the icon changes.
+
+```html example centered separated
 <span class="text-red">
   <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-heart-filled" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
     <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
@@ -92,6 +128,19 @@ banner: icons
 
 ## Icon animations
 
+To add an animation to the icon, you need to add the `icon-pulse`, `icon-tada`, or `icon-rotate` class to the SVG element. 
+
+```html
+<!-- SVG icon from http://tabler.io/icons/icon/heart -->
+<svg class="icon-pulse" ...>...</svg>
+<!-- SVG icon from http://tabler.io/icons/icon/bell -->
+<svg class="icon-tada" ...>...</svg>
+<!-- SVG icon from http://tabler.io/icons/icon/rotate-clockwise -->
+<svg class="icon-rotate" ...>...</svg>
+```
+
+Look at the example below to see the animated icons.
+
 ```html example centered separated
 <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-pulse" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
   <path stroke="none" d="M0 0h24v24H0z" fill="none" />
@@ -108,13 +157,3 @@ banner: icons
 </svg>
 ```
 
-```html
-<!-- SVG icon from http://tabler-icons.io/i/heart -->
-<svg class="icon-pulse" ...>...</svg>
-
-<!-- SVG icon from http://tabler-icons.io/i/bell -->
-<svg class="icon-tada" ...>...</svg>
-
-<!-- SVG icon from http://tabler-icons.io/i/rotate-clockwise -->
-<svg class="icon-rotate" ...>...</svg>
-```

package/docs/ui/components/index.mdx

@@ -0,0 +1,6 @@
+---
+title: Components
+order: 4
+description: Various components to enhance UI.
+summary: Tabler UI includes a variety of components to help you build web applications that are both functional and visually appealing. From buttons and cards to modals and navigation, these components provide a wide range of features to enhance your site.
+---

package/docs/ui/components/inline-player.mdx

@@ -1,14 +1,40 @@
 ---
 title: Inline player
 libs: plyr
-description: A simple, lightweight, accessible and customizable HTML5, YouTube and Vimeo media player that supports modern browsers.
+summary: A simple, lightweight, accessible and customizable HTML5, YouTube and Vimeo media player that supports modern browsers.
+description: Lightweight media player for websites.
 ---
 
+
+## Overview
+
+The Inline Player is a versatile, modern media player designed for seamless integration into websites. It supports HTML5, YouTube, and Vimeo content, offering a lightweight and accessible solution for media playback. Built with customization and ease of use in mind, this player ensures compatibility with modern browsers and enhances user experience.
+
+## Installation
+
+To use the Inline Player, you need to include the Plyr library in your project. You can install it via npm or include it directly from a CDN. The following example demonstrates how to include the Plyr library from a CDN:
+
+```html
+<script src="$TABLER_CDN/dist/libs/plyr/dist/plyr.min.js"></script>
+```
+
 ## Sample demo
 
-```html example code vendors height="500px"
+Integrating the Inline Player into your website is straightforward. Below is a sample implementation for a YouTube video:
+
+```html
 <div id="player-youtube" data-plyr-provider="youtube" data-plyr-embed-id="dQw4w9WgXcQ"></div>
+<script>
+  document.addEventListener("DOMContentLoaded", function() {
+    window.Plyr && (new Plyr('#player-youtube'));
+  });
+</script>
+```
 
+Look at the example below to see how the Inline Player works with a YouTube video.
+
+```html example vendors height="500px" libs="plyr"
+<div id="player-youtube" data-plyr-provider="youtube" data-plyr-embed-id="dQw4w9WgXcQ"></div>
 <script src="$TABLER_CDN/dist/libs/plyr/dist/plyr.min.js"></script>
 <script>
   document.addEventListener("DOMContentLoaded", function() {
@@ -19,9 +45,10 @@ description: A simple, lightweight, accessible and customizable HTML5, YouTube a
 
 ## Vimeo file
 
-```html example code vendors height="500px"
-<div id="player-vimeo" data-plyr-provider="vimeo" data-plyr-embed-id="515937365"></div>
+Here’s how to embed a Vimeo video using the Inline Player:
 
+```html example vendors height="500px" libs="plyr"
+<div id="player-vimeo" data-plyr-provider="vimeo" data-plyr-embed-id="515937365"></div>
 <script src="$TABLER_CDN/dist/libs/plyr/dist/plyr.min.js"></script>
 <script>
   document.addEventListener("DOMContentLoaded", function() {

package/docs/ui/components/modals.mdx

@@ -1,15 +1,39 @@
 ---
 title: Modals
-description: Use Bootstrap’s JavaScript modal plugin to add dialogs to your site for lightboxes, user notifications, or completely custom content.
+summary: Use Bootstrap’s JavaScript modal plugin to add dialogs to your site for lightboxes, user notifications, or completely custom content.
+description: Dialogs for notifications and content.
 ---
 
+Modals are built with HTML, CSS, and JavaScript. They’re positioned over everything else in the document and remove scroll from the `<body>` so that modal content scrolls instead.
+
 ## Default markup
 
-```html example code centered height="30rem"
+To create a modal, you need to add a `.modal` element to the document. Inside the `.modal`, you need to add a `.modal-dialog` element, which contains a `.modal-content` element. The `.modal-content` element contains the modal’s header, body, and footer.
+
+```html
+<div class="modal" tabindex="-1">
+  <div class="modal-dialog" role="document">
+    <div class="modal-content">
+      <div class="modal-header">
+        ...
+      </div>
+      <div class="modal-body">
+        ...
+      </div>
+      <div class="modal-footer">
+        ...
+      </div>
+    </div>
+  </div>
+</div>
+```
+
+Look at the example below to see how the modal looks.
+
+```html example centered height="30rem"
 <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
   Launch demo modal
 </button>
-
 <div class="modal" id="exampleModal" tabindex="-1">
   <div class="modal-dialog" role="document">
     <div class="modal-content">
@@ -31,11 +55,9 @@ description: Use Bootstrap’s JavaScript modal plugin to add dialogs to your si
 
 ## Prompt and alert
 
-```html example code centered height="30rem"
-<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
-  Launch alert modal
-</button>
+You can use the modal to create a prompt or alert. Look at the example below to see how the prompt and alert look.
 
+```html example centered height="30rem"
 <div class="modal" id="exampleModal" tabindex="-1">
   <div class="modal-dialog modal-sm" role="document">
     <div class="modal-content">
@@ -53,25 +75,31 @@ description: Use Bootstrap’s JavaScript modal plugin to add dialogs to your si
       <div class="modal-footer">
         <div class="w-100">
           <div class="row">
-            <div class="col"><a href="#" class="btn w-100" data-bs-dismiss="modal">
+            <div class="col">
+              <a href="#" class="btn w-100" data-bs-dismiss="modal">
                 Cancel
-              </a></div>
-            <div class="col"><a href="#" class="btn btn-danger w-100" data-bs-dismiss="modal">
+              </a>
+            </div>
+            <div class="col">
+              <a href="#" class="btn btn-danger w-100" data-bs-dismiss="modal">
                 Delete 84 items
-              </a></div>
+              </a>
+            </div>
           </div>
         </div>
       </div>
     </div>
   </div>
 </div>
+<script>
+  document.addEventListener("DOMContentLoaded", function() {
+    var myModal = new bootstrap.Modal(document.getElementById('exampleModal'))
+    myModal.show()
+  })
+</script>
 ```
 
-```html example code centered height="30rem"
-<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
-  Launch demo modal
-</button>
-
+```html example centered height="30rem"
 <div class="modal" id="exampleModal" tabindex="-1">
   <div class="modal-dialog modal-sm" role="document">
     <div class="modal-content">
@@ -105,15 +133,22 @@ description: Use Bootstrap’s JavaScript modal plugin to add dialogs to your si
     </div>
   </div>
 </div>
+<script>
+  document.addEventListener("DOMContentLoaded", function() {
+    var myModal = new bootstrap.Modal(document.getElementById('exampleModal'))
+    myModal.show()
+  })
+</script>
 ```
 
 ## Modal with form
 
-```html example code centered height="30rem"
+You can use the modal to create a form. Look at the example below to see how the form looks.
+
+```html example centered height="30rem"
 <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
   Launch modal with form
 </button>
-
 <div class="modal" id="exampleModal" tabindex="-1">
   <div class="modal-dialog modal-lg" role="document">
     <div class="modal-content">

package/docs/ui/components/offcanvas.mdx

@@ -0,0 +1,55 @@
+---
+title: Offcanvas
+---
+
+Offcanvas is a sidebar component that can be toggled via JavaScript to appear from the left, right, top, or bottom edge of the viewport. Buttons or anchors are used as triggers that are attached to specific elements you toggle, and `data` attributes are used to invoke our JavaScript.
+
+## Basic usage
+
+To create an offcanvas, add the `.offcanvas` class to a container element. You can also add the `.offcanvas-start`, `.offcanvas-end`, `.offcanvas-top`, or `.offcanvas-bottom` class to specify the position of the offcanvas. The `.show` class is used to display the offcanvas.
+
+```html
+<div class="offcanvas offcanvas-start" tabindex="-1" id="offcanvas">
+  <div class="offcanvas-body">
+    Content for the offcanvas goes here. You can place just about any Tabler component or custom elements here.
+  </div>
+</div>
+```
+
+Look at the example below to see how the offcanvas works.
+
+```html example vendors height="25rem"
+<div class="offcanvas offcanvas-start show" tabindex="-1" id="offcanvas" aria-labelledby="offcanvasLabel">
+  <div class="offcanvas-body">
+    Content for the offcanvas goes here. You can place just about any Tabler component or custom elements here.
+  </div>
+</div>
+```
+
+## Cookies banner
+
+The offcanvas component is used to display a cookies banner. It is a great way to inform users about the use of cookies on your website and to get their consent.
+
+```html example vendors height="25rem"
+<div class="offcanvas offcanvas-bottom h-auto show" tabindex="-1" id="offcanvasBottom" aria-modal="true" role="dialog">
+  <div class="offcanvas-body">
+    <div class="container">
+      <div class="row align-items-center">
+        <div class="col">
+          <strong>Do you like cookies?</strong> 🍪 We use cookies to ensure you get the best experience on our website. <a href="./terms-of-service.html" target="_blank">Learn more</a>
+        </div>
+        <div class="col-auto">
+          <button type="button" class="btn btn-primary" data-bs-dismiss="offcanvas">
+            Essential Cookies Only
+          </button>
+        </div>
+        <div class="col-auto">
+          <button type="button" class="btn btn-primary" data-bs-dismiss="offcanvas">
+            Allow All Cookies
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+```