tabler · codecalm · Jan 4, 2025 · Jan 4, 2025 · Jan 4, 2025 · Jan 4, 2025
diff --git a/.changeset/smart-points-attack.md b/.changeset/smart-points-attack.md
@@ -0,0 +1,5 @@
+---
+"@tabler/core": patch
+---
+
+Update documentation for Tabler components
diff --git a/docs/menu.json b/docs/menu.json
@@ -135,10 +135,6 @@
         "title": "Progress",
         "href": "/docs/ui/components/progress"
       },
-      {
-        "title": "Progress background",
-        "href": "/docs/ui/components/progressbg"
-      },
       {
         "title": "Range slider",
         "href": "/docs/ui/components/range-slider"
@@ -240,6 +236,10 @@
       {
         "title": "Payments",
         "href": "/docs/ui/plugins/payments"
+      },
+      {
+        "title": "Social icons",
+        "href": "/docs/ui/plugins/social-icons"
       }
     ]
   },

diff --git a/docs/ui/base/colors.mdx b/docs/ui/base/colors.mdx
@@ -8,18 +8,75 @@ bootstrapLink: utilities/colors/
 
 Choose one of the available colors from the basic color palette and make your design attractive for users. You can use the colors to customize the design of components, indicate different states or suggest actions you want users to take.
 
