@tabler/core 1.0.0-beta22 → 1.0.0-beta24

package/docs/ui/components/cards.mdx

@@ -1,14 +1,15 @@
 ---
 title: Cards
-description: Cards are flexible user interface elements, which help organize content into meaningful sections and make it easier to display on different screen sizes. Cards contain various smaller components, such as images, text, links and buttons and may act as an entry to more detailed information, helping users scan the page quickly and find the most relevant content.
+summary: Cards are flexible user interface elements, which help organize content into meaningful sections and make it easier to display on different screen sizes. Cards contain various smaller components, such as images, text, links and buttons and may act as an entry to more detailed information, helping users scan the page quickly and find the most relevant content.
 bootstrapLink: components/card/
+description: Organize content with flexible cards.
 ---
 
 ## Default card
 
 Use the `.card` and `.card-body` classes to create a card and use it as the basis for a more advanced card design. A card is a perfect way to organize content and make it look neat and tidy.
 
-```html example code centered columns={1}
+```html example centered columns={1} background="base"
 <div class="card">
   <div class="card-body">
     <p>This is some text within a card body.</p>
@@ -22,7 +23,7 @@ You can change the padding of a newly created card. To do it, use the `.card-sm`
 
 Cards with the `.card-sm` class are well suited for small items such as widgets, etc., while the `.card-lg` class can be used for large blocks of text. Padding will be automatically reduced on small devices, to fit the screen size.
 
-```html example vertical centered separated height={500}
+```html example vertical centered separated height={500} background="base"
 <div class="card card-sm">
   <div class="card-body">
     This is some text within a card body.
@@ -56,7 +57,7 @@ Cards with the `.card-sm` class are well suited for small items such as widgets,
 
 Add a title to your card by including the `.card-title` class within `.card-body`. You can also place the title inside the `.card-header` element to separate the title from the content with a horizontal line.
 
-```html code example vertical centered separated height={400}
+```html example vertical centered separated height={400} background="base"
 <div class="card">
   <div class="card-body">
     <h3 class="card-title">Card title</h3>
@@ -77,7 +78,7 @@ Add a title to your card by including the `.card-title` class within `.card-body
 
 To create a more visually appealing card, add a title and an image. Thanks to that, the card will go well with your interface design and draw users' attention.
 
-```html example centered columns={1} height={500} code
+```html example centered columns={1} height={500} background="base"
 <div class="card">
   <!-- Photo -->
   <div class="img-responsive img-responsive-21x9 card-img-top" style="background-image: url(/samples/photos/cup-of-coffee-and-an-open-book.jpg)"></div>
@@ -93,13 +94,15 @@ To create a more visually appealing card, add a title and an image. Thanks to th
 
 Add an image to your blog post card to make it eye-catching. You can do it by adding the image in the `.card-img-top` class. Thanks to the `.d-flex` and `.flex-column` classes within `.card-body`, the author details will be displayed at the bottom of the card.
 
-```html example centered columns={1} height={600} code
+```html example centered columns={1} height={600} background="base"
 <div class="card d-flex flex-column">
   <a href="#">
     <img class="card-img-top" src="/samples/photos/book-on-the-grass.jpg" alt="" />
   </a>
   <div class="card-body d-flex flex-column">
-    <h3 class="card-title"><a href="#">How do you know she is a witch?</a></h3>
+    <h3 class="card-title">
+      <a href="#">How do you know she is a witch?</a>
+    </h3>
     <div class="text-secondary">Are you suggesting that coconuts migrate? No, no, no! Yes, yes. A bit. But she's got a wart. You ...</div>
     <div class="d-flex align-items-center pt-4 mt-auto">
       <span class="avatar" style="background-image: url(/samples/avatars/023m.jpg)"></span>
@@ -123,7 +126,7 @@ Add an image to your blog post card to make it eye-catching. You can do it by ad
 
 Add the `.row-deck` class to `.row`, if you want to display several cards next to one another. Thanks to that, they will all have the same height.
 
-```html code example centered height="220px"
+```html example centered height="220px" background="base"
 <div class="row row-deck">
   <div class="col-md-4">
     <div class="card">
@@ -147,7 +150,7 @@ Add the `.row-deck` class to `.row`, if you want to display several cards next t
 
 You can also add an image on the left side of the card. To do it, add the `.card-aside` class to the element with the `.card` class. Then add the image in the `.card-aside-column` element and it will be automatically centered and scaled to the right size.
 
-```html example columns={2} centered height={400} code
+```html example columns={2} centered height={400} background="base"
 <div class="card d-flex flex-column">
   <div class="row row-0 flex-fill">
     <div class="col-md-3">
@@ -157,7 +160,9 @@ You can also add an image on the left side of the card. To do it, add the `.card
     </div>
     <div class="col">
       <div class="card-body">
