Enhance documentation (#2048)

.build/reformat-mdx.js

@@ -16,17 +16,17 @@ docs.forEach((file, i) => {
 	// get codeblocks from markdown
 	const content = oldContent.replace(/(```([a-z0-9]+).*?\n)(.*?)(```)/gs, (m, m1, m2, m3, m4) => {
 		if (m2 === 'html') {
-			const m3m = beautifyHtml(m3, {
+			let m3m = beautifyHtml(m3, {
 				"indent_size": 2,
 				"indent_char": " ",
 			}).trim();
 
+			// remove empty lines
+			m3m = m3m.replace(/^\s*[\r\n]/gm, '');
+
 			return m1 + m3m + "\n" + m4;
 		}
-
 		return m
-
-		
 	})
 
 	if (content !== oldContent) {

.changeset/shiny-sloths-shave.md

@@ -0,0 +1,5 @@
+---
+"@tabler/core": patch
+---
+
+Enhance documentation

docs/illustrations/introduction/contents.mdx

@@ -0,0 +1,77 @@
+---
+title: Contents
+description: Explore Tabler Illustrations folder structure
+summary: The Tabler Illustrations package is thoughtfully structured to provide designers and developers with an array of high-quality assets. This guide explores the various folders and their contents, helping users make the most of these resources.
+---
+
+The Tabler Illustrations package offers a wide range of visual assets designed to meet the needs of modern web and graphic design. These illustrations are not only aesthetically pleasing but also highly versatile, supporting various formats and themes for seamless integration into different projects.
+
+## Folder Structure
+
+Once downloaded, unzip the compressed folder and you’ll see something like this:
+
+```
+tabler-illustrations/
+├── eps/
+|	├── dark/
+|	└── light/
+├── figma/ 
+├── pdf/ 
+|  ├── dark/
+|  └── light/
+├── png/ 
+|  ├── dark/
+|  └── light/
+├── png-background/ 
+|	├── dark/
+|	└── light/
+├── svg/ 
+|  ├── dark/
+|  └── light/
+├── svg-css-autodark/ 
+└── svg-css-variables/
+ 	├── dark/
+ 	└── light/
+```
+
+## Understanding the File Structure in Tabler Illustrations
+
+The **Tabler Illustrations** package is organized into a clear and efficient folder structure to streamline the use of its high-quality assets. Below is a breakdown of its key directories:
+
+### 1. Vector Files: `eps/`
+This folder contains EPS files for scalable vector illustrations.
+- `dark/`: Dark-themed illustrations.
+- `light/`: Light-themed illustrations.
+
+### 2. Design File: `figma/`
+This folder contains a Figma file, perfect for designers who work directly in Figma.
+
+### 3. Document Files: `pdf/`
+This folder contains PDF files, ideal for print or presentation use.
+- `dark/`: Dark-themed illustrations.
+- `light/`: Light-themed illustrations.
+
+### 4. Transparent Images: `png/`
+This folder stores PNG files with transparent backgrounds at 1600 × 1200px resolution.
+- `dark/`: Dark-themed illustrations.
+- `light/`: Light-themed illustrations.
+
+### 5. Background Images: `png-background/`
+This folder contains PNG files with a dark background for enhanced contrast.
+- `dark/`: Dark-themed illustrations.
+- `light/`: Light-themed illustrations.
+
+### 6. Scalable Vector Graphics: `svg/`
+This folder includes SVG files for scalable and customizable vector graphics.
+- `dark/`: Dark-themed illustrations.
+- `light/`: Light-themed illustrations.
+
+### 7. Adaptive Graphics: `svg-css-autodark/`
+This folder contains SVG files prepared to automatically adjust their colors based on user settings, providing a dynamic and adaptive visual experience.
+
+### 8. Themed Graphics: `svg-css-variables/`
+This folder contains SVG files using CSS variables for flexible theming.
+- `dark/`: Dark-themed illustrations.
+- `light/`: Light-themed illustrations.
+
+This structure ensures easy access to various formats and themes, making Tabler Illustrations a versatile tool for developers and designers alike.

docs/illustrations/introduction/customization.mdx

@@ -206,7 +206,6 @@ Tabler Illustrations uses `--tblr-primary` as a fallback color if `--tblr-illust
     </svg>
   </div>
 </div>
-
 <div class="row g-2">
   <div class="col-auto">
     <label class="form-colorinput">
@@ -269,7 +268,6 @@ Tabler Illustrations uses `--tblr-primary` as a fallback color if `--tblr-illust
     </label>
   </div>
 </div>
-
 <script>
   document.querySelectorAll('.form-colorinput-input').forEach((input) => {
     input.addEventListener('change', (event) => {
@@ -329,11 +327,9 @@ Illustration change theme based on the user's system preferences or `data-bs-the
 
 ```html
 <html data-bs-theme="dark">
-
 <body>
   <svg>...</svg>
 </body>
-
 </html>
 ```
 
@@ -346,25 +342,20 @@ Look at the example below to see how the illustration changes based on the user'
       fill: black;
       opacity: 0.07;
     }
-
     :where(.theme-dark, [data-bs-theme="dark"]) .tblr-illustrations-boy-girl-b {
       fill: #1A2030;
     }
-
     :where(.theme-dark, [data-bs-theme="dark"]) .tblr-illustrations-boy-girl-c {
       fill: #454C5E;
     }
-
     @media (prefers-color-scheme: dark) {
       .tblr-illustrations-boy-girl-a {
         fill: black;
         opacity: 0.07;
       }
-
       .tblr-illustrations-boy-girl-b {
         fill: #1A2030;
       }
-
       .tblr-illustrations-boy-girl-c {
         fill: #454C5E;
       }
@@ -422,7 +413,6 @@ Look at the example below to see how the illustration changes based on the user'
     </label>
   </div>
 </div>
-
 <script>
   const toggleTheme = (theme) => {
     if (theme === 'dark') {
@@ -431,7 +421,6 @@ Look at the example below to see how the illustration changes based on the user'
       document.documentElement.setAttribute('data-bs-theme', 'light');
     }
   }
-
   document.querySelectorAll('.form-check-input').forEach((input) => {
     input.addEventListener('change', (e) => {
       console.log(e.target.value);

docs/illustrations/introduction/license.mdx

@@ -0,0 +1,22 @@
+---
+title: Tabler Illustrations License
+---
+
+Codecalm.net grants you an on-going, non-exclusive license to use the Tabler Illustrations.
+
+The license grants permission to one individual (the Licensee) to access and use the Tabler Illustrations.
+
+## What You Can Do with Tabler Illustrations
+
+* Use the Tabler Illustrations to create unlimited End Products.
+* Modify the Tabler Illustrations to create derivative Tabler Illustrations. Those Tabler Illustrations are subject to this license.
+* Use the Tabler Illustrations to create unlimited End Products for unlimited Clients.
+* Use the Tabler Illustrations to create End Products where the End Product is sold to End Users.
+
+## What You Cannot Do with Tabler Illustrations
+
+* Use the Tabler Illustrations to create End Products that are designed to allow an End User to build their own End Products using the Tabler Illustrations or derivatives of the Tabler Illustrations.
+* Re-distribute the Tabler Illustrations or derivatives of the Tabler Illustrations separately from an End Product, neither in code or as design assets.
+* Share your access to the Tabler Illustrations with any other individuals.
+* Use the Tabler Illustrations to create End Products that are open source and freely available to End Users.
+* Use the Tabler Illustrations to produce anything that may be deemed by Codecalm.net, in their sole and absolute discretion, to be competitive or in conflict with the business of Codecalm.net

docs/ui/components/alerts.mdx

@@ -9,7 +9,7 @@ description: Alert messages for user notifications.
 
 Depending on the information you need to convey, you can use one of the following types of alert messages - **success**, **info**, **warning** or **danger**. Using the right type of alert modal will help draw users' attention to the message and prompt them to take action.
 
-```html example vertical height="420px"
+```html example vertical background="surface" columns={2} centered separated
 <div class="alert alert-success" role="alert">
   <h4 class="alert-title">Wow! Everything worked!</h4>
   <div class="text-secondary">Your account has been saved!</div>
@@ -39,7 +39,7 @@ Depending on the information you need to convey, you can use one of the followin
 
 Add a link to your alert message to redirect users to the details they need to complete or additional information they should read.
 
-```html example vertical height="7rem"
+```html example vertical background="surface" columns={2} centered
 <div class="alert alert-danger m-0">
   This is a danger alert — <a href="#" class="alert-link">check it out</a>!
 </div>
@@ -49,7 +49,7 @@ Add a link to your alert message to redirect users to the details they need to c
 
 Add the `x` close button to make an alert modal dismissible. Thanks to that, your alert modal will disappear only once the user closes it.
 
-```html example height="420px"
+```html example vertical background="surface" columns={2} centered separated
 <div class="alert alert-success alert-dismissible" role="alert">
   <div class="d-flex">
     <div>
@@ -137,7 +137,24 @@ Add the `x` close button to make an alert modal dismissible. Thanks to that, you
 
 Add an icon to your alert modal to make it more user-friendly and help users easily identify the message.
 
-```html example height="420px"
+```html
+<div class="alert alert-success" role="alert">
+  <div class="d-flex">
+    <div>
+      <!-- SVG icon from http://tabler.io/icons/icon/check -->
+      <svg>...</svg>
+    </div>
+    <div>
+      <h4 class="alert-title">Wow! Everything worked!</h4>
+      <div class="text-secondary">Your account has been saved!</div>
+    </div>
+  </div>
+</div>
+```
+
+To see how the icon affects the alert modal, look at the example below.
+
+```html example vertical background="surface" columns={2} centered separated
 <div class="alert alert-success" role="alert">
   <div class="d-flex">
     <div>
@@ -201,66 +218,17 @@ Add an icon to your alert modal to make it more user-friendly and help users eas
 </div>
 ```
 
-```html
-<div class="alert alert-success" role="alert">
-  <div class="d-flex">
-    <div>
-      <!-- SVG icon from http://tabler.io/icons/icon/check -->
-      <svg>...</svg>
-    </div>
-    <div>
-      <h4 class="alert-title">Wow! Everything worked!</h4>
-      <div class="text-secondary">Your account has been saved!</div>
-    </div>
-  </div>
-</div>
-<div class="alert alert-info" role="alert">
-  <div class="d-flex">
-    <div>
-      <!-- SVG icon from http://tabler.io/icons/icon/info-circle -->
-      <svg>...</svg>
-    </div>
-    <div>
-      <h4 class="alert-title">Did you know?</h4>
-      <div class="text-secondary">Here is something that you might like to know.</div>
-    </div>
-  </div>
-</div>
-<div class="alert alert-warning" role="alert">
-  <div class="d-flex">
-    <div>
-      <!-- SVG icon from http://tabler.io/icons/icon/alert-triangle -->
-      <svg>...</svg>
-    </div>
-    <div>
-      <h4 class="alert-title">Uh oh, something went wrong</h4>
-      <div class="text-secondary">Sorry! There was a problem with your request.</div>
-    </div>
-  </div>
-</div>
-<div class="alert alert-danger" role="alert">
-  <div class="d-flex">
-    <div>
-      <!-- SVG icon from http://tabler.io/icons/icon/alert-circle -->
-      <svg>...</svg>
-    </div>
-    <div>
-      <h4 class="alert-title">I'm so sorry&hellip;</h4>
-      <div class="text-secondary">Your account has been deleted and can't be restored.</div>
-    </div>
-  </div>
-</div>
-```
+
 
 ## Alert with avatar
 
 Add an avatar to your alert modal to make it more personalized.
 
-```html example height="420px"
+```html example vertical background="surface" columns={2} centered separated
 <div class="alert alert-success" role="alert">
   <div class="d-flex">
     <div>
-      <span class="avatar float-start me-3"></span>
+      <span class="avatar me-3" style="background-image: url(/static/samples/avatars/039m.jpg)"></span>
     </div>
     <div>
       Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit.
@@ -270,7 +238,7 @@ Add an avatar to your alert modal to make it more personalized.
 <div class="alert alert-info" role="alert">
   <div class="d-flex">
     <div>
-      <span class="avatar float-start me-3">JL</span>
+      <span class="avatar me-3">JL</span>
     </div>
     <div>
       Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit.
@@ -280,7 +248,7 @@ Add an avatar to your alert modal to make it more personalized.
 <div class="alert alert-warning" role="alert">
   <div class="d-flex">
     <div>
-      <span class="avatar float-start me-3"></span>
+      <span class="avatar me-3" style="background-image: url(/static/samples/avatars/035f.jpg)"></span>
     </div>
     <div>
       Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit.
@@ -290,7 +258,7 @@ Add an avatar to your alert modal to make it more personalized.
 <div class="alert alert-danger" role="alert">
   <div class="d-flex">
     <div>
-      <span class="avatar float-start me-3"></span>
+      <span class="avatar me-3" style="background-image: url(/static/samples/avatars/056f.jpg)"></span>
     </div>
     <div>
       Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit.
@@ -303,7 +271,7 @@ Add an avatar to your alert modal to make it more personalized.
 
 Add primary and secondary buttons to your alert modals if you want users to take a particular action based on the information included in the modal message.
 
-```html example height="500px" scrollable
+```html example vertical background="surface" columns={2} centered separated
 <div class="alert alert-success alert-dismissible" role="alert">
   <h3 class="mb-1">Some Title</h3>
   <p>Lorem ipsum Minim ad pariatur eiusmod ea ut nulla aliqua est quis id dolore minim voluptate.</p>
@@ -346,7 +314,15 @@ Add primary and secondary buttons to your alert modals if you want users to take
 
 If you want your alert to be really eye-catching, you can add a class `alert-important`.
 
-```html example vertical height="210px"
+```html
+<div class="alert alert-important alert-success alert-dismissible" role="alert">
+  ...
+</div>
+```
+
+Look at the example below to see how the important alert affects the alert modal.
+
+```html example vertical background="surface" columns={2} centered separated
 <div class="alert alert-important alert-success alert-dismissible" role="alert">
   <div class="d-flex">
     <div>
@@ -356,8 +332,7 @@ If you want your alert to be really eye-catching, you can add a class `alert-imp
       </svg>
     </div>
     <div>
-      <h4 class="alert-title">Wow! Everything worked!</h4>
-      <div class="text-secondary">Your account has been saved!</div>
+      Wow! Everything worked!
     </div>
   </div>
   <a class="btn-close btn-close-white" data-bs-dismiss="alert" aria-label="close"></a>
@@ -378,54 +353,3 @@ If you want your alert to be really eye-catching, you can add a class `alert-imp
 </div>
 ```
 
-```html
-<div class="alert alert-important alert-success alert-dismissible" role="alert">
-  <div class="d-flex">
-    <div>
-      <!-- SVG icon from http://tabler.io/icons/icon/check -->
-      <svg>...</svg>
-    </div>
-    <div>
-      Your account has been saved!
-    </div>
-  </div>
-  <a class="btn-close btn-close-white" data-bs-dismiss="alert" aria-label="close"></a>
-</div>
-<div class="alert alert-important alert-info alert-dismissible" role="alert">
-  <div class="d-flex">
-    <div>
-      <!-- SVG icon from http://tabler.io/icons/icon/info-circle -->
-      <svg>...</svg>
-    </div>
-    <div>
-      Here is something that you might like to know.
-    </div>
-  </div>
-  <a class="btn-close btn-close-white" data-bs-dismiss="alert" aria-label="close"></a>
-</div>
-<div class="alert alert-important alert-warning alert-dismissible" role="alert">
-  <div class="d-flex">
-    <div>
-      <!-- SVG icon from http://tabler.io/icons/icon/alert-triangle -->
-      <svg>...</svg>
-    </div>
-    <div>
-      Sorry! There was a problem with your request.
-    </div>
-  </div>
-  <a class="btn-close btn-close-white" data-bs-dismiss="alert" aria-label="close"></a>
-</div>
-<div class="alert alert-important alert-danger alert-dismissible" role="alert">
-  <div class="d-flex">
-    <div>
-      <!-- SVG icon from http://tabler.io/icons/icon/alert-circle -->
-      <svg>...</svg>
-    </div>
-    <div>
-      Your account has been deleted and can't be restored.
-    </div>
-  </div>
-  <a class="btn-close btn-close-white" data-bs-dismiss="alert" aria-label="close"></a>
-</div>
-```
-

docs/ui/components/badges.mdx

@@ -9,41 +9,43 @@ bootstrapLink: components/badge/
 
 The default badges are square and come in the basic set of colors.
 
-```html example vertical centered separated scrollable height="15rem"
-<span class="badge bg-blue">Blue</span>
-<span class="badge bg-azure">Azure</span>
-<span class="badge bg-indigo">Indigo</span>
-<span class="badge bg-purple">Purple</span>
-<span class="badge bg-pink">Pink</span>
-<span class="badge bg-red">Red</span>
-<span class="badge bg-orange">Orange</span>
-<span class="badge bg-yellow">Yellow</span>
-<span class="badge bg-lime">Lime</span>
-<span class="badge bg-green">Green</span>
-<span class="badge bg-teal">Teal</span>
-<span class="badge bg-cyan">Cyan</span>
+```html example centered separated
+<span class="badge bg-blue-lt">Blue</span>
+<span class="badge bg-azure-lt">Azure</span>
+<span class="badge bg-indigo-lt">Indigo</span>
+<span class="badge bg-purple-lt">Purple</span>
+<span class="badge bg-pink-lt">Pink</span>
+<span class="badge bg-red-lt">Red</span>
+<span class="badge bg-orange-lt">Orange</span>
+<span class="badge bg-yellow-lt">Yellow</span>
+<span class="badge bg-lime-lt">Lime</span>
+<span class="badge bg-green-lt">Green</span>
+<span class="badge bg-teal-lt">Teal</span>
+<span class="badge bg-cyan-lt">Cyan</span>
 ```
 
 ## Headings
 
-```html example height="240px"
-<h1>Example heading <span class="badge bg-secondary">New</span>
+```html example columns={1} height="20rem" centered
+<h1>Example heading <span class="badge">New</span>
 </h1>
-<h2>Example heading <span class="badge bg-secondary">New</span>
+<h2>Example heading <span class="badge">New</span>
 </h2>
-<h3>Example heading <span class="badge bg-secondary">New</span>
+<h3>Example heading <span class="badge">New</span>
 </h3>
-<h4>Example heading <span class="badge bg-secondary">New</span>
+<h4>Example heading <span class="badge">New</span>
 </h4>
-<h5>Example heading <span class="badge bg-secondary">New</span>
+<h5>Example heading <span class="badge">New</span>
 </h5>
-<h6>Example heading <span class="badge bg-secondary">New</span>
+<h6>Example heading <span class="badge">New</span>
 </h6>
 ```
 
 ## Outline badges
 
-```html example vertical centered separated scrollable height="15rem"
+
+
+```html example centered separated
 <span class="badge badge-outline text-blue">blue</span>
 <span class="badge badge-outline text-azure">azure</span>
 <span class="badge badge-outline text-indigo">indigo</span>
@@ -62,75 +64,55 @@ The default badges are square and come in the basic set of colors.
 
 Use the `.badge-pill` class if you want to create a badge with rounded corners. Its width will adjust to the label text.
 
-```html example centered separated height="7rem"
-<span class="badge badge-pill bg-blue">1</span>
-<span class="badge badge-pill bg-azure">2</span>
-<span class="badge badge-pill bg-indigo">3</span>
-<span class="badge badge-pill bg-purple">4</span>
-<span class="badge badge-pill bg-pink">5</span>
-<span class="badge badge-pill bg-red">6</span>
-<span class="badge badge-pill bg-orange">7</span>
-<span class="badge badge-pill bg-yellow">8</span>
-<span class="badge badge-pill bg-lime">9</span>
-<span class="badge badge-pill bg-green">10</span>
-<span class="badge badge-pill bg-teal">11</span>
-<span class="badge badge-pill bg-cyan">12</span>
-```
-
-## Soft color badges
-
-You can create a soft colour variant of a corresponding contextual badge variation, to make it look more subtle. Click [here](/docs/ui/base/colors) to see the list of available colors and choose ones that best suit your design.
-
-```html example vertical centered separated scrollable height="15rem"
-<span class="badge bg-blue-lt">Blue</span>
-<span class="badge bg-azure-lt">Azure</span>
-<span class="badge bg-indigo-lt">Indigo</span>
-<span class="badge bg-purple-lt">Purple</span>
-<span class="badge bg-pink-lt">Pink</span>
-<span class="badge bg-red-lt">Red</span>
-<span class="badge bg-orange-lt">Orange</span>
-<span class="badge bg-yellow-lt">Yellow</span>
-<span class="badge bg-lime-lt">Lime</span>
-<span class="badge bg-green-lt">Green</span>
-<span class="badge bg-teal-lt">Teal</span>
-<span class="badge bg-cyan-lt">Cyan</span>
+```html example centered separated 
+<span class="badge badge-pill bg-blue-lt">1</span>
+<span class="badge badge-pill bg-azure-lt">2</span>
+<span class="badge badge-pill bg-indigo-lt">3</span>
+<span class="badge badge-pill bg-purple-lt">4</span>
+<span class="badge badge-pill bg-pink-lt">5</span>
+<span class="badge badge-pill bg-red-lt">6</span>
+<span class="badge badge-pill bg-orange-lt">7</span>
+<span class="badge badge-pill bg-yellow-lt">8</span>
+<span class="badge badge-pill bg-lime-lt">9</span>
+<span class="badge badge-pill bg-green-lt">10</span>
+<span class="badge badge-pill bg-teal-lt">11</span>
+<span class="badge badge-pill bg-cyan-lt">12</span>
 ```
 
 ## Links
 
 Place the badge within an `<a>` element if you want it to perform the function of a link and make it clickable.
 
-```html example vertical centered separated scrollable height="15rem"
-<a href="#" class="badge bg-blue">Blue</a>
-<a href="#" class="badge bg-azure">Azure</a>
-<a href="#" class="badge bg-indigo">Indigo</a>
-<a href="#" class="badge bg-purple">Purple</a>
-<a href="#" class="badge bg-pink">Pink</a>
-<a href="#" class="badge bg-red">Red</a>
-<a href="#" class="badge bg-orange">Orange</a>
-<a href="#" class="badge bg-yellow">Yellow</a>
-<a href="#" class="badge bg-lime">Lime</a>
-<a href="#" class="badge bg-green">Green</a>
-<a href="#" class="badge bg-teal">Teal</a>
-<a href="#" class="badge bg-cyan">Cyan</a>
+```html example centered separated 
+<a href="#" class="badge bg-blue-lt">Blue</a>
+<a href="#" class="badge bg-azure-lt">Azure</a>
+<a href="#" class="badge bg-indigo-lt">Indigo</a>
+<a href="#" class="badge bg-purple-lt">Purple</a>
+<a href="#" class="badge bg-pink-lt">Pink</a>
+<a href="#" class="badge bg-red-lt">Red</a>
+<a href="#" class="badge bg-orange-lt">Orange</a>
+<a href="#" class="badge bg-yellow-lt">Yellow</a>
+<a href="#" class="badge bg-lime-lt">Lime</a>
+<a href="#" class="badge bg-green-lt">Green</a>
+<a href="#" class="badge bg-teal-lt">Teal</a>
+<a href="#" class="badge bg-cyan-lt">Cyan</a>
 ```
 
 ## Button with badge
 
 Badges can be used as part of links or buttons to provide a counter.
 
-```html example centered separated height="7rem"
-<button type="button" class="btn">Notifications <span class="badge bg-red ms-2">4</span>
-</button>
-<button type="button" class="btn">Notifications <span class="badge bg-green ms-2">4</span>
+```
+<button type="button" class="btn">
+  Notifications <span class="badge bg-red-lt ms-2">4</span>
 </button>
 ```
 
-```html
-<button type="button" class="btn">
-  Notifications <span class="badge bg-red ms-2">4</span>
+The results can be seen in the example below.
+
+```html example centered separated background="surface"
+<button type="button" class="btn">Notifications <span class="badge bg-red-lt ms-2">4</span>
 </button>
-<button type="button" class="btn">
-  Notifications <span class="badge bg-green ms-2">4</span>
+<button type="button" class="btn">Notifications <span class="badge bg-green-lt ms-2">4</span>
 </button>
 ```

docs/ui/components/charts.mdx

@@ -11,16 +11,14 @@ See also the [ApexCharts](https://apexcharts.com/) documentation.
 
 ## Line Chart
 
-Line charts are a typical pictorial representation that depicts trends and behaviors over time.
+Line charts are an essential tool for visualizing data trends over time. They are particularly useful for representing continuous data, such as stock prices, website traffic, or user activity. Below is an example of a line chart showcasing session duration, page views, and total visits:
 
-```html example centered columns={2} height="25rem"
+```html example centered columns={2} height="25rem" background="surface" libs="apexcharts"
 <div class="card">
   <div class="card-body">
     <div id="chart-demo-line" class="chart-lg"></div>
   </div>
 </div>
-
-<script src="$TABLER_CDN/dist/libs/apexcharts/dist/apexcharts.min.js" defer></script>
 <script>
   document.addEventListener("DOMContentLoaded", function() {
     window.ApexCharts && (new ApexCharts(document.getElementById('chart-demo-line'), {
@@ -105,16 +103,14 @@ Line charts are a typical pictorial representation that depicts trends and behav
 
 ## Area Chart
 
-Area charts are used to represent quantitative variations.
+Area charts are ideal for representing cumulative data over time. They add visual emphasis to trends by filling the space under the line, making it easier to compare values. Here's an example of an area chart with smooth transitions and data from two series:
 
-```html example centered columns={2} height="25rem"
+```html example centered columns={2} height="25rem" background="surface" libs="apexcharts"
 <div class="card">
   <div class="card-body">
     <div id="chart-demo-area" class="chart-lg"></div>
   </div>
 </div>
-
-<script src="$TABLER_CDN/dist/libs/apexcharts/dist/apexcharts.min.js" defer></script>
 <script>
   document.addEventListener("DOMContentLoaded", function() {
     window.ApexCharts && (new ApexCharts(document.getElementById('chart-demo-area'), {
@@ -203,16 +199,14 @@ Area charts are used to represent quantitative variations.
 
 ## Bar Chart
 
-A bar chart is the best tool for displaying comparisons between categories of data.
+Bar charts are highly effective for comparing data across different categories. They provide a clear and concise way to visualize differences in values, making them perfect for analyzing categorical data. Here's an example of a bar chart with stacked bars for enhanced readability:
 
-```html example centered columns={2} height="25rem"
+```html example centered columns={2} height="25rem" background="surface" libs="apexcharts"
 <div class="card">
   <div class="card-body">
     <div id="chart-demo-bar" class="chart-lg"></div>
   </div>
 </div>
-
-<script src="$TABLER_CDN/dist/libs/apexcharts/dist/apexcharts.min.js" defer></script>
 <script>
   document.addEventListener("DOMContentLoaded", function() {
     window.ApexCharts && (new ApexCharts(document.getElementById('chart-demo-bar'), {
@@ -311,16 +305,14 @@ A bar chart is the best tool for displaying comparisons between categories of da
 
 ## Pie Chart
 
-Pie charts are an instrumental visualization tool useful in expressing data and information in terms of percentages, ratio.
+Pie charts are a simple and effective way to visualize proportions and ratios. They are commonly used to represent data as percentages of a whole, making them ideal for displaying parts of a dataset. Below is an example of a pie chart showcasing distribution across categories:
 
-```html example centered columns={2} height="25rem"
+```html example centered columns={2} height="25rem" background="surface" libs="apexcharts"
 <div class="card">
   <div class="card-body">
     <div id="chart-demo-pie" class="chart-lg"></div>
   </div>
 </div>
-
-<script src="$TABLER_CDN/dist/libs/apexcharts/dist/apexcharts.min.js" defer></script>
 <script>
   document.addEventListener("DOMContentLoaded", function() {
     window.ApexCharts && (new ApexCharts(document.getElementById('chart-demo-pie'), {
@@ -371,16 +363,14 @@ Pie charts are an instrumental visualization tool useful in expressing data and
 
 ## Heatmap Chart
 
-Heatmap is a visualization tool that employs color the way a bar chart employs height and width in representing data.
+Heatmaps provide a graphical representation of data where individual values are represented by color intensity. They are particularly useful for identifying patterns or anomalies within large datasets. Here's an example of a heatmap chart to visualize data distributions:
 
-```html example centered columns={2} height="25rem"
+```html example centered columns={2} height="25rem" background="surface" libs="apexcharts"
 <div class="card">
   <div class="card-body">
     <div id="chart-demo-pie" class="chart-lg"></div>
   </div>
 </div>
-
-<script src="$TABLER_CDN/dist/libs/apexcharts/dist/apexcharts.min.js" defer></script>
 <script>
   document.addEventListener("DOMContentLoaded", function() {
     window.ApexCharts && (new ApexCharts(document.getElementById('chart-demo-pie'), {
@@ -431,14 +421,14 @@ Heatmap is a visualization tool that employs color the way a bar chart employs h
 
 ## Advanced example
 
-```html example centered columns={2} height="25rem"
+For more complex data visualizations, you can create advanced charts with multiple series and custom configurations. Below is an example of a social media referrals chart combining data from Facebook, Twitter, and Dribbble:
+
+```html example centered columns={2} height="25rem" background="surface" libs="apexcharts"
 <div class="card">
   <div class="card-body">
     <div id="chart-social-referrals" class="chart-lg"></div>
   </div>
 </div>
-
-<script src="$TABLER_CDN/dist/libs/apexcharts/dist/apexcharts.min.js" defer></script>
 <script>
   document.addEventListener("DOMContentLoaded", function() {
     window.ApexCharts && (new ApexCharts(document.getElementById('chart-social-referrals'), {

docs/ui/components/dropzone.mdx

@@ -4,15 +4,36 @@ summary: Dropzone is a simple JavaScript library that helps you add file drag an
 description: Drag-and-drop file upload tool.
 ---
 
-## Default Dropzone
+## Basic usage
 
-```html example vendors height="240px" libs="dropzone"
+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:
 
+```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")
@@ -22,13 +43,20 @@ description: Drag-and-drop file upload tool.
 
 ## Add multiple files
 
-```html example vendors height="240px" libs="dropzone"
+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>
-
 <script>
   document.addEventListener("DOMContentLoaded", function() {
     new Dropzone("#dropzone-mulitple")
@@ -38,7 +66,9 @@ description: Drag-and-drop file upload tool.
 
 ## Custom Dropzone
 
-```html example vendors height="240px" libs="dropzone"
+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" />
@@ -48,10 +78,11 @@ description: Drag-and-drop file upload tool.
     <span class="dropzone-msg-desc">Your custom description here</span>
   </div>
 </form>
-
 <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.

docs/ui/components/icons.mdx

@@ -1,12 +1,25 @@
 ---
 title: Icons
-summary: 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
 
+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>
@@ -40,6 +53,17 @@ description: Enhance dashboards with custom icons.
 
 ## Filled icons
 
+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>
@@ -64,6 +88,17 @@ description: Enhance dashboards with custom icons.
 
 ## Icon colors
 
+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">
@@ -93,6 +128,19 @@ description: Enhance dashboards with custom 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" />
@@ -109,13 +157,3 @@ description: Enhance dashboards with custom icons.
 </svg>
 ```
 
-```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>
-```

docs/ui/components/inline-player.mdx

@@ -5,11 +5,36 @@ summary: A simple, lightweight, accessible and customizable HTML5, YouTube and V
 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 vendors height="500px" libs="plyr"
+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() {
@@ -20,9 +45,10 @@ description: Lightweight media player for websites.
 
 ## Vimeo file
 
+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() {

docs/ui/components/modals.mdx

@@ -4,13 +4,36 @@ summary: Use Bootstrap’s JavaScript modal plugin to add dialogs to your site f
 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
 
+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">
@@ -32,11 +55,9 @@ description: Dialogs for notifications and content.
 
 ## Prompt and alert
 
-```html example 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">
@@ -70,13 +91,15 @@ description: Dialogs for notifications and content.
     </div>
   </div>
 </div>
+<script>
+  document.addEventListener("DOMContentLoaded", function() {
+    var myModal = new bootstrap.Modal(document.getElementById('exampleModal'))
+    myModal.show()
+  })
+</script>
 ```
 
 ```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 modal-sm" role="document">
     <div class="modal-content">
@@ -110,15 +133,22 @@ description: Dialogs for notifications and content.
     </div>
   </div>
 </div>
+<script>
+  document.addEventListener("DOMContentLoaded", function() {
+    var myModal = new bootstrap.Modal(document.getElementById('exampleModal'))
+    myModal.show()
+  })
+</script>
 ```
 
 ## Modal with form
 
+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">

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>
+```

docs/ui/components/placeholder.mdx

@@ -51,9 +51,15 @@ A placeholder can contain also a header element looks like header:
 
 ## Placeholder avatar
 
-You can make your placeholder item look like an avatar.
+You can use a placeholder, which will look like an avatar. You can use the `avatar` component, and get the image in the right proportions.
 
-```html example columns={1}
+```html
+<div class="avatar placeholder"></div>
+```
+
+Look at the example below to see how the avatar placeholder looks like.
+
+```html example columns={1} centered
 <div class="row">
   <div class="col-auto">
     <div class="avatar placeholder"></div>
@@ -65,7 +71,7 @@ You can make your placeholder item look like an avatar.
 </div>
 ```
 
-The size of avatars is exactly the same as a regular avatar.
+You can also use the `avatar` component with different sizes. Look at the example below to see how the avatar placeholder looks like.
 
 ```html example centered separated
 <div class="avatar avatar-xl placeholder"></div>
@@ -82,7 +88,7 @@ You can use a placeholder, which will look like a picture. You can use the `rati
 
 You can also use the `ratio` component, and get the image in the right proportions.
 
-```html example columns={1} height={500} scrollable
+```html example columns={1} height={500} scrollable separated vertical
 <div class="ratio ratio-1x1 placeholder">
   <div class="placeholder-image"></div>
 </div>
@@ -99,23 +105,16 @@ You can also use the `ratio` component, and get the image in the right proportio
 
 ## Placeholder color
 
-By default, the `placeholder` uses `currentColor`. This can be overridden with a custom color or utility class.
+By default, the `placeholder` uses `currentColor`. This can be overridden with a custom color or utility class. Full color classes are available for background colors.
 
-```html example columns={1} height={240}
-<span class="placeholder col-12"></span>
-<span class="placeholder col-12 bg-primary"></span>
-<span class="placeholder col-12 bg-secondary"></span>
-<span class="placeholder col-12 bg-success"></span>
-<span class="placeholder col-12 bg-danger"></span>
-<span class="placeholder col-12 bg-warning"></span>
-<span class="placeholder col-12 bg-info"></span>
-<span class="placeholder col-12 bg-light"></span>
+```html
 <span class="placeholder col-12 bg-dark"></span>
 ```
 
-```html
-<span class="placeholder col-12"></span>
+Look at the example below to see how the color affects the placeholder.
 
+```html example columns={1} height={240}
+<span class="placeholder col-12"></span>
 <span class="placeholder col-12 bg-primary"></span>
 <span class="placeholder col-12 bg-secondary"></span>
 <span class="placeholder col-12 bg-success"></span>
@@ -154,7 +153,7 @@ Animate placeholders with `.placeholder-glow` or `.placeholder-wave` to better c
 
 See in the following examples how else you can use the placeholder component
 
-```html example columns={1} height={1000} separated vertical scrollable
+```html example columns={1} height={1000} separated vertical scrollable background="surface"
 <div class="card placeholder-glow">
   <div class="ratio ratio-21x9 card-img-top placeholder"></div>
   <div class="card-body">

docs/ui/components/range-slider.mdx

@@ -13,7 +13,6 @@ All options and features can be found [**here**](https://refreshless.com/nouisli
 
 ```html example centered vendors libs="nouislider" columns={1}
 <div id="range-simple"></div>
-
 <script>
   document.addEventListener("DOMContentLoaded", function() {
     window.noUiSlider && (noUiSlider.create(document.getElementById('range-simple'), {

docs/ui/components/statuses.mdx

@@ -210,6 +210,12 @@ Use the lite status to make the status less noticeable. To do this, use the `.st
 
 If you need only dot status, you can use the `.status-dot` class.
 
+```html
+<span class="status-dot status-blue"></span>
+```
+
+Look at the example below to see how the status dots work:
+
 ```html example centered separated
 <span class="status-dot status-blue"></span>
 <span class="status-dot status-azure"></span>
@@ -227,6 +233,12 @@ If you need only dot status, you can use the `.status-dot` class.
 
 The dots can also be animated. To do this, use the `.status-dot-animated` class.
 
+```html
+<span class="status-dot status-dot-animated status-blue"></span>
+```
+
+The animated status dots can be used in the same way as the regular status dots. 
+
 ```html example centered separated
 <span class="status-dot status-dot-animated status-blue"></span>
 <span class="status-dot status-dot-animated status-azure"></span>

docs/ui/components/steps.mdx

@@ -7,11 +7,27 @@ description: Simplify complex processes with steps.
 
 ## Default markup
 
-Steps show users where they are within a process, what steps they have already completed and what they are expected to complete. Making multi-step processes more user-friendly facilitates users' interaction with your interface.
+Steps provide a clear visual representation of a user’s progress through a multi-step process. By showing what has been completed and what remains, steps enhance usability and encourage task completion.
 
-Use the `steps` class to create the default progress tracker and name the steps accordingly.
+To create a default progress tracker, use the `.steps` class and define each step as a `.step-item`. The active step clearly indicates the current position in the process. 
 
-```html example
+```html
+<div class="steps">
+  <a href="#" class="step-item">
+    Step 1
+  </a>
+  <a href="#" class="step-item">
+    Step 2
+  </a>
+  <a href="#" class="step-item active">
+    Step 3
+  </a>
+</div>
+```
+
+The example below demonstrates a simple progress tracker with four steps, where the third step is active.
+
+```html example centered
 <div class="steps">
   <a href="#" class="step-item">
     Step 1
@@ -32,18 +48,28 @@ Use the `steps` class to create the default progress tracker and name the steps
 
 Add tooltips, if you want to provide users with additional information about the steps they are expected to complete. Tooltips are displayed when a user hovers over a given step and help clarify what might not be clear from the interface.
 
-```html example
+To add a tooltip, use the `data-bs-toggle="tooltip"` attribute and specify the tooltip content with the `title` attribute.
+
+```html
+<a href="#" class="step-item" data-bs-toggle="tooltip" data-bs-placement="top" title="Step 1 description">
+  Step 1
+</a>
+```
+
+The example below demonstrates a progress tracker with tooltips for each step.
+
+```html example centered height="20rem"
 <div class="steps">
-  <a href="#" class="step-item" data-bs-toggle="tooltip" title="Step 1 description">
+  <a href="#" class="step-item" data-bs-toggle="tooltip" data-bs-placement="top" title="Step 1 description">
     Step 1
   </a>
-  <a href="#" class="step-item" data-bs-toggle="tooltip" title="Step 2 description">
+  <a href="#" class="step-item" data-bs-toggle="tooltip" data-bs-placement="top" title="Step 2 description">
     Step 2
   </a>
-  <a href="#" class="step-item active" data-bs-toggle="tooltip" title="Step 3 description">
+  <a href="#" class="step-item active" data-bs-toggle="tooltip" data-bs-placement="top" title="Step 3 description">
     Step 3
   </a>
-  <span href="#" class="step-item" data-bs-toggle="tooltip" title="Step 4 description">
+  <span href="#" class="step-item" data-bs-toggle="tooltip" data-bs-placement="top" title="Step 4 description">
     Step 4
   </span>
 </div>
@@ -53,7 +79,15 @@ Add tooltips, if you want to provide users with additional information about the
 
 You can customize the default progress indicator by changing the color to one that better suits your design. Click [here](/docs/ui/base/colors) to see the range of available colors.
 
-```html example
+```html
+<div class="steps steps-green">
+  ...
+</div>
+```
+
+The example below demonstrates a progress tracker with two different color schemes.
+
+```html example centered
 <div class="steps steps-green">
   <a href="#" class="step-item">
     Step 1
@@ -88,21 +122,29 @@ You can customize the default progress indicator by changing the color to one th
 
 For designs with limited space, use progress indicators without titles and add tooltips to provide the necessary details.
 
-```html example
+```html example centered
 <div class="steps">
-  <a href="#" class="step-item" data-bs-toggle="tooltip" title="Step 1 description"></a>
-  <a href="#" class="step-item" data-bs-toggle="tooltip" title="Step 2 description"></a>
-  <a href="#" class="step-item active" data-bs-toggle="tooltip" title="Step 3 description"></a>
-  <span href="#" class="step-item" data-bs-toggle="tooltip" title="Step 4 description"></span>
+  <a href="#" class="step-item" data-bs-toggle="tooltip" data-bs-placement="top" title="Step 1 description"></a>
+  <a href="#" class="step-item" data-bs-toggle="tooltip" data-bs-placement="top" title="Step 2 description"></a>
+  <a href="#" class="step-item active" data-bs-toggle="tooltip" data-bs-placement="top" title="Step 3 description"></a>
+  <span href="#" class="step-item" data-bs-toggle="tooltip" data-bs-placement="top" title="Step 4 description"></span>
 </div>
 ```
 
 ## Steps with numbers
 
-Use the `steps-counter` class to create a progress tracker with numbers instead of titles and change the color to customize it.
+Use the `steps-counter` class to create a progress tracker with numbers instead of titles and change the color to customize it. 
+
+```html
+<div class="steps steps-counter">
+  ...
+</div>
+```
+
+The example below demonstrates a progress tracker with numbers and a different color scheme.
 
-```html example
-<div class="steps steps-counter steps-lime">
+```html example centered
+<div class="steps steps-counter">
   <a href="#" class="step-item"></a>
   <a href="#" class="step-item active"></a>
   <span href="#" class="step-item"></span>

docs/ui/components/tinymce.mdx

@@ -15,7 +15,6 @@ Initialize TinyMCE 6 on any element (or elements) on the web page by passing an
 <form method="post">
   <textarea id="tinymce-default">Hello, <b>Tabler</b>!</textarea>
 </form>
-
 <script src="$TABLER_CDN/dist/libs/tinymce/tinymce.min.js" defer></script>
 <script>
   document.addEventListener("DOMContentLoaded", function() {

docs/ui/components/vector-maps.mdx

@@ -0,0 +1,170 @@
+---
+title: Vector Maps
+description: Interactive guide to creating vector maps with jsVectorMap.
+summary: Vector maps are a great way to display geographical data in an interactive and visually appealing way. Learn how to create vector maps with jsVectorMap.
+---
+
+## Installation
+
+To use vector maps in your project, you need to include the jsVectorMap 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 jsVectorMap library from a CDN:
+
+```html
+<script src="$TABLER_CDN/dist/libs/jsvectormap/dist/js/jsvectormap.min.js"></script>
+<script src="$TABLER_CDN/dist/libs/jsvectormap/dist/maps/js/jsvectormap-world.js"></script>
+```
+
+## Sample demo
+
+Integrating the vector map into your website is straightforward. Below is a sample implementation for a world map:
+
+```html
+<div id="map-world" class="w-100 h-100"></div>
+<script>
+document.addEventListener("DOMContentLoaded", function() {
+	const map = new jsVectorMap({
+		selector: '#map-world',
+		map: 'world',
+	});
+});
+</script>
+```
+
+Look at the example below to see how the vector map works with a world map.
+
+```html example vendors height="30rem" libs="jsvectormap,jsvectormap-world" background="surface" columns={2} centered
+<div class="card">
+  <div class="card-body">
+    <div class="ratio ratio-16x9">
+      <div>
+        <div id="map-world" class="w-100 h-100"></div>
+      </div>
+    </div>
+  </div>
+</div>
+
+<script>
+document.addEventListener("DOMContentLoaded", function() {
+	const map = new jsVectorMap({
+		selector: '#map-world',
+		map: 'world',
+		backgroundColor: 'transparent',
+		regionStyle: {
+			initial: {
+				fill: tabler.getColor('body-bg'),
+				stroke: tabler.getColor('border-color'),
+				strokeWidth: 2,
+			}
+		},
+		zoomOnScroll: false,
+		zoomButtons: false,
+	});
+	window.addEventListener("resize", () => {
+		map.updateSize();
+	});
+});
+</script>
+```
+
+## Markers
+
+You can add markers to the map to highlight specific locations. Below is a sample implementation for a world map with markers:
+
+```html example vendors height="30rem" libs="jsvectormap,jsvectormap-world-merc" background="surface" columns={2} centered
+<div class="card">
+  <div class="card-body">
+    <div class="ratio ratio-16x9">
+      <div>
+        <div id="map-world-markers" class="w-100 h-100"></div>
+      </div>
+    </div>
+  </div>
+</div>
+
+<script>
+      // @formatter:on
+      document.addEventListener("DOMContentLoaded", function() {
+      	const map = new jsVectorMap({
+      		selector: '#map-world-markers',
+      		map: 'world_merc',
+      		backgroundColor: 'transparent',
+      		regionStyle: {
+      			initial: {
+      				fill: tabler.getColor('body-bg'),
+      				stroke: tabler.getColor('border-color'),
+      				strokeWidth: 2,
+      			}
+      		},
+      		zoomOnScroll: false,
+      		zoomButtons: false,
+      		markers: [
+      			{
+      				coords: [61.524, 105.3188],
+      				name: "Russia",
+      			},
+      			{
+      				coords: [56.1304, -106.3468],
+      				name: "Canada",
+      			},
+      			{
+      				coords: [71.7069, -42.6043],
+      				name: "Greenland",
+      			},
+      			{
+      				coords: [26.8206, 30.8025],
+      				name: "Egypt",
+      			},
+      			{
+      				coords: [-14.235, -51.9253],
+      				name: "Brazil",
+      			},
+      			{
+      				coords: [35.8617, 104.1954],
+      				name: "China",
+      			},
+      			{
+      				coords: [37.0902, -95.7129],
+      				name: "United States",
+      			},
+      			{
+      				coords: [60.472024, 8.468946],
+      				name: "Norway",
+      			},
+      			{
+      				coords: [48.379433, 31.16558],
+      				name: "Ukraine",
+      			},
+      		],
+      		markerStyle: {
+      			initial: {
+      				r: 4,
+      				stroke: '#fff',
+      				opacity: 1,
+      				strokeWidth: 3,
+      				stokeOpacity: .5,
+      				fill: tabler.getColor('blue')
+      			},
+      			hover: {
+      				fill: tabler.getColor('blue'),
+      				stroke: tabler.getColor('blue')
+      			}
+      		},
+      		markerLabelStyle: {
+      			initial: {
+      				fontSize: 10
+      			},
+      		},
+      		labels: {
+      			markers: {
+      				render: function(marker) {
+      					return marker.name
+      				},
+      			},
+      		},
+      	});
+      	window.addEventListener("resize", () => {
+      		map.updateSize();
+      	});
+      });
+      // @formatter:off
+    </script>
+```

docs/ui/forms/form-elements.mdx

@@ -140,7 +140,6 @@ Include an additional element in your input section, such as a button which can
     </div>
     <div class="col-auto">
       <a href="#" class="btn btn-icon" aria-label="Button">
-
         <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">
           <path stroke="none" d="M0 0h24v24H0z" fill="none" />
           <circle cx="10" cy="10" r="7" />

docs/ui/getting-started/browser-support.mdx

@@ -4,9 +4,11 @@ description: Check browser compatibility for Tabler.
 summary: Learn about the supported browsers and compatibility guidelines for using Tabler UI components to ensure a consistent experience across different devices and platforms.
 ---
 
-As of this latest release, Tabler has launched many new features that may not be compatible with all browsers, especially older ones.
+Tabler is fully optimized for all modern browsers, including the latest versions of Chrome, Firefox, Edge, Safari, and Opera. These browsers ensure a seamless and responsive experience, allowing users to enjoy Tabler's advanced UI components without compatibility issues.
 
-For instance, Tabler no longer uses **vendor prefixes** in styles that are known to have some compatibility issues except for a few parts. Tabler also supports new features such as **CSS grid**, **object fit**, and **sticky positioning** which is not yet supported on all browsers. In short, Tabler supports all the latest supported browsers with **only** partial support for Internet Explorer.
+In this latest release, Tabler introduces modern features like CSS Grid, object fit, and sticky positioning, which enhance design flexibility but may not be fully supported on older browsers. While Tabler has dropped most vendor prefixes to streamline its styles, partial support remains for Internet Explorer, with some features potentially limited.
+
+For the best experience, we recommend using one of the latest supported browsers to take full advantage of Tabler’s capabilities and design precision.
 
 ## Supported Browsers
 
@@ -20,3 +22,7 @@ Browser|Version
 <img src="/docs/browsers/electron.svg" width="48" height="48" alt="Electron Logo"/>|last 3 versions
 <img src="/docs/browsers/brave.svg" width="48" height="48" alt="Brave Logo"/>|last 3 versions
 <img src="/docs/browsers/vivaldi.svg" width="48" height="48" alt="Vivaldi Logo"/>|last 3 versions
+
+## Internet Explorer
+
+Internet Explorer is not supported.

docs/ui/getting-started/development.mdx

@@ -1,32 +0,0 @@
----
-title: Development
-description: Learn how to install Tabler and set up the development environment.
-summary: This guide provides step-by-step instructions for setting up the environment, including installing Node.js, Ruby, and Bundler, configuring the build system, and running Tabler locally to preview changes in real-time, along with guidance on reporting bugs or submitting feature requests through GitHub.
-order: 11
----
-
-## Set up the environment
-
-To use our build system and run our documentation locally, you'll need a copy of Tabler's source files. Follow the steps below:
-
-1. [Install Node.js](https://nodejs.org/download/), which we use to manage our dependencies.
-2. Navigate to the root `/tabler` directory and run `npm install` to install our local dependencies listed in `package.json`.
-3. [Install Ruby](https://ruby-lang.org/en/documentation/installation/) - the recommended version is [2.5.5](https://cache.ruby-lang.org/pub/ruby/2.5/ruby-2.5.5.tar.gz).
-4. [Install Bundler](https://bundler.io) with `gem install bundler` and, finally, run `bundle install`. It will install all Ruby dependencies, such as [Jekyll and plugins](https://jekyllrb.com).
-
-### Windows users
-1. [Install Git](https://git-scm.com/download/win) in `C:\Program Files\git\bin` directory and run `npm config set script-shell "C:\Program Files\git\bin\bash.exe"` to change the default shell.
-2. [Install Ruby+Devkit](https://rubyinstaller.org/downloads/) - recommended version is [2.5.5](https://github.com/oneclick/rubyinstaller2/releases/download/RubyInstaller-2.5.5-1/rubyinstaller-devkit-2.5.5-1-x86.exe).
-3. [Read guide](https://jekyllrb.com/docs/installation/windows/) to get Jekyll up and running without problems.
-
-Once you've completed the setup, you'll be able to run the various commands provided from the command line.
-
-## Build Tabler locally
-
-1. From the root `/tabler` directory, run `npm run start` in the command line.
-2. Open [http://localhost:3000](http://localhost:3000) in your browser, and voilà.
-3. Any change in `/src` directory will build the application and refresh the page.
-
-## Bugs and feature requests
-
-Found a bug or have a feature request? [Please open a new issue](https://github.com/tabler/tabler/issues/new).

docs/ui/getting-started/how-to-contribute.mdx

@@ -0,0 +1,96 @@
+---
+title: How to Contribute
+summary: This guide explains how to contribute to Tabler, from setting up a development environment to making and testing changes. It covers essential steps like forking the repository, installing dependencies, and submitting a pull request to help improve Tabler's features and functionality.
+description: Guide to contributing to Tabler and setting up for development.
+---
+
+Contributions are always welcome and highly encouraged! Whether you're new to open source or a seasoned contributor, your input helps make Tabler better for everyone. If you're new to open source, [start here](https://opensource.guide/how-to-contribute/) to learn more about contributing.
+
+## Contribution Requirements
+
+When contributing to Tabler, please adhere to the following guidelines:
+
+1. By submitting a contribution, you grant a non-exclusive license to the Tabler project to use your contribution in any context deemed appropriate.
+2. If your contribution includes content from other sources, it must be appropriately licensed under an open source license.
+3. Contributions must be submitted via GitHub pull requests.
+4. Ensure your code works in all supported browsers (refer to our [browser support documentation](/docs/ui/getting-started/browser-support)).
+
+## Installation
+
+Follow these steps to set up Tabler for development:
+
+1. Fork the repository: [Guide to forking](https://docs.github.com/en/get-started/quickstart/fork-a-repo).
+
+2. Clone the repository to your local machine:
+
+   ```bash
+   git clone https://github.com/YOUR_USERNAME/tabler.git
+   ```
+
+3. Create a new branch for your changes:
+
+   ```bash
+   git checkout -b your-branch-name
+	```
+
+## Development
+
+To set up Tabler for development, follow these steps:
+
+<div className="steps">
+
+### Ensure Node.js and npm are installed
+
+You’ll need Node.js (v20 or higher) and pnpm to compile Tabler’s files. If you don’t have them installed, download and install them from the official websites:
+
+- [Node.js](https://nodejs.org/)
+- [pnpm](https://pnpm.io/)
+
+### Install Ruby and Bundler
+
+Tabler uses Ruby and Bundler to manage dependencies. Install Ruby and Bundler by following the instructions in the [Ruby documentation](https://www.ruby-lang.org/en/documentation/installation/) and the [Bundler website](https://bundler.io/). 
+
+### Install dependencies
+
+Run the following command to install all required npm packages. We recommend using pnpm for faster installation:
+
+```bash
+pnpm install
+```
+
+### Install Jekyll
+
+Tabler uses Jekyll to build the documentation. Install Jekyll by running the following command:
+
+```bash
+bundle install
+```
+
+### Start developer mode
+
+Use the following command to enable autocompilation with live reload. This will start a local server at `http://localhost:3000/`:
+
+```bash
+pnpm run dev
+```
+
+### Make changes
+
+Make your changes in the appropriate folders, such as `./src/` or `./docs/`. Avoid modifying files in `./dist/`, as they are auto-generated during the build process and will be overwritten.
+</div>
+
+## Compiling for Production
+
+Before submitting a pull request, ensure your changes are properly compiled and tested:
+
+1. Compile the production files
+
+	```bash
+	pnpm run build
+	```
+
+2. Test all pages to confirm everything works as expected.
+
+## Submitting Your Contribution
+
+Once your changes are ready, create a pull request (PR) on GitHub. Make sure to include a clear and concise description of the changes and their purpose. Thank you for contributing to Tabler!

docs/ui/getting-started/installation.mdx

@@ -0,0 +1,67 @@
+---
+title: Installation
+order: 1
+summary: Learn how to set up Tabler in your project by creating a basic HTML file, adding Tabler’s CSS and JavaScript, and exploring its powerful components to build responsive and visually stunning web applications.
+description: "Set up Tabler: HTML, CSS, JS, and build stunning UIs."
+---
+
+This guide will take you through the essential steps to set up Tabler in your project, from creating a basic HTML file to incorporating Tabler’s styles and scripts. Let’s dive in!
+
+<div className="steps">
+
+### Step 1: Create a Basic HTML File
+
+Begin by creating a new `index.html` file in the root of your project. This file will serve as the foundation for your Tabler-based interface. Include the basic HTML structure and a `<meta name="viewport">` tag for proper responsiveness:
+
+```html
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>Tabler demo</title>
+</head>
+<body>
+  <h1>Hello, world!</h1>
+</body>
+</html>
+```
+
+### Step 2: Add Tabler CSS and JavaScript
+
+Enhance your page by including Tabler's CSS and JavaScript files. Use the following links to load the core Tabler styles and scripts from the CDN:
+
+```html
+<link rel="stylesheet" href="$TABLER_CDN/dist/css/tabler.min.css">
+<script src="$TABLER_CDN/dist/js/tabler.min.js"></script>
+```
+
+Update your HTML file to include these resources:
+
+```html
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>Tabler Demo</title>
+  <link rel="stylesheet" href="$TABLER_CDN/dist/css/tabler.min.css">
+</head>
+<body>
+  <h1>Hello, Tabler!</h1>
+  <script src="$TABLER_CDN/dist/js/tabler.min.js"></script>
+</body>
+</html>
+```
+
+This setup includes the Tabler CSS and JavaScript via a CDN, providing a responsive and functional base for your project.
+
+You can also download the files and include them locally in your project. For more information, see the [Download](/docs/ui/getting-started/download) page.
+
+### 3. Open in Your Browser
+
+Save the file and open it in your browser. You should see your first Tabler-powered page! From here, you can start adding layouts and components to create a fully functional and visually appealing web application.
+
+</div>
+
+With these simple steps, you're ready to explore Tabler's features and build stunning web interfaces. For inspiration and guidance, you can view live demos at [preview.tabler.io](https://preview.tabler.io) and consult our [official documentation](https://tabler.io/docs) for detailed instructions and examples.

docs/ui/getting-started/license.mdx

@@ -0,0 +1,30 @@
+---
+title: Tabler License
+summary: The MIT license grants you the flexibility to use Tabler in commercial or personal projects, modify its code, and distribute it freely. Ensure you include the required license and copyright notices to stay compliant with the terms.
+description: "Tabler's MIT license: freedom to use, modify, and share."
+---
+
+Tabler is an open-source project licensed under the **MIT license**, giving you extensive freedom to use, modify, and distribute the software. This license ensures that you can adapt Tabler to your needs while maintaining the required attributions. While attribution is not required, it is greatly appreciated to acknowledge the hard work of the developers.
+
+## What You Can Do with Tabler
+
+The MIT license allows you to:
+- Use Tabler in **commercial projects**.
+- Use Tabler in **personal or private projects**.
+- **Modify and customize** the source code to fit your requirements.
+- **Distribute** the original or modified code.
+- **Sublicense**: Integrate Tabler into projects with a more restrictive license.
+
+## What You Cannot Do with Tabler
+
+- The software is provided **“as is”**, meaning you cannot hold the authors or contributors liable for any issues, bugs, or damages that may arise from its use.
+
+## What You Must Do When Using Tabler
+
+When using Tabler, you must:
+1. Include the **license notice** in all copies of the work.
+2. Include the **copyright notice** in all copies of the work, except for the footer of the example HTML pages provided in the repository.
+
+For more details, please refer to the full [Tabler License](https://github.com/tabler/tabler/blob/main/LICENSE).
+
+By adhering to these requirements, you help ensure the continued openness and usability of Tabler for everyone. Thank you for supporting open-source software!

docs/ui/layout/page-layouts.mdx

@@ -19,7 +19,6 @@ description: Learn to design dashboard layouts.
           <img src="https://preview.tabler.io/static/logo.svg" width="110" height="32" alt="Tabler" class="navbar-brand-image" />
         </a>
       </h1>
-
       <div class="navbar-nav flex-row order-md-last">
         <div class="nav-item">
           <a href="#" class="nav-link d-flex lh-1 text-reset p-0">

docs/ui/utilities/borders.mdx

@@ -6,7 +6,17 @@ description: Style elements with border utilities.
 
 ## Border direction
 
-The following border utilities classes will add border to any side of an element.
+Borders can be applied to specific sides of an element using utility classes. This is particularly useful for styling individual sides of a box, such as highlighting the top border for emphasis or applying a separator between elements. Below are examples of how to set borders for each side of an element.
+
+```html
+<div class="border">1</div>
+<div class="border-top">2</div>
+<div class="border-end">3</div>
+<div class="border-bottom">4</div>
+<div class="border-start">5</div>
+<div class="border-x">6</div>
+<div class="border-y">7</div>
+```
 
 ```html example centered separated background="white"
 <div class="d-flex align-items-center justify-content-center text-secondary w-5 h-5 bg-light border">1</div>
@@ -18,25 +28,10 @@ The following border utilities classes will add border to any side of an element
 <div class="d-flex align-items-center justify-content-center text-secondary w-5 h-5 bg-light border-y">7</div>
 ```
 
-```html
-<div class="border">1</div>
-<div class="border-top">2</div>
-<div class="border-end">3</div>
-<div class="border-bottom">4</div>
-<div class="border-start">5</div>
-<div class="border-x">6</div>
-<div class="border-y">7</div>
-```
 
 ## Border size
 
-Below are the available border size utilities classes.
-
-```html example centered separated background="white"
-<div class="d-flex align-items-center justify-content-center text-secondary w-5 h-5 bg-light border-0">1</div>
-<div class="d-flex align-items-center justify-content-center text-secondary w-5 h-5 bg-light border">2</div>
-<div class="d-flex align-items-center justify-content-center text-secondary w-5 h-5 bg-light border-wide">3</div>
-```
+Border size utilities allow you to control the thickness of borders, providing flexibility to suit different design needs. You can add no border, a standard border, or a wide border for a more prominent effect. These classes are especially useful for creating visual hierarchy or highlighting specific elements.
 
 ```html
 <div class="border-0">1</div>
@@ -44,9 +39,24 @@ Below are the available border size utilities classes.
 <div class="border-wide">3</div>
 ```
 
+```html example centered separated background="white"
+<div class="d-flex align-items-center justify-content-center text-secondary w-5 h-5 bg-light border-0">1</div>
+<div class="d-flex align-items-center justify-content-center text-secondary w-5 h-5 bg-light border">2</div>
+<div class="d-flex align-items-center justify-content-center text-secondary w-5 h-5 bg-light border-wide">3</div>
+```
+
 ## Remove border
 
-You can remove a border on a single side of an element by using the following border utilities classes.
+If you want to selectively remove borders from specific sides of an element, you can use border removal utilities. This feature simplifies styling tasks, such as creating a seamless connection between elements or achieving minimalistic designs.
+
+```html
+<div class="border border-top-0">1</div>
+<div class="border border-end-0">2</div>
+<div class="border border-bottom-0">3</div>
+<div class="border border-start-0">4</div>
+<div class="border border-x-0">5</div>
+<div class="border border-y-0">6</div>
+```
 
 ```html example centered separated background="white"
 <div class="d-flex align-items-center justify-content-center text-secondary w-5 h-5 bg-light border border-top-0">1</div>
@@ -57,29 +67,10 @@ You can remove a border on a single side of an element by using the following bo
 <div class="d-flex align-items-center justify-content-center text-secondary w-5 h-5 bg-light border border-y-0">6</div>
 ```
 
-```html
-<div class="border border-top-0">1</div>
-<div class="border border-end-0">2</div>
-<div class="border border-bottom-0">3</div>
-<div class="border border-start-0">4</div>
-<div class="border border-x-0">5</div>
-<div class="border border-y-0">6</div>
-```
 
 ## Border color
 
-You can set a border color of any side of an element by adding the following utilities classes below.
-
-```html example centered separated background="white"
-<div class="d-flex align-items-center justify-content-center text-secondary w-5 h-5 bg-light border border-primary">1</div>
-<div class="d-flex align-items-center justify-content-center text-secondary w-5 h-5 bg-light border border-secondary">2</div>
-<div class="d-flex align-items-center justify-content-center text-secondary w-5 h-5 bg-light border border-success">3</div>
-<div class="d-flex align-items-center justify-content-center text-secondary w-5 h-5 bg-light border border-warning">4</div>
-<div class="d-flex align-items-center justify-content-center text-secondary w-5 h-5 bg-light border border-danger">5</div>
-<div class="d-flex align-items-center justify-content-center text-secondary w-5 h-5 bg-light border border-info">6</div>
-<div class="d-flex align-items-center justify-content-center text-secondary w-5 h-5 bg-light border border-dark">7</div>
-<div class="d-flex align-items-center justify-content-center text-secondary w-5 h-5 bg-light border border-light">8</div>
-```
+Customizing the border color helps to enhance the visual appeal and consistency of your design. With utility classes, you can easily apply specific colors to borders, allowing for greater flexibility in creating visually distinct sections.
 
 ```html
 <div class="border border-primary">1</div>
@@ -92,19 +83,21 @@ You can set a border color of any side of an element by adding the following uti
 <div class="border border-light">8</div>
 ```
 
-## Border radius
-
-You can set a border to any element by using the following utilities classes below.
-
 ```html example centered separated background="white"
-<div class="d-flex align-items-center justify-content-center text-secondary  w-5 h-5 bg-light border rounded-0">1</div>
-<div class="d-flex align-items-center justify-content-center text-secondary  w-5 h-5 bg-light border rounded">2</div>
-<div class="d-flex align-items-center justify-content-center text-secondary  w-5 h-5 bg-light border rounded-1">3</div>
-<div class="d-flex align-items-center justify-content-center text-secondary  w-5 h-5 bg-light border rounded-2">4</div>
-<div class="d-flex align-items-center justify-content-center text-secondary  w-5 h-5 bg-light border rounded-3">5</div>
-<div class="d-flex align-items-center justify-content-center text-secondary  w-5 h-5 bg-light border rounded-circle">6</div>
+<div class="d-flex align-items-center justify-content-center text-secondary w-5 h-5 bg-light border border-primary">1</div>
+<div class="d-flex align-items-center justify-content-center text-secondary w-5 h-5 bg-light border border-secondary">2</div>
+<div class="d-flex align-items-center justify-content-center text-secondary w-5 h-5 bg-light border border-success">3</div>
+<div class="d-flex align-items-center justify-content-center text-secondary w-5 h-5 bg-light border border-warning">4</div>
+<div class="d-flex align-items-center justify-content-center text-secondary w-5 h-5 bg-light border border-danger">5</div>
+<div class="d-flex align-items-center justify-content-center text-secondary w-5 h-5 bg-light border border-info">6</div>
+<div class="d-flex align-items-center justify-content-center text-secondary w-5 h-5 bg-light border border-dark">7</div>
+<div class="d-flex align-items-center justify-content-center text-secondary w-5 h-5 bg-light border border-light">8</div>
 ```
 
+## Border radius
+
+Adding border radius gives elements smooth, rounded edges, which can make designs feel more modern and approachable. You can choose from various levels of rounding, including full circles, using the available utility classes.
+
 ```html
 <div class="border rounded-0">1</div>
 <div class="border rounded">2</div>
@@ -113,3 +106,29 @@ You can set a border to any element by using the following utilities classes bel
 <div class="border rounded-3">5</div>
 <div class="border rounded-circle">6</div>
 ```
+
+```html example centered separated background="white"
+<div class="d-flex align-items-center justify-content-center text-secondary w-6 h-6 bg-light border rounded-0">1</div>
+<div class="d-flex align-items-center justify-content-center text-secondary w-6 h-6 bg-light border rounded">2</div>
+<div class="d-flex align-items-center justify-content-center text-secondary w-6 h-6 bg-light border rounded-1">3</div>
+<div class="d-flex align-items-center justify-content-center text-secondary w-6 h-6 bg-light border rounded-2">4</div>
+<div class="d-flex align-items-center justify-content-center text-secondary w-6 h-6 bg-light border rounded-3">5</div>
+<div class="d-flex align-items-center justify-content-center text-secondary w-6 h-6 bg-light border rounded-circle">6</div>
+```
+
+
+## Border opacity
+
+You can adjust the opacity of borders to create subtle visual effects or to blend elements seamlessly into the background. By using border opacity utilities, you can control the transparency of borders, allowing for more creative and visually appealing designs. To change the opacity of a border, add the `border-opacity-*` class to the element.
+
+```html
+<div class="border border-success border-opacity-50">This is 50% opacity success border</div>
+```
+
+```html example 
+<div class="border border-success p-2 mb-2">This is default success border</div>
+<div class="border border-success p-2 mb-2 border-opacity-75">This is 75% opacity success border</div>
+<div class="border border-success p-2 mb-2 border-opacity-50">This is 50% opacity success border</div>
+<div class="border border-success p-2 mb-2 border-opacity-25">This is 25% opacity success border</div>
+<div class="border border-success p-2 border-opacity-10">This is 10% opacity success border</div>
+```

docs/ui/utilities/cursors.mdx

@@ -24,56 +24,6 @@ Use one of the available cursor utilities depending on the action you want to in
 - `.cursor-grab` - a cursor which shows that a user can grab an element
 - `.cursor-grabbing` - a cursor which shows that a user is grabbing an element
 
-```html example background="white" height="20rem" vcentered
-<div class="row row-cards text-center">
-  <div class="col-2">
-    <div class="cursor-auto bg-light py-3">auto</div>
-  </div>
-  <div class="col-2">
-    <div class="cursor-pointer bg-light py-3">pointer</div>
-  </div>
-  <div class="col-2">
-    <div class="cursor-move bg-light py-3">move</div>
-  </div>
-  <div class="col-2">
-    <div class="cursor-not-allowed bg-light py-3">not-allowed</div>
-  </div>
-  <div class="col-2">
-    <div class="cursor-zoom-in bg-light py-3">zoom-in</div>
-  </div>
-  <div class="col-2">
-    <div class="cursor-zoom-out bg-light py-3">zoom-out</div>
-  </div>
-  <div class="col-2">
-    <div class="cursor-default bg-light py-3">default</div>
-  </div>
-  <div class="col-2">
-    <div class="cursor-none bg-light py-3">none</div>
-  </div>
-  <div class="col-2">
-    <div class="cursor-help bg-light py-3">help</div>
-  </div>
-  <div class="col-2">
-    <div class="cursor-progress bg-light py-3">progress</div>
-  </div>
-  <div class="col-2">
-    <div class="cursor-wait bg-light py-3">wait</div>
-  </div>
-  <div class="col-2">
-    <div class="cursor-text bg-light py-3">text</div>
-  </div>
-  <div class="col-2">
-    <div class="cursor-v-text bg-light py-3">vertical-text</div>
-  </div>
-  <div class="col-2">
-    <div class="cursor-grab bg-light py-3">grab</div>
-  </div>
-  <div class="col-2">
-    <div class="cursor-grabbing bg-light py-3">grabbing</div>
-  </div>
-</div>
-```
-
 ```html
 <div class="cursor-auto">auto</div>
 <div class="cursor-pointer">pointer</div>
@@ -91,3 +41,23 @@ Use one of the available cursor utilities depending on the action you want to in
 <div class="cursor-grab">grab</div>
 <div class="cursor-grabbing">grabbing</div>
 ```
+
+The results can be seen in the example below.
+
+```html example height="20rem" separated centered
+<div class="cursor-auto bg-light p-3">auto</div>
+<div class="cursor-pointer bg-light p-3">pointer</div>
+<div class="cursor-move bg-light p-3">move</div>
+<div class="cursor-not-allowed bg-light p-3">not-allowed</div>
+<div class="cursor-zoom-in bg-light p-3">zoom-in</div>
+<div class="cursor-zoom-out bg-light p-3">zoom-out</div>
+<div class="cursor-default bg-light p-3">default</div>
+<div class="cursor-none bg-light p-3">none</div>
+<div class="cursor-help bg-light p-3">help</div>
+<div class="cursor-progress bg-light p-3">progress</div>
+<div class="cursor-wait bg-light p-3">wait</div>
+<div class="cursor-text bg-light p-3">text</div>
+<div class="cursor-v-text bg-light p-3">vertical-text</div>
+<div class="cursor-grab bg-light p-3">grab</div>
+<div class="cursor-grabbing bg-light p-3">grabbing</div>
+```

docs/ui/utilities/interactions.mdx

@@ -8,7 +8,7 @@ description: Modify user interactions efficiently.
 
 Change the way in which the content is selected when the user interacts with it.
 
-```html example
+```html example columns={1} centered separated
 <p class="user-select-all">This paragraph will be entirely selected when clicked by the user.</p>
 <p class="user-select-auto">This paragraph has default select behavior.</p>
 <p class="user-select-none">This paragraph will not be selectable when clicked by the user.</p>
@@ -18,7 +18,7 @@ Change the way in which the content is selected when the user interacts with it.
 
 Tabler provides `.pe-none` and `.pe-auto` classes to prevent or add element interactions.
 
-```html example
+```html example columns={1} centered separated
 <p>
   <a href="#" class="pe-none" tabindex="-1" aria-disabled="true">This link</a> can not be clicked.
 </p>

docs/ui/utilities/margins.mdx

@@ -0,0 +1,234 @@
+---
+title: Margins
+summary: Use margin utilities to control the space between elements.
+description: Control the space between elements with margin utilities.
+---
+
+Margin utilities allow you to control the space between elements, providing flexibility to suit different design needs. These utilities are especially useful for creating spacing between components or aligning them consistently. Below are examples of how to use margin utilities for various directions and sizes.
+
+
+### Margin size
+
+In table below you can see the available margin sizes.
+
+Name|Value
+-|-
+0|0
+1|0.25rem
+2|0.5rem
+3|1rem
+4|1.5rem
+5|2rem
+6|3rem
+7|5rem
+8|8rem
+
+
+### Margin
+
+Use the `.m-*` utilities to control the margin of an element. Margin utilities are used to create consistent spacing around an element, ensuring that the layout is visually balanced.
+
+```html example hide-code centered separated vertical
+<div class="d-flex">
+  <div class="bg-purple-lt">
+    <div class="px-3 py-2 m-0 bg-purple rounded text-white font-monospace">.m-0</div>
+  </div>
+</div>
+<div class="d-flex">
+  <div class="bg-purple-lt">
+    <div class="px-3 py-2 m-4 bg-purple rounded text-white font-monospace">.m-4</div>
+  </div>
+</div>
+<div class="d-flex">
+  <div class="bg-purple-lt">
+    <div class="px-3 py-2 m-8 bg-purple rounded text-white font-monospace">.m-8</div>
+  </div>
+</div>
+```
+
+### Start margin
+
+Start margins control the spacing to the left of an element, helping to create consistent horizontal gaps between elements. Start margin class names are prefixed with `ms-`.
+
+```html
+<div class="ms-4">...</div>
+```
+
+```html example hide-code centered separated vertical
+<div class="d-flex">
+  <div class="bg-red-lt">
+    <div class="px-3 py-2 ms-0 bg-red rounded text-white font-monospace">.ms-0</div>
+  </div>
+</div>
+<div class="d-flex">
+  <div class="bg-red-lt">
+    <div class="px-3 py-2 ms-4 bg-red rounded text-white font-monospace">.ms-4</div>
+  </div>
+</div>
+<div class="d-flex">
+  <div class="bg-red-lt">
+    <div class="px-3 py-2 ms-8 bg-red rounded text-white font-monospace">.ms-8</div>
+  </div>
+</div>
+```
+
+### End margin
+
+End margins control the spacing on the right side of an element. These utilities are helpful for creating visual separation between elements that flow horizontally. End margin class names are prefixed with `me-`.
+
+```html
+<div class="me-4">...</div>
+```
+
+```html example hide-code centered separated vertical
+<div class="d-flex">
+  <div class="bg-orange-lt">
+    <div class="px-3 py-2 ms-0 bg-orange rounded text-white font-monospace">.me-0</div>
+  </div>
+</div>
+<div class="d-flex">
+  <div class="bg-orange-lt">
+    <div class="px-3 py-2 me-4 bg-orange rounded text-white font-monospace">.me-4</div>
+  </div>
+</div>
+<div class="d-flex">
+  <div class="bg-orange-lt">
+    <div class="px-3 py-2 me-8 bg-orange rounded text-white font-monospace">.me-8</div>
+  </div>
+</div>
+```
+
+### Top margin
+
+Top margins define the spacing above an element. This is useful for separating stacked components or creating vertical spacing between sections. Top margin class names are prefixed with `mt-`.
+
+```html
+<div class="mt-4">...</div>
+```
+
+```html example hide-code centered separated vertical
+<div class="d-flex">
+  <div class="bg-yellow-lt">
+    <div class="px-3 py-2 mt-0 bg-yellow rounded text-white font-monospace">.mt-0</div>
+  </div>
+</div>
+<div class="d-flex">
+  <div class="bg-yellow-lt">
+    <div class="px-3 py-2 mt-4 bg-yellow rounded text-white font-monospace">.mt-4</div>
+  </div>
+</div>
+<div class="d-flex">
+  <div class="bg-yellow-lt">
+    <div class="px-3 py-2 mt-8 bg-yellow rounded text-white font-monospace">.mt-8</div>
+  </div>
+</div>
+```
+
+### Bottom margin
+
+Bottom margins control the spacing below an element, helping to create consistent vertical gaps between stacked elements. Bottom margin class names are prefixed with `mb-`.
+
+```html
+<div class="mb-4">...</div>
+```
+
+```html example hide-code centered separated vertical
+<div class="d-flex">
+  <div class="bg-lime-lt">
+    <div class="px-3 py-2 mb-0 bg-lime rounded text-white font-monospace">.mb-0</div>
+  </div>
+</div>
+<div class="d-flex">
+  <div class="bg-lime-lt">
+    <div class="px-3 py-2 mb-4 bg-lime rounded text-white font-monospace">.mb-4</div>
+  </div>
+</div>
+<div class="d-flex">
+  <div class="bg-lime-lt">
+    <div class="px-3 py-2 mb-8 bg-lime rounded text-white font-monospace">.mb-8</div>
+  </div>
+</div>
+```
+
+### Horizontal margin
+
+Use the `mx-*` utilities to control the horizontal margin of an element. Horizontal margin utilities are used to create consistent spacing between elements that flow horizontally.
+
+```html
+<div class="mx-4">...</div>
+```
+
+```html example hide-code centered separated vertical
+<div class="d-flex">
+  <div class="bg-azure-lt">
+    <div class="px-3 py-2 mx-0 bg-azure rounded text-white font-monospace">.mx-0</div>
+  </div>
+</div>
+<div class="d-flex">
+  <div class="bg-azure-lt">
+    <div class="px-3 py-2 mx-4 bg-azure rounded text-white font-monospace">.mx-4</div>
+  </div>
+</div>
+<div class="d-flex">
+  <div class="bg-azure-lt">
+    <div class="px-3 py-2 mx-8 bg-azure rounded text-white font-monospace">.mx-8</div>
+  </div>
+</div>
+```
+
+
+### Vertical margin
+
+Use the `my-*` utilities to control the vertical margin of an element. Vertical margin utilities are used to create consistent spacing between elements that flow vertically.
+
+```html
+<div class="my-4">...</div>
+```
+
+```html example hide-code centered separated vertical
+<div class="d-flex">
+  <div class="bg-blue-lt">
+    <div class="px-3 py-2 my-0 bg-blue rounded text-white font-monospace">.my-0</div>
+  </div>
+</div>
+<div class="d-flex">
+  <div class="bg-blue-lt">
+    <div class="px-3 py-2 my-4 bg-blue rounded text-white font-monospace">.my-4</div>
+  </div>
+</div>
+<div class="d-flex">
+  <div class="bg-blue-lt">
+    <div class="px-3 py-2 my-8 bg-blue rounded text-white font-monospace">.my-8</div>
+  </div>
+</div>
+```
+
+## Horizontal centering
+
+Additionally, Tabler also includes an `.mx-auto` class for horizontally centering fixed-width block level content—that is, content that has `display: block` and a width set—by setting the horizontal margins to `auto`.
+
+```html
+<div class="mx-auto">...</div>
+```
+
+```html example hide-code centered vertical
+<div class="bg-teal-lt w-100 d-flex">
+  <div class="px-3 py-2 mx-auto bg-teal rounded text-white font-monospace">.mx-auto</div>
+</div>
+```
+
+## Gap
+
+Use the `.gap-*` utilities to control the space between elements in a grid layout. The gap utilities are used to create consistent spacing between grid items, ensuring that the layout is visually balanced.
+
+```html
+<div class="d-grid gap-6">...</div>
+```
+
+```html example 
+<div class="d-grid gap-6 bg-indigo-lt">
+  <div class="px-3 py-2 bg-indigo text-white rounded">Grid item 1</div>
+  <div class="px-3 py-2 bg-indigo text-white rounded">Grid item 2</div>
+  <div class="px-3 py-2 bg-indigo text-white rounded">Grid item 3</div>
+</div>
+```

docs/ui/utilities/vertical-align.mdx

@@ -0,0 +1,66 @@
+---
+title: Vertical align
+description: Quickly and easily align elements vertically with utility classes.
+summary: Easily modify the vertical alignment of elements such as inline, inline-block, inline-table, and table-cell to ensure proper positioning and alignment within their parent containers, allowing for more precise control over your layout and design.
+---
+
+Choose from `.align-baseline`, `.align-top`, `.align-middle`, `.align-bottom`, `.align-text-bottom`, and `.align-text-top` as needed.
+
+## Inline elements
+
+Use vertical alignment utilities to align inline-level elements relative to their surrounding text or baseline. These classes are particularly useful for aligning small inline elements like icons or badges alongside text.
+
+```html
+<span class="align-baseline">baseline</span>
+<span class="align-top">top</span>
+<span class="align-middle">middle</span>
+<span class="align-bottom">bottom</span>
+<span class="align-text-top">text-top</span>
+<span class="align-text-bottom">text-bottom</span>
+```
+
+```html example centered 
+<div>
+  <span class="align-baseline">baseline</span>
+  <span class="align-top">top</span>
+  <span class="align-middle">middle</span>
+  <span class="align-bottom">bottom</span>
+  <span class="align-text-top">text-top</span>
+  <span class="align-text-bottom">text-bottom</span>
+</div>
+```
+
+## Table cells
+
+Vertical alignment utilities are also applicable to table cells, allowing you to control the alignment of content within a cell. This is especially useful for creating well-structured and visually appealing tables where the content aligns consistently across rows and columns.
+
+
+```html
+<table>
+  <tbody>
+    <tr>
+      <td class="align-baseline">baseline</td>
+      <td class="align-top">top</td>
+      <td class="align-middle">middle</td>
+      <td class="align-bottom">bottom</td>
+      <td class="align-text-top">text-top</td>
+      <td class="align-text-bottom">text-bottom</td>
+    </tr>
+  </tbody>
+</table>
+```
+
+```html example
+<table style="height: 100px;">
+  <tbody>
+    <tr>
+      <td class="align-baseline">baseline</td>
+      <td class="align-top">top</td>
+      <td class="align-middle">middle</td>
+      <td class="align-bottom">bottom</td>
+      <td class="align-text-top">text-top</td>
+      <td class="align-text-bottom">text-bottom</td>
+    </tr>
+  </tbody>
+</table>
+```

docs/ui/utilities/visually-hidden.mdx

@@ -0,0 +1,12 @@
+---
+title: Visually hidden
+summary: Use these helpers to visually hide elements but keep them accessible to assistive technologies.
+---
+
+Visually hide an element while still allowing it to be exposed to assistive technologies (such as screen readers) with `.visually-hidden`. Use `.visually-hidden-focusable` to visually hide an element by default, but to display it when it's focused (e.g. by a keyboard-only user). `.visually-hidden-focusable` can also be applied to a container–thanks to `:focus-within`, the container will be displayed when any child element of the container receives focus.
+
+```html
+<h2 class="visually-hidden">Title for screen readers</h2>
+<a class="visually-hidden-focusable" href="#content">Skip to main content</a>
+<div class="visually-hidden-focusable">A container with a <a href="#">focusable element</a>.</div>
+```

src/pages/datatables.html

@@ -7,7 +7,7 @@ menu: base.datatables
 
 {% assign id = include.map-id | default: 'default' %}
 <div class="card">
-	<div class="card-body">
+	<div class="card-body p-0">
 		{% assign products = 'Tabler,Tabler Icons,Tabler Emails,Tabler Components,Tabler Illustrations,Bootstrap' | split: ',' %}
 		{% assign techs = 'brand-apple,brand-windows,brand-debian,brand-android' | split: ',' %}
 		<div id="table-{{ id }}" class="table-responsive">

src/scss/_utilities.scss

@@ -6,6 +6,11 @@ $border-values: (
   0: 0,
 );
 
+$utilities-border-colors: map-loop((
+  "red": red,
+  "green": green,
+), rgba-css-var, "$key", "border") !default;
+
 //Utilities
 $utilities: (
   "object": (

src/scss/utils/_colors.scss

@@ -13,7 +13,7 @@
   }
 
   .border-#{"" + $color} {
-    border-color: $value !important;
+    border-color: rgba(var(--#{$prefix}#{$color}-rgb), var(--#{$prefix}border-opacity)) !important;
   }
 }
 

src/scss/vendor/_dropzone.scss

@@ -1,7 +1,7 @@
 .dropzone {
-  border: var(--#{$prefix}border-width) dashed var(--#{$prefix}border-color);
-  color: var(--#{$prefix}secondary);
-  padding: 1rem;
+  border: var(--#{$prefix}border-width) dashed var(--#{$prefix}border-color) !important;
+  color: var(--#{$prefix}secondary) !important;
+  padding: 1rem !important;
 
   &.dz-drag-hover {
     border: var(--#{$prefix}border-width) dashed var(--#{$prefix}primary);