-<ColorsTable name="base" />
+<ColorsTable colors={[ 
+  { name: "blue", value: "#066fd1" }, 
+  { name: "azure", value: "#4299e1" },
+  { name: "indigo", value: "#4263eb" }, 
+  { name: "purple", value: "#ae3ec9" },
+  { name: "pink", value: &quo
8000
t;#d6336c" },
+  { name: "red", value: "#d63939" },
+  { name: "orange", value: "#f76707" },
+  { name: "yellow", value: "#f59f00" },
+  { name: "lime", value: "#74b816" },
+  { name: "green", value: "#2fb344" },
+  { name: "teal", value: "#0ca678" },
+  { name: "cyan", value: "#17a2b8" },
+]}/>
 
 ## Light colors
 
 All available colors can come in pastel shades, which are perfect for more subtle designs and can be easily combined with the basic palette to create eye-catching designs.
 
-<ColorsTable name="light" />
+<ColorsTable colors={[
+  { name: "blue-lt", value: "#e9f0f9" },
+  { name: "azure-lt", value: "#ecf5fc" },
+  { name: "indigo-lt", value: "#eceffd" },
+  { name: "purple-lt", value: "#f7ecfa" },
+  { name: "pink-lt", value: "#fbebf0" },
+  { name: "red-lt", value: "#fbebeb" },
+  { name: "orange-lt", value: "#fef0e6" },
+  { name: "yellow-lt", value: "#fef5e6" },
+  { name: "lime-lt", value: "#f1f8e8" },
+  { name: "green-lt", value: "#eaf7ec" },
+  { name: "teal-lt", value: "#e7f6f2" },
+  { name: "cyan-lt", value: "#e8f6f8" }
+]}/>
 
 ## Gray palette
 
-<ColorsTable name="grays" />
+The gray palette is a great choice for creating a neutral background for your design. It can be used to create a clean and professional look, and can be combined with other colors to create a harmonious design.
+
+<ColorsTable colors={[
+  { name: "gray-50", value: "#f8fafc" },
+  { name: "gray-100", value: "#f1f5f9" },
+  { name: "gray-200", value: "#e2e8f0" },
+  { name: "gray-300", value: "#c8d3e1" },
+  { name: "gray-400", value: "#9ba9be" },
+  { name: "gray-500", value: "#6c7a91" },
+  { name: "gray-600", value: "#49566c" },
+  { name: "gray-700", value: "#313c52" },
+  { name: "gray-800", value: "#1d273b" },
+  { name: "gray-900", value: "#0f172a" }
+]} />
 
 ## Social colors
 
-<ColorsTable name="social" />
+Use the colors of popular social networks to create a recognizable design and make it easier for users to interact with your product.
+
+<ColorsTable colors={[
+  { name: "facebook", value: "#1877F2" },
+  { name: "twitter", value: "#1da1f2" },
+  { name: "linkedin", value: "#0a66c2" },
+  { name: "google", value: "#dc4e41" },
+  { name: "youtube", value: "#ff0000" },
+  { name: "vimeo", value: "#1ab7ea" },
+  { name: "dribbble", value: "#ea4c89" },
+  { name: "github", value: "#181717" },
+  { name: "instagram", value: "#e4405f" },
+  { name: "pinterest", value: "#bd081c" },
+  { name: "vk", value: "#6383a8" },
+  { name: "rss", value: "#ffa500" },
+  { name: "flickr", value: "#0063dc" },
+  { name: "bitbucket", value: "#0052cc" },
+  { name: "tabler", value: "#066fd1" }
+]} />
diff --git a/docs/ui/base/typography.mdx b/docs/ui/base/typography.mdx
@@ -6,29 +6,38 @@ bootstrapLink: content/typography/
 
 ## Headings
 
-Use HTML headings to organize content on your website and make the structure clear and user-friendly.
+Use HTML headings to organize content on your website and make the structure clear and user-friendly. The `h1` to `h6` tags are used to define HTML headings. 
+The `h1` tag is the highest level and the `h6` tag is the lowest level.
 
-```html example vertical
+```html
 <h1>H1 Heading</h1>
 <h2>H2 Heading</h2>
 <h3>H3 Heading</h3>
 <h4>H4 Heading</h4>
 <h5>H5 Heading</h5>
-<h6>H6 Heading</h6>
+<h6>H6 Heading</h6> 
 ```
 
-```html
+There is example of headings with different levels:
+
+```html example vertical columns={1}
 <h1>H1 Heading</h1>
 <h2>H2 Heading</h2>
 <h3>H3 Heading</h3>
 <h4>H4 Heading</h4>
 <h5>H5 Heading</h5>
-<h6>H6 Heading</h6>
+<h6>H6 Heading</h6> 
 ```
 
 ## Paragraphs
 
-Organize longer pieces of text into paragraphs using the `p` tag.
+Organize longer pieces of text into paragraphs using the `p` tag. It is the most common element for text content. 
+
+```html
+<p>At vero eos et accusam et justo duo dolores et ea rebum.</p>
+```
+
+If you use second paragraph, it will be separated from the first one by a blank line.
 
 ```html example vertical centered columns={2}
 <div>
@@ -37,14 +46,32 @@ Organize longer pieces of text into paragraphs using the `p` tag.
 </div>
 ```
 
-```html
-<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
-<p>At vero eos et accusam et justo duo dolores et ea rebum.</p>
-```
 
 ## Semantic text elements
 
-Use a variety of semantic text elements, depending of how you want to display particular fragments of content.
+Use a variety of semantic text elements, depending of how you want to display particular fragments of content. 
+
+```html
+<abbr title="Internationalization">I18N</abbr>
+<strong>Bold</strong>
+<cite>Citation</cite>
+<code>Hello World!</code>
+<del>Deleted</del>
+<em>Emphasis</em>
+<i>Italic</i>
+<ins>Inserted</ins>
+<kbd>Ctrl + S</kbd>
+<mark>Highlighted</mark>
+<s>Strikethrough</s>
+<samp>Sample</samp>
+Text <sub>Subscripted</sub>
+Text <sup>Superscripted</sup>
+<time>20:00</time>
+<u>Underline</u>
+<var>x</var> = <var>y</var> + 2
+```
+
+Here is an example of semantic text elements:
 
 ```html example vertical separated columns={1}
 <div><abbr title="Internationalization">I1f8N</abbr></div>
@@ -66,25 +93,7 @@ Use a variety of semantic text elements, depending of how you want to display pa
 <div><var>x</var> = <var>y</var> + 2</div>
 ```
 
-```html
-<abbr title="Internationalization">I18N</abbr>
-<strong>Bold</strong>
-<cite>Citation</cite>
-<code>Hello World!</code>
-<del>Deleted</del>
-<em>Emphasis</em>
-<i>Italic</i>
-<ins>Inserted</ins>
-<kbd>Ctrl + S</kbd>
-<mark>Highlighted</mark>
-<s>Strikethrough</s>
-<samp>Sample</samp>
-Text <sub>Subscripted</sub>
-Text <sup>Superscripted</sup>
-<time>20:00</time>
-<u>Underline</u>
-<var>x</var> = <var>y</var> + 2
-```
+
 
 ## Horizontal rules
 
@@ -146,40 +155,11 @@ Tabler has been optimized to correctly display content in any language. It suppo
 <p>อักษรไทย</p>
 ```
 
-```html
-<h5>Chinese</h5>
-<p>汉字</p>
-
-<h5>Japanese</h5>
-<p>日本語の表記体系</p>
-
-<h5>Cyrillic</h5>
-<p>Кириллица</p>
-
-<h5>Greek</h5>
-<p>Eλληνική</p>
-
-<h5>Georgian</h5>
-<p>ქართული დამწერლობა</p>
-
-<h5>Armenian</h5>
-<p>Հայերենի այբուբեն</p>
-
-<h5>Arabic</h5>
-<p>الحروف العربية</p>
-
-<h5>Hebrew</h5>
-<p>אלפבית עברי</p>
-
-<h5>Thai</h5>
-<p>อักษรไทย</p>
-```
-
 ## Text transform
 
 Transform the content of components with text capitalization classes.
 
-```html example vertical
+```html example vertical centered separated columns={1}
 <div class="text-lowercase">Lowercased text.</div>
 <div class="text-uppercase">Uppercased text.</div>
 <div class="text-capitalize">Capitalized text.</div>
@@ -195,7 +175,7 @@ Transform the content of components with text capitalization classes.
 
 Control the tracking (letter spacing) of an element and make it tight, wide or normal.
 
-```html example vertical
+```html example vertical centered separated columns={1}
 <div class="tracking-tight">Lorem ipsum dolor sit amet. Tight letter spacing.</div>
 <div class="tracking-normal">Lorem ipsum dolor sit amet. Normal letter spacing.</div>
 <div class="tracking-wide">Lorem ipsum dolor sit amet. Wide letter spacing.</div>
@@ -211,44 +191,28 @@ Control the tracking (letter spacing) of an element and make it tight, wide or n
 
 Control the leading (line height) of an element.
 
-```html example
-<div class="row">
-  <div class="col">
-    <div class="card">
-      <div class="card-body">
-        <div class="lh-1">Lorem ipsum dolor sit amet. Dolor sit amet.</div>
-      </div>
-    </div>
-  </div>
-  <div class="col">
-    <div class="card">
-      <div class="card-body">
-        <div class="lh-sm">Lorem ipsum dolor sit amet. Dolor sit amet.</div>
-      </div>
-    </div>
-  </div>
-  <div class="col">
-    <div class="card">
-      <div class="card-body">
-        <div class="lh-base">Lorem ipsum dolor sit amet. Dolor sit amet.</div>
-      </div>
-    </div>
-  </div>
-  <div class="col">
-    <div class="card">
-      <div class="card-body">
-        <div class="lh-lg">Lorem ipsum dolor sit amet. Dolor sit amet.</div>
-      </div>
-    </div>
-  </div>
-</div>
+```html example vertical centered separated columns={1} height="20rem"
+<p class="lh-1">
+	This is the long text with line height 1. Lorem ipsum dolor sit amet. Dolor sit amet.
+</p>
+<p class="lh-sm">
+	This is the long text with small line height. Lorem ipsum dolor sit amet. Dolor sit amet.
+</p>
+<p class="lh-base">
+	This is the long text with base line height. Lorem ipsum dolor sit amet. Dolor sit amet.
+</p>
+<p class="lh-lg">
+	This is the long text with large line height. Lorem ipsum dolor sit amet. Dolor sit amet.
+</p>
 ```
 
+To control the line height of an element, use the following classes:
+
 ```html
-<p class="lh-1">Lorem ipsum dolor sit amet. Dolor sit amet.</p>
-<p class="lh-sm">Lorem ipsum dolor sit amet. Dolor sit amet.</p>
-<p class="lh-base">Lorem ipsum dolor sit amet. Dolor sit amet.</p>
-<p class="lh-lg">Lorem ipsum dolor sit amet. Dolor sit amet.</p>
 <p class="lh-1">...</p>
+<p class="lh-sm">...</p>
+<p class="lh-base">...</p>
+<p class="lh-lg">...</p>
 ```
 
 ## Antialiasing
@@ -257,7 +221,7 @@ Control the font smoothing of an element.
 
 Use the `.antialiased` utility to render text using subpixel antialiasing or use the `.subpixel-antialiased` utility to remove antialiasing.
 
-```html example
+```html example vertical centered separated columns={1}
 <div class="antialiased">Text with antialiasing</div>
 <div class="subpixel-antialiased">Text without antialiasing</div>
 ```
@@ -266,7 +230,7 @@ Use the `.antialiased` utility to render text using subpixel antialiasing or use
 
 Use the `<kbd>` to indicate input that is typically entered via keyboard.
 
-```html example centered
+```html example vertical centered
 <div>
   To edit settings, press <kbd>ctrl</kbd> + <kbd>,</kbd> or <kbd>ctrl</kbd> + <kbd>C</kbd>.
 </div>
@@ -278,7 +242,7 @@ To edit settings, press <kbd>ctrl</kbd> + <kbd>,</kbd> or <kbd>ctrl</kbd> + <kbd
 
 ## Markdown elements
 
-If you can't use the CSS classes you want or if you just want to use HTML tags, use the `.markdown` class in a container. It can handle almost any HTML tag.
+If you can't use the CSS classes you want or if you just want to use HTML tags, use the `.markdown` class in a container. It will apply the default styles for markdown elements. 
 
 ```html example centered background="white" columns={2} height="30rem"
 <div class="markdown">

diff --git a/docs/ui/components/autosize.mdx b/docs/ui/components/autosize.mdx
@@ -8,9 +8,17 @@ To be able to use the autosize in your application you will need to install the
 
 ## Default markup
 
-Add the autosize element to your input to make it automatically adjust to the length of a text as a user types it.
+Add the autosize element to your input to make it automatically adjust to the length of a text as a user types it. 
 
-```html example centered columns={1} scrollable
+To create autosize textarea, add the `data-bs-toggle="autosize"` attribute to the textarea element:
+
+```html
+<textarea class="form-control" data-bs-toggle="autosize" placeholder="Type something…"></textarea>
+```
+
+Look at the example below to see how the autosize element works:
+
+```html example centered columns={1} scrollable background="bg-light" height="20rem"
 <label class="form-label">Autosize example</label>
 <textarea class="form-control" data-bs-toggle="autosize" placeholder="Type something…"></textarea>
 ```