-        <h3 class="card-title"><a href="#">Shut up!</a></h3>
+        <h3 class="card-title">
+          <a href="#">Shut up!</a>
+        </h3>
         <div class="text-secondary">Burn her! How do you know she is a witch? You don't frighten us, English pig-dogs! Go and boil yo...</div>
         <div class="d-flex align-items-center pt-4 mt-auto">
           <span class="avatar" style="background-image: url(/samples/avatars/029m.jpg)"></span>
@@ -183,7 +188,7 @@ You can also add an image on the left side of the card. To do it, add the `.card
 
 Add a status color to your card, either at the top or on the side of the card, to customise it and make it more eye-catching.
 
-```html example columns={2} centered height={400}
+```html example columns={2} centered height={400} background="base"
 <div class="row row-deck">
   <div class="col-md-6">
     <div class="card">
@@ -212,17 +217,17 @@ Add a status color to your card, either at the top or on the side of the card, t
 <div class="card">
   <div class="card-status-top bg-danger"></div>
   <div class="card-body">
-	 <h3 class="card-title">Card with top status</h3>
-	 <p class="text-secondary">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam deleniti fugit incidunt, iste, itaque minima
-		neque pariatur perferendis sed suscipit velit vitae voluptatem.</p>
+    <h3 class="card-title">Card with top status</h3>
+    <p class="text-secondary">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam deleniti fugit incidunt, iste, itaque minima
+      neque pariatur perferendis sed suscipit velit vitae voluptatem.</p>
   </div>
 </div>
 <div class="card">
   <div class="card-status-start bg-green"></div>
   <div class="card-body">
-	 <h3 class="card-title">Card with side status</h3>
-	 <p class="text-secondary">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam deleniti fugit incidunt, iste, itaque minima
-		neque pariatur perferendis sed suscipit velit vitae voluptatem.</p>
+    <h3 class="card-title">Card with side status</h3>
+    <p class="text-secondary">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam deleniti fugit incidunt, iste, itaque minima
+      neque pariatur perferendis sed suscipit velit vitae voluptatem.</p>
   </div>
 </div>
 ```
@@ -231,7 +236,7 @@ Add a status color to your card, either at the top or on the side of the card, t
 
 Use the `card-stacked` class to stack up multiple cards, if you want to save screen space or create a visually appealing effect.
 
-```html code example columns={1} centered height={300}
+```html example columns={1} centered height={300} background="base"
 <div class="card card-stacked">
   <div class="card-body">
     <h3 class="card-title">Stacked card</h3>
@@ -245,13 +250,21 @@ Use the `card-stacked` class to stack up multiple cards, if you want to save scr
 
 Organize multiple cards into tabs to be able to display more content in a well-organized way and allow users to alternate between them easily.
 
-```html example columns={2} centered height={400}
+```html example columns={2} centered height={400} background="base"
 <div class="card-tabs">
   <ul class="nav nav-tabs">
