Docs update (#2034)

.changeset/smart-points-attack.md

@@ -0,0 +1,5 @@
+---
+"@tabler/core": patch
+---
+
+Update documentation for Tabler components

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"
       }
     ]
   },

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: "#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" }
+]} />

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

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

docs/ui/components/progress.mdx

@@ -26,22 +26,16 @@ To create a default progress bar, add a `.progress` class to a `<div>` element.
 
 Using Bootstrap’s typical naming structure, you can create a standard progress bar or scale it up or down to different sizes based on what’s needed.
 
-```html example columns={1} centered
-<div class="progress progress-sm">
-  <div class="progress-bar" style="width: 57%" role="progressbar" aria-valuenow="57" aria-valuemin="0" aria-valuemax="100" aria-label="57% Complete">
-    <span class="visually-hidden">57% Complete</span>
-  </div>
-</div>
+```html
+<div class="progress progress-sm">...</div>
 ```
 
-## Progress without value
-
-Remove the displayed value by adding the `.visually-hidden` class.
+Look at the example below to see how it works:
 
 ```html example columns={1} centered
-<div class="progress">
-  <div class="progress-bar" style="width: 75%" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" aria-label="75% Complete">
-    <span class="visually-hidden">75% Complete</span>
+<div class="progress progress-sm">
+  <div class="progress-bar" style="width: 57%" role="progressbar" aria-valuenow="57" aria-valuemin="0" aria-valuemax="100" aria-label="57% Complete">
+    <span class="visually-hidden">57% Complete</span>
   </div>
 </div>
 ```
@@ -58,7 +52,13 @@ You can create a progress bar which shows indeterminate progress by adding `.pro
 
 ## Native progress element
 
-You can also use native HTML5 `<progress>` element.
+You can also use native HTML5 `<progress>` element. It is a great way to create a progress bar without the need for additional HTML elements.
+
+```html
+<progress class="progress progress-sm" value="15" max="100" />
+```
+
+This is how it looks like:
 
 ```html example columns={1} centered
 <progress class="progress progress-sm" value="15" max="100" />
@@ -66,7 +66,9 @@ You can also use native HTML5 `<progress>` element.
 
 ## Progress color
 
-Customize the color of the progress bar to suit your design. Click [here](/docs/ui/colors) to see the list of available colors.
+You can change the color of the progress bar by adding a color class to the `.progress-bar` element. You can use the color classes like `.bg-primary`, `.bg-success`, etc. to change the color of the progress bar.
+
+Full list of available colors can be found [here](/docs/ui/colors).
 
 ```html example columns={1} centered separated
 <div class="progress">
