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