-    <li class="nav-item"><a href="#tab-top-1" class="nav-link active" data-bs-toggle="tab">Tab 1</a></li>
-    <li class="nav-item"><a href="#tab-top-2" class="nav-link" data-bs-toggle="tab">Tab 2</a></li>
-    <li class="nav-item"><a href="#tab-top-3" class="nav-link" data-bs-toggle="tab">Tab 3</a></li>
-    <li class="nav-item"><a href="#tab-top-4" class="nav-link" data-bs-toggle="tab">Tab 4</a></li>
+    <li class="nav-item">
+      <a href="#tab-top-1" class="nav-link active" data-bs-toggle="tab">Tab 1</a>
+    </li>
+    <li class="nav-item">
+      <a href="#tab-top-2" class="nav-link" data-bs-toggle="tab">Tab 2</a>
+    </li>
+    <li class="nav-item">
+      <a href="#tab-top-3" class="nav-link" data-bs-toggle="tab">Tab 3</a>
+    </li>
+    <li class="nav-item">
+      <a href="#tab-top-4" class="nav-link" data-bs-toggle="tab">Tab 4</a>
+    </li>
   </ul>
   <div class="tab-content">
     <div id="tab-top-1" class="card tab-pane active show">
@@ -295,10 +308,18 @@ Organize multiple cards into tabs to be able to display more content in a well-o
 <div class="card-tabs">
   <!-- Cards navigation -->
   <ul class="nav nav-tabs">
-    <li class="nav-item"><a href="#tab-top-1" class="nav-link active" data-bs-toggle="tab">Tab 1</a></li>
-    <li class="nav-item"><a href="#tab-top-2" class="nav-link" data-bs-toggle="tab">Tab 2</a></li>
-    <li class="nav-item"><a href="#tab-top-3" class="nav-link" data-bs-toggle="tab">Tab 3</a></li>
-    <li class="nav-item"><a href="#tab-top-4" class="nav-link" data-bs-toggle="tab">Tab 4</a></li>
+    <li class="nav-item">
+      <a href="#tab-top-1" class="nav-link active" data-bs-toggle="tab">Tab 1</a>
+    </li>
+    <li class="nav-item">
+      <a href="#tab-top-2" class="nav-link" data-bs-toggle="tab">Tab 2</a>
+    </li>
+    <li class="nav-item">
+      <a href="#tab-top-3" class="nav-link" data-bs-toggle="tab">Tab 3</a>
+    </li>
+    <li class="nav-item">
+      <a href="#tab-top-4" class="nav-link" data-bs-toggle="tab">Tab 4</a>
+    </li>
   </ul>
   <div class="tab-content">
     <!-- Content of card #1 -->

package/docs/ui/components/carousel.mdx

@@ -1,14 +1,15 @@
 ---
 title: Carousel
-description: A carousel is used to display multiple pieces of visual content without taking up too much space. Carousels eliminate the need to scroll down the page to see all content and are a popular method of displaying marketing information.
+summary: A carousel is used to display multiple pieces of visual content without taking up too much space. Carousels eliminate the need to scroll down the page to see all content and are a popular method of displaying marketing information.
 bootstrapLink: components/carousel/
+description: Display visual content with carousels.
 ---
 
 ## Default markup
 
 Use a carousel to make your website design more visually appealing for users. In the default carousel design, respective elements slide automatically and users can go to the next slide by clicking an arrow.
 
-```html code example centered columns={2} height="35rem"
+```html example centered columns={2} height="35rem"
 <div id="carousel-sample" class="carousel slide" data-bs-ride="carousel">
   <div class="carousel-indicators">
     <button type="button" data-bs-target="#carousel-sample" data-bs-slide-to="0" class="active"></button>
@@ -49,7 +50,7 @@ Use a carousel to make your website design more visually appealing for users. In
 
 You can replace the standard indicators with dots. Just add the `carousel-indicators-dot` class to your carousel:
 
-```html code example centered columns={2} height="35rem"
+```html example centered columns={2} height="35rem"
 <div id="carousel-indicators-dot" class="carousel slide carousel-fade" data-bs-ride="carousel">
   <div class="carousel-indicators carousel-indicators-dot">
     <button type="button" data-bs-target="#carousel-indicators-dot" data-bs-slide-to="0" class="active"></button>