@@ -90,3 +92,101 @@ Customize the color of the progress bar to suit your design. Click [here](/docs/
   </div>
 </div>
 ```
+
+## Multiple progress bars
+
+You can stack multiple progress bars on top of each other to create a visually appealing design. This can be done by adding multiple `.progress` elements inside a `.progress-stacked` container.
+
+```html
+<div class="progress-stacked">
+  <div class="progress">...</div>
+</div>
+```
+
+This is how it looks like:
+
+```html example columns={2} centered 
+<div class="progress-stacked">
+  <div class="progress" style="width: 15%">
+    <div class="progress-bar"></div>
+  </div>
+  <div class="progress" style="width: 30%">
+    <div class="progress-bar bg-success"></div>
+  </div>
+  <div class="progress" style="width: 20%">
+    <div class="progress-bar bg-info"></div>
+  </div>
+</div>
+```
+
+## Striped progress
+
+You can create a striped progress bar by adding the `.progress-bar-striped` class to the `.progress-bar` element.
+
+```html
+<div class="progress">
+  <div class="progress-bar progress-bar-striped progress-bar-animated" style="width: 60%"></div>
+</div>
+```
+
+This is how it looks like:
+
+```html example columns={1} centered separated 
+<div class="progress">
+  <div class="progress-bar progress-bar-striped progress-bar-animated" style="width: 60%"></div>
+</div>
+```
+
+## Progress background
+
+By using a progress bar component as a background element, designers can create a dynamic and engaging visual experience for users. For example, the progress bar could be used to represent the completion of a long-term goal or project, such as a fundraising campaign or construction project. As users interact with the page, the progress bar could gradually fill up, creating a sense of momentum and progress.
+
+```html
+<div class="progressbg">
+  <div class="progress progressbg-progress">
+    <div class="progress-bar bg-primary-lt" style="width: 65%"></div>
+  </div>
+  <div class="progressbg-text">Poland</div>
+  <div class="progressbg-value">65%</div>
+</div>
+```
+
+Thanks to this you can create a nice looking statistics section:
+
+```html example vertical separated centered columns={1} plugins="flags" height="20rem"
+<div class="progressbg">
+  <div class="progress progressbg-progress">
+    <div class="progress-bar bg-primary-lt" style="width: 65%"></div>
+  </div>
+  <div class="progressbg-text">Poland</div>
+  <div class="progressbg-value">65%</div>
+</div>
+<div class="progressbg">
+  <div class="progress progressbg-progress">
+    <div class="progress-bar bg-primary-lt" style="width: 35%"></div>
+  </div>
+  <div class="progressbg-text">Germany</div>
+  <div class="progressbg-value">35%</div>
+</div>
+<div class="progressbg">
+  <div class="progress progressbg-progress">
+    <div class="progress-bar bg-primary-lt" style="width: 28%"></div>
+  </div>
+  <div class="progressbg-text">United Stated</div>
+  <div class="progressbg-value">28%</div>
+</div>
+<div class="progressbg">
+  <div class="progress progressbg-progress">
+	 <div class="progress-bar bg-primary-lt" style="width: 20%"></div>
+  </div>
+  <div class="progressbg-text">United Kingdom</div>
+  <div class="progressbg-value">20%</div>
+</div>
+<div class="progressbg">
+  <div class="progress progressbg-progress">
+	 <div class="progress-bar bg-primary-lt" style="width: 15%"></div>
+  </div>
+  <div class="progressbg-text">France</div>
+  <div class="progressbg-value">15%</div>
+</div>
+```

docs/ui/components/progressbg.mdx

@@ -1,16 +0,0 @@
----
-title: Progress background
-description: By using a progress bar component as a background element, designers can create a dynamic and engaging visual experience for users. For example, the progress bar could be used to represent the completion of a long-term goal or project, such as a fundraising campaign or construction project. As users interact with the page, the progress bar could gradually fill up, creating a sense of momentum and progress.
----
-
-```html example vertical centered columns={1}
-<div class="progressbg">
-  <div class="progress progressbg-progress">
-    <div class="progress-bar bg-primary-lt" style="width: 35%" role="progressbar" aria-valuenow="35" aria-valuemin="0" aria-valuemax="100" aria-label="35% Complete">
-      <span class="visually-hidden">35% Complete</span>
-    </div>
-  </div>
-  <div class="progressbg-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea eos ullam ut. Doloribus est in laborum, ratione recusandae reprehenderit tenetur. Accusantium consectetur ea enim facere ipsam praesentium quas soluta tenetur?</div>
-  <div class="progressbg-value">35%</div>
-</div>
-```

docs/ui/components/spinners.mdx

@@ -8,13 +8,19 @@ bootstrapLink: components/spinners/
 
 Use the default spinner to notify users that an action they have taken is in progress, helping them avoid confusion.
 
+```html
+<div class="spinner-border"></div>
+```
+
+Look at the example below to see how the spinner works:
+
 ```html example centered
 <div class="spinner-border"></div>
 ```
 
 ## Colors
 
-Choose one of the available colors to customize the spinner and make it suit your design.
+Choose one of the available colors to customize the spinner and make it suit your design. Full list of available colors can be found in the [Colors](/docs/ui/base/colors) section.
 
 ```html example centered separated
 <div class="spinner-border text-blue" role="status"></div>
@@ -75,11 +81,20 @@ Growing spinners also come in a variety of colors to choose from.
 <div class="spinner-grow text-azure" role="status"></div>
 ```
 
-### Button with spinner
+## Button with spinner
 
 Use buttons with spinners to notify users that an action they have taken by clicking the button is in progress and prevent them from clicking multiple times or giving up.
 
-```html example centered separated code
+```html
+<a href="#" class="btn btn-primary">
+  <span class="spinner-border spinner-border-sm me-2" role="status"></span>
+  Button
+</a>
+```
+
+Look at the example below to see how the button with a spinner works:
+
+```html example centered separated code background="bg-light"
 <a href="#" class="btn btn-primary">
   <span class="spinner-border spinner-border-sm me-2" role="status"></span>
   Button
@@ -104,11 +119,15 @@ Use buttons with spinners to notify users that an action they have taken by clic
 
 ## Animated dots
 
-```html example centered code
+Use animated dots to show the loading state of a component. They provide feedback for an action a user has taken, when it takes a bit longer to complete. To do it you need to use the `.animated-dots` class on `span` element.
+
+```html example centered code background="bg-light"
 <h1>Loading<span class="animated-dots"></span></h1>
 ```
 
-```html example centered separated
+Use buttons with animated dots to notify users that an action they have taken by clicking the button is in progress and prevent them from clicking multiple times or giving up.
+
+```html example centered separated background="bg-light"
 <a href="#" class="btn btn-primary">
   Loading<span class="animated-dots"></span>
 </a>

docs/ui/components/statuses.mdx

@@ -5,7 +5,17 @@ description: Status dots are particularly useful if you want to make an interfac
 
 ## Default markup
 
-```html example vertical height="7rem"
+Use the default status to notify users about the status of a component or page, helping them avoid confusion. Full list of available colors can be found in the [Colors](/docs/ui/base/colors) section.
+
+```html
+<span class="status status-blue">Blue</span>
+<span class="status status-azure">Azure</span>
+...
+```
+
+Look at the example below to see how the status works:
+
+```html example centered separated columns={2}
 <span class="status status-blue">Blue</span>
 <span class="status status-azure">Azure</span>
 <span class="status status-indigo">Indigo</span>
@@ -20,15 +30,21 @@ description: Status dots are particularly useful if you want to make an interfac
 <span class="status status-cyan">Cyan</span>
 ```
 
+
+## Status with dot
+
+You can add a dot to the status to make it more noticeable. To do this, use the `.status-dot` element inside the `.status` element.
+
 ```html
-<span class="status status-blue">Blue</span>
-<span class="status status-azure">Azure</span>
-...
+<span class="status status-blue">
+  <span class="status-dot"></span>
+  Blue
+</span>
 ```
 
-## Status with dot
+Look at the example below to see how the status with a dot works:
 
-```html example vertical height="7rem"
+```html example centered separated columns={2}
 <span class="status status-blue">
   <span class="status-dot"></span>
   Blue
@@ -81,7 +97,9 @@ description: Status dots are particularly useful if you want to make an interfac
 
 ### Animated dot
 
-```html example vertical height="7rem"
+You can also animate the dot to make it more noticeable. To do this, use the `.status-dot-animated` class inside the `.status-dot` element.
+
+```html example centered separated columns={2}
 <span class="status status-blue">
   <span class="status-dot status-dot-animated"></span>
   Blue
@@ -134,7 +152,9 @@ description: Status dots are particularly useful if you want to make an interfac
 
 ## Lite status
 
-```html example vertical height="7rem"
+Use the lite status to make the status less noticeable. To do this, use the `.status-lite` class inside the `.status` element.
+
+```html example centered separated columns={2}
 <span class="status status-blue status-lite">
   <span class="status-dot"></span>
   Blue
@@ -187,7 +207,9 @@ description: Status dots are particularly useful if you want to make an interfac
 
 ## Status dots
 
-```html example centered separated height="7rem"
+If you need only dot status, you can use the `.status-dot` class.
+
+```html example centered separated
 <span class="status-dot status-blue"></span>
 <span class="status-dot status-azure"></span>
 <span class="status-dot status-indigo"></span>
@@ -202,9 +224,9 @@ description: Status dots are particularly useful if you want to make an interfac
 <span class="status-dot status-cyan"></span>
 ```
 
-### Animated dots
+The dots can also be animated. To do this, use the `.status-dot-animated` class.
 
-```html example centered separated height="7rem"
+```html example centered separated
 <span class="status-dot status-dot-animated status-blue"></span>
 <span class="status-dot status-dot-animated status-azure"></span>
 <span class="status-dot status-dot-animated status-indigo"></span>
@@ -221,7 +243,9 @@ description: Status dots are particularly useful if you want to make an interfac
 
 ## Status indicator
 
-```html example vertical centered height="7rem"
+Use the status indicator to show the status of a component or page. The status indicator can be animated. To do this, use the `.status-indicator-animated` class.
+
+```html example centered separated columns={1} centered
 <span class="status-indicator status-blue status-indicator-animated">
   <span class="status-indicator-circle"></span>
   <span class="status-indicator-circle"></span>

docs/ui/forms/form-color-check.mdx

@@ -1,10 +1,20 @@
 ---
 title: Color check
+description: The color check is a great way to make your form more user-friendly and engaging. You can use the color check to create a visually appealing form that will help users make decisions quickly and easily.
 ---
 
-Your input controls can come in a variety of colors, depending on your preferences. Click [here](/docs/getting-started/colors) to see the list of available colors.
+Your input controls can come in a variety of colors, depending on your preferences. Click [here](/docs/ui/base/colors) to see the list of available colors.
 
-```html example centered
+```html
+<label class="form-colorinput">
+  <input name="..." type="radio" value="..." class="form-colorinput-input" />
+  <span class="form-colorinput-color bg-lime"></span>
+</label>
+```
+
+There is also an example of a color input:
+
+```html example centered background="bg-light"
 <div class="mb-3">
   <label class="form-label">Color Input</label>
   <div class="row g-2">
@@ -73,19 +83,21 @@ Your input controls can come in a variety of colors, depending on your preferenc
         <input name="color" type="radio" value="lime" class="form-colorinput-input" />
         <span class="form-colorinput-color bg-lime"></span>
       </label>
+    </div>
+	 <div class="col-auto">
+      <label class="form-colorinput">
+        <input name="color" type="radio" value="green" class="form-colorinput-input" />
+        <span class="form-colorinput-color bg-green"></span>
+      </label>
     </div>
   </div>
 </div>
 ```
 
-```html
-<label class="form-colorinput">
-  <input name="color" type="radio" value="lime" class="form-colorinput-input" />
-  <span class="form-colorinput-color bg-lime"></span>
-</label>
-```
+If you need to select only one color, you can use the radio input type:
 
-```html example centered
+
+```html example centered background="bg-light"
 <div class="mb-3">
   <label class="form-label">Color Input</label>
   <div class="row g-2">
@@ -154,6 +166,12 @@ Your input controls can come in a variety of colors, depending on your preferenc
         <input name="color-rounded" type="radio" value="lime" class="form-colorinput-input" />
         <span class="form-colorinput-color bg-lime rounded-circle"></span>
       </label>
+    </div>
+	 <div class="col-auto">
+      <label class="form-colorinput">
+        <input name="color-rounded" type="radio" value="green" class="form-colorinput-input" />
+        <span class="form-colorinput-color bg-green rounded-circle"></span>
+      </label>
     </div>
   </div>
 </div>
@@ -161,7 +179,7 @@ Your input controls can come in a variety of colors, depending on your preferenc
 
 ```html
 <label class="form-colorinput">
-  <input name="color-rounded" type="radio" value="dark" class="form-colorinput-input" />
+  <input name="..." type="radio" value="..." class="form-colorinput-input" />
   <span class="form-colorinput-color bg-dark rounded-circle"></span>
 </label>
 ```
@@ -170,6 +188,12 @@ Your input controls can come in a variety of colors, depending on your preferenc
 
 Add an color picker to your form to let users customise it according to their preferences.
 
+```html
+<input type="color" class="form-control form-control-color" value="#066fd1" title="Choose your color">
+```
+
+There is also an example of a color picker input:
+
 ```html example centered
 <div class="mb-3">
   <label class="form-label">Color picker</label>

docs/ui/forms/form-elements.mdx

@@ -7,16 +7,30 @@ libs: nouislider
 
 ## Classic inputs
 
-Use classic, user-friendly inputs, label them appropriately and include input placeholders that will help users avoid confusion when completing a form.
+Use classic, user-friendly inputs, label them appropriately and include input placeholders that will help users avoid confusion when completing a form. Add the `form-control` class to style your input controls.
 
-```html example centered columns={1} height="20rem"
+```html
+<input type="text" class="form-control" name="example-text-input" placeholder="Input placeholder" />
+```
+
+All variants of the input control are available in the examples below:
+
+```html example columns={1} height="25rem"
 <div class="mb-3">
   <label class="form-label">Text</label>
   <input type="text" class="form-control" name="example-text-input" placeholder="Input placeholder" />
 </div>
 <div class="mb-3">
   <label class="form-label">Password</label>
-  <input type="text" class="form-control" name="example-password-input" placeholder="Input placeholder" />
+  <input type="password" class="form-control" name="example-password-input" placeholder="Input placeholder" />
+</div>
+<div class="mb-3">
+  <label class="form-label">Disabled</label>
+  <input type="text" class="form-control" name="example-password-input" placeholder="Input placeholder" disabled />
+</div>
+<div class="mb-3">
+  <label class="form-label">Readonly</label>
+  <input type="text" class="form-control" name="example-password-input" value="Readolny value" readonly />
 </div>
 ```
 

docs/ui/forms/form-helpers.mdx

@@ -1,12 +1,76 @@
 ---
 title: Form helpers
-description: A form helper can be used to provide users with additional information about the elements of a form that may be unclear.
+description: Use form helpers to provide additional information about a form element. You can use input help, required field, form hint, and additional info inside the label.
 ---
 
 ## Input help
 
-Use an input helper to display additional information about a form element. The text label will appear once a user hovers over the helper.
+Use an input helper to display additional information about a form element. The text label will appear once a user hovers over the helper. To add an input helper, use the `.form-help` class.
 
-```html example centered
-<span class="form-help" data-bs-toggle="popover" data-bs-placement="top" data-bs-html="true" data-bs-content="<p>ZIP Code must be US or CDN format. You can use an extended ZIP+4 code to determine address more accurately.</p><p class='mb-0'><a href=''>USP ZIP codes lookup tools</a></p>">?</span>
+```html
+<span class="form-help" data-bs-toggle="popover" data-bs-placement="top" data-bs-html="true" data-bs-content="<p>...</p>">?</span>
 ```
+
+Look at the example below to see how the input help works:
+
+```html example centered height="25rem" columns={1}
+<div>
+  <label class="form-label">
+    ZIP Code
+    <span class="form-help" data-bs-toggle="popover" data-bs-placement="top" data-bs-html="true" data-bs-content="<p>ZIP Code must be US or CDN format. You can use an extended ZIP+4 code to determine address more accurately.</p><p class='mb-0'><a href=''>USP ZIP codes lookup tools</a></p>">?</span>
+  </label>
+  <input type="text" class="form-control" placeholder="Your ZIP Code">
+</div>
+```
+
+## Required field
+
+Use the `.required` class to indicate that a field is required. It will add a red asterisk to the label.
+
+```html
+<label class="form-label required">Required</label>
+```
+
+Look at the example below to see how the required field works:
+
+```html example centered columns={1}
+<div>
+  <label class="form-label required">Required</label>
+  <input type="text" class="form-control" name="..." placeholder="Required...">
+</div>
+```
+
+## Form hint
+
+Use a form hint to provide users with additional information about a form element. The text will appear below the input field. To add a form hint, use the `.form-hint` class.
+
+```html
+<div class="form-hint">We'll never share your email with anyone else.</div>
+```
+
+Look at the example below to see how the form hint works:
+
+```html example centered columns={1}
+<div>
+  <label class="form-label">Email address</label>
+  <input type="email" class="form-control" placeholder="Enter your email address">
+  <div class="form-hint">We'll never share your email with anyone else.</div>
+</div>
+```
+
+## Additional info inside label
+
+Use the `.form-label-description` class to add additional information to the label. The text will appear next to the label. You can use it to add for example a character counter.
+
+```html
+<label class="form-label">Textarea <span class="form-label-description">56/100</span></label>
+```
+
+This example shows how to use the additional info inside the label:
+
+```html example centered columns={1} height="15rem"
+<div>
+  <label class="form-label">Textarea <span class="form-label-description">56/100</span></label>
+  <textarea class="form-control" name="" rows="3" placeholder="Content.."></textarea>
+</div>
+```

docs/ui/forms/form-image-check.mdx

@@ -1,8 +1,22 @@
 ---
 title: Image check
+description: The image check is a great way to make your form more user-friendly and engaging. You can use the image check to create a visually appealing form that will help users make decisions quickly and easily.
 ---
 
-Add an image check to your form and give users visually attractive options to choose from.
+## Default markup
+
+To build an image check, you need to use the `.form-imagecheck` class and the `.form-imagecheck-input` class for the input element. You can also use the `.form-imagecheck-figure` class to style the image and the `.form-imagecheck-image` class to style the image itself.
+
+```html
+<label class="form-imagecheck">
+  <input name="..." type="checkbox" value="" class="form-imagecheck-input" checked />
+  <span class="form-imagecheck-figure">
+    <img src="..." alt="" class="form-imagecheck-image" />
+  </span>
+</label>
+```
+
+Look at the examples below to see how the image check works:
 
 ```html example centered columns="2" height="15rem"
 <div class="mb-3">
@@ -10,7 +24,7 @@ Add an image check to your form and give users visually attractive options to ch
   <div class="row g-2">
     <div class="col-3">
       <label class="form-imagecheck">
-        <input name="form-imagecheck" type="checkbox" value="1" class="form-imagecheck-input" />
+        <input name="image" type="checkbox" value="1" class="form-imagecheck-input" />
         <span class="form-imagecheck-figure">
           <img src="/samples/photos/everything-you-need-to-work-from-your-bed-2.jpg" alt="" class="form-imagecheck-image" />
         </span>
@@ -18,7 +32,7 @@ Add an image check to your form and give users visually attractive options to ch
     </div>
     <div class="col-3">
       <label class="form-imagecheck">
-        <input name="form-imagecheck" type="checkbox" value="2" class="form-imagecheck-input" checked />
+        <input name="image" type="checkbox" value="2" class="form-imagecheck-input" checked />
         <span class="form-imagecheck-figure">
           <img src="/samples/photos/color-palette-guide-sample-colors-catalog-.jpg" alt="" class="form-imagecheck-image" />
         </span>
@@ -26,7 +40,7 @@ Add an image check to your form and give users visually attractive options to ch
     </div>
     <div class="col-3">
       <label class="form-imagecheck">
-        <input name="form-imagecheck" type="checkbox" value="3" class="form-imagecheck-input" />
+        <input name="image" type="checkbox" value="3" class="form-imagecheck-input" />
         <span class="form-imagecheck-figure">
           <img src="/samples/photos/woman-read-book-and-drink-coffee-2.jpg" alt="" class="form-imagecheck-image" />
         </span>
@@ -34,7 +48,7 @@ Add an image check to your form and give users visually attractive options to ch
     </div>
     <div class="col-3">
       <label class="form-imagecheck">
-        <input name="form-imagecheck" type="checkbox" value="4" class="form-imagecheck-input" checked />
+        <input name="image" type="checkbox" value="4" class="form-imagecheck-input" checked />
         <span class="form-imagecheck-figure">
           <img src="/samples/photos/stylish-workspace-with-macbook-pro-2.jpg" alt="" class="form-imagecheck-image" />
         </span>
@@ -44,14 +58,9 @@ Add an image check to your form and give users visually attractive options to ch
 </div>
 ```
 
-```html
-<label class="form-imagecheck">
-  <input name="" type="checkbox" value="" class="form-imagecheck-input" checked />
-  <span class="form-imagecheck-figure">
-    <img src="..." alt="" class="form-imagecheck-image" />
-  </span>
-</label>
-```
+## Radio buttons
+
+If you want to use the image check as a radio button, you can change the input type to `radio`. 
 
 ```html example centered columns="2" height="15rem"
 <div class="mb-3">
@@ -59,7 +68,7 @@ Add an image check to your form and give users visually attractive options to ch
   <div class="row g-2">
     <div class="col-3">
       <label class="form-imagecheck mb-2">
-        <input name="form-imagecheck-radio" type="radio" value="1" class="form-imagecheck-input" />
+        <input name="image" type="radio" value="1" class="form-imagecheck-input" />
         <span class="form-imagecheck-figure">
           <img src="/samples/photos/woman-drinking-hot-tea-in-her-home-office.jpg" alt="" class="form-imagecheck-image" />
         </span>
@@ -67,7 +76,7 @@ Add an image check to your form and give users visually attractive options to ch
     </div>
     <div class="col-3">
       <label class="form-imagecheck mb-2">
-        <input name="form-imagecheck-radio" type="radio" value="2" class="form-imagecheck-input" checked />
+        <input name="image" type="radio" value="2" class="form-imagecheck-input" checked />
         <span class="form-imagecheck-figure">
           <img src="/samples/photos/young-woman-sitting-on-the-sofa-and-working-on-her-laptop-3.jpg" alt="" class="form-imagecheck-image" />
         </span>
@@ -75,7 +84,7 @@ Add an image check to your form and give users visually attractive options to ch
     </div>
     <div class="col-3">
       <label class="form-imagecheck mb-2">
-        <input name="form-imagecheck-radio" type="radio" value="3" class="form-imagecheck-input" />
+        <input name="image" type="radio" value="3" class="form-imagecheck-input" />
         <span class="form-imagecheck-figure">
           <img src="/samples/photos/beautiful-blonde-woman-relaxing-with-a-can-of-coke-on-a-tree-stump-by-the-beach.jpg" alt="" class="form-imagecheck-image" />
         </span>
@@ -83,7 +92,7 @@ Add an image check to your form and give users visually attractive options to ch
     </div>
     <div class="col-3">
       <label class="form-imagecheck mb-2">
-        <input name="form-imagecheck-radio" type="radio" value="4" class="form-imagecheck-input" checked />
+        <input name="image" type="radio" value="4" class="form-imagecheck-input" checked />
         <span class="form-imagecheck-figure">
           <img src="/samples/photos/book-on-the-grass.jpg" alt="" class="form-imagecheck-image" />
         </span>
@@ -95,53 +104,57 @@ Add an image check to your form and give users visually attractive options to ch
 
 ```html
 <label class="form-imagecheck">
-  <input name="form-imagecheck-radio" type="radio" value="1" class="form-imagecheck-input" />
+  <input name="..." type="radio" value="1" class="form-imagecheck-input" />
   <span class="form-imagecheck-figure">
-    <img src="/samples/photos/woman-drinking-hot-tea-in-her-home-office.jpg" alt="" class="form-imagecheck-image" />
+    <img src="..." alt="" class="form-imagecheck-image" />
   </span>
 </label>
 ```
 
-```html example centered columns="1" height="15rem"
+## Avatars
+
+If you want to use the image check with avatars, you can use the `.avatar` instead of the image.
+
+```html example centered columns={2} height="15rem"
 <div class="mb-3">
   <label class="form-label">Person Check</label>
   <div class="row g-2">
     <div class="col-auto">
       <label class="form-imagecheck mb-2">
-        <input name="form-imagecheck" type="checkbox" value="1" class="form-imagecheck-input" />
+        <input name="image" type="checkbox" value="1" class="form-imagecheck-input" />
         <span class="form-imagecheck-figure">
           <span class="form-imagecheck-image">
-            <span class="avatar avatar-md" style="background-image: url(/samples/avatars/057f.jpg)"></span>
+            <span class="avatar avatar-xl" style="background-image: url(/samples/avatars/057f.jpg)"></span>
           </span>
         </span>
       </label>
     </div>
     <div class="col-auto">
       <label class="form-imagecheck mb-2">
-        <input name="form-imagecheck" type="checkbox" value="2" class="form-imagecheck-input" checked />
+        <input name="image" type="checkbox" value="2" class="form-imagecheck-input" checked />
         <span class="form-imagecheck-figure">
           <span class="form-imagecheck-image">
-            <span class="avatar avatar-md">HS</span>
+            <span class="avatar avatar-xl">HS</span>
           </span>
         </span>
       </label>
     </div>
     <div class="col-auto">
       <label class="form-imagecheck mb-2">
-        <input name="form-imagecheck" type="checkbox" value="3" class="form-imagecheck-input" />
+        <input name="image" type="checkbox" value="3" class="form-imagecheck-input" />
         <span class="form-imagecheck-figure">
           <span class="form-imagecheck-image">
-            <span class="avatar avatar-md" style="background-image: url(/samples/avatars/062m.jpg)"></span>
+            <span class="avatar avatar-xl" style="background-image: url(/samples/avatars/062m.jpg)"></span>
           </span>
         </span>
       </label>
     </div>
     <div class="col-auto">
       <label class="form-imagecheck mb-2">
-        <input name="form-imagecheck" type="checkbox" value="4" class="form-imagecheck-input" checked />
+        <input name="image" type="checkbox" value="4" class="form-imagecheck-input" checked />
         <span class="form-imagecheck-figure">
           <span class="form-imagecheck-image">
-            <span class="avatar avatar-md" style="background-image: url(/samples/avatars/070m.jpg)"></span>
+            <span class="avatar avatar-xl" style="background-image: url(/samples/avatars/070m.jpg)"></span>
           </span>
         </span>
       </label>
@@ -152,7 +165,7 @@ Add an image check to your form and give users visually attractive options to ch
 
 ```html
 <label class="form-imagecheck">
-  <input name="" type="checkbox" value="" class="form-imagecheck-input" />
+  <input name="..." type="checkbox" value="..." class="form-imagecheck-input" />
   <span class="form-imagecheck-figure">
     <span class="form-imagecheck-image">
       <span class="avatar avatar-md" style="background-image: url(...)"></span>

docs/ui/forms/form-input-mask.mdx

@@ -3,16 +3,43 @@ title: Input mask
 description: An input mask is a used to clarify the input format required in a given field and is helpful for users, removing confusion and reducing the number of validation errors.
 ---
 
-<Callout>
-  To be able to use the input mask in your application you will need to install the imask dependency with `npm install imask`.
-</Callout>
+## Installation
+
+To be able to use the input mask in your application you will need to install the imask dependency. You can do this by running the following command:
+
+<TabsPackage name="imask" />
+
+And import or require:
+
+```javascript
+import IMask from 'imask';
+```
+
+You can also use the CDN link to include the script in your project:
+
+```html
+<script src="https://cdn.jsdelivr.net/npm/imask"></script>
+```
+
+If you struggle with the installation, you can find more information in the [IMask documentation](https://imask.js.org/guide.html#installation).
 
 ## Default markup
 
 Use an input mask in the fields where users have to enter their phone number, to make the formatting rules clear and help them avoid confusion.
 
+To create an input mask, add the `data-mask` attribute to the input element:
+
+```html
+<input type="text" name="input-mask" class="form-control" data-mask="(00) 0000-0000" placeholder="(00) 0000-0000" autocomplete="off" />
+```
+
+Look at the example below to see how the input mask works:
+
 ```html example centered columns={1}
 <label class="form-label">Telephone mask</label>
 <input type="text" name="input-mask" class="form-control" data-mask="(00) 0000-0000" data-mask-visible="true" placeholder="(00) 0000-0000" autocomplete="off" />
 ```
 
+## More examples
+
+If you need more examples of input masks, you can find them in the [IMask documentation](https://imask.js.org/guide.html#masked-input).

docs/ui/forms/form-selectboxes.mdx

@@ -1,12 +1,59 @@
 ---
-title: Form selectboxes
+title: Form selectgroup
+description: Use selectgroup to make your form more intuitive by providing users with a set of options to choose from. You can add simple selectgroup with a label, use icons only or icons with labels. Alternatively, you can use pill selectgroup if they go well with your design.
 ---
 
-Add selectboxes to make your form more intuitive by providing users with a set of options to choose from. You can add simple selectboxes with a label, use icons only or icons with labels. Alternatively, you can use pill selectboxes if they go well with your design.
+## Simple selectgroup
+
+To create a simple selectgroup, use the `.form-selectgroup` class. You should add a label to the selectgroup by using the `.form-selectgroup-item` class for the input element and the `.form-selectgroup-label` class for the label.
+
+```html
+<label class="form-selectgroup-item">
+  <input type="checkbox" name="name" value="..." class="form-selectgroup-input" checked />
+  <span class="form-selectgroup-label">...</span>
+</label>
+```
+
+Look at the example below to see how the simple selectgroup works:
 
 ```html example columns={1} centered
-<div class="mb-3">
-  <label class="form-label">Simple selectgroup</label>
+<div>
+  <div class="form-selectgroup">
+    <label class="form-selectgroup-item">
+      <input type="radio" name="name" value="HTML" class="form-selectgroup-input" checked />
+      <span class="form-selectgroup-label">HTML</span>
+    </label>
+    <label class="form-selectgroup-item">
+      <input type="radio" name="name" value="CSS" class="form-selectgroup-input" />
+      <span class="form-selectgroup-label">CSS</span>
+    </label>
+    <label class="form-selectgroup-item">
+      <input type="radio" name="name" value="PHP" class="form-selectgroup-input" />
+      <span class="form-selectgroup-label">PHP</span>
+    </label>
+    <label class="form-selectgroup-item">
+      <input type="radio" name="name" value="JavaScript" class="form-selectgroup-input" />
+      <span class="form-selectgroup-label">JavaScript</span>
+    </label>
+  </div>
+</div>
+```
+
+## Multiple choices
+
+You can also create a selectgroup with multiple choices. To do this, change the `type` attribute of the input element to `checkbox`.
+
+```html
+<label class="form-selectgroup-item">
+  <input type="checkbox" name="name" value="..." class="form-selectgroup-input" checked />
+  <span class="form-selectgroup-label">...</span>
+</label>
+```
+
+Look at the example below to see how the multiple choices selectgroup works:
+
+```html example columns={1} centered
+<div>
   <div class="form-selectgroup">
     <label class="form-selectgroup-item">
       <input type="checkbox" name="name" value="HTML" class="form-selectgroup-input" checked />
@@ -28,6 +75,21 @@ Add selectboxes to make your form more intuitive by providing users with a set o
 </div>
 ```
 
+## Icon input
+
+To create an icon input, use the `.form-selectgroup` class. You should add a label to the selectgroup by using the `.form-selectgroup-item` class for the input element and the `.form-selectgroup-label` class for the label. You can use the `.icon` class to style the icon.
+
+```html
+<label class="form-selectgroup-item">
+	<input type="checkbox" name="name" value="sun" class="form-selectgroup-input" checked />
+	<span class="form-selectgroup-label">
+		<svg class="icon" width="24" height="24">...</svg>
+	</span>
+</label>
+```
+
+We recommend you use Tabler Icons for the best experience. You can find over <IconsCount rounded /> free icons in the [Tabler Icons](https://tabler-icons.io/) library. Just copy the SVG code and paste it into your project.
+
 ```html example columns={1} centered
 <div class="mb-3">
   <label class="form-label">Icon input</label>
@@ -78,6 +140,8 @@ Add selectboxes to make your form more intuitive by providing users with a set o
 </div>
 ```
 
+You can also add text to the element. Look at the example below to see how it works:
+
 ```html example columns={1} centered
 <div class="mb-3">
   <label class="form-label">Selectgroup with icons and text</label>
@@ -117,6 +181,18 @@ Add selectboxes to make your form more intuitive by providing users with a set o
 </div>
 ```
 
+## Pill selectgroup
+
+If you want to use pill selectgroup, use the `.form-selectgroup-pills` class. All the other classes are the same as in the simple selectgroup.
+
+```html
+<div class="form-selectgroup form-selectgroup-pills">
+	...
+</div>
+```
+
+Look at the example below to see how the pill selectgroup works:
+
 ```html example columns={1} centered
 <div class="mb-3">
   <label class="form-label">Different style</label>

docs/ui/forms/form-validation.mdx

@@ -3,12 +3,47 @@ title: Validation states
 description: To inform users whether the entered value is correct or not, use either of the validation states. Thanks to that, users will immediately know which form elements they need to correct and, if the state displays as invalid, why the value is incorrect.
 ---
 
-```html example centered columns="1" height="20rem"
-<div class="mb-3">
-  <label class="form-label">Validation States </label>
-  <input type="text" class="form-control is-valid mb-2" placeholder="Valid State..." />
-  <input type="text" class="form-control is-invalid" placeholder="Invalid State..." />
-  <div class="invalid-feedback">Invalid feedback</div>
+## Validation states
+
+To inform users whether the entered value is correct or not, use either of the validation states. Thanks to that, users will immediately know which form elements they need to correct and, if the state displays as invalid, why the value is incorrect.
+
+To apply the validation state to the form control, use the `.is-valid` and `.is-invalid` classes.
+
+```html example centered separated columns="1" background="bg-light" height="20rem"
+<input type="text" class="form-control is-valid" placeholder="Valid State..." />
+<input type="text" class="form-control is-invalid" placeholder="Invalid State..." />
+```
+
+## Validation feedback
+
+To provide users with additional information about the validation state, you can use the `.valid-feedback` and `.invalid-feedback` classes.
+
+```html
+<input type="text" class="form-control is-valid" placeholder="Valid State..." />
+<div class="valid-feedback">Looks good!</div>
+```
+
+This is how it works in the example below:
+
+```html example centered columns="1" background="bg-light" height="20rem"
+<div>
+  <label class="form-label required">City</label>
+  <input type="text" class="form-control is-invalid" required>
+  <div class="invalid-feedback">
+    Please provide a valid city.
+  </div>
+</div>
+```
+
+You can also use the `.valid-feedback` to provide users with positive feedback.
+
+```html example centered columns="1" background="bg-light" height="20rem"
+<div>
+  <label class="form-label required">City</label>
+  <input type="text" class="form-control is-valid" value="Warsaw">
+  <div class="valid-feedback">
+	 Looks good!
+  </div>
 </div>
 ```
 
@@ -16,10 +51,15 @@ description: To inform users whether the entered value is correct or not, use ei
 
 If you prefer a more subtle manner of informing users of the input control validation state, you can use tick and cross symbols and resign from colored control frames and the validation feedback.
 
-```html example centered columns="1" height="20rem"
-<div class="mb-3">
-  <label class="form-label">Validation States (lite)</label>
-  <input type="text" class="form-control is-valid is-valid-lite mb-2" placeholder="Valid State..." />
-  <input type="text" class="form-control is-invalid is-invalid-lite" placeholder="Invalid State..." />
-</div>
+To do this, use the `.is-valid-lite` and `.is-invalid-lite` classes.
+
+```html
+<input type="text" class="form-control is-valid is-valid-lite" placeholder="Valid State..." />
+```
+
+Look how it works in the example below:
+
+```html example centered separated vertical columns="1" background="bg-light" height="20rem"
+<input type="text" class="form-control is-valid is-valid-lite" placeholder="Valid State..." />
+<input type="text" class="form-control is-invalid is-invalid-lite" placeholder="Invalid State..." />
 ```

docs/ui/plugins/flags.mdx

@@ -17,7 +17,21 @@ You can also include plugin via CDN:
 
 ## Flag
 
-To create a flag, add the `flag` class to a component and choose the country whose flag you want to use. The full list of countries can be found below.
+To create a flag, add the `flag` class to a component and choose the country whose flag you want to use. 
+
+```html example centered separated plugins="flags"
+<span class="flag flag-country-us"></span>
+```
+
+
+## Country flags
+
+To use the flag of a particular country, add the `flag-country-(country name)` class. For example, to create a flag of Andorra should use the following class: `.flag-country-ad`. Full list of countries can be found below.
+
+```html
+<span class="flag flag-country-ad"></span>
+<span class="flag flag-country-ae"></span>
+```
 
 ```html example centered separated plugins="flags"
 <span class="flag flag-country-tg"></span>
@@ -45,8 +59,257 @@ Using Bootstrap’s typical naming structure, you can create a standard flag, or
 <span class="flag flag-xs ..."></span>
 ```
 
-## Types
+## Flags list
 
-To use the flag of a particular country, add the `flag-country-(country name)` class. For example, to create a flag of Andorra should use the following class: `.flag-country-ad`.
+The full list of countries can be found below.
 
-<FlagsTable />
+<FlagsTable countries={[
+  { "name": "Andorra", "code": "ad" },
+  { "name": "United Arab Emirates", "code": "ae" },
+  { "name": "Afghanistan", "code": "af" },
+  { "name": "Antigua", "code": "ag" },
+  { "name": "Anguilla", "code": "ai" },
+  { "name": "Armenia", "code": "am" },
+  { "name": "Angolan", "code": "ao" },
+  { "name": "Antarctica", "code": "aq" },
+  { "name": "Argentina", "code": "ar" },
+  { "name": "American Samoa", "code": "as" },
+  { "name": "Austria", "code": "at" },
+  { "name": "Australia", "code": "au" },
+  { "name": "Aruba", "code": "aw" },
+  { "name": "Aslan Islands", "code": "ax" },
+  { "name": "Azerbaijan", "code": "az" },
+  { "name": "Bosnian", "code": "ba" },
+  { "name": "Barbados", "code": "bb" },
+  { "name": "Belgium", "code": "be" },
+  { "name": "Burkina Faso", "code": "bf" },
+  { "name": "Bulgaria", "code": "bg" },
+  { "name": "Bahrain", "code": "bh" },
+  { "name": "Burundi", "code": "bi" },
+  { "name": "Benin", "code": "bj" },
+  { "name": "Saint-Barthélemy", "code": "bl" },
+  { "name": "Bermuda", "code": "bm" },
+  { "name": "Bruneian", "code": "bn" },
+  { "name": "Bolivia", "code": "bo" },
+  { "name": "Bonaire", "code": "bq-bo" },
+  { "name": "Brazil", "code": "br" },
+  { "name": "Bahamas", "code": "bs" },
+  { "name": "Bhutan", "code": "bt" },
+  { "name": "Bouvet Island", "code": "bv" },
+  { "name": "Batswana", "code": "bw" },
+  { "name": "Belarus", "code": "by" },
+  { "name": "Belize", "code": "bz" },
+  { "name": "Canada", "code": "ca" },
+  { "name": "Cocos Island", "code": "cc" },
+  { "name": "Democratic Republic of Congo", "code": "cd" },
+  { "name": "Central African Republic", "code": "cf" },
+  { "name": "Republic of the Congo", "code": "cg" },
+  { "name": "Switzerland", "code": "ch" },
+  { "name": "Ivory Coast", "code": "ci" },
+  { "name": "Cook Island", "code": "ck" },
+  { "name": "Chile", "code": "cl" },
+  { "name": "Cameroon", "code": "cm" },
+  { "name": "China", "code": "cn" },
+  { "name": "Colombia", "code": "co" },
+  { "name": "Costa Rica", "code": "cr" },
+  { "name": "Cuba", "code": "cu" },
+  { "name": "Cape Verde", "code": "cv" },
+  { "name": "Curacao", "code": "cw" },
+  { "name": "Christmas Island", "code": "cx" },
+  { "name": "Cyprus", "code": "cy" },
+  { "name": "Czech Republic", "code": "cz" },
+  { "name": "Germany", "code": "de" },
+  { "name": "Djibouti", "code": "dj" },
+  { "name": "Denmark", "code": "dk" },
+  { "name": "Dominica", "code": "dm" },
+  { "name": "Dominican Republic", "code": "do" },
+  { "name": "Algeria", "code": "dz" },
+  { "name": "Ecuador", "code": "ec" },
+  { "name": "Estonia", "code": "ee" },
+  { "name": "Egypt", "code": "eg" },
+  { "name": "Sahrawi", "code": "eh" },
+  { "name": "Eritrea", "code": "er" },
+  { "name": "Spain", "code": "es" },
+  { "name": "Ethiopia", "code": "et" },
+  { "name": "European Union", "code": "eu" },
+  { "name": "Finland", "code": "fi" },
+  { "name": "Fiji", "code": "fj" },
+  { "name": "Falkland Islands", "code": "fk" },
+  { "name": "Federate States of Micronesia", "code": "fm" },
+  { "name": "Faroe Islands", "code": "fo" },
+  { "name": "France", "code": "fr" },
+  { "name": "Gabon", "code": "ga" },
+  { "name": "Great Britain", "code": "gb" },
+  { "name": "England", "code": "gb-eng" },
+  { "name": "Northern Ireland", "code": "gb-nir" },
+  { "name": "Scotland", "code": "gb-sct" },
+  { "name": "Wales", "code": "gb-wls" },
+  { "name": "Grenada", "code": "gd" },
+  { "name": "Georgia", "code": "ge" },
+  { "name": "Guyana", "code": "gf" },
+  { "name": "Guernsey", "code": "gg" },
+  { "name": "Ghana", "code": "gh" },
+  { "name": "Gibraltar", "code": "gi" },
+  { "name": "Greenland", "code": "gl" },
+  { "name": "Gambia", "code": "gm" },
+  { "name": "Guinea", "code": "gn" },
+  { "name": "Guadeloupe", "code": "gp" },
+  { "name": "Equatorial Guinea", "code": "gq" },
+  { "name": "Greece", "code": "gr" },
+  { "name": "South Georgia", "code": "gs" },
+  { "name": "Guatemala", "code": "gt" },
+  { "name": "Guam", "code": "gu" },
+  { "name": "Guinea-Bissau", "code": "gw" },
+  { "name": "Guyana", "code": "gy" },
+  { "name": "Hong Kong", "code": "hk" },
+  { "name": "Heard and McDonald Islands", "code": "hm" },
+  { "name": "Honduras", "code": "hn" },
+  { "name": "Croatia", "code": "hr" },
+  { "name": "Haiti", "code": "ht" },
+  { "name": "Hungary", "code": "hu" },
+  { "name": "Indonesia", "code": "id" },
+  { "name": "Ireland", "code": "ie" },
+  { "name": "Israel", "code": "il" },
+  { "name": "Isle of Man", "code": "im" },
+  { "name": "India", "code": "in" },
+  { "name": "British Indian Ocean Territory", "code": "io" },
+  { "name": "Iraq", "code": "iq" },
+  { "name": "Iran", "code": "ir" },
+  { "name": "Iceland", "code": "is" },
+  { "name": "Italy", "code": "it" },
+  { "name": "Jersey", "code": "je" },
+  { "name": "Jamaica", "code": "jm" },
+  { "name": "Jordan", "code": "jo" },
+  { "name": "Japan", "code": "jp" },
+  { "name": "Kenya", "code": "ke" },
+  { "name": "Kyrgyzstan", "code": "kg" },
+  { "name": "Cambodia", "code": "kh" },
+  { "name": "Kiribati", "code": "ki" },
+  { "name": "Comoros", "code": "km" },
+  { "name": "Saint Kitts and Nevis", "code": "kn" },
+  { "name": "North Korea", "code": "kp" },
+  { "name": "South Korea", "code": "kr" },
+  { "name": "Kuwait", "code": "kw" },
+  { "name": "Cayman Islands", "code": "ky" },
+  { "name": "Kazakhstan", "code": "kz" },
+  { "name": "Laos", "code": "la" },
+  { "name": "Lebanese", "code": "lb" },
+  { "name": "Saint Lucia", "code": "lc" },
+  { "name": "Liechtenstein", "code": "li" },
+  { "name": "Sri Lanka", "code": "lk" },
+  { "name": "Liberia", "code": "lr" },
+  { "name": "Lesotho", "code": "ls" },
+  { "name": "Lithuania", "code": "lt" },
+  { "name": "Luxembourg", "code": "lu" },
+  { "name": "Latvia", "code": "lv" },
+  { "name": "Libya", "code": "ly" },
+  { "name": "Morocco", "code": "ma" },
+  { "name": "Monaco", "code": "mc" },
+  { "name": "Moldova", "code": "md" },
+  { "name": "Montenegro", "code": "me" },
+  { "name": "Saint Martin", "code": "mf" },
+  { "name": "Madagascar", "code": "mg" },
+  { "name": "Marshall Islands", "code": "mh" },
+  { "name": "Macedonia", "code": "mk" },
+  { "name": "Mali", "code": "ml" },
+  { "name": "Myanmar", "code": "mm" },
+  { "name": "Mongolia", "code": "mn" },
+  { "name": "Macao", "code": "mo" },
+  { "name": "Northern Mariana Islands", "code": "mp" },
+  { "name": "Martinique", "code": "mq" },
+  { "name": "Mauritania", "code": "mr" },
+  { "name": "Montserrat", "code": "ms" },
+  { "name": "Malta", "code": "mt" },
+  { "name": "Mauritius", "code": "mu" },
+  { "name": "Maldives", "code": "mv" },
+  { "name": "Malawi", "code": "mw" },
+  { "name": "Mexico", "code": "mx" },
+  { "name": "Malaysia", "code": "my" },
+  { "name": "Mozambique", "code": "mz" },
+  { "name": "Namibia", "code": "na" },
+  { "name": "New Caledonia", "code": "nc" },
+  { "name": "Niger", "code": "ne" },
+  { "name": "Norfolk Island", "code": "nf" },
+  { "name": "Nigeria", "code": "ng" },
+  { "name": "Nicaragua", "code": "ni" },
+  { "name": "Norway", "code": "no" },
+  { "name": "Nepal", "code": "np" },
+  { "name": "Nauruan", "code": "nr" },
+  { "name": "New Zealand", "code": "nz" },
+  { "name": "Oman", "code": "om" },
+  { "name": "Panama", "code": "pa" },
+  { "name": "Peru", "code": "pe" },
+  { "name": "French Polynesia", "code": "pf" },
+  { "name": "Papua New Guinea", "code": "pg" },
+  { "name": "Philippines", "code": "ph" },
+  { "name": "Pakistan", "code": "pk" },
+  { "name": "Poland", "code": "pl" },
+  { "name": "Saint Pierre", "code": "pm" },
+  { "name": "Pitcairn Islands", "code": "pn" },
+  { "name": "Puerto Rico", "code": "pr" },
+  { "name": "Palestine", "code": "ps" },
+  { "name": "Portugal", "code": "pt" },
+  { "name": "Palau", "code": "pw" },
+  { "name": "Paraguay", "code": "py" },
+  { "name": "Qatar", "code": "qa" },
+  { "name": "Reunion Island", "code": "re" },
+  { "name": "Romania", "code": "ro" },
+  { "name": "Serbia", "code": "rs" },
+  { "name": "Russia", "code": "ru" },
+  { "name": "Rwanda", "code": "rw" },
+  { "name": "Saudi Arabia", "code": "sa" },
+  { "name": "Solomon Islands", "code": "sb" },
+  { "name": "Seychelles", "code": "sc" },
+  { "name": "Sudan", "code": "sd" },
+  { "name": "Sweden", "code": "se" },
+  { "name": "Singapore", "code": "sg" },
+  { "name": "Saint Helena", "code": "sh" },
+  { "name": "Slovenia", "code": "si" },
+  { "name": "Svalbard Island", "code": "sj" },
+  { "name": "Slovakia", "code": "sk" },
+  { "name": "Sierra Leone", "code": "sl" },
+  { "name": "San Marino", "code": "sm" },
+  { "name": "Senegal", "code": "sn" },
+  { "name": "Somalia", "code": "so" },
+  { "name": "Suriname", "code": "sr" },
+  { "name": "South Sudan", "code": "ss" },
+  { "name": "Sao Tome", "code": "st" },
+  { "name": "El Salvador", "code": "sv" },
+  { "name": "Sint Maarten", "code": "sx" },
+  { "name": "Syria", "code": "sy" },
+  { "name": "Swaziland", "code": "sz" },
+  { "name": "Turks and Caicos", "code": "tc" },
+  { "name": "Chad", "code": "td" },
+  { "name": "French Southern and Antarctic Lands", "code": "tf" },
+  { "name": "Togo", "code": "tg" },
+  { "name": "Thailand", "code": "th" },
+  { "name": "Tajikistan", "code": "tj" },
+  { "name": "Tokelau", "code": "tk" },
+  { "name": "Timor Leste", "code": "tl" },
+  { "name": "Turkmenistan", "code": "tm" },
+  { "name": "Tunisia", "code": "tn" },
+  { "name": "Tonga", "code": "to" },
+  { "name": "Turkey", "code": "tr" },
+  { "name": "Trinidad and Tobago", "code": "tt" },
+  { "name": "Tuvalu", "code": "tv" },
+  { "name": "Tanzania", "code": "tz" },
+  { "name": "Ukraine", "code": "ua" },
+  { "name": "Uganda", "code": "ug" },
+  { "name": "United States Minor Islands", "code": "um" },
+  { "name": "United States of America", "code": "us" },
+  { "name": "Uruguay", "code": "uy" },
+  { "name": "Uzbekistan", "code": "uz" },
+  { "name": "Vatican City", "code": "va" },
+  { "name": "Saint Vincent", "code": "vc" },
+  { "name": "Venezuela", "code": "ve" },
+  { "name": "British Virgin Islands", "code": "vg" },
+  { "name": "Virgin Islands", "code": "vi" },
+  { "name": "Vietnam", "code": "vn" },
+  { "name": "Vanuatu", "code": "vu" },
+  { "name": "Wallis and Futuna", "code": "wf" },
+  { "name": "Samoa", "code": "ws" },
+  { "name": "Yemen", "code": "ye" },
+  { "name": "South Africa", "code": "za" },
+  { "name": "Zambia", "code": "zm" },
+  { "name": "Zimbabwe", "code": "zw" }
+]}/>

docs/ui/plugins/payments.mdx

@@ -18,7 +18,7 @@ You can also include plugin via CDN:
 
 To create a payment provider icon, add the `payment` class to a component and specify the payment provider. The full list of payment providers can be found below.
 
-```html example plugins="payments" separated centered
+```html example plugins="payments" separated centered background="bg-light"
 <span class="payment payment-provider-shopify"></span>
 <span class="payment payment-provider-visa"></span>
 <span class="payment payment-provider-paypal"></span>
@@ -28,7 +28,7 @@ To create a payment provider icon, add the `payment` class to a component and sp
 
 Using Bootstrap’s typical naming structure, you can create a standard payment, or scale it up or down to different sizes based on what’s needed.
 
-```html example plugins="payments" separated centered
+```html example plugins="payments" separated centered background="bg-light"
 <span class="payment payment-xl payment-provider-shopify"></span>
 <span class="payment payment-lg payment-provider-visa"></span>
 <span class="payment payment-md payment-provider-paypal"></span>
@@ -40,4 +40,107 @@ Using Bootstrap’s typical naming structure, you can create a standard payment,
 
 Select an icon from the list of payment providers. Each icon comes in two color variants - light and dark, so you can choose the one that goes well with your design.
 
-<PaymentsTable />
+<PaymentsTable providers={[
+	{ "name": "2c2p", "code": "2c2p" },
+  { "name": "2checkout", "code": "2checkout" },
+  { "name": "Adyen", "code": "adyen" },
+  { "name": "Affirm", "code": "affirm" },
+  { "name": "Alipay Plus", "code": "alipay-plus" },
+  { "name": "Alipay", "code": "alipay" },
+  { "name": "Allegro Pay", "code": "allegro-pay" },
+  { "name": "Amazon Pay", "code": "amazon-pay" },
+  { "name": "Amazon", "code": "amazon" },
+  { "name": "American Express", "code": "americanexpress" },
+  { "name": "Apple Pay", "code": "applepay" },
+  { "name": "Authorize", "code": "authorize" },
+  { "name": "Autopay", "code": "autopay" },
+  { "name": "Bancontact", "code": "bancontact" },
+  { "name": "Binance USD", "code": "binance-usd" },
+  { "name": "Bitcoin", "code": "bitcoin" },
+  { "name": "BitPay", "code": "bitpay" },
+  { "name": "Bkash", "code": "bkash" },
+  { "name": "Blik", "code": "blik" },
+  { "name": "Braintree", "code": "braintree" },
+  { "name": "Cash App", "code": "cash-app" },
+  { "name": "Chime", "code": "chime" },
+  { "name": "Cirrus", "code": "cirrus" },
+  { "name": "ClickandBuy", "code": "clickandbuy" },
+  { "name": "Coinkite", "code": "coinkite" },
+  { "name": "Diners Club", "code": "dinersclub" },
+  { "name": "Direct Debit", "code": "directdebit" },
+  { "name": "Discover", "code": "discover" },
+  { "name": "Dotpay", "code": "dotpay" },
+  { "name": "Dwolla", "code": "dwolla" },
+  { "name": "EasyPaisa", "code": "easypaisa" },
+  { "name": "eBay", "code": "ebay" },
+  { "name": "Elo", "code": "elo" },
+  { "name": "ePayco", "code": "epayco" },
+  { "name": "Ethereum", "code": "ethereum" },
+  { "name": "eWay", "code": "eway" },
+  { "name": "Giropay", "code": "giropay" },
+  { "name": "Google Pay", "code": "google-pay" },
+  { "name": "Google Wallet", "code": "googlewallet" },
+  { "name": "HubSpot", "code": "hubspot" },
+  { "name": "Ingenico", "code": "ingenico" },
+  { "name": "iDeal", "code": "ideal" },
+  { "name": "JCB", "code": "jcb" },
+  { "name": "Klarna", "code": "klarna" },
+  { "name": "Laser", "code": "laser" },
+  { "name": "Litecoin", "code": "litecoin" },
+  { "name": "Maestro", "code": "maestro" },
+  { "name": "Mastercard", "code": "mastercard" },
+  { "name": "Mercado Pago", "code": "mercado-pago" },
+  { "name": "MetaMask", "code": "metamask" },
+  { "name": "MIR", "code": "mir" },
+  { "name": "Monero", "code": "monero" },
+  { "name": "MoneyGram", "code": "moneygram" },
+  { "name": "Neteller", "code": "neteller" },
+  { "name": "Ogone", "code": "ogone" },
+  { "name": "OKPay", "code": "okpay" },
+  { "name": "OpenSea", "code": "opensea" },
+  { "name": "Paybox", "code": "paybox" },
+  { "name": "Payconiq", "code": "payconiq" },
+  { "name": "Payka", "code": "payka" },
+  { "name": "Payline", "code": "payline" },
+  { "name": "Paymill", "code": "paymill" },
+  { "name": "Payone", "code": "payone" },
+  { "name": "Payoneer", "code": "payoneer" },
+  { "name": "PayPal", "code": "paypal" },
+  { "name": "PayPo", "code": "paypo" },
+  { "name": "Paysafe", "code": "paysafe" },
+  { "name": "Paysafecard", "code": "paysafecard" },
+  { "name": "PayU", "code": "payu" },
+  { "name": "Payza", "code": "payza" },
+  { "name": "Poli", "code": "poli" },
+  { "name": "Przelewy24", "code": "przelewy24" },
+  { "name": "Revolut Pay", "code": "revolut-pay" },
+  { "name": "Ripple", "code": "ripple" },
+  { "name": "Sage", "code": "sage" },
+  { "name": "Samsung Pay", "code": "samsung-pay" },
+  { "name": "SEPA", "code": "sepa" },
+  { "name": "Shop Pay", "code": "shop-pay" },
+  { "name": "Shopify", "code": "shopify" },
+  { "name": "Skrill", "code": "skrill" },
+  { "name": "Solana", "code": "solana" },
+  { "name": "Solo", "code": "solo" },
+  { "name": "Spingo", "code": "spingo" },
+  { "name": "Square", "code": "square" },
+  { "name": "Stax", "code": "stax" },
+  { "name": "Stripe", "code": "stripe" },
+  { "name": "Switch", "code": "switch" },
+  { "name": "Tether", "code": "tether" },
+  { "name": "Tpay", "code": "tpay" },
+  { "name": "True USD", "code": "true-usd" },
+  { "name": "Ukash", "code": "ukash" },
+  { "name": "UnionPay", "code": "unionpay" },
+  { "name": "Venmo", "code": "venmo" },
+  { "name": "Verifone", "code": "verifone" },
+  { "name": "Verisign", "code": "verisign" },
+  { "name": "Visa", "code": "visa" },
+  { "name": "WeChat Pay", "code": "we-chat-pay" },
+  { "name": "WebMoney", "code": "webmoney" },
+  { "name": "Western Union", "code": "westernunion" },
+  { "name": "Wise", "code": "wise" },
+  { "name": "Worldpay", "code": "worldpay" },
+  { "name": "Zelle", "code": "zelle" }
+]}/>

docs/ui/plugins/social-icons.mdx

@@ -0,0 +1,134 @@
+---
+title: Social Icons
+description: Social icons are a great way to make your website more engaging and user-friendly. You can use social icons to help users quickly find your social media profiles and connect with you.
+plugin: socials
+libs: tabler-socials
+---
+
+## Installation
+
+This part of Tabler is distributed as plugin. To enable it you should include `tabler-socials.css` or `tabler-socials.min.css` file to your page.
+
+You can also include plugin via CDN:
+
+```html
+<link rel="stylesheet" href="$TABLER_CDN/dist/css/tabler-socials.min.css">
+```
+
+## Social icons
+
+To create a social icon, add the `social` class to a component and choose the country whose flag you want to use. 
+
+```html example centered separated plugins="socials"
+<span class="social social-app-facebook"></span>
+<span class="social social-app-x"></span>
+<span class="social social-app-instagram"></span>
+```
+
+## Social apps list
+
+Here is a list of all available social apps:
+
+<SocialsTable apps={[
+  {
+    "name": "Apple",
+    "file": "apple"
+  },
+  {
+    "name": "Discord",
+    "file": "discord"
+  },
+  {
+    "name": "Dribbble",
+    "file": "dribbble"
+  },
+  {
+    "name": "Facebook",
+    "file": "facebook"
+  },
+  {
+    "name": "Figma",
+    "file": "figma"
+  },
+  {
+    "name": "GitHub",
+    "file": "github"
+  },
+  {
+    "name": "Google",
+    "file": "google"
+  },
+  {
+    "name": "Instagram",
+    "file": "instagram"
+  },
+  {
+    "name": "LinkedIn",
+    "file": "linkedin"
+  },
+  {
+    "name": "Medium",
+    "file": "medium"
+  },
+  {
+    "name": "Meta",
+    "file": "meta"
+  },
+  {
+    "name": "MetaMask",
+    "file": "metamask"
+  },
+  {
+    "name": "Pinterest",
+    "file": "pinterest"
+  },
+  {
+    "name": "Reddit",
+    "file": "reddit"
+  },
+  {
+    "name": "Signal",
+    "file": "signal"
+  },
+  {
+    "name": "Skype",
+    "file": "skype"
+  },
+  {
+    "name": "Snapchat",
+    "file": "snapchat"
+  },
+  {
+    "name": "Spotify",
+    "file": "spotify"
+  },
+  {
+    "name": "Telegram",
+    "file": "telegram"
+  },
+  {
+    "name": "TikTok",
+    "file": "tiktok"
+  },
+  {
+    "name": "Tumblr",
+    "file": "tumblr"
+  },
+  {
+    "name": "Twitch",
+    "file": "twitch"
+  },
+  {
+    "name": "VK",
+    "file": "vk"
+  },
+  {
+    "name": "X (Twitter)",
+    "file": "x"
+  },
+  {
+    "name": "YouTube",
+    "file": "youtube"
+  }
+]} />
+