@tabler/core 1.0.0-beta23 → 1.0.0-beta24

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

package/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'), {

package/docs/ui/components/countup.mdx

@@ -5,13 +5,23 @@ libs: countup
 description: Display numbers dynamically with countups.
 ---
 
+The countup component is used to display numbers dynamically. It is a great way to make the interface more interactive and engaging. The countup component is a simple and easy way to animate numbers in your application.
+
 To be able to use the countup in your application you will need to install the countup.js dependency with `npm install countup.js`.
 
-## Default countup
+For more advanced features of countups, click [here](https://inorganik.github.io/countUp.js/) and see what more you can do.
+
+## Basic usage
 
 To create a countup, add `data-countup` to any HTML text tag and specify the number which is to be reached. The animation will be triggered as soon as the number enters the viewport.
 
-```html example libs="countup"
+```html
+<h1 data-countup>30000</h1>
+```
+
+The results can be seen in the example below.
+
+```html example libs="countup" centered
 <h1 data-countup>30000</h1>
 ```
 
@@ -19,9 +29,13 @@ To create a countup, add `data-countup` to any HTML text tag and specify the num
 
 Set the `duration` to determine how long the animation should take. By default, the duration is set to 2 seconds, but you can modify it as you wish.
 
-```html example
-<script src="$TABLER_CDN/dist/libs/countup.js/dist/countUp.js"></script>
+```html
+<h1 data-countup='{"duration":4}'>30000</h1>
+```
+
+Look at the example below to see how the duration affects the animation.
 
+```html example libs="countup" centered vertical separated
 <h1 data-countup>30000</h1>
 <h1 data-countup='{"duration":4}'>30000</h1>
 <h1 data-countup='{"duration":6}'>30000</h1>
@@ -32,20 +46,28 @@ Set the `duration` to determine how long the animation should take. By default,
 By default the countup will start from zero. If you want to set a different start value use `startVal`.
 You can also set the start value to be greater than the final value, so that it counts down instead of up.
 
-```html example
-<script src="$TABLER_CDN/dist/libs/countup.js/dist/countUp.js"></script>
+```html
+<h1 data-countup='{"startVal":12345}'>30000</h1>
+```
+
+To see how the starting value affects the animation, look at the example below.
 
+```html example libs="countup" centered vertical separated
 <h1 data-countup='{"startVal":12345}'>30000</h1>
 <h1 data-countup='{"startVal":47655}'>30000</h1>
 ```
 
 ## Decimal places
 
-Set how many decimal numbers should be displayed using `decimalPlaces`.
+Set how many decimal numbers should be displayed using `decimalPlaces`. By default, the number of decimal places is set to 0.
 
-```html example
-<script src="$TABLER_CDN/dist/libs/countup.js/dist/countUp.js"></script>
+```html
+<h1 data-countup='{"decimalPlaces":1}'>3.123</h1>
+```
 
+Look at the example below to see how the number of decimal places affects the animation.
+
+```html example libs="countup" centered vertical separated height="20rem"
 <h1 data-countup>3.123</h1>
 <h1 data-countup='{"decimalPlaces":1}'>3.123</h1>
 <h1 data-countup='{"decimalPlaces":2}'>3.123</h1>
@@ -54,82 +76,90 @@ Set how many decimal numbers should be displayed using `decimalPlaces`.
 
 ## Easing
 
-Disable easing using `"useEasing": false`. Easing is set to `true` by default, so that the animation speed changes over the course of its duration.
+Disable easing using `"useEasing": false`. Easing is set to `true` by default, so that the animation speed changes over the course of its duration. Easing can be disabled to make the animation linear.
+
+```html
+<h1 data-countup='{"useEasing": false}'>30000</h1>
+```
 
-```html example
-<script src="$TABLER_CDN/dist/libs/countup.js/dist/countUp.js"></script>
+Look at the example below to see how easing affects the animation.
 
+```html example libs="countup" centered vertical separated
 <h1 data-countup>30000</h1>
 <h1 data-countup='{"useEasing": false}'>30000</h1>
 ```
 
 ## Use grouping
 
-Disable grouping using `"useGrouping": false`. Grouping is set to `true` by default and the default group separator is a comma.
+Disable grouping using `"useGrouping": false`. Grouping is set to `true` by default, so that the number is displayed with a separator.
+
+```html
+<h1 data-countup='{"useGrouping": false}'>30000</h1>
+```
 
-```html example
-<script src="$TABLER_CDN/dist/libs/countup.js/dist/countUp.js"></script>
+Example below shows how grouping affects the animation.
 
+```html example libs="countup" centered vertical separated
 <h1 data-countup>30000</h1>
 <h1 data-countup='{"useGrouping": false}'>30000</h1>
 ```
 
 ## Separator
 
-You can change the default comma group separator using `separator` and specifying the one you wish to use.
+You can change the default separator using `separator` and specifying the one you wish to use.
+
+```html
+<h1 data-countup='{"separator":" "}'>3000000</h1>
+```
 
-```html example
-<script src="$TABLER_CDN/dist/libs/countup.js/dist/countUp.js"></script>
+This example shows how the separator affects the animation.
 
+```html example libs="countup" centered vertical separated
 <h1 data-countup>3000000</h1>
 <h1 data-countup='{"separator":" "}'>3000000</h1>
-<h1 data-countup='{"separator":"-"}'>3000000</h1>
-<h1 data-countup='{"separator":":"}'>3000000</h1>
 ```
 
 ## Decimal separator
 
-You can also change the decimal separator which is set to a full stop by default. To do it, use `decimal` and specify the decimal separator of your choice.
+You can change the default decimal separator using `decimal` and specifying the one you wish to use.
 
-```html example
-<script src="$TABLER_CDN/dist/libs/countup.js/dist/countUp.js"></script>
+```html
+<h1 data-countup='{"decimal":","}'>3.12</h1>
+```
+
+Look at the example below to see how the decimal separator affects the animation.
 
+```html example libs="countup" centered vertical separated
 <h1 data-countup='{"decimalPlaces":2}'>3.12</h1>
-<h1 data-countup='{"decimalPlaces":2,"decimal":".."}'>3.12</h1>
-<h1 data-countup='{"decimalPlaces":2,"decimal":"^"}'>3.12</h1>
-<h1 data-countup='{"decimalPlaces":2,"decimal":":"}'>3.12</h1>
+<h1 data-countup='{"decimalPlaces":2,"decimal":","}'>3.12</h1>
 ```
 
 ## Prefix
 
 Set the countup prefix using `prefix` and specifying the prefix you want to add, for instance a currency symbol.
 
-```html example
-<script src="$TABLER_CDN/dist/libs/countup.js/dist/countUp.js"></script>
+```html
+<h1 data-countup='{"prefix":"$"}'>30000</h1>
+```
+
+Look at the example below to see how the prefix affects the animation.
 
+```html example libs="countup" centered vertical separated
 <h1 data-countup='{"prefix":"$"}'>30000</h1>
 <h1 data-countup='{"prefix":"€"}'>30000</h1>
-<h1 data-countup='{"prefix":"£"}'>30000</h1>
 ```
 
 ## Suffix
 
-Set the countup suffix using `suffix`.
-
-```html example
-<script src="$TABLER_CDN/dist/libs/countup.js/dist/countUp.js"></script>
+Set the countup suffix using `suffix` and specifying the suffix you want to add, for instance a percentage symbol.
 
-<h1 data-countup='{"suffix":"%"}'>30</h1>
-<h1 data-countup='{"suffix":"‰"}'>30</h1>
-<h1 data-countup='{"suffix":"k"}'>30</h1>
+```html
+<h1 data-countup='{"suffix":"%"}'>300</h1>
 ```
 
-Of course you can mix all of these:
+Look at the example below to see how the suffix affects the animation.
 
-```html example
-<script src="$TABLER_CDN/dist/libs/countup.js/dist/countUp.js"></script>
-
-<h1 data-countup='{"duration":6,"startVal":12345,"decimalPlaces":2,"separator":" ","prefix":"$"}'>64547834.76</h1>
+```html example libs="countup" centered vertical separated
+<h1 data-countup='{"suffix":"%"}'>300</h1>
+<h1 data-countup='{"suffix":"‰"}'>300</h1>
 ```
-
-For more advanced features of countups, click [**here**](https://inorganik.github.io/countUp.js/) and see what more you can do.

package/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.