@@ -82,7 +83,7 @@ You can replace the standard indicators with dots. Just add the `carousel-indica
 
 The syntax is similar with thumbnails. Add class `carousel-indicators-thumb` and add `background-image` to element `[data-bs-target]`. Default thumbnails have an aspect ratio of 1:1. To change this use `ratio` utils.
 
-```html example code centered columns={2} height="35rem"
+```html example centered columns={2} height="35rem"
 <div id="carousel-indicators-thumb" class="carousel slide carousel-fade" data-bs-ride="carousel">
   <div class="carousel-indicators carousel-indicators-thumb">
     <button type="button" data-bs-target="#carousel-indicators-thumb" data-bs-slide-to="0" class="ratio ratio-4x3 active" style="background-image: url(/samples/photos/group-of-people-sightseeing-in-the-city.jpg)"></button>
@@ -115,7 +116,7 @@ The syntax is similar with thumbnails. Add class `carousel-indicators-thumb` and
 
 To make the indicators go to the right side, add the `carousel-indicators-vertical` class. You can combine it with other classes that are responsible for dots or thumbnails.
 
-```html code example centered columns={2} height="35rem"
+```html example centered columns={2} height="35rem"
 <div id="carousel-indicators-dot-vertical" class="carousel slide carousel-fade" data-bs-ride="carousel">
   <div class="carousel-indicators carousel-indicators-vertical carousel-indicators-dot">
     <button type="button" data-bs-target="#carousel-indicators-dot-vertical" data-bs-slide-to="0" class="active"></button>
@@ -146,7 +147,7 @@ To make the indicators go to the right side, add the `carousel-indicators-vertic
 
 Likewise, you can add thumbnails on the right side:
 
-```html code example centered columns={2} height="35rem"
+```html example centered columns={2} height="35rem"
 <div id="carousel-indicators-thumb-vertical" class="carousel slide carousel-fade" data-bs-ride="carousel">
   <div class="carousel-indicators carousel-indicators-vertical carousel-indicators-thumb">
     <button type="button" data-bs-target="#carousel-indicators-thumb-vertical" data-bs-slide-to="0" class="ratio ratio-4x3 active" style="background-image: url(/samples/photos/finances-us-dollars-and-bitcoins-currency-money.jpg)"></button>
@@ -179,7 +180,7 @@ Likewise, you can add thumbnails on the right side:
 
 Add captions to your slides easily with the `.carousel-caption` element within any `.carousel-item`. To make the text more readable on the image you can add `carousel-caption-background` which will add a black overlay over the image.
 
-```html code example centered columns={2} height="35rem"
+```html example centered columns={2} height="35rem"
 <div id="carousel-captions" class="carousel slide" data-bs-ride="carousel">
   <div class="carousel-inner">
     <div class="carousel-item active">

package/docs/ui/components/charts.mdx

@@ -1,7 +1,8 @@
 ---
 title: Charts
 libs: apexcharts
-description: Tabler uses ApexCharts - a free and open-source modern charting library that helps developers to create beautiful and interactive visualizations for web pages.
+summary: Tabler uses ApexCharts - a free and open-source modern charting library that helps developers to create beautiful and interactive visualizations for web pages.
+description: Interactive data visualizations with ApexCharts.
 ---
 
 To be able to use the charts in your application you will need to install the apexcharts dependency with `npm install apexcharts`.
@@ -10,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 code 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'), {
@@ -104,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 code 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'), {
@@ -202,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 code 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'), {
@@ -310,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 code 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'), {
@@ -370,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 code 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'), {
@@ -430,14 +421,14 @@ Heatmap is a visualization tool that employs color the way a bar chart employs h
 
 ## Advanced example
 
-```html example code 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

@@ -1,18 +1,27 @@
 ---
 title: Countup
-description: A countup element is used to display numerical data in an interesting way and make the interface more interactive.
+summary: A countup element is used to display numerical data in an interesting way and make the interface more interactive.
 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 code example
-<script src="$TABLER_CDN/dist/libs/countup.js/dist/countUp.js"></script>
+```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>
 ```
 
@@ -20,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 code 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>
@@ -33,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 code 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
+<h1 data-countup='{"decimalPlaces":1}'>3.123</h1>
+```
 
-```html code example
-<script src="$TABLER_CDN/dist/libs/countup.js/dist/countUp.js"></script>
+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>
@@ -55,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 code example
-<script src="$TABLER_CDN/dist/libs/countup.js/dist/countUp.js"></script>
+```html
+<h1 data-countup='{"useEasing": false}'>30000</h1>
+```
 
+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 code 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 code example
-<script src="$TABLER_CDN/dist/libs/countup.js/dist/countUp.js"></script>
+```html
+<h1 data-countup='{"separator":" "}'>3000000</h1>
+```
 
+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 code 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 code 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`.
+Set the countup suffix using `suffix` and specifying the suffix you want to add, for instance a percentage symbol.
 
-```html code example
-<script src="$TABLER_CDN/dist/libs/countup.js/dist/countUp.js"></script>
-
-<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:
-
-```html code example
-<script src="$TABLER_CDN/dist/libs/countup.js/dist/countUp.js"></script>
+Look at the example below to see how the suffix affects the animation.
 
-<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/datagrid.mdx

@@ -1,9 +1,10 @@
 ---
 title: Data grid
-description: Use the data grid component to display detailed information about your product. The data is displayed as a column of items consisting of a title and content.
+summary: Use the data grid component to display detailed information about your product. The data is displayed as a column of items consisting of a title and content.
+description: Detailed product information in grids.
 ---
 
-```html example code vcentered height="460px"
+```html example vcentered height="460px"
 <div class="datagrid">
   <div class="datagrid-item">
     <div class="datagrid-title">Registrar</div>
@@ -88,3 +89,10 @@ description: Use the data grid component to display detailed information about y
   </div>
 </div>
 ```
+
+You can adjust the datagrid to your needs setting the values of variables:
+
+| Variable | Description | Default |
+|----------|-------------|---------|
+| `--tblr-datagrid-item-width` | Width of the datagrid item | `15rem` |
+| `--tblr-datagrid-padding` | Gap between the datagrid items | `1.5rem` |

package/docs/ui/components/divider.mdx

@@ -1,14 +1,14 @@
 ---
 title: Divider
-description: Dividers help organize content and make the interface layout clear and uncluttered. Greater clarity adds up to better user experience and enhanced interaction with a website or app.
-bootstrapLink: components/dropdowns/#dividers
+summary: Dividers help organize content and make the interface layout clear and uncluttered. Greater clarity adds up to better user experience and enhanced interaction with a website or app.
+description: Separate content with clear dividers.
 ---
 
 ## Default markup
 
 Use dividers to visually separate content into parts. You can use a line only or add text that will be centered by default.
 
-```html code example
+```html example
 <p>
   Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias, dolore dolores doloribus est ex.
 </p>
@@ -22,7 +22,7 @@ Use dividers to visually separate content into parts. You can use a line only or
 
 You can modify the position of the text which is to be included in a separator and make it left- or right-aligned. Otherwise, the text will remain centered.
 
-```html code example height="380px"
+```html example height="380px"
 <p>
   Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias, dolore dolores doloribus est ex.
 </p>
@@ -42,9 +42,9 @@ You can modify the position of the text which is to be included in a separator a
 
 ## Divider color
 
-Customize the color of dividers to make them go well with your design. Click [here](/docs/ui/colors) to see the list of available colors.
+Customize the color of dividers to make them go well with your design. Click [here](/docs/ui/base/colors) to see the list of available colors.
 
-```html code example height="380px"
+```html example height="380px"
 <p>
   Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias, dolore dolores doloribus est ex.
 </p>