Rewrite the docs prose in plain English on 75 pages (#2947)

2026-10-12 05:06:55 +04:00 · 2026-09-03 02:32:15 +02:00
1 parent c71a321701
commit 4afc2ea871
@@ -0,0 +1,5 @@
+---
+"@tabler/docs": patch
+---
+
+Updated the prose on 75 docs pages to plain English, shortened the page summaries and merged duplicate sections on the button and card pages.
@@ -2,15 +2,15 @@
 title: Compiled templates
 order: 2
 seoTitle: Compiled HTML templates
-description: Learn how to use the compiled HTML email templates from the Tabler Emails package.
-summary: The compiled HTML files from the Tabler Emails package are ready to use in your email marketing campaigns. This guide explains how to use them effectively.
-seoDescription: The compiled HTML files from the Tabler Emails package are ready to use in your email marketing campaigns. This guide explains how to use them effectively.
+description: How to use the compiled HTML email templates from the Tabler Emails package.
+summary: The compiled HTML files in the Tabler Emails package are ready to send. This page shows how to change their content and where to use them.
+seoDescription: The compiled HTML files in the Tabler Emails package are ready to send. This page shows how to change their content and where to use them.
 ---
 import Example from '@components/Example.astro';

 ## Compiled version of the template

-If you only want to change content (text or images) of the email template, you can just use the compiled HTML files - `compiled.html`. They are ready to use, and you need only a basic knowledge of HTML to modify them.
+If you only want to change the text or the images of a template, use the compiled file, `compiled.html`. It has the styles inlined and needs only basic HTML knowledge to edit.

 ## How to modify the compiled HTML files

@@ -26,5 +26,4 @@ If you only want to change content (text or images) of the email template, you c

 ## How to use the compiled HTML files

-After changing the templates as needed, you can use them in your email campaigns.
-The `compiled.html` file with the `assets/` folder should be sent to your email marketing tool, like Mailchimp, SendGrid, or any other.
+After editing, upload `compiled.html` together with the `assets/` folder to your email tool, such as Mailchimp or SendGrid.
@@ -3,7 +3,7 @@ title: Contents
 order: 1
 seoTitle: Package contents
 description: See what is inside the Tabler Emails package - folder structure, compiled HTML templates ready to use, and editable source files.
-summary: The Tabler Emails package contains files which can be used by everyone, even without great knowledge of HTML.
+summary: "What's in the Tabler Emails download: the template folders, the shared images, the license and the readme."
 seoDescription: See what is inside the Tabler Emails package - folder structure, compiled HTML templates ready to use and source files for customization.
 ---
 import Example from '@components/Example.astro';
@@ -39,9 +39,7 @@ tabler-emails/
 └── readme.html
 ```

-## Understanding the file structure in Tabler Emails
-
-The **Tabler Emails** package is organized into a clear and efficient folder structure to streamline the use of its assets. Below is a breakdown of its key directories:
+## What each folder contains

 ### 1. Email templates: `emails/`

@@ -69,4 +67,4 @@ This file contains the license information for the Tabler Emails package.

 This file contains the main information about the Tabler Emails package, including a brief description and instructions on how to use it.

-Do you like our templates? **Find out more and purchase on [our website](https://tabler.io/emails)**.
+You can buy Tabler Emails at [tabler.io/emails](https://tabler.io/emails).
@@ -3,8 +3,8 @@ title: Tabler Emails
 seoTitle: Premium email templates
 order: 4
 description: Customizable email templates for over 90 clients and devices.
-summary: Tabler Emails is a set of 80 eye-catching, customizable HTML templates. They are compatible with over 90 email clients and devices.
-seoDescription: Tabler Emails is a collection of 80 premium, customizable HTML templates. They are compatible with over 90 email clients and devices.
+summary: Tabler Emails is a set of 80 customizable HTML email templates, tested in more than 90 email clients and devices.
+seoDescription: Tabler Emails is a set of 80 customizable HTML email templates, tested in more than 90 email clients and devices.
 ---

 import { Image } from 'astro:assets'
@@ -16,7 +16,7 @@ import coverDark from '../../images/cover-emails-dark.jpg'
 	<Image src={coverDark} alt="Tabler Emails" class="hide-theme-light" width={800} densities={[1, 2]} loading="eager" />
 </figure>

-Tabler Emails is a package of 80 ready-to-use HTML email templates — transactional messages like welcome, password reset or invoice, and marketing layouts. Each template is tested in more than 90 email clients and devices, so your messages look right everywhere.
+Tabler Emails is a package of 80 ready-to-use HTML email templates - transactional messages like welcome, password reset or invoice, and marketing layouts. Each template is tested in more than 90 email clients and devices, so your messages look right everywhere.

 ## What's inside

@@ -32,11 +32,11 @@ tabler-emails/emails/welcome/
 └── screenshot.jpg
 ```

-The `compiled` files have all styles inlined and work as-is in email clients. The `source` files are easier to read and edit — use them when you want to change the layout, then inline the styles before sending.
+The `compiled` files have all styles inlined and work as-is in email clients. The `source` files are easier to read and edit - use them when you want to change the layout, then inline the styles before sending.

 ## Quick start

-1. Pick a template folder — for example `emails/welcome/`.
+1. Pick a template folder - for example `emails/welcome/`.
 2. Open `compiled.html` and replace the texts, links and logo with your own.
 3. Upload the images from `assets/` to your server or CDN and update their URLs.
 4. Paste the result into your email provider or send it through your backend.
@@ -2,7 +2,7 @@
 title: Source templates
 order: 3
 seoTitle: Source HTML templates
-description: Learn how to use the source HTML email templates from the Tabler Emails package.
+description: How to use the source HTML email templates from the Tabler Emails package.
 summary: The source HTML files from the Tabler Emails package need a bit more work than the compiled ones. Learn how to use them.
 seoDescription: The source HTML files from the Tabler Emails package need a bit more work than the compiled ones. Learn how to use them.
 ---
@@ -1,8 +1,6 @@
 ---
 title: Tabler Icons
-summary:
-  Tabler Icons is a powerful and versatile icon library that offers a huge collection of high quality icons suitable for a wide range of applications. With its clean and modern aesthetic, extensive customization options, and user-friendly website and plugins, Tabler Icons is an excellent resource for designers and
-  developers looking to enhance their projects with high-quality icons.
+summary: Tabler Icons is a library of over 5,000 SVG icons drawn on a 24×24 grid. It ships as framework packages, a webfont, static files and a Figma plugin.
 order: 2
 description: Over 5000 pixel-perfect icons for web design and development
 ---
@@ -19,7 +17,7 @@ import coverDark from '../../images/cover-icons-dark.jpg'
 	<Image src={coverDark} alt="Tabler Icons" class="hide-theme-light" width={800} densities={[1, 2]} loading="eager" />
 </figure>

-Tabler Icons is a comprehensive icon library that features { site.iconsCount } high-quality icons. All icons are drawn on a 24×24 pixel grid with a consistent stroke, so they line up and scale cleanly at any size.
+Tabler Icons is a library of { site.iconsCount } icons. All of them are drawn on a 24×24 pixel grid with a consistent stroke, so they line up and scale cleanly at any size.

 To browse the collection, visit [tabler.io/icons](https://tabler.io/icons). You can search by name or browse by category, then copy the SVG code or download the icon straight from the site.

@@ -27,14 +25,14 @@ To browse the collection, visit [tabler.io/icons](https://tabler.io/icons). You

 The same icon set is distributed in several forms, so you can pick the one that fits your stack:

- **Framework libraries** — official packages for [React](/icons/libraries/react), [Vue](/icons/libraries/vue), [Svelte](/icons/libraries/svelte), [SolidJS](/icons/libraries/solidjs), [Preact](/icons/libraries/preact) and [Astro](/icons/libraries/astro). Icons are tree-shakable components — only the ones you import end up in your bundle.
- **[Webfont](/icons/libraries/webfont)** — add icons with plain CSS classes, no build step needed.
- **[Static files](/icons/static-files)** — every icon as a standalone [SVG](/icons/static-files/svg), [PNG](/icons/static-files/png) or [PDF](/icons/static-files/pdf) file, for design tools and non-web use.
- **[Figma plugin](/icons/plugins/figma)** — insert icons directly into your Figma designs.
+- **Framework libraries**: official packages for [React](/icons/libraries/react), [Vue](/icons/libraries/vue), [Svelte](/icons/libraries/svelte), [SolidJS](/icons/libraries/solidjs), [Preact](/icons/libraries/preact) and [Astro](/icons/libraries/astro). Icons are tree-shakable components, so only the ones you import end up in your bundle.
+- **[Webfont](/icons/libraries/webfont)**: add icons with plain CSS classes, no build step needed.
+- **[Static files](/icons/static-files)**: every icon as a standalone [SVG](/icons/static-files/svg), [PNG](/icons/static-files/png) or [PDF](/icons/static-files/pdf) file, for design tools and non-web use.
+- **[Figma plugin](/icons/plugins/figma)**: insert icons directly into your Figma designs.

 ## Quick start

-In a framework project, install the package for your stack — for example React:
+In a framework project, install the package for your stack, for example React:

 <TabsPackage name="@tabler/icons-react" />

@@ -1,7 +1,7 @@
 ---
 title: Astro
 description: Add Tabler Icons to Astro projects with the official tree-shakable package. Import any of over 5000 icons as native Astro components.
-summary: Tabler Icons for Astro provides an optimized collection of icons specifically designed for use with Astro. These lightweight and scalable icons are easy to integrate into Astro-based projects.
+summary: The official Astro integration for Tabler Icons. Import any icon as a component in an Astro page.
 ---

 import TabsPackage from '@components/TabsPackage.astro'
@@ -1,7 +1,7 @@
 ---
 title: Preact
 description: Add Tabler Icons to Preact apps with the official tree-shakable package. Import any of over 5000 lightweight SVG icons as components.
-summary: Tabler Icons for Preact provides an optimized collection of icons specifically designed for use with Preact. These lightweight and scalable icons are easy to integrate into Preact-based projects.
+summary: The official Preact package for Tabler Icons. Every icon is a tree-shakable component with size, color and stroke props.
 ---

 import TabsPackage from '@components/TabsPackage.astro'
@@ -1,7 +1,7 @@
 ---
 title: React
 description: Add Tabler Icons to React apps with the official tree-shakable package. Import over 5000 scalable SVG icons as customizable components.
-summary: Tabler Icons for React offers a robust set of icons tailored for React applications, providing developers with a seamless way to enhance their user interfaces with high-quality, scalable graphics.
+summary: The official React package for Tabler Icons. Every icon is a tree-shakable component with size, color and stroke props.
 ---

 import TabsPackage from '@components/TabsPackage.astro'
@@ -16,7 +16,7 @@ or just [download from Github](https://github.com/tabler/tabler-icons/releases).

 ## How to use

-It's built with ESmodules so it's completely tree-shakable. Each icon can be imported as a component.
+Each icon is a component, and the package ships as ES modules, so only the icons you import end up in the bundle.

 ```jsx
 import { IconArrowLeft } from '@tabler/icons-react';
@@ -1,7 +1,7 @@
 ---
 title: SolidJS
 description: Add Tabler Icons to SolidJS apps with the official tree-shakable package. Import over 5000 high-quality SVG icons as components.
-summary: Tabler Icons for SolidJS is a lightweight library offering a vast selection of high-quality icons. It is designed for seamless integration with SolidJS, enabling developers to build visually appealing interfaces.
+summary: The official SolidJS package for Tabler Icons. Every icon is a component with size, color and stroke props.
 ---

 import TabsPackage from '@components/TabsPackage.astro'
@@ -17,7 +17,7 @@ or just [download from Github](https://github.com/tabler/tabler-icons/releases).

 ## How to use

-It's built with ESmodules so it's completely tree-shakable. Each icon can be imported as a component.
+Each icon is a component, and the package ships as ES modules, so only the icons you import end up in the bundle.

 ```js
 import { IconArrowRight } from '@tabler/icons-solidjs';
@@ -1,7 +1,7 @@
 ---
 title: Svelte
 description: Add Tabler Icons to Svelte apps with the official tree-shakable package. Import over 5000 clean SVG icons as customizable components.
-summary: Tabler Icons for Svelte provides a clean and efficient way to use Tabler's comprehensive icon set in Svelte applications, helping developers deliver polished, user-friendly designs.
+summary: The official Svelte package for Tabler Icons. Every icon is a component with size, color and stroke props.
 ---

 import TabsPackage from '@components/TabsPackage.astro'
@@ -17,7 +17,7 @@ or just [download from Github](https://github.com/tabler/tabler-icons/releases).

 ## How to use

-It's built with ESmodules so it's completely tree-shakable. Each icon can be imported as a component.
+Each icon is a component, and the package ships as ES modules, so only the icons you import end up in the bundle.

 ```html
 <script lang="ts">
@@ -1,7 +1,7 @@
 ---
 title: Vue
 description: Add Tabler Icons to Vue apps with the official package. Import over 5000 SVG icons as Vue components with tree-shaking and full styling control.
-summary: Tabler Icons for Vue offers a collection of customizable and scalable icons designed for use in Vue applications, providing a powerful tool for creating modern and engaging interfaces.
+summary: The official Vue package for Tabler Icons. Every icon is a component, so only the icons you import end up in the bundle.
 ---

 import TabsPackage from '@components/TabsPackage.astro'
@@ -17,7 +17,7 @@ or just [download from Github](https://github.com/tabler/tabler-icons/releases).

 ## How to use

-All icons are Vue components that contain SVG elements, so any icon can be imported and used as a component. It also helps to use treeshaking, so you only import the icons you use.
+Each icon is a Vue component that renders an SVG. The package ships as ES modules, so only the icons you import end up in the bundle.

 ```vue
 <template>
@@ -1,7 +1,7 @@
 ---
 title: Webfont
-description: Use Tabler Icons as a webfont and add icons with simple CSS classes. A lightweight and scalable way to include over 5000 icons on any website.
-summary: Tabler Icons as a webfont allows you to easily include icons in your projects using simple CSS classes, offering a lightweight and scalable solution for web development.
+description: Use Tabler Icons as a webfont and add any of the icons with a CSS class.
+summary: The Tabler Icons webfont adds icons with a CSS class, with no build step and no inline SVG.
 ---

 import TabsPackage from '@components/TabsPackage.astro'
@@ -1,19 +1,17 @@
 ---
 title: Figma plugin
-description: Use the Tabler Icons Figma plugin to insert over 5000 customizable icons directly into your designs without leaving Figma.
-summary: The Tabler Figma plugin allows designers to seamlessly integrate Tabler Icons into their Figma projects, providing quick access to a vast library of customizable icons that enhance the design workflow.
+description: Insert any of the Tabler Icons into your designs with the Figma plugin, without leaving Figma.
+summary: The Tabler Icons Figma plugin lets you search the icon set and insert icons into a Figma file, then change their size, color and stroke width.
 ---

 import DownloadButton from '@components/DownloadButton.astro'

 ![Tabler Figma Plugin](/img/icons/figma-plugin.png)

-The Tabler Icons Figma plugin is an essential tool for designers looking to enhance their workflow. It provides seamless access to a comprehensive library of high-quality, customizable icons directly within Figma. Whether you're designing dashboards, websites, or mobile apps, this plugin allows you to quickly search,
-preview, and integrate Tabler Icons into your projects, saving time and ensuring a consistent, modern aesthetic.
+The Tabler Icons Figma plugin puts the whole icon set inside Figma. You search for an icon, preview it and insert it into the design, without switching to the browser to download an SVG. It works the same for dashboards, websites and mobile app designs.

 ## Usage

-Using the plugin is simple: install it from the Figma community, launch it within your design file, and search for the desired icon by keyword. Once you’ve found the perfect icon, click to insert it into your design. You can easily customize the icon’s size, color, and stroke weight to fit your specific needs, making
-it a versatile addition to your design toolkit.
+Install the plugin from the Figma community and open it from the plugins menu in your file. Type a keyword to search, then click an icon to insert it. Once it's in the design, you can change its size, color and stroke width.

 <DownloadButton href="https://www.figma.com/community/plugin/1169807996149376642/Tabler-Icons" title="Download Plugin" />
@@ -24,7 +24,7 @@ All icons are built with SVG, so you can place them as `<img>`, `background-imag

 ### HTML image

-If you load an icon as an image, you can modify its size using CSS.
+When you load an icon as an image, set its size with CSS.

 ```html
 <img src="path/to/icon.svg" alt="icon title" />
@@ -32,13 +32,13 @@ If you load an icon as an image, you can modify its size using CSS.

 ### Inline HTML

-You can paste the content of the icon file into your HTML code to display it on the page.
+Paste the content of the SVG file into your HTML to render it inline.

 <Example codeOnly>
 <a href=""> <Icon name="disabled" /> Click me </a>
 </Example>

-Thanks to that, you can change the size, color and the `stroke-width` of the icons with CSS code.
+Inline SVG picks up CSS, so you can set the size, the color and the `stroke-width` from your stylesheet.

 ```css
 .icon-tabler {
@@ -51,7 +51,7 @@ Thanks to that, you can change the size, color and the `stroke-width` of the ico

 ### SVG sprite

-Add an icon to be displayed on your page with the following markup (`activity` in the above example can be replaced with any valid icon name):
+Reference an icon from the sprite with `use`. Replace `activity` with any icon name:

 ```html
 <svg width="24" height="24">
@@ -1,16 +1,16 @@
 ---
 title: Contents
 order: 2
-description: Explore the folder structure of the Tabler Illustrations package and learn where to find each format, color variant, and theme.
-summary: The Tabler Illustrations package is thoughtfully structured to provide designers and developers with an array of high-quality assets. This guide explores the various folders and their contents, helping users make the most of these resources.
+description: The folder structure of the Tabler Illustrations package and where to find each format, color variant and theme.
+summary: "What's in the Tabler Illustrations download: the folders for each format and where the light and dark variants live."
 ---
 import Example from '@components/Example.astro';

-The Tabler Illustrations package offers a wide range of visual assets designed to meet the needs of modern web and graphic design. These illustrations are not only aesthetically pleasing but also highly versatile, supporting various formats and themes for seamless integration into different projects.
+Every illustration in the package comes in several formats, and each format has a light and a dark variant. This page lists the folders in the download and what each one is for.

 ## Folder structure

-Once downloaded, unzip the compressed folder and you’ll see something like this:
+Once downloaded, unzip the compressed folder and you'll see something like this:

 ```text
 tabler-illustrations/
@@ -36,9 +36,7 @@ tabler-illustrations/
   └── light/
 ```

-## Understanding the file structure in Tabler Illustrations
-
-The **Tabler Illustrations** package is organized into a clear and efficient folder structure to streamline the use of its high-quality assets. Below is a breakdown of its key directories:
+## What each folder contains

 ### 1. Vector files: `eps/`

@@ -49,11 +47,11 @@ This folder contains EPS files for scalable vector illustrations.

 ### 2. Design file: `figma/`

-This folder contains a Figma file, perfect for designers who work directly in Figma.
+This folder contains the Figma source file with every illustration.

 ### 3. Document files: `pdf/`

-This folder contains PDF files, ideal for print or presentation use.
+This folder contains PDF files, for print or slides.

 - `dark/`: Dark-themed illustrations.
 - `light/`: Light-themed illustrations.
@@ -67,29 +65,27 @@ This folder stores PNG files with transparent backgrounds at 1600 × 1200px

 ### 5. Background images: `png-background/`

-This folder contains PNG files with a dark background for enhanced contrast.
+This folder contains PNG files on a dark background.

 - `dark/`: Dark-themed illustrations.
 - `light/`: Light-themed illustrations.

 ### 6. Scalable vector graphics: `svg/`

-This folder includes SVG files for scalable and customizable vector graphics.
+This folder contains the SVG files. They scale without loss and you can edit them in any vector tool.

 - `dark/`: Dark-themed illustrations.
 - `light/`: Light-themed illustrations.

 ### 7. Adaptive graphics: `svg-css-autodark/`

-This folder contains SVG files prepared to automatically adjust their colors based on user settings, providing a dynamic and adaptive visual experience.
+These SVG files switch between the light and dark colors on their own, based on the user's system color scheme.

 ### 8. Themed graphics: `svg-css-variables/`

-This folder contains SVG files using CSS variables for flexible theming.
+These SVG files take their colors from CSS variables, so you can theme them from your stylesheet.

 - `dark/`: Dark-themed illustrations.
 - `light/`: Light-themed illustrations.

-This structure ensures easy access to various formats and themes, making Tabler Illustrations a versatile tool for developers and designers alike.
-
-**Find out more and purchase Tabler Illustrations at [our website](https://tabler.io/illustrations)**.
+You can buy Tabler Illustrations at [tabler.io/illustrations](https://tabler.io/illustrations).
@@ -1,8 +1,8 @@
 ---
 title: Customization
 order: 3
-description: Learn how to customize Tabler Illustrations with CSS variables - change colors, sizes, and formats to match your brand and design.
-summary: Learn how to tailor Tabler Illustrations by adjusting colors, sizes, and formats. This section provides insights into seamlessly integrating illustrations to align with your design and branding.
+description: "Customize Tabler Illustrations with CSS variables: the colors, the dark variant and auto dark mode."
+summary: Change the colors of Tabler Illustrations with CSS variables, use the dark variant or the version that follows the color mode on its own.
 ---
 import Example from '@components/Example.astro';

@@ -108,8 +108,6 @@ To change the color of the skin, use the `--tblr-illustrations-skin` CSS variabl
 </div>
 ```

-Look at the example below to see how you can change the color of the skin.
-
 <Example column>
 <div style="--tblr-illustrations-skin: #5a433c">
  <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 800 600">
@@ -151,7 +149,7 @@ Look at the example below to see how you can change the color of the skin.

 ## Application brand color

-Tabler Illustrations uses `--tblr-primary` as a fallback color if `--tblr-illustrations-primary` is not set, so if you have a primary color set in your design system, you can use that to ensure consistency across your project.
+When `--tblr-illustrations-primary` is not set, the illustrations fall back to `--tblr-primary`, so they follow your primary color with no extra work.

 <Example column>
 <div class="card mb-5">
@@ -273,7 +271,7 @@ Tabler Illustrations uses `--tblr-primary` as a fallback color if `--tblr-illust

 ## Dark version of the illustration

-Each illustration has a dark mode variant. To use it, copy the dark mode SVG code and paste it into your project. The dark mode variant is available for all illustrations.
+Each illustration has a dark variant. Copy the SVG code of the dark version from the package into your project.

 <Example column background="dark">
 <div>
@@ -315,9 +313,7 @@ Each illustration has a dark mode variant. To use it, copy the dark mode SVG cod

 ## Autodark mode

-Tabler Illustrations supports autodark mode, which automatically switches the color scheme of the illustrations based on the user's system preferences. To enable autodark mode, copy illustration code from the `svg-css-autodark` folder.
-
-Illustrations change theme based on the user's system preferences or `data-bs-theme` attribute or `theme` class.
+The `svg-css-autodark` folder holds a version that switches its colors on its own. It follows the system color scheme, the `data-bs-theme` attribute or the `theme` class, so one file covers both modes.

 ```html
 <html data-bs-theme="dark">
@@ -327,8 +323,6 @@ Illustrations change theme based on the user's system preferences or `data-bs-th
 </html>
 ```

-Look at the example below to see how the illustration changes based on the user's system preferences.
-
 <Example column>
 <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 800 600"> <style>{`:where(.theme-dark, [data-bs-theme="dark"]) .tblr-illustrations-boy-girl-a { fill: black; opacity: 0.07; } :where(.theme-dark, [data-bs-theme="dark"]) .tblr-illustrations-boy-girl-b { fill: #1a2030; } :where(.theme-dark, [data-bs-theme="dark"]) .tblr-illustrations-boy-girl-c { fill: #454c5e; } @media (prefers-color-scheme: dark) { .tblr-illustrations-boy-girl-a { fill: black; opacity: 0.07; } .tblr-illustrations-boy-girl-b { fill: #1a2030; } .tblr-illustrations-boy-girl-c { fill: #454c5e; } }`}</style> <path d="M658.744 282.266C658.744 325.973 612.535 357.656 592.114 392.937C571.053 429.346 565.991 484.976 529.581 506.037C494.299 526.458 444.065 503.618 400.367 503.618C356.669 503.618 306.435 526.458 271.153 506.037C234.753 484.976 229.681 429.346 208.62 392.937C188.209 357.656 142 325.953 142 282.266C142 238.579 188.209 206.865 208.62 171.584C229.681 135.185 234.753 79.5143 271.153 58.4839C306.435 38.0736 356.669 60.9031 400.367 60.9031C444.065 60.9031 494.299 38.0736 529.581 58.4839C565.991 79.5448 571.053 135.185 592.114 171.584C612.535 206.865 658.744 238.568 658.744 282.266Z" fill="#F7F8FC" class="tblr-illustrations-boy-girl-a" /> <path d="M397.248 550C534.459 550 645.689 545.836 645.689 540.7C645.689 535.564 534.459 531.401 397.248 531.401C260.038 531.401 148.808 535.564 148.808 540.7C148.808 545.836 260.038 550 397.248 550Z" fill="#A6A9B3" class="tblr-illustrations-boy-girl-b" /> <path d="M479.179 238.829C475.497 244.691 456.146 274.402 421.211 280.161C408.559 282.198 395.593 280.84 383.637 276.225C376.963 273.704 370.647 270.322 364.85 266.164L373.304 245.592C374.244 246.41 375.7 247.659 377.607 249.049C384.182 253.84 395.868 260.321 407.863 256.273C414.608 254.009 419.323 249.697 428.36 240.849C436.25 233.084 443.39 224.592 449.683 215.486C455.319 205.153 466.977 202.626 474.943 209.512C482.598 215.974 484.609 229.097 479.179 238.829Z" fill="#FFCB9D" style="fill: #ffcb9d; fill: var(--tblr-illustrations-skin, #ffcb9d)" /> <path d="M383.666 276.159C376.992 273.638 370.676 270.256 364.879 266.098L373.333 245.526C374.272 246.344 375.728 247.593 377.635 248.983C377.119 253.445 376.818 260.697 379.035 266.568C380.328 269.88 381.876 273.087 383.666 276.159Z" fill="black" opacity="0.15" /> <path d="M324.054 160.289C332.183 175.733 345.737 187.624 362.107 193.674L307.502 198.718C313.026 185.906 318.543 173.096 324.054 160.289Z" fill="#232B41" class="tblr-illustrations-boy-girl-c" /> <path d="M302.083 425.902L299.434 457.398L295.601 503.211H291.872L282.206 455.679L278.073 435.333L302.083 425.902ZM355.701 425.902L353.221 455.548L349.229 503.211H345.5L336.153 457.314L331.682 435.333L355.701 425.902Z" fill="#DADBE0" /> <path d="M278.063 435.333L302.083 425.939L299.434 457.436C293.46 457.051 287.692 456.496 282.206 455.717L278.063 435.333ZM355.701 425.902L353.212 455.548C347.782 456.318 342.071 456.91 336.153 457.314L331.682 435.333L355.701 425.902Z" fill="black" opacity="0.15" /> <path d="M318.108 202.692C302.571 204.392 285.231 199.874 278.063 195.017C276.833 194.294 275.8 193.278 275.057 192.058C274.278 190.508 273.592 188.902 272.916 187.202C271.976 184.872 271.169 182.449 270.445 180.025C268.518 173.72 267.17 167.252 266.415 160.703C266.415 160.167 266.218 158.57 266.021 156.72C265.345 148.425 265.006 141.69 264.809 137.069C265.204 137.745 267.139 140.901 268.886 140.61C270.765 140.225 272.333 136.092 271.901 130.174H307.136L321.847 142.893C321.847 142.893 322.279 144.931 323.199 148.031C324.69 153.477 326.558 158.813 328.789 164C330.667 168.321 332.912 172.304 335.364 174.727C343.49 182.468 336.745 200.747 318.108 202.692Z" fill="#FFCB9D" style="fill: #ffcb9d; fill: var(--tblr-illustrations-skin, #ffcb9d)" /> <path d="M328.788 164C315.373 168.775 300.746 168.931 287.231 164.441C283.781 164.927 280.531 166.354 277.838 168.565C273.855 171.919 273.958 175.018 270.755 179.584L270.464 180.025C268.537 173.72 267.188 167.252 266.434 160.703C266.434 160.167 266.237 158.57 266.039 156.72C265.363 148.425 265.025 141.69 264.828 137.069C265.222 137.745 267.157 140.901 268.904 140.61C270.783 140.225 272.352 136.092 271.92 130.174H307.155L321.865 142.893C321.865 142.893 322.297 144.931 323.218 148.031C324.703 153.476 326.564 158.812 328.788 164Z" fill="black" opacity="0.1" /> <path d="M353.502 268.466C356.893 286.755 359.298 300.197 360.951 309.666C361.045 310.192 361.13 310.718 361.224 311.244C363.196 322.244 365.225 333.253 367.198 344.272C330.2 344.935 293.193 345.649 256.176 346.413C256.232 343.868 256.27 341.238 256.335 338.673V338.542C255.228 310.418 255.658 282.255 257.622 254.178C257.763 252.102 257.913 250.045 258.083 247.978L252.54 260.923L230.334 247.772C231.132 244.258 233.922 233.681 242.132 226.448C242.132 226.448 249.581 219.967 257.895 218.792C258.667 218.721 259.432 218.596 260.187 218.417C260.319 218.382 260.454 218.357 260.591 218.342C265.334 217.665 269.928 217.055 274.249 216.726C284.754 215.813 295.312 215.656 305.Line truncated
 </Example>
@@ -1,8 +1,8 @@
 ---
 title: Tabler Illustrations
 order: 3
-description: Customizable illustrations for modern web and mobile designs.
-summary: Tabler Illustrations is a collection of customizable SVG illustrations for your web project. Explore our library of illustrations to enhance your web development experience.
+description: Customizable SVG illustrations for web and mobile designs, in light and dark variants.
+summary: Tabler Illustrations is a set of SVG illustrations in light and dark variants, with CSS variables for recoloring and exports for print and design tools.
 ---

 import { Image } from 'astro:assets'
@@ -21,12 +21,12 @@ Tabler Illustrations is a set of { site.illustrationsCount } illustrations for e

 Each illustration ships in several formats, all included in one package:

- **SVG** — the primary format for the web, in `light/` and `dark/` variants.
- **SVG with CSS variables** — colors exposed as `--tblr-illustrations-*` custom properties, so you can re-color the artwork from CSS.
- **SVG with auto dark mode** — one file that switches between light and dark styling on its own, based on the page theme.
- **PNG** — raster exports, with and without a background.
- **EPS and PDF** — vector files for print and design tools.
- **Figma** — a source file for editing the artwork directly.
+- **SVG**: the primary format for the web, in `light/` and `dark/` variants.
+- **SVG with CSS variables**: colors exposed as `--tblr-illustrations-*` custom properties, so you can re-color the artwork from CSS.
+- **SVG with auto dark mode**: one file that switches between light and dark styling on its own, based on the page theme.
+- **PNG**: raster exports, with and without a background.
+- **EPS and PDF**: vector files for print and design tools.
+- **Figma**: a source file for editing the artwork directly.

 ## Quick start

@@ -36,7 +36,7 @@ Embed an illustration like any other image:
 <img src="illustrations/svg/light/boy-girl.svg" alt="" width="400" height="300" />
 ```

-To match the artwork to your brand, use the CSS-variables version and override its custom properties — for example the primary color and the skin tone:
+To match the artwork to your brand, use the CSS-variables version and override its custom properties - for example the primary color and the skin tone:

 ```css
 :root {
@@ -1,7 +1,7 @@
 ---
 title: Preview
 order: 1
-summary: 'Tabler Illustrations offers 80 illustrations in two themes: light and dark. You can use them in your projects to enhance the visual appeal and convey messages effectively.'
+summary: All Tabler Illustrations in the light and the dark variant, with the file name under each one.
 description: Browse all Tabler Illustrations in light and dark themes.
 ---

@@ -33,7 +33,7 @@ The `svg-css-autodark` folder holds a single-file version that follows the color

 ## All illustrations

-Find out more and purchase Tabler Illustrations at [our website](https://tabler.io/illustrations).
+You can buy Tabler Illustrations at [tabler.io/illustrations](https://tabler.io/illustrations).

 <div class="row g-2 gy-6">
  {allIllustrations.map((illustration, i) => {
@@ -1,7 +1,7 @@
 ---
 title: Welcome to Tabler Documentation
-summary: Tabler Docs provides a comprehensive guide to help you get started with the Tabler ecosystem, including its UI components, plugins, and icons. Explore detailed documentation to understand and leverage the full potential of Tabler in your projects.
-description: Find comprehensive guides, examples, and resources to help you use Tabler UI components, plugins, icons, and tools effectively in your projects.
+summary: Guides and reference for the Tabler UI kit, its plugins, Tabler Icons, Illustrations and the email templates.
+description: Guides, examples and reference for Tabler UI components, plugins, icons and the other Tabler tools.
 hide-pagination: true
 ---

@@ -10,8 +10,7 @@ import Card from '@components/DocsCard.astro'
 <img src="/img/tabler.png" alt="Tabler" class="mb-4 hide-theme-dark border-0" width="816" height="620" />
 <img src="/img/tabler-dark.png" alt="Tabler" class="mb-4 hide-theme-light border-0" width="816" height="620" />

-Find all the guides and resources you need to develop with Tabler and our other tools. Explore our UI components, icons, illustrations, and email templates to enhance your web development experience. Our tools are designed to be easy to use, customizable, and fully responsive, ensuring that your projects look great on
-any device.
+This is the documentation for Tabler and the tools around it: the UI kit, its plugins, Tabler Icons, Illustrations and the email templates. Pick a section below to get started.

 <div class="mt-6 pt-6">
  <div class="row row-deck row-cards">
@@ -1,7 +1,7 @@
 ---
 title: CSS plugin
 seoTitle: Payments CSS plugin
-summary: The Tabler payments plug-in will let you use a set of payment provider icons to facilitate the payment process and make it more user-friendly.
+summary: The payments plugin adds payment provider logos, such as Visa or PayPal, as CSS classes for checkout pages and forms.
 description: Show payment provider logos like Visa, Mastercard, and PayPal with the payments CSS plugin to make checkout pages clearer.
 order: 1
 css-plugins: [payments]
@@ -13,7 +13,7 @@ import CdnImportPlugin from '@components/CdnImportPlugin.astro'

 ## Installation

-This part of Tabler is distributed as a plugin. To enable it you should include `tabler-payments.css` or `tabler-payments.min.css` file in your page.
+The payment logos are a plugin. Include `tabler-payments.css` or `tabler-payments.min.css` in your page to enable them.

 You can also include the plugin via CDN:

@@ -21,7 +21,7 @@ You can also include the plugin via CDN:

 ## Payment

-To create a payment provider icon, add the `payment` class to a component and specify the payment provider with the `payment-provider-*` class. The full list of payment providers can be found at the end of this page.
+Add the `payment` class to an element and a `payment-provider-*` class with the provider name. The full list is at the end of this page.

 <Example centered>
 <span class="payment payment-provider-shopify"></span>
@@ -31,7 +31,7 @@ To create a payment provider icon, add the `payment` class to a component and sp

 ## Payment sizes

-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.
+Add a size class such as `payment-lg` to scale the logo. The names follow the usual Bootstrap pattern.

 <Example centered>
 <span class="payment payment-xl payment-provider-shopify"></span>
@@ -68,7 +68,7 @@ The usual place for these logos is under a payment form, to say which cards you

 ## List of available payment providers

-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.
+Every provider below comes in a light and a dark variant. Pick the one that matches the surface it sits on.

 <Payments />

@@ -1,6 +1,6 @@
 ---
 title: Tabler Payments
-summary: Tabler Payments is a set of over 160 payment provider logos — Visa, Mastercard, PayPal and many more — that you can use to make checkout pages and payment forms clearer and more trustworthy.
+summary: Over 160 payment provider logos, from Visa and PayPal to local methods, in light and dark versions for checkout pages and payment forms.
 order: 5
 description: Over 160 payment provider logos for checkout pages and payment forms.
 css-plugins: [payments]
@@ -18,7 +18,7 @@ import coverDark from '../../images/cover-payments-dark.jpg'
 	<Image src={coverDark} alt="Tabler Payments" class="hide-theme-light" width={800} densities={[1, 2]} loading="eager" />
 </figure>

-Tabler Payments is a collection of { payments.length } payment provider logos, from the most popular card brands like Visa and Mastercard to local payment methods. Every logo ships in two color versions — light and dark — so it looks right on any background.
+Tabler Payments is a collection of { payments.length } payment provider logos, from the most popular card brands like Visa and Mastercard to local payment methods. Every logo ships in two color versions - light and dark - so it looks right on any background.

 <Example centered>
 <span class="payment payment-lg payment-provider-visa"></span>
@@ -30,8 +30,8 @@ Tabler Payments is a collection of { payments.length } payment provider logos, f

 You can use the logos in two ways:

- **[CSS plugin](/payments/css)** — add the `payment` and `payment-provider-*` classes to a `<span>`. Works with plain HTML and any framework, and needs only one extra stylesheet.
- **[Libraries](/payments/libraries)** — render logos as native, tree-shakable components in [React](/payments/libraries/react), [Vue](/payments/libraries/vue), [Preact](/payments/libraries/preact) or [Astro](/payments/libraries/astro), with type-checked props and no separate CSS file.
+- **[CSS plugin](/payments/css)**: add the `payment` and `payment-provider-*` classes to a `<span>`. Works with plain HTML and any framework, and needs only one extra stylesheet.
+- **[Libraries](/payments/libraries)**: render logos as native, tree-shakable components in [React](/payments/libraries/react), [Vue](/payments/libraries/vue), [Preact](/payments/libraries/preact) or [Astro](/payments/libraries/astro), with type-checked props and no separate CSS file.

 Both ways use the same set of providers and the same light and dark artwork, so you can mix them or switch between them without visual changes.

@@ -43,7 +43,7 @@ For the CSS plugin, include the stylesheet from a CDN and add a `<span>` with th

 <Example centered html={`<span class="payment payment-provider-visa"></span>`} />

-For a framework project, install the package for your stack and import the providers you need — only the logos you import end up in your bundle:
+For a framework project, install the package for your stack and import the providers you need - only the logos you import end up in your bundle:

 ```jsx
 import { PaymentVisa } from '@tabler/payments-react';
@@ -6,7 +6,7 @@ summary: Tabler Payments for Astro provides payment provider logos as native Ast

 import TabsPackage from '@components/TabsPackage.astro'

-This is an alternative to the [CSS payments plugin](/payments/css) for Astro projects: instead of adding `payment`/`payment-provider-*` classes to a `<span>`, you render a real Astro component. This gives you type-checked props and no separate CSS file to load. It renders server-side only, with no client-side JavaScript shipped — the same as any other `.astro` component.
+This is an alternative to the [CSS payments plugin](/payments/css) for Astro projects: instead of adding `payment`/`payment-provider-*` classes to a `<span>`, you render a real Astro component. This gives you type-checked props and no separate CSS file to load. It renders server-side only, with no client-side JavaScript shipped - the same as any other `.astro` component.

 This package is pre-1.0: the API may still change before a 1.0 release.

@@ -14,11 +14,11 @@ This package is pre-1.0: the API may still change before a 1.0 release.

 <TabsPackage name="@tabler/payments-astro" />

-`astro` is a peer dependency — the package reuses the Astro version already in your project instead of bundling its own. This package specifically needs Astro `>=7.2.4 <8.0.0`.
+`astro` is a peer dependency - the package reuses the Astro version already in your project instead of bundling its own. This package specifically needs Astro `>=7.2.4 <8.0.0`.

 ## How to use

-Every provider — Visa, Mastercard, PayPal, and so on — is exported as its own named component, following the pattern `Payment<ProviderName>`. Import the one you need in your frontmatter and render it in your template:
+Every provider - Visa, Mastercard, PayPal, and so on - is exported as its own named component, following the pattern `Payment<ProviderName>`. Import the one you need in your frontmatter and render it in your template:

 ```astro
 ---
@@ -28,11 +28,11 @@ import { PaymentVisa } from '@tabler/payments-astro';
 <PaymentVisa variant="dark" size={32} />
 ```

-This works well when you know exactly which providers you want to show, and you write their names directly in your code — for example a fixed row of cards you accept.
+This works well when you know exactly which providers you want to show, and you write their names directly in your code - for example a fixed row of cards you accept.

 ### Rendering a provider by name at runtime

-Sometimes the provider isn't known ahead of time in your source code — for example, it's a string coming from an API response or a CMS field.
+Sometimes the provider isn't known ahead of time in your source code - for example, it's a string coming from an API response or a CMS field.

 For this case, use the `Payment` component instead: pass the provider's slug as a `provider` prop and it renders the right logo for you.

@@ -44,9 +44,9 @@ import { Payment } from '@tabler/payments-astro';
 <Payment provider="visa" variant="dark" size={32} />
 ```

-The slug is the component name without the `Payment` prefix, in kebab-case — for example `PaymentGooglePay` is `"google-pay"`. This works the same way for any of the 100+ supported payment providers.
+The slug is the component name without the `Payment` prefix, in kebab-case - for example `PaymentGooglePay` is `"google-pay"`. This works the same way for any of the 100+ supported payment providers.

-If `provider` doesn't match a known slug, `Payment` renders nothing rather than throwing — useful when the data driving it isn't fully trusted (for example, a slug typed by hand in a CMS).
+If `provider` doesn't match a known slug, `Payment` renders nothing rather than throwing - useful when the data driving it isn't fully trusted (for example, a slug typed by hand in a CMS).

 ## Props

@@ -56,12 +56,12 @@ Both the named provider components (`PaymentVisa`, `PaymentMastercard`, ...) and
 | ---------- | ------------------- | ------- | -------------- |
 | `variant`  | `'light' \| 'dark'` | `light` | no             |
 | `size`     | `string \| number`  | `24`    | no             |
-| `title`    | `string`            | —       | no             |
-| `provider` | `string`            | —       | `Payment` only |
+| `title`    | `string`            | -       | no             |
+| `provider` | `string`            | -       | `Payment` only |

 ### `variant`

-Every logo ships in two pre-baked color versions, `light` and `dark` — exactly like the CSS plugin's `payment-provider-*` (light) and `payment-provider-*-dark` classes. Pick `variant="dark"` when the logo sits on a dark surface (a dark navbar, a dark card, dark mode), and leave it at the `light` default everywhere else. There's no automatic detection of the surrounding background — you choose explicitly:
+Every logo ships in two pre-baked color versions, `light` and `dark` - exactly like the CSS plugin's `payment-provider-*` (light) and `payment-provider-*-dark` classes. Pick `variant="dark"` when the logo sits on a dark surface (a dark navbar, a dark card, dark mode), and leave it at the `light` default everywhere else. There's no automatic detection of the surrounding background - you choose explicitly:

 ```astro
 <PaymentVisa variant="light" /> <!-- default, for light backgrounds -->
@@ -77,7 +77,7 @@ Sets the rendered SVG **height**, in pixels. The width is calculated for you fro
 <PaymentVisa size={48} /> <!-- 48px tall, 80px wide -->
 ```

-If you need a specific width instead — for example to fit a fixed-width column — pass `width` directly. An explicit `width` prop overrides the calculated one, while `size` still controls the height:
+If you need a specific width instead - for example to fit a fixed-width column - pass `width` directly. An explicit `width` prop overrides the calculated one, while `size` still controls the height:

 ```astro
 <PaymentVisa size={24} width={64} /> <!-- 24px tall, but exactly 64px wide -->
@@ -85,7 +85,7 @@ If you need a specific width instead — for example to fit a fixed-width column

 ### `title`

-Adds an accessible `<title>` element as the first child inside the SVG, which screen readers announce when they reach the logo. This does **not** happen automatically — without `title` (or an `aria-label` on a wrapping element), the logo is invisible to assistive technology, which is correct when it's purely decorative but wrong when it's the only way to identify a payment method:
+Adds an accessible `<title>` element as the first child inside the SVG, which screen readers announce when they reach the logo. This does **not** happen automatically - without `title` (or an `aria-label` on a wrapping element), the logo is invisible to assistive technology, which is correct when it's purely decorative but wrong when it's the only way to identify a payment method:

 ```astro
 <PaymentVisa title="Visa" />
@@ -95,7 +95,7 @@ See the [Accessibility](/payments/css#accessibility) section on the CSS plugin p

 ### Everything else

-Any other prop you pass — `class`, `stroke-width`, `data-*`, and so on — is forwarded as-is to the root `<svg>` element, exactly like it would be on a plain HTML element:
+Any other prop you pass - `class`, `stroke-width`, `data-*`, and so on - is forwarded as-is to the root `<svg>` element, exactly like it would be on a plain HTML element:

 ```astro
 <PaymentVisa class="rounded shadow-sm" data-testid="visa-logo" />
@@ -103,7 +103,7 @@ Any other prop you pass — `class`, `stroke-width`, `data-*`, and so on — is

 ### `provider` (dynamic `Payment` component only)

-Required when using `Payment` instead of a named import. Takes the provider's slug as a string: the component name without the `Payment` prefix, in kebab-case. For example, `PaymentGooglePay` → `"google-pay"`. Any of the 100+ supported providers works here, not just the ones shown in the examples on this page — see the [package README](https://github.com/tabler/tabler-payments/blob/main/packages/payments-astro/README.md) for the full list. See [Rendering a provider by name at runtime](#rendering-a-provider-by-name-at-runtime) above.
+Required when using `Payment` instead of a named import. Takes the provider's slug as a string: the component name without the `Payment` prefix, in kebab-case. For example, `PaymentGooglePay` → `"google-pay"`. Any of the 100+ supported providers works here, not just the ones shown in the examples on this page - see the [package README](https://github.com/tabler/tabler-payments/blob/main/packages/payments-astro/README.md) for the full list. See [Rendering a provider by name at runtime](#rendering-a-provider-by-name-at-runtime) above.

 ## Available providers

@@ -1,7 +1,7 @@
 ---
 title: Libraries
 description: Official Tabler Payments packages for React, Vue, Preact and Astro. Use over 100 payment provider logos as native, tree-shakable components.
-summary: The libraries section offers official Tabler Payments packages for popular frameworks, so you can render payment provider logos as native components instead of CSS classes.
+summary: Official Tabler Payments packages for popular frameworks, which render payment provider logos as native components.
 order: 2
 ---

@@ -6,7 +6,7 @@ summary: Tabler Payments for Preact offers payment provider logos as tree-shakab

 import TabsPackage from '@components/TabsPackage.astro'

-This is an alternative to the [CSS payments plugin](/payments/css) for Preact projects: instead of adding `payment`/`payment-provider-*` classes to a `<span>`, you render a real Preact component. This gives you type-checked props, no separate CSS file to load, and tree-shaking — a page that only uses `PaymentVisa` doesn't ship the SVG markup for the other 99 providers.
+This is an alternative to the [CSS payments plugin](/payments/css) for Preact projects: instead of adding `payment`/`payment-provider-*` classes to a `<span>`, you render a real Preact component. This gives you type-checked props, no separate CSS file to load, and tree-shaking - a page that only uses `PaymentVisa` doesn't ship the SVG markup for the other 99 providers.

 This package is pre-1.0: the API may still change before a 1.0 release.

@@ -14,11 +14,11 @@ This package is pre-1.0: the API may still change before a 1.0 release.

 <TabsPackage name="@tabler/payments-preact" />

-`preact` is a peer dependency — the package reuses the Preact version already in your project instead of bundling its own.
+`preact` is a peer dependency - the package reuses the Preact version already in your project instead of bundling its own.

 ## How to use

-Every provider — Visa, Mastercard, PayPal, and so on — is exported as its own named component, following the pattern `Payment<ProviderName>`. Import the one you need and render it like any other Preact component:
+Every provider - Visa, Mastercard, PayPal, and so on - is exported as its own named component, following the pattern `Payment<ProviderName>`. Import the one you need and render it like any other Preact component:

 ```jsx
 import { PaymentVisa } from '@tabler/payments-preact';
@@ -28,11 +28,11 @@ function AcceptedCards() {
 }
 ```

-This works well when you know exactly which providers you want to show, and you write their names directly in your code — for example a fixed row of cards you accept.
+This works well when you know exactly which providers you want to show, and you write their names directly in your code - for example a fixed row of cards you accept.

 ### Rendering a provider by name at runtime

-Sometimes the provider isn't known ahead of time in your source code — for example, it's a string coming from an API response or a CMS field.
+Sometimes the provider isn't known ahead of time in your source code - for example, it's a string coming from an API response or a CMS field.

 For this case, use the `Payment` component instead: pass the provider's slug as a `provider` prop and it renders the right logo for you.

@@ -42,9 +42,9 @@ import { Payment } from '@tabler/payments-preact';
 <Payment provider="visa" variant="dark" size={32} />
 ```

-The slug is the component name without the `Payment` prefix, in kebab-case — for example `PaymentGooglePay` is `"google-pay"`. This works the same way for any of the 100+ supported payment providers.
+The slug is the component name without the `Payment` prefix, in kebab-case - for example `PaymentGooglePay` is `"google-pay"`. This works the same way for any of the 100+ supported payment providers.

-If `provider` doesn't match a known slug, `Payment` renders nothing rather than throwing — useful when the data driving it isn't fully trusted (for example, a slug typed by hand in a CMS).
+If `provider` doesn't match a known slug, `Payment` renders nothing rather than throwing - useful when the data driving it isn't fully trusted (for example, a slug typed by hand in a CMS).

 ## Props

@@ -54,12 +54,12 @@ Both the named provider components (`PaymentVisa`, `PaymentMastercard`, ...) and
 | ---------- | ------------------- | ------- | -------------- |
 | `variant`  | `'light' \| 'dark'` | `light` | no             |
 | `size`     | `string \| number`  | `24`    | no             |
-| `title`    | `string`            | —       | no             |
-| `provider` | `string`            | —       | `Payment` only |
+| `title`    | `string`            | -       | no             |
+| `provider` | `string`            | -       | `Payment` only |

 ### `variant`

-Every logo ships in two pre-baked color versions, `light` and `dark` — exactly like the CSS plugin's `payment-provider-*` (light) and `payment-provider-*-dark` classes. Pick `variant="dark"` when the logo sits on a dark surface (a dark navbar, a dark card, dark mode), and leave it at the `light` default everywhere else. There's no automatic detection of the surrounding background — you choose explicitly:
+Every logo ships in two pre-baked color versions, `light` and `dark` - exactly like the CSS plugin's `payment-provider-*` (light) and `payment-provider-*-dark` classes. Pick `variant="dark"` when the logo sits on a dark surface (a dark navbar, a dark card, dark mode), and leave it at the `light` default everywhere else. There's no automatic detection of the surrounding background - you choose explicitly:

 ```jsx
 <PaymentVisa variant="light" /> {/* default, for light backgrounds */}
@@ -75,7 +75,7 @@ Sets the rendered SVG **height**, in pixels. The width is calculated for you fro
 <PaymentVisa size={48} /> {/* 48px tall, 80px wide */}
 ```

-If you need a specific width instead — for example to fit a fixed-width column — pass `width` directly. An explicit `width` prop overrides the calculated one, while `size` still controls the height:
+If you need a specific width instead - for example to fit a fixed-width column - pass `width` directly. An explicit `width` prop overrides the calculated one, while `size` still controls the height:

 ```jsx
 <PaymentVisa size={24} width={64} /> {/* 24px tall, but exactly 64px wide */}
@@ -83,7 +83,7 @@ If you need a specific width instead — for example to fit a fixed-width column

 ### `title`

-Adds an accessible `<title>` element as the first child inside the SVG, which screen readers announce when they reach the logo. This does **not** happen automatically — without `title` (or an `aria-label` on a wrapping element), the logo is invisible to assistive technology, which is correct when it's purely decorative but wrong when it's the only way to identify a payment method:
+Adds an accessible `<title>` element as the first child inside the SVG, which screen readers announce when they reach the logo. This does **not** happen automatically - without `title` (or an `aria-label` on a wrapping element), the logo is invisible to assistive technology, which is correct when it's purely decorative but wrong when it's the only way to identify a payment method:

 ```jsx
 <PaymentVisa title="Visa" />
@@ -93,7 +93,7 @@ See the [Accessibility](/payments/css#accessibility) section on the CSS plugin p

 ### Everything else

-Any other prop you pass — `class`, `onClick`, `style`, `data-*`, and so on — is forwarded as-is to the root `<svg>` element, exactly like it would be on a plain HTML element:
+Any other prop you pass - `class`, `onClick`, `style`, `data-*`, and so on - is forwarded as-is to the root `<svg>` element, exactly like it would be on a plain HTML element:

 ```jsx
 <PaymentVisa class="rounded shadow-sm" onClick={() => selectMethod('visa')} data-testid="visa-logo" />
@@ -101,7 +101,7 @@ Any other prop you pass — `class`, `onClick`, `style`, `data-*`, and so on —

 ### `provider` (dynamic `Payment` component only)

-Required when using `Payment` instead of a named import. Takes the provider's slug as a string: the component name without the `Payment` prefix, in kebab-case. For example, `PaymentGooglePay` → `"google-pay"`. Any of the 100+ supported providers works here, not just the ones shown in the examples on this page — see the [package README](https://github.com/tabler/tabler-payments/blob/main/packages/payments-preact/README.md) for the full list. See [Rendering a provider by name at runtime](#rendering-a-provider-by-name-at-runtime) above.
+Required when using `Payment` instead of a named import. Takes the provider's slug as a string: the component name without the `Payment` prefix, in kebab-case. For example, `PaymentGooglePay` → `"google-pay"`. Any of the 100+ supported providers works here, not just the ones shown in the examples on this page - see the [package README](https://github.com/tabler/tabler-payments/blob/main/packages/payments-preact/README.md) for the full list. See [Rendering a provider by name at runtime](#rendering-a-provider-by-name-at-runtime) above.

 ## Available providers

@@ -6,7 +6,7 @@ summary: Tabler Payments for React offers payment provider logos as tree-shakabl

 import TabsPackage from '@components/TabsPackage.astro'

-This is an alternative to the [CSS payments plugin](/payments/css) for React projects: instead of adding `payment`/`payment-provider-*` classes to a `<span>`, you render a real React component. This gives you type-checked props, no separate CSS file to load, and tree-shaking — a page that only uses `PaymentVisa` doesn't ship the SVG markup for the other 99 providers.
+This is an alternative to the [CSS payments plugin](/payments/css) for React projects: instead of adding `payment`/`payment-provider-*` classes to a `<span>`, you render a real React component. This gives you type-checked props, no separate CSS file to load, and tree-shaking - a page that only uses `PaymentVisa` doesn't ship the SVG markup for the other 99 providers.

 This package is pre-1.0: the API may still change before a 1.0 release.

@@ -14,11 +14,11 @@ This package is pre-1.0: the API may still change before a 1.0 release.

 <TabsPackage name="@tabler/payments-react" />

-`react` is a peer dependency — the package reuses the React version already in your project instead of bundling its own.
+`react` is a peer dependency - the package reuses the React version already in your project instead of bundling its own.

 ## How to use

-Every provider — Visa, Mastercard, PayPal, and so on — is exported as its own named component, following the pattern `Payment<ProviderName>`. Import the one you need and render it like any other React component:
+Every provider - Visa, Mastercard, PayPal, and so on - is exported as its own named component, following the pattern `Payment<ProviderName>`. Import the one you need and render it like any other React component:

 ```jsx
 import { PaymentVisa } from '@tabler/payments-react';
@@ -28,11 +28,11 @@ function AcceptedCards() {
 }
 ```

-This works well when you know exactly which providers you want to show, and you write their names directly in your code — for example a fixed row of cards you accept.
+This works well when you know exactly which providers you want to show, and you write their names directly in your code - for example a fixed row of cards you accept.

 ### Rendering a provider by name at runtime

-Sometimes the provider isn't known ahead of time in your source code — for example, it's a string coming from an API response or a CMS field.
+Sometimes the provider isn't known ahead of time in your source code - for example, it's a string coming from an API response or a CMS field.

 For this case, use the `Payment` component instead: pass the provider's slug as a `provider` prop and it renders the right logo for you.

@@ -42,9 +42,9 @@ import { Payment } from '@tabler/payments-react';
 <Payment provider="visa" variant="dark" size={32} />
 ```

-The slug is the component name without the `Payment` prefix, in kebab-case — for example `PaymentGooglePay` is `"google-pay"`. This works the same way for any of the 100+ supported payment providers.
+The slug is the component name without the `Payment` prefix, in kebab-case - for example `PaymentGooglePay` is `"google-pay"`. This works the same way for any of the 100+ supported payment providers.

-If `provider` doesn't match a known slug, `Payment` renders nothing rather than throwing — useful when the data driving it isn't fully trusted (for example, a slug typed by hand in a CMS).
+If `provider` doesn't match a known slug, `Payment` renders nothing rather than throwing - useful when the data driving it isn't fully trusted (for example, a slug typed by hand in a CMS).

 ## Props

@@ -54,12 +54,12 @@ Both the named provider components (`PaymentVisa`, `PaymentMastercard`, ...) and
 | ---------- | ------------------- | ------- | -------------- |
 | `variant`  | `'light' \| 'dark'` | `light` | no             |
 | `size`     | `string \| number`  | `24`    | no             |
-| `title`    | `string`            | —       | no             |
-| `provider` | `string`            | —       | `Payment` only |
+| `title`    | `string`            | -       | no             |
+| `provider` | `string`            | -       | `Payment` only |

 ### `variant`

-Every logo ships in two pre-baked color versions, `light` and `dark` — exactly like the CSS plugin's `payment-provider-*` (light) and `payment-provider-*-dark` classes. Pick `variant="dark"` when the logo sits on a dark surface (a dark navbar, a dark card, dark mode), and leave it at the `light` default everywhere else. There's no automatic detection of the surrounding background — you choose explicitly:
+Every logo ships in two pre-baked color versions, `light` and `dark` - exactly like the CSS plugin's `payment-provider-*` (light) and `payment-provider-*-dark` classes. Pick `variant="dark"` when the logo sits on a dark surface (a dark navbar, a dark card, dark mode), and leave it at the `light` default everywhere else. There's no automatic detection of the surrounding background - you choose explicitly:

 ```jsx
 <PaymentVisa variant="light" /> {/* default, for light backgrounds */}
@@ -75,7 +75,7 @@ Sets the rendered SVG **height**, in pixels. The width is calculated for you fro
 <PaymentVisa size={48} /> {/* 48px tall, 80px wide */}
 ```

-If you need a specific width instead — for example to fit a fixed-width column — pass `width` directly. An explicit `width` prop overrides the calculated one, while `size` still controls the height:
+If you need a specific width instead - for example to fit a fixed-width column - pass `width` directly. An explicit `width` prop overrides the calculated one, while `size` still controls the height:

 ```jsx
 <PaymentVisa size={24} width={64} /> {/* 24px tall, but exactly 64px wide */}
@@ -83,7 +83,7 @@ If you need a specific width instead — for example to fit a fixed-width column

 ### `title`

-Adds an accessible `<title>` element as the first child inside the SVG, which screen readers announce when they reach the logo. This does **not** happen automatically — without `title` (or an `aria-label` on a wrapping element), the logo is invisible to assistive technology, which is correct when it's purely decorative but wrong when it's the only way to identify a payment method:
+Adds an accessible `<title>` element as the first child inside the SVG, which screen readers announce when they reach the logo. This does **not** happen automatically - without `title` (or an `aria-label` on a wrapping element), the logo is invisible to assistive technology, which is correct when it's purely decorative but wrong when it's the only way to identify a payment method:

 ```jsx
 <PaymentVisa title="Visa" />
@@ -93,7 +93,7 @@ See the [Accessibility](/payments/css#accessibility) section on the CSS plugin p

 ### Everything else

-Any other prop you pass — `className`, `onClick`, `style`, `data-*`, `aria-*`, and so on — is forwarded as-is to the root `<svg>` element, exactly like it would be on a plain HTML element:
+Any other prop you pass - `className`, `onClick`, `style`, `data-*`, `aria-*`, and so on - is forwarded as-is to the root `<svg>` element, exactly like it would be on a plain HTML element:

 ```jsx
 <PaymentVisa className="rounded shadow-sm" onClick={() => selectMethod('visa')} data-testid="visa-logo" />
@@ -101,7 +101,7 @@ Any other prop you pass — `className`, `onClick`, `style`, `data-*`, `aria-*`,

 ### `provider` (dynamic `Payment` component only)

-Required when using `Payment` instead of a named import. Takes the provider's slug as a string: the component name without the `Payment` prefix, in kebab-case. For example, `PaymentGooglePay` → `"google-pay"`. Any of the 100+ supported providers works here, not just the ones shown in the examples on this page — see the [package README](https://github.com/tabler/tabler-payments/blob/main/packages/payments-react/README.md) for the full list. See [Rendering a provider by name at runtime](#rendering-a-provider-by-name-at-runtime) above.
+Required when using `Payment` instead of a named import. Takes the provider's slug as a string: the component name without the `Payment` prefix, in kebab-case. For example, `PaymentGooglePay` → `"google-pay"`. Any of the 100+ supported providers works here, not just the ones shown in the examples on this page - see the [package README](https://github.com/tabler/tabler-payments/blob/main/packages/payments-react/README.md) for the full list. See [Rendering a provider by name at runtime](#rendering-a-provider-by-name-at-runtime) above.

 ## Available providers

@@ -6,7 +6,7 @@ summary: Tabler Payments for Vue offers payment provider logos as tree-shakable

 import TabsPackage from '@components/TabsPackage.astro'

-This is an alternative to the [CSS payments plugin](/payments/css) for Vue projects: instead of adding `payment`/`payment-provider-*` classes to a `<span>`, you render a real Vue component. This gives you type-checked props, no separate CSS file to load, and tree-shaking — a page that only uses `PaymentVisa` doesn't ship the SVG markup for the other 99 providers.
+This is an alternative to the [CSS payments plugin](/payments/css) for Vue projects: instead of adding `payment`/`payment-provider-*` classes to a `<span>`, you render a real Vue component. This gives you type-checked props, no separate CSS file to load, and tree-shaking - a page that only uses `PaymentVisa` doesn't ship the SVG markup for the other 99 providers.

 This package is pre-1.0: the API may still change before a 1.0 release.

@@ -14,11 +14,11 @@ This package is pre-1.0: the API may still change before a 1.0 release.

 <TabsPackage name="@tabler/payments-vue" />

-`vue` is a peer dependency — the package reuses the Vue 3 version already in your project instead of bundling its own.
+`vue` is a peer dependency - the package reuses the Vue 3 version already in your project instead of bundling its own.

 ## How to use

-Every provider — Visa, Mastercard, PayPal, and so on — is exported as its own named component, following the pattern `Payment<ProviderName>`. Import the one you need and render it like any other Vue component:
+Every provider - Visa, Mastercard, PayPal, and so on - is exported as its own named component, following the pattern `Payment<ProviderName>`. Import the one you need and render it like any other Vue component:

 ```vue
 <script setup>
@@ -30,11 +30,11 @@ import { PaymentVisa } from '@tabler/payments-vue';
 </template>
 ```

-This works well when you know exactly which providers you want to show, and you write their names directly in your template — for example a fixed row of cards you accept.
+This works well when you know exactly which providers you want to show, and you write their names directly in your template - for example a fixed row of cards you accept.

 ### Rendering a provider by name at runtime

-Sometimes the provider isn't known ahead of time in your template — for example, it's a string coming from an API response or a CMS field.
+Sometimes the provider isn't known ahead of time in your template - for example, it's a string coming from an API response or a CMS field.

 For this case, use the `Payment` component instead: pass the provider's slug as a `provider` prop and it renders the right logo for you.

@@ -48,9 +48,9 @@ import { Payment } from '@tabler/payments-vue';
 </template>
 ```

-The slug is the component name without the `Payment` prefix, in kebab-case — for example `PaymentGooglePay` is `"google-pay"`. This works the same way for any of the 100+ supported payment providers.
+The slug is the component name without the `Payment` prefix, in kebab-case - for example `PaymentGooglePay` is `"google-pay"`. This works the same way for any of the 100+ supported payment providers.

-If `provider` doesn't match a known slug, `Payment` renders nothing rather than throwing — useful when the data driving it isn't fully trusted (for example, a slug typed by hand in a CMS).
+If `provider` doesn't match a known slug, `Payment` renders nothing rather than throwing - useful when the data driving it isn't fully trusted (for example, a slug typed by hand in a CMS).

 ## Props

@@ -60,12 +60,12 @@ Both the named provider components (`PaymentVisa`, `PaymentMastercard`, ...) and
 | ---------- | ------------------- | ------- | -------------- |
 | `variant`  | `'light' \| 'dark'` | `light` | no             |
 | `size`     | `string \| number`  | `24`    | no             |
-| `title`    | `string`            | —       | no             |
-| `provider` | `string`            | —       | `Payment` only |
+| `title`    | `string`            | -       | no             |
+| `provider` | `string`            | -       | `Payment` only |

 ### `variant`

-Every logo ships in two pre-baked color versions, `light` and `dark` — exactly like the CSS plugin's `payment-provider-*` (light) and `payment-provider-*-dark` classes. Pick `variant="dark"` when the logo sits on a dark surface (a dark navbar, a dark card, dark mode), and leave it at the `light` default everywhere else. There's no automatic detection of the surrounding background — you choose explicitly:
+Every logo ships in two pre-baked color versions, `light` and `dark` - exactly like the CSS plugin's `payment-provider-*` (light) and `payment-provider-*-dark` classes. Pick `variant="dark"` when the logo sits on a dark surface (a dark navbar, a dark card, dark mode), and leave it at the `light` default everywhere else. There's no automatic detection of the surrounding background - you choose explicitly:

 ```vue
 <PaymentVisa variant="light" /> <!-- default, for light backgrounds -->
@@ -81,7 +81,7 @@ Sets the rendered SVG **height**, in pixels. The width is calculated for you fro
 <PaymentVisa :size="48" /> <!-- 48px tall, 80px wide -->
 ```

-If you need a specific width instead — for example to fit a fixed-width column — pass `width` directly. An explicit `width` prop overrides the calculated one, while `size` still controls the height:
+If you need a specific width instead - for example to fit a fixed-width column - pass `width` directly. An explicit `width` prop overrides the calculated one, while `size` still controls the height:

 ```vue
 <PaymentVisa :size="24" :width="64" /> <!-- 24px tall, but exactly 64px wide -->
@@ -89,7 +89,7 @@ If you need a specific width instead — for example to fit a fixed-width column

 ### `title`

-Adds an accessible `<title>` element as the first child inside the SVG, which screen readers announce when they reach the logo. This does **not** happen automatically — without `title` (or an `aria-label` on a wrapping element), the logo is invisible to assistive technology, which is correct when it's purely decorative but wrong when it's the only way to identify a payment method:
+Adds an accessible `<title>` element as the first child inside the SVG, which screen readers announce when they reach the logo. This does **not** happen automatically - without `title` (or an `aria-label` on a wrapping element), the logo is invisible to assistive technology, which is correct when it's purely decorative but wrong when it's the only way to identify a payment method:

 ```vue
 <PaymentVisa title="Visa" />
@@ -99,7 +99,7 @@ See the [Accessibility](/payments/css#accessibility) section on the CSS plugin p

 ### Everything else

-Any other attribute you pass — `class`, `stroke-width`, `onClick`, and so on — is forwarded as-is to the root `<svg>` element, exactly like it would be on a plain HTML element. This package keeps attributes **kebab-case** (`stroke-width`, not `strokeWidth`), matching how Vue and the DOM already write them:
+Any other attribute you pass - `class`, `stroke-width`, `onClick`, and so on - is forwarded as-is to the root `<svg>` element, exactly like it would be on a plain HTML element. This package keeps attributes **kebab-case** (`stroke-width`, not `strokeWidth`), matching how Vue and the DOM already write them:

 ```vue
 <PaymentVisa class="rounded shadow-sm" @click="selectMethod('visa')" data-testid="visa-logo" />
@@ -107,7 +107,7 @@ Any other attribute you pass — `class`, `stroke-width`, `onClick`, and so on

 ### `provider` (dynamic `Payment` component only)

-Required when using `Payment` instead of a named import. Takes the provider's slug as a string: the component name without the `Payment` prefix, in kebab-case. For example, `PaymentGooglePay` → `"google-pay"`. Any of the 100+ supported providers works here, not just the ones shown in the examples on this page — see the [package README](https://github.com/tabler/tabler-payments/blob/main/packages/payments-vue/README.md) for the full list. See [Rendering a provider by name at runtime](#rendering-a-provider-by-name-at-runtime) above.
+Required when using `Payment` instead of a named import. Takes the provider's slug as a string: the component name without the `Payment` prefix, in kebab-case. For example, `PaymentGooglePay` → `"google-pay"`. Any of the 100+ supported providers works here, not just the ones shown in the examples on this page - see the [package README](https://github.com/tabler/tabler-payments/blob/main/packages/payments-vue/README.md) for the full list. See [Rendering a provider by name at runtime](#rendering-a-provider-by-name-at-runtime) above.

 ## Available providers

@@ -1,9 +1,7 @@
 ---
 title: Colors
-summary:
-  The choice of colors for a website or app interface has a big influence on how users interact with the product and what decisions they make. Harmonious colors can contribute to a nice first impression and encourage users to engage with your product, so it's a very important aspect of a successful design, which needs
-  to be well thought out.
-description: Explore the Tabler color palette and learn how to use base and pastel shades to style components, indicate states, and guide user actions.
+summary: The Tabler color palette with base colors, light variants, the gray scale and social brand colors, each with background and text utilities.
+description: The Tabler color palette, with base and light shades, the gray scale and social brand colors.
 ---

 import Colors from '@components/Colors.astro'
@@ -12,19 +10,19 @@ import site from '@data/site.json'

 ## Base 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.
+These are the base colors. Each one has `bg-*` and `text-*` utilities, and the components use the same names for their color variants.

 <Colors colors={site.colors} />

 ## 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.
+Every base color also has a light shade with the `-lt` suffix. It works as a background for text or an icon in the base color.

 <Colors colors={site.lightColors} />

 ## Gray palette

-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.
+The gray scale is used for backgrounds, borders and muted text. Tabler ships several gray palettes and switches between them with `data-bs-theme-base`; see [theme base colors](/ui/plugins/theme-base-colors).

 <Colors colors={site.grayColors} />

@@ -40,14 +38,14 @@ Every shade of the gray palette has a background and a text utility, from `50` t

 ## Social colors

-Use the colors of popular social networks to create a recognizable design and make it easier for users to interact with your product.
+The brand colors of popular services are available too, for social buttons and icons.

 <Colors colors={site.socialColors} />

 ## Accessibility

- A colour name is not a meaning. `text-red` looks like an error to most users, but a screen reader announces nothing, so keep the meaning in the text.
- Body text needs a contrast ratio of at least 4.5:1, and large text at least 3:1. The lighter `-lt` variants are backgrounds for dark text, not text colours.
- Check both colour modes. A pair that passes in light can fail in dark, and Tabler switches many tokens with `light-dark()`.
- The social colours are brand colours. They are picked to be recognisable, not readable - do not use them for text on a white background without checking.
+- A color name is not a meaning. `text-red` looks like an error to most users, but a screen reader announces nothing, so keep the meaning in the text.
+- Body text needs a contrast ratio of at least 4.5:1, and large text at least 3:1. The lighter `-lt` variants are backgrounds for dark text, not text colors.
+- Check both color modes. A pair that passes in light can fail in dark, and Tabler switches many tokens with `light-dark()`.
+- The social colors are brand colors. They are picked to be recognizable, not readable - do not use them for text on a white background without checking.
 - Never separate two states by hue alone. Add a label, an icon, or a shape.
@@ -2,7 +2,7 @@
 title: Base
 order: 2
 description: Foundational styles that every Tabler project builds on - colors, typography, and long-form content - for a consistent user interface.
-summary: The base section includes foundational elements such as colors, typography, and spacing that form the building blocks of a cohesive and consistent user interface.
+summary: The base section covers colors, typography and the other foundations that every component builds on.
 ---

 Base styles are the foundation every Tabler project builds on. They define colors, typography, and long-form content styles, so all components share one consistent look. Start here before you customize anything else.
@@ -9,7 +9,7 @@ import Prose from '@ui/Prose.astro';

 ## How it works

-Wrap your content in the `.prose` class to apply long-form typography styles to headings, paragraphs, lists, tables, and other common elements. This is especially useful when rendering Markdown, MDX, or content from a [WYSIWYG editor](/ui/plugins/wysiwyg).
+Wrap your content in the `.prose` class to apply long-form typography styles to headings, paragraphs, lists, tables and other common elements. Use it when you render Markdown, MDX or the output of a [WYSIWYG editor](/ui/plugins/wysiwyg), where you can't add classes to every element.

 - Sets a base `font-size` and `line-height` for comfortable reading.
 - Normalizes list spacing and nested list indentation.
@@ -57,7 +57,7 @@ Most of these elements are styled by browsers with only light adjustments from T

 ## Headings

-Headings help readers scan long documents quickly. Use them to create a clear hierarchy and maintain a logical flow.
+Headings inside `.prose` get their sizes and margins from the wrapper. Keep them in order, so the document has one outline.

 ### Code

@@ -147,4 +147,4 @@ Tables work best for comparing related data points.
 - Images in prose need `alt` text. Use `alt=""` only when the caption already says the same thing.
 - Links should make sense on their own. "Read more" repeated ten times gives a screen reader user a list of identical entries.
 - Tables in prose need a `th` row. Prose styles them, but only the markup makes them readable.
- Do not rely on the prose colours for meaning. Keep the emphasis in `strong` and `em`.
+- Do not rely on the prose colors for meaning. Keep the emphasis in `strong` and `em`.
@@ -1,15 +1,14 @@
 ---
 title: Typography
-summary: Typography plays an important role in creating an attractive and clear interface design. Good typography will make the content easy to follow and improve the usability of your website.
-description: Learn how Tabler styles headings, paragraphs, and text elements to keep content readable and interfaces clear and easy to follow.
+summary: How Tabler styles headings, paragraphs, semantic text elements, horizontal rules and the text utilities.
+description: How Tabler styles headings, paragraphs and text elements to keep content readable.
 related: [/ui/base/prose]
 ---
 import Example from '@components/Example.astro';

 ## Headings

-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.
+Use the `h1` to `h6` tags for headings. `h1` is the top level and `h6` the lowest, and the size follows the level.

 Below are examples of headings with different levels:

@@ -56,7 +55,7 @@ Add the `lead` class to the opening paragraph of a section. In Tabler it does no

 ## Semantic text elements

-Use a variety of semantic text elements, depending on how you want to display particular fragments of content.
+HTML has elements for different kinds of inline text: emphasis, deleted or inserted text, abbreviations, code and more. Tabler styles all of them.

 Here are examples of semantic text elements:

@@ -94,7 +93,7 @@ Use the `hr` tag to represent a thematic break between paragraphs within one sec

 ## Horizontal rules with label

-You can also add a label to a horizontal rule and align it as you see fit. Centered label is the default.
+The `hr-text` element draws a rule with a label. The label is centered by default; `hr-text-start` and `hr-text-end` move it to either end.

 <Example>
 <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>
@@ -110,7 +109,7 @@ You can also add a label to a horizontal rule and align it as you see fit. Cente

 ## Optimized for different alphabets

-Tabler has been optimized to correctly display content in any language. It supports most Asian, African and Middle Eastern languages.
+Tabler doesn't restrict the character set. Text in Asian, African and Middle Eastern scripts renders with the system fonts, as the examples below show.

 <Example>
 <p>汉字</p>
@@ -1,6 +1,6 @@
 ---
 title: Alert
-summary: An alert message is used to inform users about the status of their action and help them solve problems that may occur. Good alert design is important for the overall user experience of a website or app.
+summary: Alerts report the result of an action or a problem to fix, in success, info, warning and danger variants, with icons, links and a dismiss button.
 description: Show alert messages that inform users about success, info, warning, or danger states, with icons, links, and dismissible options.
 related: [/ui/components/toast]
 source: core/scss/ui/_alerts.scss
@@ -39,7 +39,7 @@ import Icon from '@ui/Icon.astro'

 ## Default markup

-Depending on the information you need to convey, you can use one of the following types of alert messages - **success**, **info**, **warning** or **danger**. Using the right type of alert modal will help draw users' attention to the message and prompt them to take action.
+An alert comes in four types: success, info, warning and danger. Pick the one that matches the message, so the color says at a glance whether something went right or wrong.

 Combine `alert` class with one of the following: `alert-success`, `alert-info`, `alert-warning`, `alert-danger` to get the alert that you need.

@@ -99,7 +99,7 @@ Add `alert-minor` for a quieter alert. It drops the tinted background and keeps

 ## Dismissible alerts

-Add the `x` close button to make an alert modal dismissible. Thanks to that, your alert modal will disappear only when the user closes it.
+Add a close button to let the user dismiss the alert. It stays on the page until they do.

 ```html
 <a class="btn-close" data-bs-dismiss="alert" aria-label="close"></a>
@@ -111,7 +111,7 @@ Add the `x` close button to make an alert modal dismissible. Thanks to that, you

 ## Alerts with icons

-Add an icon to your alert modal to make it more user-friendly and help users easily identify the message.
+An icon in front of the text repeats the type of the alert, which helps when several alerts are on the page.

 Use the `alert-icon` class on an `<svg>` (or on an `<i>` when using the webfont) to provide the proper styling.

@@ -173,7 +173,7 @@ Use the `alert-icon` class on an `<svg>` (or on an `<i>` when using the webfont)

 ## Alert with avatar

-Add an [avatar](/ui/components/avatar) to your alert modal to make it more personalized.
+Put an [avatar](/ui/components/avatar) in the alert when the message is about a person, such as a mention or a request.

 <Example>
 <div class="alert alert-success" role="alert">
@@ -210,7 +210,7 @@ Add an [avatar](/ui/components/avatar) to your alert modal to make it more perso

 ## Alert with buttons

-Add primary and secondary [buttons](/ui/components/button) to your alert modals if you want users to take a particular action based on the information included in the modal message.
+Add [buttons](/ui/components/button) when the alert asks the user to do something, for example to confirm or to retry.

 Buttons don't inherit the alert's color, so you should set the proper class if you want it to be matched. For example, `btn-success` for `alert-success`.

@@ -255,7 +255,7 @@ Buttons don't inherit the alert's color, so you should set the proper class if y

 ## Important alerts

-If you want your alert to be really eye-catching, you can add an `alert-important` class. It will use the selected color as a background for the alert.
+Add `alert-important` to fill the whole alert with its color. Use it for messages that must not be missed.

 ```html
 <div class="alert alert-important alert-success alert-dismissible" role="alert">...</div>
@@ -1,6 +1,6 @@
 ---
 title: Avatar
-summary: An avatar helps customize interface elements and make the product experience more personalized. It is often used in communication apps, collaboration tools, and social media.
+summary: An avatar shows a user's picture, initials or an icon in a fixed-size circle or square, with sizes, statuses and stacked lists.
 description: Display user avatars with images, initials, or icons. Change sizes, shapes, and colors, or group them into stacked avatar lists.
 related: [/ui/components/status, /ui/components/badge]
 source: core/scss/ui/_avatars.scss
@@ -41,7 +41,7 @@ import CodeDocs from '@components/CodeDocs.astro';

 ## Default markup

-Use the `avatar` class to add an avatar to your interface design for greater customization.
+Add the `avatar` class to a `span`. Fill it with a picture as a `background-image`, or with initials as text.

 <Example centered>
 <AvatarList>
@@ -53,7 +53,7 @@ Use the `avatar` class to add an avatar to your interface design for greater cus

 ## Avatar image

-Set an image as the background to make users easy to indentify and create a personalized experience.
+Set the picture as a `background-image` on the avatar. It's cropped to the avatar's shape and size.

 <Example centered>
 <AvatarList>
@@ -65,7 +65,7 @@ Set an image as the background to make users easy to indentify and create a pers

 ## Initials

-You can also use initials instead of pictures.
+When there is no picture, put the initials as text inside the avatar.

 <Example centered>
 <AvatarList>
@@ -79,7 +79,7 @@ You can also use initials instead of pictures.

 ## Avatar icons

-Besides pictures and initials, you can also use [icons](/ui/components/icon) to make the avatars more universal.
+An [icon](/ui/components/icon) inside the avatar works as a placeholder, or for an account that isn't a person, such as a system user.

 <Example centered>
 <AvatarList>
@@ -91,7 +91,7 @@ Besides pictures and initials, you can also use [icons](/ui/components/icon) to

 ## Avatar initials color

-Customize the color of the avatars' background. See the [full list of available colors](/ui/base/colors) for more details.
+Set the background with a `bg-*` class from the [color palette](/ui/base/colors). It's most useful with initials.

 <Example centered>
 <AvatarList>
@@ -105,7 +105,7 @@ Customize the color of the avatars' background. See the [full list of available

 ## Avatar size

-Using Bootstrap’s typical naming structure, you can create a standard avatar or scale it up or down to different sizes based on what you need.
+Add a size class from `avatar-xxs` to `avatar-2xl`. The names follow the usual Bootstrap pattern.

 <Example centered>
 <AvatarList>
@@ -119,7 +119,7 @@ Using Bootstrap’s typical naming structure, you can create a standard avatar o

 ## Avatar status

-Add a [status indicator](/ui/components/status) to your avatar to show, for instance, if a user is online or offline or indicate the number of messages they have received.
+Add a [status indicator](/ui/components/status) to show whether a user is online, or a small count such as unread messages.

 <Example centered>
 <AvatarList>
@@ -260,7 +260,7 @@ To pick a real file, use a `label` with the upload classes and connect it to a h

 ## Avatar list

-Use the `.avatar-list` container to create a list of avatars within one parent container. It keeps consistent spacing between items and wraps them when there is not enough space.
+Put several avatars in an `.avatar-list` container. It keeps consistent spacing between them and wraps them when there isn't enough space.

 <Example centered>
 <AvatarList>
@@ -274,7 +274,7 @@ Use the `.avatar-list` container to create a list of avatars within one parent c

 ## Stacked list

-Make the list stack once a certain number of avatars is reached to make it look clear and display well regardless of the screen size.
+Add `avatar-list-stacked` to overlap the avatars, which fits a long list of participants into a small space.

 <Example centered>
 <AvatarList stacked={true}> <span class="avatar">EB</span> <span class="avatar" style="background-image: url(/static/avatars/026m.jpg)"></span> <span class="avatar" style="background-image: url(/static/avatars/016f.jpg)"></span> <span class="avatar" style="background-image: url(/static/avatars/028m.jpg)"></span> <span class="avatar" style="background-image: url(/static/avatars/030m.jpg)"></span> <span class="avatar">+8</span> </AvatarList>
@@ -1,6 +1,6 @@
 ---
 title: Badge
-summary: A badge is a small count and labeling component used to add extra information to an interface element. You can use it to draw user attention to a new element, notify about unread messages, or provide additional context.
+summary: A badge is a small label for a count, a status or a tag. It comes in colors, light and outline styles, pills, dots and notification badges.
 description: Add badges to show counts, labels, or statuses. Use colors, outline and pill styles, links, and notification dots to add context.
 related: [/ui/components/status, /ui/components/tag]
 source: core/scss/ui/_badges.scss
@@ -64,7 +64,7 @@ Use the `.badge-list` container whenever you show more than one badge next to ea

 ## Headings

-Badges can be used in headings to draw attention to new or important information. You can use them in any heading level, from `<h1>` to `<h6>`. The example below shows how to use badges in headings.
+A badge scales with the heading it sits in, from `<h1>` to `<h6>`, so it can mark a section as new or in beta.

 <Example>
 <h1>Example heading <Badge text="New" /></h1>
@@ -77,7 +77,7 @@ Badges can be used in headings to draw attention to new or important information

 ## Light versions of badges

-You can use the `-lt` classes to create a light version of the badge. This is useful for creating a more subtle look.
+The `-lt` classes give a badge a light tint instead of a solid fill.

 For example you can use the `bg-blue-lt` class to create a light blue badge. The class also sets the text color, so the label stays readable on the tint.

@@ -87,13 +87,13 @@ For example you can use the `bg-blue-lt` class to create a light blue badge. The

 ## Pill badges

-Use the `.badge-pill` class if you want to create a badge with rounded corners. Its width will adjust to the label text.
+The `.badge-pill` class gives a badge fully rounded ends. Its width follows the label.

 <Example centered>
 <BadgeList>{colors.map(([key, val]) => <Badge color={key} text={val.title} class="badge-pill" />)}</BadgeList>
 </Example>

-You can use it to create a pill with numbers, for example, to show the number of unread messages. The badge will adjust its width to the number of digits.
+A pill with a number works as a counter, for example for unread messages.

 <Example centered>
 <BadgeList>{colors.map(([key, val], i) => <Badge color={key} text={String(i + 1)} class="badge-pill" />)}</BadgeList>
@@ -101,7 +101,7 @@ You can use it to create a pill with numbers, for example, to show the number of

 ## Badges with icons

-You can use [icons](/ui/components/icon) in badges to make them more visually appealing. The example below demonstrates how to use icons in badges.
+A badge can hold an [icon](/ui/components/icon) in front of the text.

 <Example centered>
 <BadgeList>
@@ -114,7 +114,7 @@ You can use [icons](/ui/components/icon) in badges to make them more visually ap
 </BadgeList>
 </Example>

-You can also use an icon on the right side of the badge. The example below demonstrates how to use icons on the right side of badges.
+The icon can also go after the text.

 <Example centered>
 <BadgeList>
@@ -129,7 +129,7 @@ You can also use an icon on the right side of the badge. The example below demon

 ## Links

-Place the badge within an `<a>` element if you want it to perform the function of a link and make it clickable.
+Put the badge classes on an `<a>` element to make the badge a link.

 <Example centered>
 <BadgeList>
@@ -150,9 +150,9 @@ Place the badge within an `<a>` element if you want it to perform the function o

 ## Button with badge

-Badges can be used as parts of links or [buttons](/ui/components/button) to provide, for example, a counter. Use the `.badge-notification` class to create a notification badge. This class will position the badge in the top right corner of the button.
+A badge inside a [button](/ui/components/button) or a link works as a counter. Add the `.badge-notification` class to pin it to the top right corner of the control.

-If you don't provide text for the badge, you end up with a small dot. This is useful for creating a simple notification button.
+A notification badge with no text is a small dot, which is enough to say that something is new.

 <Example centered>
 <div class="btn-list">
@@ -164,7 +164,7 @@ If you don't provide text for the badge, you end up with a small dot. This is us

 ## Animated badges

-You can use the `.badge-blink` class to create a blinking effect. This class will add a CSS animation to the badge, so it will blink to draw attention.
+The `.badge-blink` class makes a badge blink with a CSS animation, for a live status or something the user must notice.

 <Example centered>
 <button type="button" class="btn">Profile <Badge text="" color="red" class="badge-notification badge-blink" /></button>
@@ -172,7 +172,7 @@ You can use the `.badge-blink` class to create a blinking effect. This class wil

 ## Size options

-Use `.badge-sm` or `.badge-lg` to change badge size according to your needs. The default size is `.badge` and it is used in the examples above.
+Use `.badge-sm` or `.badge-lg` to change the size. The examples above use the default.

 <Example centered vertical>
 <BadgeList>
@@ -237,7 +237,7 @@ A badge is text, not a control, so most of the work is in the words you put in i

 ## More examples

-If you want to see more examples of badges, you can check out the [Bootstrap documentation](https://getbootstrap.com/docs/5.3/components/badge/) for badges. You can also find more examples in the Tabler [Badges](https://preview.tabler.io/badges.html) preview.
+More examples are in the [Bootstrap documentation](https://getbootstrap.com/docs/5.3/components/badge/) and on the Tabler [Badges](https://preview.tabler.io/badges.html) preview page.

 ## SCSS variables

@@ -1,7 +1,7 @@
 ---
 title: Breadcrumb
-summary: A breadcrumb is used to show the current website or app location and reduce the number of actions users need to take. It helps users navigate the website hierarchy and better understand its structure.
-description: Show the current page location with a breadcrumb trail. Help users navigate your site hierarchy and understand its structure.
+summary: A breadcrumb shows where the current page sits in the site hierarchy and links to the levels above it.
+description: A breadcrumb trail for the current page location, with separators, icons and a muted style.
 related: [/ui/components/pagination]
 source: core/scss/ui/_breadcrumbs.scss
 classnames:
@@ -28,9 +28,7 @@ import CodeDocs from '@components/CodeDocs.astro';

 ## Default markup

-Use the `breadcrumb` class to add a breadcrumb to your interface design for better navigation. The `active` modifier in a `li` tag will help you indicate the current page location and facilitate navigation within your website or app.
-
-Look at the example below to see how breadcrumbs work in practice.
+Add the `breadcrumb` class to the list and `breadcrumb-item` to each item. Mark the current page with the `active` class on its `li`.

 <Example centered>
 <Breadcrumb pages={['Home', 'Library', 'Data']} />
@@ -38,9 +36,7 @@ Look at the example below to see how breadcrumbs work in practice.

 ## Different separators

-You can use different breadcrumb styles to match your website or app design. Choose between `breadcrumb-dots`, `breadcrumb-arrows`, and `breadcrumb-bullets` to create a unique look.
-
-This example shows how to use different breadcrumb styles.
+The separator is drawn in CSS and is a slash by default. `breadcrumb-dots`, `breadcrumb-arrows` and `breadcrumb-bullets` change it.

 <Example vertical separated centered>
 <Breadcrumb pages={['Home', 'Library', 'Data']} separator="dots" /> <Breadcrumb pages={['Home', 'Library', 'Data']} separator="arrows" /> <Breadcrumb pages={['Home', 'Library', 'Data']} separator="bullets" />
@@ -48,7 +44,7 @@ This example shows how to use different breadcrumb styles.

 ## With icon

-You can use [icons](/ui/components/icon) in breadcrumbs to make them more visually appealing. The example below demonstrates how to use icons in breadcrumbs.
+An item can hold an [icon](/ui/components/icon) next to or instead of the text.

 <Example vertical separated>
 <Breadcrumb pages={['Home', 'Library', 'Data']} homeIcon />
@@ -56,7 +52,7 @@ You can use [icons](/ui/components/icon) in breadcrumbs to make them more visual

 ## Muted breadcrumbs

-You can use the `breadcrumb-muted` class to create a muted breadcrumb style. This style is perfect for breadcrumbs that are not the main focus of your website or app.
+The `breadcrumb-muted` class renders the trail in the secondary text color, so it takes less attention than the page title next to it.

 <Example>
 <Breadcrumb pages={['Home', 'Library', 'Data']} class="breadcrumb-muted" />
@@ -64,7 +60,7 @@ You can use the `breadcrumb-muted` class to create a muted breadcrumb style. Thi

 ## Breadcrumb in headers

-You can use breadcrumbs in [headers](/ui/layout/page-headers) to show the current page location and provide a better navigation experience. The example below demonstrates how to use breadcrumbs in headers.
+A breadcrumb usually sits in the [page header](/ui/layout/page-headers), above the title:

 <Example centered vertical>
 <div class="page-header"> <div class="row align-items-center mw-100"> <div class="col"> <Breadcrumb pages={['Home', 'Library', 'Articles']} /> <h2 class="page-title"> <span class="text-truncate">How to Build a Modern Dashboard with Tabler</span> </h2> </div> <div class="col-auto"> <div class="btn-list"> <a href="#" class="btn d-none d-md-inline-flex"> <Icon name="edit" /> Edit </a> <a href="#" class="btn btn-primary">Publish</a> </div> </div> </div> </div>
@@ -1,7 +1,7 @@
 ---
 title: Button
-summary: Use a button style that best suits your design and encourages users to take the desired action. You can customize button properties to improve user experience by changing size, shape, color, and more.
-description: Create buttons in many colors, sizes, and shapes. Add icons, loading states, and social styles to guide users to the right action.
+summary: Buttons in every color, size and shape, with icons, loading states, social styles and button groups.
+description: Buttons in many colors, sizes and shapes, with icons, loading states and social styles.
 related: [/ui/components/dropdown]
 source: core/scss/ui/_buttons.scss
 classnames:
@@ -60,7 +60,7 @@ import CodeDocs from '@components/CodeDocs.astro';

 ## Button tag

-As one of the most common elements of UI design, buttons have a very important function of engaging users within your website or app and guiding them in their actions. Use the `.btn` classes with the `<button>` element and add additional styling that will make your buttons serve their purpose and draw users' attention.
+Add the `.btn` class to a `<button>` element. The other classes on this page change its color, shape and size, or add an icon, a badge or a loading state.

 <Example centered>
 <div class="btn-list">
@@ -74,7 +74,7 @@ As one of the most common elements of UI design, buttons have a very important f

 ## Default button

-The standard button creates a white background and subtle hover animation. It's meant to look and behave as an interactive element of your page.
+The default button has a white background, a border and a short hover animation.

 <Example centered>
 <a href="#" class="btn" role="button">Link</a>
@@ -82,7 +82,7 @@ The standard button creates a white background and subtle hover animation. It's

 ## Button variations

-Use the button classes that correspond to the function of your button. The big range of available colors will help you show your button's purpose and make it easy to spot.
+Pick the class that matches what the button does, for example `.btn-primary` for the main action on the page or `.btn-danger` for one that deletes something.

 <Example separated centered>
 <div class="btn-list">
@@ -99,7 +99,7 @@ Use the button classes that correspond to the function of your button. The big r

 ## Disabled buttons

-Make buttons look inactive to show that an action is possible once the user meets certain criteria, such as completing the required fields to submit a form.
+A disabled button shows that an action isn't available yet, for example until the required fields of a form are filled in.

 On a `button` element use the `disabled` attribute. On a link the `disabled` class only changes how it looks, so add `aria-disabled="true"` and `tabindex="-1"` as well - otherwise the link still takes focus and still follows on Enter.

@@ -118,7 +118,7 @@ On a `button` element use the `disabled` attribute. On a link the `disabled` cla

 ## Color variations

-Choose the right color for your button to make it go well with your design and draw users' attention. Button colors can have a big influence on users' decisions, which is why it's important to choose them based on the intended purpose.
+Every theme color has a button class, so a button can match the color of the status, tag or chart it belongs to.

 <Example separated centered>
 <div class="btn-list">
@@ -139,7 +139,7 @@ Choose the right color for your button to make it go well with your design and d

 ## Ghost buttons

-Use the `.btn-ghost-*` class to make your button look simple yet aesthetically appealing. Ghost buttons help focus users' attention on the website's primary design, encouraging them to take action at the same time.
+The `.btn-ghost-*` classes give a button no border and no background until it's hovered. Use them for secondary actions that shouldn't compete with the main button.

 <Example separated vertical>
 <div class="btn-list">
@@ -164,7 +164,7 @@ Use the `.btn-square` class to remove the border radius, if you want the corners

 ## Pill buttons

-Add the `.btn-pill` class to your button to make it rounded and give it a modern and attractive look.
+Add the `.btn-pill` class to give a button fully rounded ends.

 <Example centered>
 <a href="#" class="btn btn-pill">Pill button</a>
@@ -172,7 +172,7 @@ Add the `.btn-pill` class to your button to make it rounded and give it a modern

 ## Outline buttons

-Replace the default modifier class with the `.btn-outline-*` class, if you want to remove the color and the background of your button and give it a more subtle look. Outline buttons are perfect to use as secondary buttons, as they don't distract users from the main action.
+The `.btn-outline-*` classes keep the color on the border and the text and leave the background empty. They work as secondary buttons next to a solid one.

 <Example centered>
 <div class="btn-list">
@@ -187,27 +187,20 @@ Replace the default modifier class with the `.btn-outline-*` class, if you want
 </div>
 </Example>

-## Button size
+## Button sizes

-Add `.btn-lg` or `.btn-sm` to change the size of your button and differentiate those which should have primary focus from those of secondary importance. Adapt the button size to your design and encourage users to take actions.
+Add `.btn-sm`, `.btn-lg` or `.btn-xl` to change the size. A larger button draws the eye to the main action, and a smaller one fits into toolbars and table rows.

-<Example centered>
-<div class="btn-list">
-  <button type="button" class="btn btn-primary btn-lg">Large button</button>
-  <button type="button" class="btn btn-lg">Large button</button>
-</div>
-</Example>
-
-<Example centered>
-<div class="btn-list">
-  <button type="button" class="btn btn-primary btn-sm">Small button</button>
-  <button type="button" class="btn btn-sm">Small button</button>
-</div>
+<Example separated centered vertical>
+<button type="button" class="btn btn-sm">Small button</button>
+<button type="button" class="btn">Default button</button>
+<button type="button" class="btn btn-lg">Large button</button>
+<button type="button" class="btn btn-xl">Extra large button</button>
 </Example>

 ## Buttons with icons

-Label your button with text and add an icon to communicate the action and make it easy to identify for users. Icons are easily recognized and improve the aesthetics of your button design, giving it a modern and attractive look.
+Put an icon in front of the label to make the action easier to recognize at a glance. The button styles add the spacing between the two.

 See all icons at [tabler.io/icons](https://tabler.io/icons).

@@ -224,7 +217,7 @@ See all icons at [tabler.io/icons](https://tabler.io/icons).

 ## Social buttons

-You can use the icons of popular social networking sites, which users are familiar with. Thanks to buttons with social media icons users can share content or follow a website with just one click, without leaving the website.
+Social buttons use the brand colors and icons of popular services, so a share or follow button is recognized at once.

 <Example separated centered hideCode>
 <div class="btn-list">
@@ -252,7 +245,7 @@ You can use the icons of popular social networking sites, which users are famili
 </a>
 ```

-You can also add an icon without the name of a social networking site, if you want to display more buttons in a small space.
+You can also drop the name and keep only the icon, which fits more buttons into a small space.

 <Example separated vertical hideCode>
 <div class="btn-list">
@@ -293,7 +286,7 @@ You can also add an icon without the name of a social networking site, if you wa

 ## Icon buttons

-Add the `.btn-icon` class to remove unnecessary padding from your button and use an icon without any additional label. Thanks to that, you can save space and make the action easy to recognize for international users.
+Add the `.btn-icon` class for a button that holds only an icon. It removes the horizontal padding so the button is square. Give it an `aria-label`, because there is no text to read.

 <Example separated centered hideCode>
 <div class="btn-list">
@@ -315,7 +308,7 @@ Add the `.btn-icon` class to remove unnecessary padding from your button and use

 ## Dropdown buttons

-Create a [dropdown](/ui/components/dropdown) button that will encourage users to click for more options. You can add a label with an icon or remove the label and add an icon on its own if you want to save space. Choose the option that will best suit your design and improve the user experience.
+A [dropdown](/ui/components/dropdown) button opens a menu with more options. It can have a label with an icon, or only an icon when space is tight.

 <Example centered hideCode height="260px">
 <div class="btn-list">
@@ -359,7 +352,7 @@ Create a [dropdown](/ui/components/dropdown) button that will encourage users to

 ## Loading buttons

-Add the `.btn-loading` class to show a button's loading state, which can be useful in the case of operations that take longer to process. Thanks to that, users will be aware of the current state of their action and won't give it up before it's finished.
+Add the `.btn-loading` class while an action is in progress, so the user sees that the click was registered and doesn't press again.

 The class hides the label and draws a spinner in its place. It sets `pointer-events: none`, which stops the mouse but not the keyboard, so add `aria-busy="true"` and disable the control while it works.

@@ -376,7 +369,7 @@ The class hides the label and draws a spinner in its place. It sets `pointer-eve

 ## Full width buttons

-Add the `.w-100` class to make buttons span the full width of their container. This is useful for mobile-first designs or when you want buttons to take up the entire available space.
+Add the `.w-100` class to make a button span the full width of its container, for example the submit button of a sign-in form.

 <Example separated>
 <a href="#" class="btn btn-primary w-100">Full width button</a> <a href="#" class="btn btn-outline-secondary w-100">Full width outline button</a>
@@ -384,7 +377,7 @@ Add the `.w-100` class to make buttons span the full width of their container. T

 ## List of buttons

-Create a list of buttons using the `.btn-list` container to display different actions a user can take. If you add additional styling, such as colors, you will be able to focus users' attention on a particular action or suggest the result.
+Put several buttons in a `.btn-list` container to lay them out in a row with a consistent gap. Give one of them a color to mark it as the main action.

 <Example centered>
 <div class="btn-list">
@@ -420,7 +413,7 @@ If the list is long, it will be wrapped and some buttons will be moved to the ne
 </div>
 </Example>

-Use the `.text-center` or the `.text-end` modifiers to change the buttons' alignment and place them where they suit best.
+Use `.text-center` or `.text-end` on the list to change its alignment.

 <Example>
 <div class="btn-list justify-content-center">
@@ -458,7 +451,7 @@ Add [badges](/ui/components/badge) to buttons to display additional information

 ## Buttons with avatars

-Use buttons with [avatars](/ui/components/avatar) to simplify the process of interaction and make your design more personalized. Buttons can contain avatars and labels or only avatars, if displayed on a smaller space.
+A button can hold an [avatar](/ui/components/avatar) next to the label, or only the avatar when space is tight. Use it for actions tied to a person, such as opening a profile.

 <Example centered>
 <div class="btn-list">
@@ -470,7 +463,7 @@ Use buttons with [avatars](/ui/components/avatar) to simplify the process of int

 ## Buttons with animations on hover

-Add a subtle animation effect to your buttons when users hover over them. This can enhance the interactivity and provide visual feedback to improve the user experience.
+Add `.btn-animate-icon` to move the icon on hover. The `-rotate`, `-shake`, `-pulse`, `-tada` and `-move-start` variants change the motion, and `icon-end` places the icon after the text.

 <Example>
 <div class="btn-list">
@@ -486,20 +479,9 @@ Add a subtle animation effect to your buttons when users hover over them. This c
 </div>
 </Example>

-## Button sizes
-
-Use size modifiers to change the size of your buttons. Available sizes: `.btn-sm`, default, `.btn-lg`, `.btn-xl`.
-
-<Example separated centered vertical>
-<button type="button" class="btn btn-sm">Small button</button>
-<button type="button" class="btn">Default button</button>
-<button type="button" class="btn btn-lg">Large button</button>
-<button type="button" class="btn btn-xl">Extra large button</button>
-</Example>
-
 ## Link buttons

-Use the `.btn-link` class to create buttons that look like links but maintain button functionality. These are useful for secondary actions that shouldn't compete with primary buttons for attention.
+The `.btn-link` class makes a button look like a link while it keeps the button behavior. Use it for a secondary action next to a solid button, such as Cancel.

 <Example centered>
 <div class="btn-list">
@@ -510,7 +492,7 @@ Use the `.btn-link` class to create buttons that look like links but maintain bu

 ## Action buttons

-Use the `.btn-action` class to create subtle action buttons that are perfect for card headers, toolbars, or other interface elements where you want minimal visual impact. Always combine it with the `btn` class — use `btn btn-action`, never `btn-action` on its own. Add `btn-sm` for a smaller action button.
+The `.btn-action` class makes a small, quiet button for card headers and toolbars. Always combine it with the `btn` class: use `btn btn-action`, never `btn-action` on its own. Add `btn-sm` for a smaller one.

 <Example centered>
 <div class="btn-actions">
@@ -523,7 +505,7 @@ Use the `.btn-action` class to create subtle action buttons that are perfect for

 ## Action button groups

-Use the `.btn-actions` container to group multiple action buttons together. This creates a cohesive set of related actions that work well in card headers, toolbars, or other interface elements.
+Put several action buttons in a `.btn-actions` container to group them with a consistent gap, for example in a card header.

 <Example centered>
 <div class="btn-actions">
@@ -536,7 +518,7 @@ Use the `.btn-actions` container to group multiple action buttons together. This

 ## Button groups

-Use button groups to combine related buttons together. Button groups are perfect for creating toolbars, [segmented controls](/ui/components/segmented-control), or any interface where multiple related actions should be visually grouped.
+A button group joins related buttons into one bar with shared borders. Use it for toolbars and [segmented controls](/ui/components/segmented-control).

 <Example centered>
 <ButtonGroup>
@@ -1,7 +1,7 @@
 ---
 title: Card gradient
-summary: Card gradients add rich color backgrounds to cards and help emphasize key information in dashboards and marketing sections.
-description: Build eye-catching cards with gradient variants, directions, and animated backgrounds.
+summary: Card gradients give a card a colored gradient background, in single-color, multi-color, directional and animated variants.
+description: Gradient card backgrounds, with color variants, multi-color themes, directions and animation.
 added-in: '1.5.0'
 related: [/ui/components/card]
 source: core/scss/ui/_cards.scss
@@ -11,7 +11,7 @@ classnames:
      desc: Applied with card, fills the card with a gradient
  style:
    - class: card-gradient-{preset}
-      desc: Ready-made blends — disco, gold, love, mellow, ocean, psychedelic, rainbow, snow, sun
+      desc: Ready-made blends - disco, gold, love, mellow, ocean, psychedelic, rainbow, snow, sun
  behavior:
    - class: card-gradient-animated
      desc: Slowly shifts the gradient
@@ -38,7 +38,7 @@ Use the `.card-gradient` class on a `.card` element to apply the default gradien
 <div class="card card-gradient">...</div>
 ```

-The example below shows the base gradient card style.
+The base gradient card:

 <Example column>
 <div class="card card-gradient">
@@ -51,7 +51,7 @@ The example below shows the base gradient card style.

 ## Color variants

-You can change the color of card gradient by adding a color class like `.card-gradient-primary` or `.card-gradient-success` to the `.card-gradient` element. You can choose any color from [full list of available colors](/ui/base/colors).
+Add a color class such as `.card-gradient-primary` or `.card-gradient-success` next to `.card-gradient`. Any name from the [color palette](/ui/base/colors) works.

 <Example column>
 <div class="card card-gradient card-gradient-primary">
@@ -78,9 +78,7 @@ You can change the color of card gradient by adding a color class like `.card-gr

 ## Named gradients

-In addition to color-based variants, card gradients include predefined multi-color themes.
-
-Here is a list of classes:
+There are also multi-color themes with their own names:
 <ul>
 {gradients.map((gradient, i) => { return ( <li class={`card-gradient-${gradient}`}>{gradient.charAt(0).toUpperCase() + gradient.slice(1)}</li> ) })}
 </ul>
@@ -100,7 +98,7 @@ Here is a list of classes:

 ## Direction modifiers

-Use direction modifiers to control where the gradient flow starts.
+The direction classes set where the gradient starts.

 ```html
 <div class="card card-gradient card-gradient-start">...</div>
@@ -1,6 +1,6 @@
 ---
 title: Card
-summary: A card is a flexible user interface element that helps organize content into meaningful sections and display it across different screen sizes. It can contain smaller elements such as images, text, links, and buttons, and can act as an entry point to more detailed information.
+summary: A card groups related content in one box, with an optional header, footer, image and actions, and it's the building block of most Tabler pages.
 description: Organize content with flexible cards. Combine headers, footers, images, and actions to build sections that work on any screen size.
 related: [/ui/components/card-gradient, /ui/components/ribbon]
 source: core/scss/ui/_cards.scss
@@ -82,7 +82,7 @@ import CodeDocs from '@components/CodeDocs.astro';

 ## 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.
+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 groups related content in one box with a border and a background, and it's the building block of most Tabler pages.

 <Example column>
 <div class="card">
@@ -94,7 +94,7 @@ Use the `.card` and `.card-body` classes to create a card and use it as the basi

 You can change the padding of a newly created card. To do it, use the `.card-sm`, `.card-md` or `.card-lg` classes.

-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.
+`.card-sm` fits small items such as widgets, and `.card-lg` gives long text more room. On small screens the padding shrinks on its own.

 <Example column>
 <div class="card card-sm"><div class="card-body">This is some text within a card body.</div></div>
@@ -122,7 +122,7 @@ Add a title to your card by including the `.card-title` class within `.card-body

 ## Card with title and image

-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.
+Combine a title with an image at the top. The image takes the full card width and the title sits in the body below it.

 <Example column>
 <div class="card">
@@ -136,7 +136,7 @@ To create a more visually appealing card, add a title and an image. Thanks to th

 ## Blog post card

-Add an image to your blog post card to make it eye-catching. You can do it by adding the image, with a `.card-img-top` class, inside the `.card` element. Thanks to the `.d-flex` and `.flex-column` classes within `.card-body`, the author details will be displayed at the bottom of the card.
+A blog post card puts an image with the `.card-img-top` class at the top of the `.card`. The `.d-flex` and `.flex-column` classes on `.card-body`, together with `mt-auto` on the author row, keep the author details at the bottom even when the excerpt is short.

 <Example column>
 <div class="card d-flex flex-column">
@@ -162,7 +162,7 @@ Add an image to your blog post card to make it eye-catching. You can do it by ad

 ## Row deck

-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.
+Add the `.row-deck` class to `.row` to display several cards next to one another with the same height.

 <Example>
 <div class="row row-deck">
@@ -214,33 +214,6 @@ You can also put the image beside the text instead of above it. Use a `row row-0
 </div>
 </Example>

-## Color variations
-
-Add a status color to your card, either at the top or on the side of the card, to customize it and make it more eye-catching. Use `card-status-*` and `bg-*` classes to change the placement and color of the status border.
-
-<Example>
-<div class="row row-deck">
-  <div class="col-md-6">
-    <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>
-      </div>
-    </div>
-  </div>
-  <div class="col-md-6">
-    <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>
-      </div>
-    </div>
-  </div>
-</div>
-</Example>
-
 ## Card stamp

 Use a card stamp to put a large, faded icon in the top corner of a card. It is only a decoration, so it never covers the text and it does not react to clicks.
@@ -292,7 +265,7 @@ Add the `card-stamp-lg` class to make the stamp bigger. Change the circle color

 ## Stacked card

-Use the `card-stacked` class to stack up multiple cards, if you want to save screen space or create a visually appealing effect.
+The `card-stacked` class draws a second card edge behind the card, so it looks like a small pile. Use it to hint that there is more than one item, for example a group of similar entries.

 <Example column>
 <div class="card card-stacked">
@@ -305,7 +278,7 @@ Use the `card-stacked` class to stack up multiple cards, if you want to save scr

 ## Tabbed card

-Organize multiple cards into [tabs](/ui/components/tab) to be able to display more content in a well-organized way and allow users to alternate between them easily.
+Wrap several cards in `.card-tabs` and put a `.nav-tabs` list above them to switch between them with [tabs](/ui/components/tab). Only one card is visible at a time, so it's a way to fit more content into the same space.

 <Example column>
 <div class="card-tabs">
@@ -1,6 +1,6 @@
 ---
 title: Carousel
-summary: A carousel is used to display multiple pieces of visual content without taking up too much space. It eliminates the need to scroll down the page to see all content and is a popular method of presenting marketing information.
+summary: A carousel shows several images or slides in the space of one, with arrows, indicators and captions.
 description: Display multiple images or slides in a compact carousel with indicators, captions, and automatic or manual navigation.
 related: [/ui/plugins/inline-player]
 source: core/scss/ui/_carousel.scss
@@ -39,7 +39,7 @@ import CodeDocs from '@components/CodeDocs.astro';

 ## 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.
+The default carousel slides on its own and has an arrow on each side for going to the previous or the next slide.

 <Example>
 <div id="carousel-sample" class="carousel slide" data-bs-ride="carousel">
@@ -113,7 +113,7 @@ You can replace the standard indicators with dots. Just add the `carousel-indica

 ## Thumb indicators

-The syntax is similar for 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.
+Thumbnails work the same way. Add the `carousel-indicators-thumb` class and set a `background-image` on each `[data-bs-target]` element. Thumbnails are square by default; change that with the `ratio` utilities.

 <Example>
 <div id="carousel-indicators-thumb" class="carousel slide carousel-fade" data-bs-ride="carousel">
@@ -146,7 +146,7 @@ The syntax is similar for thumbnails. Add class `carousel-indicators-thumb` and

 ## Vertical indicators

-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.
+Add the `carousel-indicators-vertical` class to stack the indicators on the right side. It combines with the dot and thumbnail classes.

 <Example>
 <div id="carousel-indicators-dot-vertical" class="carousel slide carousel-fade" data-bs-ride="carousel">
@@ -177,7 +177,7 @@ To make the indicators go to the right side, add the `carousel-indicators-vertic
 </div>
 </Example>

-An example of adding thumbnails on the right side:
+Thumbnails on the right side:

 <Example>
 <div id="carousel-indicators-thumb-vertical" class="carousel slide carousel-fade" data-bs-ride="carousel">
@@ -210,8 +210,9 @@ An example of adding thumbnails on the right side:

 ## Carousel with captions

-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.
-Below the `md` responsive breakpoint, the captions on the following example will be hidden as they have the `d-none` class applied to them.
+Put a `.carousel-caption` element inside a `.carousel-item` to add a caption. Add `carousel-caption-background` to lay a dark overlay over the image, so light text stays readable.
+
+The captions in this example have the `d-none` class, so they are hidden below the `md` breakpoint.

 <Example>
 <div id="carousel-captions" class="carousel slide" data-bs-ride="carousel">
@@ -84,7 +84,7 @@ Put the avatar and the bubble in the order you want them to read: avatar first f

 ### Typing indicator

-While you wait for a reply, show a bubble with `animated-dots` after the text — it types itself out and loops.
+While you wait for a reply, show a bubble with `animated-dots` after the text - it types itself out and loops.

 <Example background="primary">
 <div class="chat-bubble">
@@ -176,6 +176,6 @@ A card with a scrollable message list and a message input in the footer.
 ## Accessibility

 - Keep messages in reading order in the markup. Screen reader users go through the conversation top to bottom, the same as sighted users see it top to bottom.
- Do not rely on bubble color or side alone to show who sent a message — keep `chat-bubble-title` with the sender's name, or repeat it for assistive technology with a visually hidden label.
+- Do not rely on bubble color or side alone to show who sent a message - keep `chat-bubble-title` with the sender's name, or repeat it for assistive technology with a visually hidden label.
 - Label icon-only controls in the message input, for example the send button, with `aria-label`.
- The typing indicator is an animated "…" — pair it with real text such as "Alice is typing", so the state does not depend on the animation alone.
+- The typing indicator is an animated "…" - pair it with real text such as "Alice is typing", so the state does not depend on the animation alone.
@@ -1,6 +1,6 @@
 ---
 title: Divider
-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.
+summary: A divider is a horizontal line between blocks of content, with an optional text label on the left, in the center or on the right.
 description: Separate content with horizontal dividers. Add optional text labels aligned left, center, or right to keep layouts clear.
 source: core/scss/ui/_type.scss
 classnames:
@@ -26,7 +26,7 @@ import Example from '@components/Example.astro';

 ## 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.
+The `.hr-text` element draws a line with a label in the middle. For a line without text, use a plain `hr`.

 <Example>
 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias, dolore dolores doloribus est ex.</p>
@@ -36,7 +36,7 @@ Use dividers to visually separate content into parts. You can use a line only or

 ## Text position

-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.
+Add `.hr-text-start` or `.hr-text-end` to move the label to the start or the end of the line. Without them it's centered.

 <Example>
 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias, dolore dolores doloribus est ex.</p>
@@ -50,7 +50,7 @@ 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. See the [full list of available colors](/ui/base/colors) for more details.
+A `text-*` class from the [color palette](/ui/base/colors) colors the divider.

 <Example>
 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias, dolore dolores doloribus est ex.</p>
@@ -1,6 +1,6 @@
 ---
 title: Dropdown
-summary: A dropdown is used to display a list of options or include more items in a menu without overwhelming users with too many buttons and long lists. It improves interaction with your website or software and keeps the interface clear.
+summary: A dropdown is a menu that opens from a button or a link and holds options or actions, so the toolbar stays short.
 description: Build dropdown menus that reveal lists of options or actions. Add icons, dividers, and custom triggers to keep the interface clean.
 related: [/ui/components/button, /ui/components/popover]
 source: core/scss/ui/_dropdowns.scss
@@ -50,7 +50,7 @@ import CodeDocs from '@components/CodeDocs.astro';

 ## Default dropdown

-With small markup changes, you can turn any `.btn` into a dropdown toggle and use it to display more options for users to choose from. Start with the default dropdown and then use additional classes to make your dropdown more user-friendly.
+Any `.btn` becomes a dropdown toggle with `data-bs-toggle="dropdown"` and a `.dropdown-menu` next to it. The classes below add dividers, headers, icons and other details to the menu.

 <Example height="220px">
 <div class="dropdown">
@@ -65,7 +65,7 @@ With small markup changes, you can turn any `.btn` into a dropdown toggle and us

 ## Dropdown divider

-Use dropdown dividers to separate groups of dropdown items for greater clarity.
+A `.dropdown-divider` separates groups of items.

 <Example height="240px">
 <div class="dropdown">
@@ -81,7 +81,7 @@ Use dropdown dividers to separate groups of dropdown items for greater clarity.

 ## Active state

-Make a dropdown item look active, so that it highlights when a user hovers over a given option.
+The `active` class marks the current item.

 <Example height="220px">
 <div class="dropdown">
@@ -96,7 +96,7 @@ Make a dropdown item look active, so that it highlights when a user hovers over

 ## Disabled state

-Make a dropdown item look disabled to display options which are currently not available but can activate once certain conditions are met.
+The `disabled` class shows an item that isn't available right now.

 <Example height="220px">
 <div class="dropdown">
@@ -111,7 +111,7 @@ Make a dropdown item look disabled to display options which are currently not av

 ## Dropdown header

-Add a dropdown header to group dropdown items into sections and name them accordingly.
+A `.dropdown-header` names a group of items.

 <Example height="210px">
 <div class="dropdown">
@@ -126,7 +126,7 @@ Add a dropdown header to group dropdown items into sections and name them accord

 ## Dropdown with icons

-Use [icons](/ui/components/icon) in your dropdowns to add more visual content and make the options easy to identify for users.
+An [icon](/ui/components/icon) in front of each item makes the options faster to scan.

 <Example height="210px">
 <div class="dropdown">
@@ -159,7 +159,7 @@ Add an arrow that points at the dropdown button.

 ## Dropdown with badge

-Add a [badge](/ui/components/badge) to your dropdown items to show additional information related to an item or distinguish it from other elements.
+A [badge](/ui/components/badge) in an item shows a count or a status next to it.

 <Example height="190px">
 <div class="dropdown">
@@ -173,7 +173,7 @@ Add a [badge](/ui/components/badge) to your dropdown items to show additional in

 ## Dropdown with checkboxes

-Use dropdowns with [checkboxes](/ui/forms/elements) to allow users to select options from a predefined list. Dropdowns with checkboxes are particularly useful for filtering.
+Items can hold [checkboxes](/ui/forms/elements), which makes a dropdown work as a filter.

 <Example height="220px">
 <div class="dropdown">
@@ -188,7 +188,7 @@ Use dropdowns with [checkboxes](/ui/forms/elements) to allow users to select opt

 ## Dark dropdown

-Make your dropdown suit the dark mode of your website or software.
+Add `dropdown-menu-dark` to the menu for a dark menu on a light page.

 <Example height="220px">
 <div class="dropdown">
@@ -207,7 +207,7 @@ Make your dropdown suit the dark mode of your website or software.

 ## Dropdown with card content

-Use a dropdown with [card](/ui/components/card) content to make it easy for users to get more information on a given subject and avoid ovewhelming them with too much content at once.
+A menu can hold [card](/ui/components/card) content, such as a short profile or a summary, when a plain list isn't enough.

 <Example height="520px">
 <div class="dropdown">
@@ -297,7 +297,7 @@ Tabler automatically initializes all elements with `data-bs-toggle="dropdown"` o
 - The trigger must be a `button`, or an `a` with an `href`. Bootstrap toggles `aria-expanded` on it for you, so do not set it by hand.
 - Bootstrap moves focus into the menu and supports the arrow keys, <kbd>Home</kbd>, <kbd>End</kbd> and <kbd>Escape</kbd>. That only works while the items are `.dropdown-item` elements inside `.dropdown-menu`.
 - An icon-only trigger needs an `aria-label`. The caret is decorative and carries no name.
- A dropdown used as a menu of actions should hold `button` items; one used for navigation should hold links. Mixing them makes the keyboard behaviour inconsistent.
+- A dropdown used as a menu of actions should hold `button` items; one used for navigation should hold links. Mixing them makes the keyboard behavior inconsistent.
 - Use `.dropdown-header` for a group title and `.dropdown-divider` for a separator, rather than styling a plain item to look like one.

 ## SCSS variables
@@ -1,7 +1,7 @@
 ---
 title: Empty state
-summary: An empty state or blank page is commonly used as a placeholder for first-use, empty data, or an error screen. Its goal is to engage users when there is no content to display, which makes its design important for the overall user experience of your website or app.
-description: Design empty states that guide users when there is no content to show. Combine images, text, and actions for first-use and error screens.
+summary: An empty state is the placeholder shown when there is no content yet, on first use, after a search with no results or on an error screen.
+description: Empty states for first use, no results and error screens, with an image, text and an action.
 related: [/ui/components/placeholder]
 source: core/scss/ui/_empty.scss
 classnames:
@@ -32,7 +32,7 @@ import Icon from '@ui/Icon.astro'

 ## Default markup

-Use the default empty state to engage users in the critical moments of their experience with your website or app. A good empty state screen should let users know what is happening and what they should do next as well as encourage them to take action.
+An empty state should say what happened and what to do next. The default markup has an icon, a title, a short text and an action button.

 <Example>
 <div class="empty">
@@ -47,9 +47,9 @@ Use the default empty state to engage users in the critical moments of their exp

 ## Empty state with illustration

-Make your empty state screen more attractive and engaging by adding an illustration. Thanks to a more personalized design, you will improve your brand image and make your website or app more user friendly.
+Replace the icon with an illustration when the empty state fills a whole page and there's room for a larger picture.

-Do you need an illustration to enhance your web designs? We've got something for you! Check out our premium SVG [illustrations](https://tabler.io/illustrations).
+The illustrations in the examples come from [Tabler Illustrations](https://tabler.io/illustrations).

 <Example>
 <div class="empty">
@@ -64,7 +64,7 @@ Do you need an illustration to enhance your web designs? We've got something for

 ## Empty state with header

-Instead of adding an icon or illustration you can simply give the text:
+You can also leave out the icon or illustration and show only the text:

 <Example>
 <div class="empty">
@@ -1,6 +1,6 @@
 ---
 title: Icon
-summary: Use an icon from over 5000 options created specifically for Tabler to make your dashboard more attractive. Each icon is available under the MIT license, so it can be used in both private and commercial projects.
+summary: Tabler Icons are over 5,000 MIT-licensed SVG icons drawn for Tabler. This page shows how to embed, size, color and animate them.
 description: Use over 5000 free MIT-licensed Tabler icons in your interface. Learn how to embed, size, and animate them in your projects.
 related: [/ui/components/switch-icon]
 source: core/scss/ui/_icons.scss
@@ -31,7 +31,7 @@ classnames:
 import Example from '@components/Example.astro';
 import Icon from '@ui/Icon.astro';

-If you need to add icons to your website, you can use the [Tabler Icons library](https://tabler.io/icons). It contains over 5000 icons that you can use in your projects. All icons are under the MIT license, so you can use them without any problem both in private and commercial projects.
+The [Tabler Icons library](https://tabler.io/icons) has over 5,000 icons under the MIT license, so you can use them in private and commercial projects.

 ## Base icon

@@ -46,7 +46,7 @@ To add an icon to your code copy the SVG code from the Tabler Icons website and

 ## Filled icons

-To use filled icons, you need to copy the SVG code of the selected filled Icon from the [Tabler Icons website](https://tabler.io/icons) and paste it into your HTML file.
+Filled icons are separate files. Copy the SVG code of the filled version from the [Tabler Icons website](https://tabler.io/icons).

 To fill an outline icon instead of swapping it, add the `icon-filled` class. It sets `fill: currentColor`, so the shape is filled with the current text color.

@@ -77,7 +77,7 @@ Add `icon-inline` when the icon sits inside a line of text, so it lines up with

 ## Icon colors

-To change the color of the icon, you need to add the `text-*` class to the parent element of the icon. See the [full list of available colors](/ui/base/colors) for more details. Color classes can be used with any HTML element.
+Add a `text-*` class from the [color palette](/ui/base/colors) to the icon or its parent to change its color.

 ```html
 <span class="text-red">
@@ -85,8 +85,6 @@ To change the color of the icon, you need to add the `text-*` class to the paren
 </span>
 ```

-Look at the example below to see how the color of the icon changes.
-
 <Example centered>
 <span class="text-red"><Icon name="heart" filled /></span>
 <span class="text-yellow"><Icon name="star" filled /></span>
@@ -96,7 +94,7 @@ Look at the example below to see how the color of the icon changes.

 ## Icon animations

-To add an animation to the icon, you need to add the `icon-pulse`, `icon-tada`, or `icon-rotate` class to the SVG element.
+Add `icon-pulse`, `icon-tada` or `icon-rotate` to the SVG to animate it.

 <Example centered>
 <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-pulse" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
@@ -2,7 +2,7 @@
 title: Components
 order: 4
 description: Browse all Tabler UI components - buttons, cards, modals, tables, and more - with live previews and ready-to-copy HTML code.
-summary: Tabler UI includes a variety of components to help you build web applications that are both functional and visually appealing. From buttons and cards to modals and navigation, these components provide a wide range of features to enhance your site.
+summary: All Tabler UI components, from buttons and cards to modals and navigation, each with live previews and copyable HTML.
 ---

 Components are the core of Tabler UI. Each one is built with plain HTML and CSS classes on top of Bootstrap, so you can copy an example and use it right away. Every page below shows live previews with ready-to-copy code.
@@ -264,7 +264,7 @@ This pattern joins several variants: a flush list inside a card, hoverable rows,

 ## Inline list

-`list-inline` is a separate, simpler pattern for a row of items — for example a footer or a page header with a few links. It is not a `list-group`: items have no border or background, only spacing between them.
+`list-inline` is a separate, simpler pattern for a row of items - for example a footer or a page header with a few links. It is not a `list-group`: items have no border or background, only spacing between them.

 Use `list-inline` on a `ul` and `list-inline-item` on each `li`.

@@ -1,6 +1,6 @@
 ---
 title: Modal
-summary: Use Bootstrap’s JavaScript modal plugin to add dialogs to your site for lightboxes, user notifications, or completely custom content.
+summary: A modal is a dialog shown over the page, for a confirmation, a form or other content the user has to deal with before going back to the page.
 description: Create modal dialogs for notifications, confirmations, and custom content. Adjust sizes, add forms, and control them with JavaScript.
 related: [/ui/components/offcanvas, /ui/components/toast]
 source: core/scss/ui/_modals.scss
@@ -47,11 +47,11 @@ import Example from '@components/Example.astro';
 import Icon from '@ui/Icon.astro';
 import CodeDocs from '@components/CodeDocs.astro';

-Modals are built with HTML, CSS, and JavaScript. They’re positioned over everything else in the document and remove scroll from the `<body>` so that modal content scrolls instead.
+Modals are built with HTML, CSS, and JavaScript. They're positioned over everything else in the document and remove scroll from the `<body>` so that modal content scrolls instead.

 ## Default markup

-To create a modal, you need to add a `.modal` element to the document. Inside the `.modal`, you need to add a `.modal-dialog` element, which contains a `.modal-content` element. The `.modal-content` element contains the modal’s header, body, and footer.
+To create a modal, you need to add a `.modal` element to the document. Inside the `.modal`, you need to add a `.modal-dialog` element, which contains a `.modal-content` element. The `.modal-content` element contains the modal's header, body, and footer.

 ```html
 <div class="modal" tabindex="-1">
@@ -65,8 +65,6 @@ To create a modal, you need to add a `.modal` element to the document. Inside th
 </div>
 ```

-Look at the example below to see how the modal looks.
-
 <Example centered>
 <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">Launch demo modal</button>
 <div class="modal" id="exampleModal" tabindex="-1">
@@ -88,7 +86,7 @@ Look at the example below to see how the modal looks.

 ## Prompt and alert

-You can use the modal to create a prompt or alert. Look at the example below to see how the prompt and alert look.
+A modal also works as a prompt or an alert: a short message with one or two buttons.

 <Example raw>
 <div class="modal" id="exampleModal2" tabindex="-1">
@@ -152,7 +150,7 @@ You can use the modal to create a prompt or alert. Look at the example below to

 ## Modal with form

-You can use the modal to create a form. Look at the example below to see how the form looks.
+A form inside a modal keeps the user on the page. Put the fields in the body and the submit button in the footer.

 <Example raw class="px-5">
 <div class="modal" id="exampleModal4" tabindex="-1">
@@ -1,6 +1,6 @@
 ---
 title: Offcanvas
-summary: Offcanvas is a hidden sidebar that slides into view from the edge of the screen. Use it for navigation, filters or settings that should not take up space all the time.
+summary: An offcanvas is a hidden panel that slides in from the edge of the screen, for navigation, filters or settings.
 description: Sidebar panel that slides in from the edge of the viewport.
 related: [/ui/components/modal]
 source: core/scss/ui/_offcanvas.scss
@@ -36,11 +36,11 @@ classnames:
 import Example from '@components/Example.astro';
 import CodeDocs from '@components/CodeDocs.astro';

-Offcanvas is a sidebar component that can be toggled via JavaScript to appear from the left, right, top, or bottom edge of the viewport. Buttons or anchors are used as triggers that are attached to specific elements you toggle, and `data` attributes are used to invoke our JavaScript.
+An offcanvas is a panel that slides in from the left, right, top or bottom edge of the viewport. A button or a link with `data-bs-toggle="offcanvas"` and `data-bs-target` opens it, and Bootstrap's JavaScript does the rest.

 ## Basic usage

-To create an offcanvas, add the `.offcanvas` class to a container element. You can also add the `.offcanvas-start`, `.offcanvas-end`, `.offcanvas-top`, or `.offcanvas-bottom` class to specify the position of the offcanvas. The `.show` class is used to display the offcanvas.
+Add the `.offcanvas` class to the panel and one of `.offcanvas-start`, `.offcanvas-end`, `.offcanvas-top` or `.offcanvas-bottom` for the edge it slides in from. Bootstrap adds the `.show` class while the panel is open.

 <Example raw code={`<div class="offcanvas offcanvas-start" tabindex="-1" id="offcanvas" aria-label="Sidebar" data-bs-scroll="true"> <div class="offcanvas-body"> Content for the offcanvas goes here. You can place just about any Tabler component or custom elements here. </div> </div>`}>
 <div class="offcanvas offcanvas-start show position-static" tabindex="-1" id="offcanvas" aria-label="Sidebar" data-bs-scroll="true" > <div class="offcanvas-body"> Content for the offcanvas goes here. You can place just about any Tabler component or custom elements here. </div> </div>
@@ -66,7 +66,7 @@ Add `offcanvas-narrow` for a panel thinner than the default. It suits a short li

 ## Cookies banner

-The offcanvas component is used to display a cookies banner. It is a great way to inform users about the use of cookies on your website and to get their consent.
+An offcanvas at the bottom edge also works as a cookie banner. It stays visible until the user answers, and it doesn't cover the page.

 <Example raw code={`<div class="offcanvas offcanvas-bottom h-auto" tabindex="-1" id="offcanvasBottom" aria-modal="true" role="dialog" data-bs-scroll="true"> <div class="offcanvas-body"> <div class="container"> <div class="row align-items-center"> <div class="col"> <strong>Do you like cookies?</strong> 🍪 We use cookies to ensure you get the best experience on our website. <a href="#">Learn more</a> </div> <div class="col-auto"> <button type="button" class="btn btn-primary" data-bs-dismiss="offcanvas"> Essential Cookies Only </button> </div> <div class="col-auto"> <button type="button" class="btn btn-primary" data-bs-dismiss="offcanvas"> Allow All Cookies </button> </div> </div> </div> </div> </div>`}>
 <div class="offcanvas offcanvas-bottom h-auto show position-static" tabindex="-1" id="offcanvasBottom" aria-modal="true" role="dialog" data-bs-scroll="true" > <div class="offcanvas-body"> <div class="container"> <div class="row align-items-center"> <div class="col"> <strong>Do you like cookies?</strong> 🍪 We use cookies to ensure you get the best experience on our website. <a href="#">Learn more</a> </div> <div class="col-auto"> <button type="button" class="btn btn-primary" data-bs-dismiss="offcanvas"> Essential Cookies Only </button> </div> <div class="col-auto"> <button type="button" class="btn btn-primary" data-bs-dismiss="offcanvas"> Allow All Cookies </button> </div> </div> </div> </div> </div>
@@ -1,6 +1,6 @@
 ---
 title: Pagination
-summary: Pagination is a user interface element that allows users to navigate through a set of data or content that is divided into multiple pages. It is commonly used in web applications, blogs, and e-commerce sites to display large amounts of information in a manageable way.
+summary: Pagination splits a long list or table into pages and lets the user move between them, with sizes, icons and disabled states.
 description: Navigate through multi-page content with pagination controls.
 related: [/ui/components/table]
 source: core/scss/ui/_pagination.scss
@@ -34,7 +34,7 @@ import CodeDocs from '@components/CodeDocs.astro';

 ## Basic example

-Use slightly customized pagination with previous and next icon links:
+The basic pagination has page numbers with previous and next icon links:

 <Example centered vertical>
 <Pagination count={5} activeItem={3} />
@@ -42,7 +42,7 @@ Use slightly customized pagination with previous and next icon links:

 ## With first and last links

-When you have a lot of pages, you can use first and last links to quickly navigate to the beginning or end of the pagination.
+With many pages, add first and last links to jump to either end.

 <Example centered vertical>
 <Pagination count={5} activeItem={3} firstLast />
@@ -50,7 +50,7 @@ When you have a lot of pages, you can use first and last links to quickly naviga

 ## Offset

-If the count of pages is too large, you can use offset to show only a few pages at a time.
+When there are too many pages to list, show only a few around the current one.

 <Example centered vertical>
 <Pagination offset={3} count={20} activeItem={3} />
@@ -58,7 +58,7 @@ If the count of pages is too large, you can use offset to show only a few pages

 ## Button with text

-When you want to use pagination with text, you can use text buttons. This will give you a more traditional look and feel, which is great for applications where you want to keep the focus on the content rather than the navigation.
+Text buttons give the previous and next links a label instead of an icon.

 <Example centered vertical>
 <Pagination count={5} activeItem={3} text />
@@ -66,7 +66,7 @@ When you want to use pagination with text, you can use text buttons. This will g

 ## Outline version

-If you want to use an outline version of the pagination, you can use the `.pagination-outline` class. This will give you a more subtle look and feel, which is great for applications where you want to keep the focus on the content rather than the navigation.
+The `.pagination-outline` class draws the items with a border and no fill.

 <Example centered vertical>
 <Pagination count={5} activeItem={3} class="pagination-outline" />
@@ -74,7 +74,7 @@ If you want to use an outline version of the pagination, you can use the `.pagin

 ## Circle version

-If you want to use a circle version of the pagination, you can use the `.pagination-circle` class. This will give you a more subtle look and feel, which is great for applications where you want to keep the focus on the content rather than the navigation. This can also be combined with the `.pagination-outline` class for a more prominent look.
+The `.pagination-circle` class makes each item round. It combines with `.pagination-outline`.

 <Example centered vertical separated>
 <Pagination count={5} activeItem={3} class="pagination-circle" /> <Pagination count={5} activeItem={3} class="pagination-circle pagination-outline" />
@@ -35,7 +35,7 @@ Placeholder lines can contain lines of text. Their length is different and depen
 <div class="placeholder col-8"></div>
 </Example>

-However, it may be useful to specify the full width in order to fit the content more effectively.
+Use `col-12` for lines that will span the whole width:

 <Example column>
 <div class="placeholder col-12"></div>
@@ -83,7 +83,7 @@ You can use a placeholder that will look like an [avatar](/ui/components/avatar)
 </div>
 </Example>

-You can also use the `avatar` component with different sizes. Look at the example below to see how the avatar placeholder looks.
+The avatar size classes work here too:

 <Example centered>
 <div class="avatar-list">
@@ -1,6 +1,6 @@
 ---
 title: Popover
-summary: A popover is used to provide additional information for elements where a simple tooltip is not sufficient.
+summary: A popover is a small overlay with a title and a body, for information that doesn't fit in a tooltip.
 description: Show extra information in popovers when a tooltip is not enough. Set the placement and trigger to control how they appear.
 related: [/ui/components/tooltip, /ui/components/dropdown]
 source: core/scss/ui/_popovers.scss
@@ -42,7 +42,7 @@ Four options are available: `top`, `right`, `bottom`, and `left` aligned. Direct

 ## Popover on hover

-Popover can be triggered in one or more of the following styles: `manual`, with a `click`, on `focus`, and on `hover`. This one reacts on hover. See more details on the Popover component page of [Bootstrap's documentation](https://getbootstrap.com/docs)
+A popover can open on `click`, `hover`, `focus` or `manual`, set with `data-bs-trigger`. This one opens on hover. See the [Bootstrap documentation](https://getbootstrap.com/docs) for the details.

 <Example centered>
 <button type="button" class="btn btn-primary" data-bs-trigger="hover" data-bs-toggle="popover" title="Popover title" data-bs-content="And here's some amazing content. It's very engaging. Right?"> Hover to toggle popover </button>
@@ -58,7 +58,7 @@ Tabler automatically initializes all elements with `data-bs-toggle="popover"` on

 - The trigger must be a `button` or a link with an `href`, so it can take focus. Bootstrap manages `aria-describedby` while the popover is open.
 - Popovers open on click by default, which is what makes their content reachable. If you switch to `data-bs-trigger="hover"`, the content becomes unreachable by keyboard.
- Set `data-bs-trigger="focus"` to make a popover dismiss itself when focus leaves, which is the closest thing to <kbd>Escape</kbd> behaviour.
+- Set `data-bs-trigger="focus"` to make a popover dismiss itself when focus leaves, which is the closest thing to <kbd>Escape</kbd> behavior.
 - Tabler enables HTML in a popover only when you set `data-bs-html="true"`. Leave it off for content that comes from users.
 - Keep the title and body as text. A popover holding a form is a modal in disguise - use a real dialog for that.

@@ -1,6 +1,6 @@
 ---
 title: Progress steps
-summary: A progress step helps users track their place in a short process by breaking it into clear, simple steps. This makes flows like setup or onboarding easier to follow and finish.
+summary: Progress steps show where the user is in a short flow such as setup or onboarding, with done, active and upcoming steps.
 description: Use progress steps to display compact onboarding, checkout, and setup progress.
 added-in: '1.5.0'
 related: [/ui/components/progress, /ui/components/step]
@@ -18,7 +18,7 @@ import ProgressSteps from '@ui/ProgressSteps.astro';

 ## Default markup

-Use `.progress-steps` as the container and `.progress-steps-item` for each segment. These two classes are enough to create the base component structure.
+Use `.progress-steps` as the container and `.progress-steps-item` for each segment.

 ```html
 <ol class="progress-steps" aria-label="Onboarding progress">
@@ -28,7 +28,7 @@ Use `.progress-steps` as the container and `.progress-steps-item` for each segme
 </ol>
 ```

-The example below shows the default progress step structure.
+The default structure:

 <Example>
 <ol class="progress-steps" aria-label="Onboarding progress">
@@ -59,7 +59,7 @@ Use hidden labels so assistive technologies can announce meaningful step names.

 ### Color state

-Use contextual background classes on completed and current items. This helps match state color to your flow semantics.
+Use contextual background classes on completed and current items to match the state colors of your flow.

 <Example>
 <div class="mb-2">
@@ -101,4 +101,4 @@ Use utility classes on `.progress-steps` to control width and placement in layou
 - Say where the user is in text as well - "Step 2 of 4" next to the bar, or in a `visually-hidden` span. The filled shape alone does not carry it.
 - Mark the current step with `aria-current="step"`.
 - If you use the underlying progress bar to draw the line, give it `role="progressbar"` with the step number as `aria-valuenow` and the total as `aria-valuemax`.
- Do not rely on the colour of a circle to say "done". Add an icon or a word.
+- Do not rely on the color of a circle to say "done". Add an icon or a word.
@@ -1,6 +1,6 @@
 ---
 title: Progress bar
-summary: A progress bar is used to provide feedback on an action status and inform users about current progress. Although it is a small interface element, it is extremely helpful in managing user expectations and preventing abandonment of an initiated process.
+summary: A progress bar shows how much of a task is done. It comes in sizes and colors, and in stacked, striped, animated and indeterminate variants.
 description: Show task progress with progress bars. Set the value, color, and size, or use indeterminate bars for unknown durations.
 related: [/ui/components/progress-step, /ui/components/spinner]
 source: core/scss/ui/_progress.scss
@@ -41,7 +41,7 @@ import CodeDocs from '@components/CodeDocs.astro';

 ## Default markup

-To create a default progress bar, add a `.progress` class to a `<div>` element. Thanks to that, you will be able to notify users how long they have to wait for a process to complete.
+Add the `.progress` class to a `<div>` and put a `.progress-bar` inside it. The width of the inner bar is the value.

 <Example>
 <div class="progress">
@@ -53,14 +53,12 @@ To create a default progress bar, add a `.progress` class to a `<div>` element.

 ## Progress size

-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.
+Add a size class such as `.progress-sm` to make the bar thinner or thicker. The names follow the usual Bootstrap pattern.

 ```html
 <div class="progress progress-sm">...</div>
 ```

-Look at the example below to see how it works:
-
 <Example columnFullWidth>
 <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">
@@ -110,7 +108,7 @@ You can create a progress bar which shows indeterminate progress by adding `.pro

 ## Native progress element

-You can also use the native HTML5 `<progress>` element. It is a great way to create a progress bar without the need for additional HTML elements. This is what it looks like:
+The native `<progress>` element is styled too, so you can use it without any extra markup:

 <Example>
 <progress class="progress progress-sm" value="15" max="100" />
@@ -118,7 +116,7 @@ You can also use the native HTML5 `<progress>` element. It is a great way to cre

 ## Progress color

-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.
+Add a `bg-*` class such as `.bg-success` to the `.progress-bar` to change its color.

 See the [full list of available colors](/ui/base/colors) for more details.

@@ -147,7 +145,7 @@ See the [full list of available colors](/ui/base/colors) for more details.

 ## 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.
+Put several `.progress` elements inside a `.progress-stacked` container to show the parts of a whole in one bar, for example the share of each file type in the used storage.

 ```html
 <div class="progress-stacked">
@@ -155,8 +153,6 @@ You can stack multiple progress bars on top of each other to create a visually a
 </div>
 ```

-This is how it looks:
-
 <Example vertical column>
 <div class="progress-stacked">
  <div class="progress" style="width: 15%" role="progressbar" aria-valuenow="15" aria-valuemin="0" aria-valuemax="100" aria-label="15% of total">
@@ -218,10 +214,9 @@ Use `.progress-separated` to make stacked segments easier to read when values ar

 ## 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.
+A progress bar can also be the background of a row or a tile, so the row itself fills up as the value grows. It suits a ranking or a long-running goal, such as a fundraising target.

-Thanks to this you can create a nice looking statistics section:
+This example uses it for a ranking of countries:

 <Example columnFullWidth>
 <ProgressBg value={65} text="Poland" showValue />
@@ -241,7 +236,7 @@ You can combine progress background with contextual light colors to better separ

 ## Accessibility

- Put `role="progressbar"` with `aria-valuenow`, `aria-valuemin` and `aria-valuemax` on the element that carries the value, and give it an `aria-label`. Without them a bar is a coloured box with no meaning.
+- Put `role="progressbar"` with `aria-valuenow`, `aria-valuemin` and `aria-valuemax` on the element that carries the value, and give it an `aria-label`. Without them a bar is a colored box with no meaning.
 - On a stacked bar the width sits on each `.progress` segment, so the role and the value belong there, not on the inner `.progress-bar`.
 - An indeterminate bar keeps the role but has no `aria-valuenow`. A missing value is what says "unknown", while `aria-valuenow="0"` says "nothing done yet".
 - Repeat the number in text next to the bar, or in a `visually-hidden` span inside it. Not every screen reader announces a progress value on its own.
@@ -1,6 +1,6 @@
 ---
 title: Ribbon
-summary: A ribbon is a graphical element that attracts user attention to a given interface element and makes it stand out.
+summary: A ribbon is a small label pinned to the edge of a card, for a status such as new or featured.
 description: Highlight cards and other elements with ribbons. Change the position, color, and shape, or add icons and text to draw attention.
 related: [/ui/components/card, /ui/components/badge]
 source: core/scss/ui/_ribbons.scss
@@ -28,7 +28,7 @@ import CodeDocs from '@components/CodeDocs.astro';

 ## Default markup

-Use the `ribbon` class to add the default ribbon to any section of your interface.
+Put a `.ribbon` element inside a card. It can hold an icon or a short text.

 <Example card column>
 <div class="card">
@@ -57,7 +57,7 @@ Using multiple classes at once will give you more position options. For example,

 ## Ribbon color

-Customize the ribbon's background color. See the [full list of available colors](/ui/base/colors) for more details.
+Set the ribbon color with a `bg-*` class from the [color palette](/ui/base/colors).

 <Example column>
 <div class="card">
@@ -68,7 +68,7 @@ Customize the ribbon's background color. See the [full list of available colors]

 ## Ribbon text

-Add your own text to a ribbon to display any additional information and make it easy to spot for users.
+A ribbon can hold a short text, such as NEW or SALE.

 <Example column>
 <div class="card">
@@ -79,7 +79,7 @@ Add your own text to a ribbon to display any additional information and make it

 ## Bookmark ribbon

-Use the `.ribbon-bookmark` class to create a bookmark ribbon. It is a special style of ribbon that is used to highlight important elements in your interface.
+Add `.ribbon-bookmark` to give the ribbon a bookmark shape.

 <Example column>
 <div class="card w-100">
@@ -1,6 +1,6 @@
 ---
 title: Segmented control
-summary: A segmented control is a set of two or more segments, each of which functions as a mutually exclusive button. A segmented control is used to display a set of mutually exclusive options.
+summary: A segmented control is a row of two or more mutually exclusive options styled as one bar, an alternative to radios or tabs.
 description: A set of mutually exclusive options displayed as connected buttons.
 source: core/scss/ui/_segmented.scss
 classnames:
@@ -20,7 +20,7 @@ import Example from '@components/Example.astro';
 import Icon from '@ui/Icon.astro';
 import CodeDocs from '@components/CodeDocs.astro';

-To create a segmented control, use the `nav` element with the `nav-segmented` class. Inside the `nav` element, add `button` or `a` elements with the `nav-link` class. The `nav-link` class is used to style the buttons as links.
+A segmented control is a `nav` element with the `nav-segmented` class, holding `button` or `a` elements with the `nav-link` class.

 <Example centered>
 <nav class="nav nav-segmented" role="tablist">
@@ -32,14 +32,12 @@ To create a segmented control, use the `nav` element with the `nav-segmented` cl

 ## Full width

-To make the segmented control full width, add the `w-100` class to the `nav` element. It will take up the full width of its parent container.
+Add `w-100` to the `nav` to stretch the control to the width of its container.

 ```html
 <nav class="nav nav-segmented w-100" role="tablist">...</nav>
 ```

-The results can be seen in the example below.
-
 <Example>
 <nav class="nav nav-segmented w-100" role="tablist">
  <button class="nav-link active" role="tab" data-bs-toggle="tab" aria-selected="true" aria-current="page">Daily</button>
@@ -52,7 +50,7 @@ The results can be seen in the example below.

 ## With emojis

-You can also use emojis in the segmented control. To do this, add the emoji inside the `button` element.
+A segment can hold an emoji.

 <Example centered>
 <nav class="nav nav-segmented" role="tablist">
@@ -67,7 +65,7 @@ You can also use emojis in the segmented control. To do this, add the emoji insi

 ## With icons

-You can also use [icons](/ui/components/icon) in the segmented control. To do this, add the icon inside the `button` element.
+A segment can hold an [icon](/ui/components/icon).


 <Example centered>
@@ -87,8 +85,6 @@ To create a vertical segmented control, add the `nav-segmented-vertical` class t
 <nav class="nav nav-segmented-vertical" role="tablist">...</nav>
 ```

-The results can be seen in the example below.
-
 <Example centered>
 <nav class="nav nav-segmented nav-segmented-vertical" role="tablist">
  <button class="nav-link active" role="tab" data-bs-toggle="tab" aria-selected="true" aria-current="page"><Icon name="list" /> List</button>
@@ -100,14 +96,12 @@ The results can be seen in the example below.

 ## Sizes

-You can also change the size of the segmented control. To do this, add the `nav-sm` or `nv-lg` class to the `nav` element. The `nav-sm` class will make the segmented control smaller, while the `nav-lg` class will make it larger.
+Add `nav-sm` or `nav-lg` to the `nav` to change the size.

 ```html
 <nav class="nav nav-segmented nav-sm" role="tablist">...</nav>
 ```

-The results can be seen in the examples below.
-
 <Example centered vertical>
 <nav class="nav nav-segmented nav-sm" role="tablist">
  <button class="nav-link active" role="tab" data-bs-toggle="tab" aria-selected="true" aria-current="page">List</button>
@@ -24,7 +24,7 @@ import CodeDocs from '@components/CodeDocs.astro';

 ## Default markup

-Use the default spinner to notify users that an action they have taken is in progress, helping them avoid confusion.
+The default spinner shows that an action is in progress.

 <Example centered>
 <div class="spinner-border"></div>
@@ -33,7 +33,7 @@ Use the default spinner to notify users that an action they have taken is in pro

 ## Colors

-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](/ui/base/colors) section.
+Set the color with a `text-*` class from the [color palette](/ui/base/colors).

 <Example centered>
 <div class="spinner-border text-blue" role="status"></div>
@@ -52,7 +52,7 @@ Choose one of the available colors to customize the spinner and make it suit you

 ## Size

-Choose the size of your spinner. You can use the default size or use the `spinner-border-sm` class to display a smaller spinner.
+Add `spinner-border-sm` for a smaller spinner.

 <Example centered>
 <div class="spinner-border" role="status"></div>
@@ -61,13 +61,13 @@ Choose the size of your spinner. You can use the default size or use the `spinne

 ## Growing spinner

-Use the growing spinner, if you are looking for a more original design than a border spinner. The spinner grows to show the loading state.
+The growing spinner pulses instead of rotating.

 <Example centered>
 <div class="spinner-grow" role="status"></div>
 </Example>

-Growing spinners also come in a variety of colors to choose from.
+It takes the same `text-*` color classes.

 <Example centered>
 <div class="spinner-grow text-blue" role="status"></div>
@@ -86,7 +86,7 @@ Growing spinners also come in a variety of colors to choose from.

 ## Button with spinner

-Use [buttons](/ui/components/button) 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.
+Put a spinner inside a [button](/ui/components/button) while its action runs, and disable the button so it can't be clicked twice.

 <Example centered>
 <div class="btn-list">
@@ -100,13 +100,13 @@ Use [buttons](/ui/components/button) with spinners to notify users that an actio

 ## Animated dots

-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 a `span` element.
+Animated dots are a lighter loading indicator for inline text. Add the `.animated-dots` class to a `span`.

 <Example centered>
 <h1>Loading <span class="animated-dots"></span></h1>
 </Example>

-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.
+Animated dots also fit inside a button while its action runs.

 <Example centered>
 <div class="btn-list">
@@ -218,8 +218,8 @@ Use the status indicator to show the status of a component or page. The status i

 ## Accessibility

- A status dot is decoration. The state has to be in text next to it - a screen reader ignores a coloured circle, and so does anyone who cannot tell the colours apart.
- Do not use red and green alone to separate "down" from "up". Pair the colour with a word, an icon, or a shape.
+- A status dot is decoration. The state has to be in text next to it - a screen reader ignores a colored circle, and so does anyone who cannot tell the colors apart.
+- Do not use red and green alone to separate "down" from "up". Pair the color with a word, an icon, or a shape.
 - An animated dot repeats forever. Keep it for a state that really is live, and respect `prefers-reduced-motion` in your own CSS if you add more motion.
 - When a status changes while the page is open, announce it from a live region elsewhere rather than making the dot itself one.

@@ -1,6 +1,6 @@
 ---
 title: Step
-summary: A step is used to guide users through a complex process and make it easier to complete. Breaking a multi-step process into smaller parts and tracking progress along the way helps users finish it successfully.
+summary: "Steps show where the user is in a multi-step process: which steps are done, which one is active and which are left."
 description: Guide users through multi-step processes with a steps indicator. Show completed, active, and upcoming steps in a clear layout.
 related: [/ui/components/progress-step]
 source: core/scss/ui/_steps.scss
@@ -26,9 +26,7 @@ import CodeDocs from '@components/CodeDocs.astro';

 ## Default markup

-Steps provide a clear visual representation of a user’s progress through a multi-step process. By showing what has been completed and what remains, steps enhance usability and encourage task completion.
-
-To create a default progress tracker, use the `.steps` class and define each step as a `.step-item`. The active step clearly indicates the current position in the process.
+Use the `.steps` class for the list and `.step-item` for each step. The `active` class marks the current step.

 ```html
 <div class="steps">
@@ -38,7 +36,7 @@ To create a default progress tracker, use the `.steps` class and define each ste
 </div>
 ```

-The example below demonstrates a simple progress tracker with four steps, where the third step is active.
+Four steps, with the third one active:

 <Example>
 <div class="steps">
@@ -51,7 +49,7 @@ The example below demonstrates a simple progress tracker with four steps, where

 ## Tooltips

-Add [tooltips](/ui/components/tooltip) if you want to provide users with additional information about the steps they are expected to complete. Tooltips are displayed when a user hovers over a given step and help clarify what might not be clear from the interface.
+Add a [tooltip](/ui/components/tooltip) to a step to explain it on hover, for example when the step titles are short.

 To add a tooltip, use the `data-bs-toggle="tooltip"` attribute and specify the tooltip content with the `title` attribute.

@@ -67,7 +65,7 @@ To add a tooltip, use the `data-bs-toggle="tooltip"` attribute and specify the t
 </a>
 ```

-The example below demonstrates a progress tracker with tooltips for each step.
+A tracker with a tooltip on each step:

 <Example>
 <div class="steps">
@@ -80,13 +78,13 @@ The example below demonstrates a progress tracker with tooltips for each step.

 ## Color

-You can customize the default progress indicator by changing the color to one that better suits your design. See the [full list of available colors](/ui/base/colors) for more details.
+Change the color with a `steps-*` class, using any name from the [color palette](/ui/base/colors).

 ```html
 <div class="steps steps-green">...</div>
 ```

-The example below demonstrates a progress tracker with two different color schemes.
+Two color schemes:

 <Example>
 <div class="steps steps-green">
@@ -105,7 +103,7 @@ The example below demonstrates a progress tracker with two different color schem

 ## Steps without title

-For designs with limited space, use progress indicators without titles and add tooltips to provide the necessary details.
+When there's no room for titles, use steps without them and put the details in tooltips.

 <Example>
 <div class="steps">
@@ -118,13 +116,13 @@ For designs with limited space, use progress indicators without titles and add t

 ## Steps with numbers

-Use the `steps-counter` class to create a progress tracker with numbers instead of titles and change the color to customize it.
+The `steps-counter` class shows a number in each step instead of a title.

 ```html
 <div class="steps steps-counter">...</div>
 ```

-The example below demonstrates a progress tracker with numbers and a different color scheme.
+Numbered steps in another color:

 <Example>
 <div class="steps steps-counter">
@@ -139,8 +137,8 @@ The example below demonstrates a progress tracker with numbers and a different c
 ## Accessibility

 - Use an ordered list for the steps. The numbering is meaning, not decoration, so let the markup carry it.
- Mark the current step with `aria-current="step"`. The `active` class only changes the colours.
- A completed step and a pending one must differ in more than colour - a checkmark, a label, or the word "done".
+- Mark the current step with `aria-current="step"`. The `active` class only changes the colors.
+- A completed step and a pending one must differ in more than color - a checkmark, a label, or the word "done".
 - If a step is a link, keep it a real link; if it cannot be reached yet, use `aria-disabled="true"` and take it out of the tab order.

 ## SCSS variables
@@ -51,7 +51,7 @@ You can also add a fancy animation to add variety to your button. See demo below
  <span class="switch-icon-a text-secondary"><Icon name="heart" /></span>
  <span class="switch-icon-b text-red"><Icon name="heart" filled /></span>
 </button>
-<button type="button" class="switch-icon switch-icon-scale" data-bs-toggle="switch-icon" aria-pressed="false" aria-label="Add to favourites">
+<button type="button" class="switch-icon switch-icon-scale" data-bs-toggle="switch-icon" aria-pressed="false" aria-label="Add to favorites">
  <span class="switch-icon-a text-secondary"><Icon name="star" /></span>
  <span class="switch-icon-b text-yellow"><Icon name="star" filled /></span>
 </button>
@@ -109,5 +109,5 @@ Tabler toggles the `active` class on every element with `data-bs-toggle="switch-

 - A switch icon is a toggle button. Give it `type="button"`, an `aria-label` saying what it toggles, and `aria-pressed` for the state - Tabler keeps `aria-pressed` in sync from the first click, but the initial value has to be in your markup.
 - The two icons are decoration. The state lives in `aria-pressed`, not in which icon is visible.
- Colour alone should not carry the state. A filled red heart and an outlined grey one differ in shape too, which is what makes them readable.
+- Colour alone should not carry the state. A filled red heart and an outlined gray one differ in shape too, which is what makes them readable.
 - The animations run on every toggle. Disable them under `prefers-reduced-motion` if you add your own.
@@ -1,6 +1,6 @@
 ---
 title: Tab
-summary: A tab allows users to alternate between equally important views within the same context. By dividing content into meaningful sections, it improves organization and makes navigation easier.
+summary: Tabs switch between related views in the same place on the page. They can hold icons, a dropdown or fill the full width.
 description: Split content into tabs so users can switch between related views in the same context. Add icons or style the tabs as pills.
 related: [/ui/layout/navs-tabs]
 source: core/scss/ui/_nav.scss
@@ -30,7 +30,7 @@ import CodeDocs from '@components/CodeDocs.astro';

 ## Default markup

-Use tabs to let users access different sections within one context quickly and with ease. In the default design, the current tab is highlighted, which makes the interface clear and user-friendly.
+The default tabs highlight the current one. Each tab trigger points at a panel, and Bootstrap shows one panel at a time.

 <Example>
 <div class="card">
@@ -61,7 +61,7 @@ Use tabs to let users access different sections within one context quickly and w

 ## Tabs with icons

-Add [icons](/ui/components/icon) to your tab labels, if you want to use a visual element and make the tab content easier to identify.
+An [icon](/ui/components/icon) in the tab label makes tabs easier to tell apart when the labels are similar.

 <Example>
 <div class="card">
@@ -105,7 +105,7 @@ Add [icons](/ui/components/icon) to your tab labels, if you want to use a visual

 ## Tabs only with icons

-Use tabs without label names to save space and make the tab content easy to recognize for international users.
+Tabs with only an icon save space. Give each one an `aria-label`, because there's no text to read.

 <Example>
 <div class="card">
@@ -147,7 +147,7 @@ Use tabs without label names to save space and make the tab content easy to reco

 ## Tabs with dropdown

-Make one or more of your tabs into a [dropdown](/ui/components/dropdown) to add more options within one element.
+A tab can open a [dropdown](/ui/components/dropdown) with more views, so a long row of tabs stays short.

 <Example>
 <div class="card">
@@ -1,6 +1,6 @@
 ---
 title: Table
-summary: A table is a useful interface element that lets you visualize data and arrange it clearly. It allows users to browse a lot of information at once, and a good table design improves readability.
+summary: Tables lay out rows of data, with variants for responsive, sortable, selectable and sticky-header tables.
 description: Present data in clean, responsive tables. Add hover states, striped rows, sorting, and other options to improve readability.
 related: [/ui/components/datagrid, /ui/components/pagination]
 source: core/scss/ui/_tables.scss
@@ -1,6 +1,6 @@
 ---
 title: Timeline
-summary: A timeline is a perfect way to visualize processes and projects, as it's easy to read and attractive for users. You can use it to give an overview of events, present an agenda or point out important points in time.
+summary: A timeline is a list of events in order, with an icon or an avatar per event and a card for its content, for activity feeds and histories.
 description: Visualize events in chronological order with a timeline. Add icons, avatars, and text to present processes and activity feeds.
 related: [/ui/components/step, /ui/components/status]
 source: core/scss/ui/_timeline.scss
@@ -1,6 +1,6 @@
 ---
 title: Toast
-summary: A toast is a lightweight alert box that displays for a few seconds after a user action to communicate state or outcome. It is useful after actions like clicking a button or submitting a form, where feedback is needed without prompting another action.
+summary: A toast is a small message shown for a few seconds after an action, for feedback that doesn't need a response.
 description: Display a lightweight alert notification with a toast.
 related: [/ui/components/alert, /ui/components/modal]
 source: core/scss/ui/_toasts.scss
@@ -24,7 +24,7 @@ import CodeDocs from '@components/CodeDocs.astro';

 ## Default markup

-Use the default toast message to inform users of the outcome of their action and provide additional information. It contains an `x` close button to make it possible for users to close the toast if they wish.
+The default toast has a header with the sender and the time, a body with the message, and a close button.

 <Example>
 <div class="toast show" role="alert" aria-live="assertive" aria-atomic="true" data-bs-autohide="false" data-bs-toggle="toast">
@@ -40,7 +40,7 @@ Use the default toast message to inform users of the outcome of their action and

 ## Translucent

-Toasts blend over the elements they appear over. If a browser supports the `backdrop-filter` CSS property, the elements under a toast will be blurred.
+Toasts are translucent, so the page shows through them. In browsers that support `backdrop-filter`, the content under a toast is blurred.

 <Example>
 <div class="toast show" role="alert" aria-live="assertive" aria-atomic="true" data-bs-autohide="false" data-bs-toggle="toast">
@@ -1,6 +1,6 @@
 ---
 title: Tooltip
-summary: A tooltip is a text label that appears when a user hovers over an interface element. It explains unclear elements and guides users when they need help. When used properly, it can significantly enhance user experience and add value to your website or software.
+summary: A tooltip is a short text label that appears when the user hovers over or focuses an element. It explains a control that isn't clear on its own.
 description: Explain interface elements with tooltips shown on hover. Control placement, add HTML content, and customize how they appear.
 related: [/ui/components/popover]
 source: core/scss/bootstrap/_tooltip.scss
@@ -19,7 +19,7 @@ import CodeDocs from '@components/CodeDocs.astro';

 ## Default markup

-Use the default markup to create tooltips that will help users understand particular elements of your interface. You can decide where the text label is to be displayed - at the top, bottom or on either side of the element.
+Add `data-bs-toggle="tooltip"` and a `title` to the element. `data-bs-placement` puts the tooltip at the top, bottom, left or right.

 <Example>
 <div class="btn-list">
@@ -32,7 +32,7 @@ Use the default markup to create tooltips that will help users understand partic

 ## Tooltip with HTML

-If the default tooltip is not enough, you can add the option to use HTML code in the text to highlight particular bits of information and make the content more attractive.
+Set `data-bs-html="true"` to allow HTML in the title, for example to emphasize one word.

 <Example>
 <button type="button" class="btn" data-bs-toggle="tooltip" data-bs-html="true" title="<em>Tooltip</em> <u>with</u> <b>HTML</b>">Tooltip with HTML</button>
@@ -1,6 +1,6 @@
 ---
 title: Tracking
-summary: Component for visualizing activity logs or other monitoring-related data. With its ability to show data in a visually appealing and easily understandable way, the tracking component is an essential tool for any organization that relies on data monitoring and analysis to optimize performance and user experience.
+summary: A row of colored blocks that shows one status per time period, for uptime and activity logs.
 description: Visualize activity logs and uptime data with the tracking component - a compact row of colored blocks that show status over time.
 related: [/ui/components/tooltip, /ui/plugins/chart]
 source: core/scss/ui/_tracking.scss
@@ -61,7 +61,7 @@ Build a tracking view from a `.tracking` wrapper with one `.tracking-block` elem

 ## Tracking inside a card

-You can add a tracking component inside the cards to give your reports a fresh look and visualize the status of your system in an attractive way. If you want to read how to add other elements to a card it is worth reading [documentation of card](/ui/components/card).
+A tracking strip fits in a [card](/ui/components/card), for example under a subheader and a summary line in the `card-body`.

 <Example column>
 <div class="card">
@@ -1,15 +1,15 @@
 ---
 title: Color check
 order: 7
-summary: 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.
-description: Let users pick a color with radio or checkbox controls styled as color swatches. A simple way to make forms more visual.
+summary: Checkboxes and radios styled as color swatches, for picking a color in a form.
+description: Checkboxes and radios styled as color swatches, plus the native color picker input.
 related: [/ui/forms/image-check, /ui/base/colors]
 ---

 import Example from '@components/Example.astro'
 import InputColor from '@shared/components/parts/form/InputColor.astro'

-Your input controls can come in a variety of colors, depending on your preferences. See the [full list of available colors](/ui/base/colors) for more details.
+A color check is a checkbox or a radio drawn as a color swatch. The swatch takes any of the `bg-*` classes from the [color palette](/ui/base/colors).

 ```html
 <label class="form-colorinput">
@@ -18,13 +18,13 @@ Your input controls can come in a variety of colors, depending on your preferenc
 </label>
 ```

-There is also an example of a color input:
+With checkboxes, several colors can be picked at once:

 <Example>
 <InputColor type="checkbox" />
 </Example>

-If you need to select only one color, you can use the radio input type:
+Use the radio type when only one color can be picked:

 <Example>
  <InputColor name="color-rounded" rounded={true} />
@@ -32,7 +32,7 @@ If you need to select only one color, you can use the radio input type:

 ## Input color picker

-Add an color picker to your form to let users customize it according to their preferences.
+For a free choice of color, use the native `color` input. Tabler styles it to match the other form controls.

 <Example>
 <div class="mb-3">
@@ -43,8 +43,8 @@ Add an color picker to your form to let users customize it according to their pr

 ## Accessibility

- A colour swatch has no name. Put the colour in text inside a `visually-hidden` span, or use `aria-label` on the input, so the option is not announced as just "radio".
+- A color swatch has no name. Put the color in text inside a `visually-hidden` span, or use `aria-label` on the input, so the option is not announced as just "radio".
 - Colour on its own cannot be the only way to tell options apart. Keep a visible mark for the selected one - Tabler draws a checkmark inside the swatch.
 - Wrap the set in a `fieldset` with a `legend`, so the group has a name. See [fieldsets](/ui/forms/fieldset).
 - Keep the real `input` in the markup. It is what makes the arrow keys, the space bar and the checked state work.
- Do not use a colour picker as the only way to choose something meaningful, such as a category. Offer the name as well.
+- Do not use a color picker as the only way to choose something meaningful, such as a category. Offer the name as well.
@@ -1,9 +1,9 @@
 ---
 title: Elements
 seoTitle: Form elements
-summary: Forms are one of the most important types of interaction with a website or app. Since their aim is to enable users to make a purchase, subscribe to a service or sign up to create an account, it's important to make sure they are easy to complete and help increase conversion rates. Use the available elements to create forms which are well-structured and user-friendly.
+summary: Inputs, selects, textareas, checkboxes, radios and switches, with their sizes, states and the input group add-ons.
 docs-libs: [nouislider]
-description: Build user-friendly forms with styled inputs, selects, checkboxes, and radios. Learn about states, sizes, and layout options.
+description: Styled inputs, selects, checkboxes and radios, with states, sizes and layout options.
 order: 1
 related: [/ui/forms/validation, /ui/forms/helpers, /ui/forms/fieldset, /ui/plugins/date-picker, /ui/plugins/advanced-select]
 ---
@@ -13,7 +13,7 @@ import Icon from '@ui/Icon.astro'

 ## Classic inputs

-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.
+Add the `form-control` class to a text input to style it. Give every input a label, and use the placeholder for an example value rather than as the label.

 ```html
 <input type="text" class="form-control" name="example-text-input" placeholder="Input placeholder" />
@@ -68,7 +68,7 @@ You can remove borders from your form control by adding the `form-control-flush`

 ## Input with icon

-Add [icons](/ui/components/icon) to your input controls to suggest users what they should enter or inform them of the current state of a form element.
+Put an [icon](/ui/components/icon) inside an input to hint at what goes in it, or a spinner to show that the field is busy.

 <Example column>
 <div class="mb-3">
@@ -152,7 +152,7 @@ Add one of the available selects - either a dropdown or a multiple choice select

 ## Input size

-Choose the size of an input control that will go well with your form design. Besides the default size, you can also use small and large input controls.
+Inputs come in three sizes: small, default and large.

 <Example column>
 <div class="mb-3">
@@ -2,7 +2,7 @@
 title: Fieldset
 seoTitle: Form fieldset
 order: 2
-summary: By grouping form elements together with the fieldset element, you can improve the organization and accessibility of your forms, making it easier for users to understand the purpose of each input and provide accurate information.
+summary: A fieldset groups related fields under a legend, which makes long forms easier to scan and gives the group a name for assistive tech.
 description: Group related form fields with a styled fieldset to make long forms better organized and easier to understand.
 related: [/ui/forms/elements]
 ---
@@ -10,7 +10,7 @@ import Example from '@components/Example.astro';

 ## Default markup

-Group parts of your form to make it well-structured and clearer for users, using the `fieldset` element.
+Wrap related fields in a `fieldset` to group them.

 Give every fieldset a `legend`. The legend names the group, and it is the only thing that does - a heading placed above the fieldset looks the same but is not connected to the fields.

@@ -2,7 +2,7 @@
 title: Helpers
 seoTitle: Form helpers
 order: 4
-summary: 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.
+summary: "Form helpers add information around a field: a help popover, a required marker, a hint below the field and extra text in the label."
 description: Add help icons, hints, and required field markers to forms to give users extra guidance and reduce input errors.
 related: [/ui/forms/elements, /ui/components/popover]
 ---
@@ -24,8 +24,6 @@ Use an input helper to display additional information about a form element. The
 >
 ```

-Look at the example below to see how the input help works:
-
 <Example column>
 <div>
  <label class="form-label" for="helper-zip"> 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>
@@ -52,8 +50,6 @@ Use a form hint to provide users with additional information about a form elemen
 <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:
-
 <Example column>
 <div>
  <label class="form-label" for="helper-email">Email address</label>
@@ -1,15 +1,15 @@
 ---
 title: Image check
 order: 6
-summary: 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.
-description: Let users select options with image-based checkboxes and radios. Ideal for choosing templates, themes, or visual products in forms.
+summary: Checkboxes and radios that use an image as the label, for picking a template, a theme or a product.
+description: Checkboxes and radios with an image as the label, for choosing templates, themes or products in a form.
 related: [/ui/forms/select-group, /ui/forms/color-check]
 ---
 import Example from '@components/Example.astro';

 ## 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 display the custom checkbox and the `.form-imagecheck-image` class to style the image itself.
+An image check is a `.form-imagecheck` label with a hidden `.form-imagecheck-input`, a `.form-imagecheck-figure` that draws the check mark, and a `.form-imagecheck-image` for the picture.

 ```html
 <label class="form-imagecheck">
@@ -20,8 +20,6 @@ To build an image check, you need to use the `.form-imagecheck` class and the `.
 </label>
 ```

-Look at the examples below to see how the image check works:
-
 <Example>
 <div class="mb-3">
  <label class="form-label">Image Check</label>
@@ -64,7 +62,7 @@ Look at the examples below to see how the image check works:

 ## Radio buttons

-If you want to use the image check as a radio button, you can change the input type to `radio`.
+Change the input type to `radio` when only one option can be picked.

 <Example>
 <div class="mb-3">
@@ -108,7 +106,7 @@ If you want to use the image check as a radio button, you can change the input t

 ## Avatars

-If you want to use the image check with avatars, you can use an [avatar component](/ui/components/avatar) instead of an image.
+Use an [avatar](/ui/components/avatar) instead of an image when the options are people.

 <Example>
 <div class="mb-3">
@@ -160,5 +158,5 @@ If you want to use the image check with avatars, you can use an [avatar componen

 - An image check is a checkbox or a radio with a picture as its label. Keep the `input` in the markup so the control works and the state is exposed.
 - A picture is not a name. Add text in the label, or an `aria-label` on the input, saying what the option is.
- Selection must not rest on the border colour alone. Add a checkmark or another visible mark for the selected state.
+- Selection must not rest on the border color alone. Add a checkmark or another visible mark for the selected state.
 - Wrap a set of them in a `fieldset` with a `legend`, so the group has a name.
@@ -2,7 +2,7 @@
 title: Forms
 order: 5
 description: Everything you need to build accessible forms - inputs, selects, checkboxes, validation states, and helper elements.
-summary: The forms section provides a collection of components and tools for creating user-friendly and accessible forms, enhancing user interaction and improving data collection.
+summary: "The form building blocks: inputs, selects, checkboxes and radios, validation states and helper elements."
 ---

 Forms collect data from your users, so they need to be clear and easy to use. This section covers all form building blocks: inputs, selects, checkboxes, validation states, and helpers. Combine them to build accessible forms that look consistent with the rest of your interface.
@@ -2,7 +2,7 @@
 title: Select group
 seoTitle: Form select group
 order: 5
-summary: 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.
+summary: A select group is a set of radios or checkboxes styled as buttons, with a label, an icon or both, in the default or the pill style.
 description: Offer sets of options with select groups - labeled, icon-only, or pill-shaped controls built on checkboxes and radios.
 css-plugins: [payments]
 related: [/ui/plugins/advanced-select, /ui/forms/image-check, /ui/forms/color-check]
@@ -13,7 +13,7 @@ import Icon from '@ui/Icon.astro'

 ## 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.
+Wrap the options in a `.form-selectgroup` element. Each option is a `.form-selectgroup-item` label with a hidden `.form-selectgroup-input` and a `.form-selectgroup-label` for the text.

 ```html
 <label class="form-selectgroup-item">
@@ -22,8 +22,6 @@ To create a simple selectgroup, use the `.form-selectgroup` class. You should ad
 </label>
 ```

-Look at the example below to see how the simple selectgroup works:
-
 <Example centered>
 <div>
  <div class="form-selectgroup">
@@ -49,7 +47,7 @@ Look at the example below to see how the simple selectgroup works:

 ## Multiple choices

-You can also create a selectgroup with multiple choices. To do this, change the `type` attribute of the input element to `checkbox`.
+Change the input type to `checkbox` to let the user pick more than one option.

 ```html
 <label class="form-selectgroup-item">
@@ -58,8 +56,6 @@ You can also create a selectgroup with multiple choices. To do this, change the
 </label>
 ```

-Look at the example below to see how the multiple choices selectgroup works:
-
 <Example centered>
 <div>
  <div class="form-selectgroup">
@@ -85,7 +81,7 @@ Look at the example below to see how the multiple choices selectgroup works:

 ## 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.
+The label can hold an icon instead of text. The markup is the same, with an `.icon` element inside `.form-selectgroup-label`.

 ```html
 <label class="form-selectgroup-item">
@@ -96,7 +92,7 @@ To create an icon input, use the `.form-selectgroup` class. You should add a lab
 </label>
 ```

-We recommend you use Tabler Icons for the best experience. You can find { site.iconsCount } free icons in the [Tabler Icons](https://tabler.io/icons) library. Just copy the SVG code and paste it into your project.
+The examples use [Tabler Icons](https://tabler.io/icons), which has { site.iconsCount } free icons. Copy the SVG code into the label.

 <Example centered>
 <div class="mb-3">
@@ -140,7 +136,7 @@ We recommend you use Tabler Icons for the best experience. You can find { site.i
 </div>
 </Example>

-You can also add text to the element. Look at the example below to see how it works:
+An icon and text can go together in one label:

 <Example>
 <div class="mb-3">
@@ -170,14 +166,12 @@ You can also add text to the element. Look at the example below to see how it wo

 ## 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.
+Add `.form-selectgroup-pills` to the group for rounded, pill-shaped options. The rest of the markup stays the same.

 ```html
 <div class="form-selectgroup form-selectgroup-pills">...</div>
 ```

-Look at the example below to see how the pill selectgroup works:
-
 <Example>
 <div class="mb-3">
  <label class="form-label">Different style</label>
@@ -204,7 +198,7 @@ Look at the example below to see how the pill selectgroup works:

 ## Advanced selectboxes

-Use more advanced selectboxes to display the range of available options. You can choose selectboxes with [radio buttons](/ui/forms/elements) if you want users to select only one option, or with checkboxes if they are allowed to choose multiple options.
+`form-selectgroup-boxes` turns each option into a box with a title and a description. Use [radios](/ui/forms/elements) when only one option can be picked and checkboxes when several can.

 <Example column>
 <div class="mb-3">
@@ -2,7 +2,7 @@
 title: Validation
 seoTitle: Form validation states
 order: 12
-summary: 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.
+summary: Validation states mark a field as valid or invalid and show a message under it, so the user sees what to fix.
 description: Show valid and invalid states on form fields with feedback messages, so users know exactly what to correct before submitting.
 related: [/ui/forms/elements, /ui/forms/helpers]
 ---
@@ -11,7 +11,7 @@ import CodeDocs from '@components/CodeDocs.astro';

 ## 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.
+Validation states mark a field as valid or invalid, so the user sees which fields to correct and, for an invalid one, why.

 To apply the validation state to the form control, use the `.is-valid` and `.is-invalid` classes. For assistive tech, also set `aria-invalid="true"` on invalid controls.

@@ -50,7 +50,7 @@ You can also use the `.valid-feedback` to provide users with positive feedback.

 ## Subtle validation states

-If you prefer a more subtle manner of informing users of the input control validation state, you can use tick and cross symbols and refrain from using colored control frames and the validation feedback.
+For a quieter version, show a tick or a cross icon instead of the colored frame and the feedback message.

 To do this, use the `.is-valid-lite` and `.is-invalid-lite` classes.

@@ -1,7 +1,7 @@
 ---
 title: Browser support
-description: See which browsers Tabler supports. The framework is optimized for the latest versions of Chrome, Firefox, Edge, Safari, and Opera.
-summary: Learn about the supported browsers and compatibility guidelines for using Tabler UI components to ensure a consistent experience across different devices and platforms.
+description: Which browsers Tabler supports, and the CSS features that set the minimum versions of Chrome, Firefox, Edge, Safari and Opera.
+summary: Which browsers Tabler supports and the CSS features that set the minimum versions.
 ---
 import Example from '@components/Example.astro';

@@ -1,6 +1,6 @@
 ---
 title: Docs callouts
-summary: Callouts pull one sentence out of the flow of a page - a prerequisite, a gotcha, a warning. Tabler docs ship five of them, and any MDX page can use them without an import.
+summary: Callouts pull one sentence out of the page flow, such as a prerequisite or a warning. The docs ship five of them for any MDX page.
 description: Info, Tip, Warning, Danger and Note callouts for Tabler documentation pages, with usage rules and accessibility notes.
 ---

@@ -1,6 +1,6 @@
 ---
 title: Color modes
-summary: Tabler ships a small theming script that switches your site between light, dark, and auto color modes, plus base gray shade, font, primary color, and corner radius - all without a page reload or a flash of the wrong theme.
+summary: The theme script switches between light, dark and auto color modes, plus the base gray, font, primary color and corner radius, without a page reload.
 description: Set up Tabler's light, dark, and auto color modes, and learn the five theme attributes for base color, font, primary color, and corner radius.
 related: [/ui/getting-started/customize, /ui/plugins/theme-base-colors]
 ---
@@ -1,6 +1,6 @@
 ---
 title: Customize Tabler
-summary: Tabler has been designed so that it can be adjusted to your needs and requirements as much as possible. You can customize your own fonts, colors, font sizes, etc in it.
+summary: Change fonts, colors, sizes and other design tokens with CSS variables or Sass to make Tabler match your brand.
 description: Customize Tabler fonts, colors, and styles with CSS variables and Sass to make the framework match your brand.
 ---
 import Example from '@components/Example.astro';
@@ -1,6 +1,6 @@
 ---
 title: Download
-summary: Download Tabler to get the compiled CSS and JavaScript, source code, or include it with your favorite package managers like npm, yarn and more.
+summary: Get Tabler from the jsDelivr CDN, install it from npm, or download the compiled files and the source from GitHub.
 description: Download Tabler compiled CSS and JavaScript, get the source code from GitHub, or install it with npm, yarn, or a CDN link.
 ---

@@ -10,7 +10,7 @@ import CdnImportPlugin from '@components/CdnImportPlugin.astro'

 ## CDN via jsDelivr

-All files included in the `@tabler/core` npm package are available over a jsDelivr CDN. Use it to deliver cached versions of Tabler’s compiled CSS and JS to your project.
+All files in the `@tabler/core` npm package are on the jsDelivr CDN, so you can link the compiled CSS and JS without hosting them.

 <CdnImportPackage />

@@ -26,5 +26,4 @@ Install Tabler in your Node.js powered apps with the npm package:

 ## 3rd-party libraries

-Tabler uses other packages to enhance its functionality - for example, [charts](/ui/plugins/chart) and [input masks](/ui/plugins/input-mask). These are not automatically installed to avoid huge dependency trees and need to be installed by using `npm install`. The full list of recommended libraries is available on the
-[3rd-party Libraries & Resources](/ui/getting-started/references) page. For the most recent list of supported packages, you can also check the [libs.json](https://github.com/tabler/tabler/blob/dev/core/libs.json) file.
+Some features use other libraries, for example [charts](/ui/plugins/chart) and [input masks](/ui/plugins/input-mask). They aren't installed with the package, to keep the dependency tree small, so install the ones you use with `npm install`. The full list is on the [3rd-party Libraries & Resources](/ui/getting-started/references) page, and the exact shipped files are in [libs.json](https://github.com/tabler/tabler/blob/dev/core/libs.json).
@@ -20,11 +20,11 @@ Yes, absolutely.

 ## Can I use Tabler in commercial projects?

-Of course! Tabler is under MIT license, so you can confidently use it in commercial projects. However, remember to include a note that your project uses Tabler. You can read about our license here: [License](https://tabler.io/license).
+Yes. Tabler is MIT licensed, so commercial use is fine. Keep the license and copyright notices in your copy. The full terms are on the [License](https://tabler.io/license) page.

 ## Can Tabler be used with WordPress?

-Tabler is an HTML template that can be used for any purpose. However, it is not made to be easily installed on WordPress. It will require some effort and enough knowledge of the WordPress script to do so.
+Tabler is an HTML template, so it can be used anywhere, but it isn't a WordPress theme. Turning it into one takes some work and a working knowledge of WordPress theme development.

 ## How do I get notified of new Tabler versions?

@@ -47,7 +47,7 @@ For full theme customization, import SCSS sources instead:

 Tabler JavaScript is required for interactive components such as dropdowns, modals, and tooltips.

-Astro-specific note: a plain `<script>` tag in an Astro component is bundled and runs only in the browser, so importing `tabler.min.js` there is safe — it never executes during server-side rendering:
+Astro-specific note: a plain `<script>` tag in an Astro component is bundled and runs only in the browser, so importing `tabler.min.js` there is safe - it never executes during server-side rendering:

 ```astro
 <script>
@@ -11,7 +11,7 @@ import TabsPackage from '@components/TabsPackage.astro'
 import CdnImportPackage from '@components/CdnImportPackage.astro'
 import Steps from '@components/Steps.astro'

-Django templates render server-side HTML, which makes Tabler a drop-in: add Tabler classes to your markup and serve the compiled CSS and JS through Django's static files system — no Node build step required at runtime.
+Django templates render server-side HTML, which makes Tabler a drop-in: add Tabler classes to your markup and serve the compiled CSS and JS through Django's static files system - no Node build step required at runtime.

 You will install `@tabler/core`, copy its compiled assets into your static directory, and render a first template with a Tabler card.

@@ -8,7 +8,7 @@ hide-pagination: true
 import DocsCard from '@components/DocsCard.astro'
 import DocsChildrenCards from '@components/DocsChildrenCards.astro'

-Tabler is framework-agnostic: it styles standard HTML, so it works with any stack that renders markup. Each guide below shows the fastest path to a working Tabler page — installing `@tabler/core`, wiring the styles and scripts where your framework expects them, and rendering a first component.
+Tabler is framework-agnostic: it styles standard HTML, so it works with any stack that renders markup. Each guide below shows the fastest path to a working Tabler page - installing `@tabler/core`, wiring the styles and scripts where your framework expects them, and rendering a first component.

 <div class="row g-3">
 <DocsChildrenCards url="/ui/getting-started/frameworks" />
@@ -11,7 +11,7 @@ import TabsPackage from '@components/TabsPackage.astro'
 import CdnImportPackage from '@components/CdnImportPackage.astro'
 import Steps from '@components/Steps.astro'

-Laravel pairs naturally with Tabler: Blade templates render plain server-side HTML, so every Tabler component works out of the box — no wrappers or adapters needed. Styling comes from Tabler CSS, and a small JavaScript bundle powers interactive components such as dropdowns and modals.
+Laravel pairs naturally with Tabler: Blade templates render plain server-side HTML, so every Tabler component works out of the box - no wrappers or adapters needed. Styling comes from Tabler CSS, and a small JavaScript bundle powers interactive components such as dropdowns and modals.

 This guide uses Laravel's default Vite setup. You will install `@tabler/core`, wire the CSS and JS into your Vite entry files, and render a first Blade view with a Tabler card.

@@ -11,7 +11,7 @@ import TabsPackage from '@components/TabsPackage.astro'
 import CdnImportPackage from '@components/CdnImportPackage.astro'
 import Steps from '@components/Steps.astro'

-Symfony's Twig templates render server-side HTML, so Tabler components work without any adapters — you add Tabler classes to your markup and let the asset pipeline deliver the CSS and JS.
+Symfony's Twig templates render server-side HTML, so Tabler components work without any adapters - you add Tabler classes to your markup and let the asset pipeline deliver the CSS and JS.

 This guide uses Webpack Encore. You will install `@tabler/core`, import its assets in your Encore entries, and render a first Twig template with a Tabler card.

@@ -1,12 +1,12 @@
 ---
 title: How to contribute
-summary: This guide explains how to contribute to Tabler, from setting up a development environment to making and testing changes. It covers essential steps like forking the repository, installing dependencies, and submitting a pull request to help improve Tabler's features and functionality.
+summary: "How to contribute to Tabler: set up the repository, make and test a change, add a changeset and open a pull request."
 description: Guide to contributing to Tabler and setting up for development.
 ---
 import Example from '@components/Example.astro';
 import Steps from '@components/Steps.astro'

-Contributions are always welcome and highly encouraged! Whether you're new to open source or a seasoned contributor, your input helps make Tabler better for everyone. If you're new to open source, we recommend reading a [how to contribute](https://opensource.guide/how-to-contribute/) guide to learn more about contributing.
+Contributions are welcome, from a typo fix to a new component. If you haven't contributed to open source before, the [how to contribute](https://opensource.guide/how-to-contribute/) guide explains the basics.

 Not sure where to start? Look for issues labeled [good first issue](https://github.com/tabler/tabler/issues?q=is%3Aissue+is%3Aopen+label%3A%22good+first+issue%22) - they are small and well-scoped.

@@ -48,7 +48,7 @@ To set up Tabler for development on your own machine, follow these steps:

 ### Ensure Node.js and pnpm are installed

-You’ll need Node.js (v22.12 or higher) and pnpm to compile Tabler’s files. If you don’t have them installed, download and install them from the official websites:
+You'll need Node.js (v22.12 or higher) and pnpm to compile Tabler's files. If you don't have them installed, download and install them from the official websites:

 - [Node.js](https://nodejs.org/)
 - [pnpm](https://pnpm.io/) (we use pnpm over other package managers for faster installation).
@@ -7,11 +7,11 @@ description: Get started with Tabler - a free, open-source dashboard UI kit buil

 ## What is Tabler?

-Tabler is fully responsive and compatible with all modern browsers. Thanks to its modern and user-friendly design you can create a fully functional interface that users will love! Choose the [layouts](/ui/layout) and [components](/ui/components) you need and customize them to make your design consistent and eye-catching. Every component has been created with attention to detail to make your interface beautiful!
+Tabler is a UI kit for admin panels and dashboards, built on Bootstrap 5. It gives you [layouts](/ui/layout) and [components](/ui/components) that already work together, so you can pick the ones you need and adjust them to your design. It's responsive and works in every current browser.

 ## What are the benefits?

-Tabler is a perfect solution if you want to create an interface which is not only user-friendly but also fully responsive. Thanks to the big choice of ready-made components, you can customize your design and adapt it to the needs of even the most demanding users. On top of that, Tabler is an open source solution, continuously developed and improved by the open source community.
+You don't have to build the common parts of an app interface from scratch. Cards, tables, forms, navigation and the page layouts are ready, and each of them has a dark mode and an RTL version. Tabler is open source under the MIT license and is developed on GitHub, so you can report a bug, send a fix or read the source of any component.

 <img src="/static/tabler-preview.png" class="hide-theme-dark" alt="Screencap of tabler site showing global traffic and statistics" width="2880" height="2088" />
 <img src="/static/tabler-preview-dark.png" class="hide-theme-light" alt="Screencap of tabler site showing global traffic and statistics" width="2880" height="2088" />
@@ -1,8 +1,8 @@
 ---
 title: Installation
 order: 1
-summary: Learn how to set up Tabler in your project by creating a basic HTML file, adding Tabler’s CSS and JavaScript, and exploring its powerful components to build responsive and visually stunning web applications.
-description: 'Set up Tabler: HTML, CSS, JS, and build stunning UIs.'
+summary: Set up Tabler in a plain HTML file. Create the page, add the CSS and JavaScript from the CDN, and open it in the browser.
+description: 'Set up Tabler in a plain HTML file with the CSS and JavaScript from the CDN.'
 ---

 import Example from '@components/Example.astro'
@@ -13,7 +13,7 @@ import Steps from '@components/Steps.astro'

 Using a framework? See [Tabler framework integration guides](/ui/getting-started/frameworks).

-This guide will take you through the essential steps to set up Tabler in your project, from creating a basic HTML file to incorporating Tabler’s styles and scripts. Let’s dive in!
+This page walks through the shortest way to get Tabler running: one HTML file, two tags from the CDN, and a page you can open in the browser. There's no build step involved.

 ## Setup

@@ -21,7 +21,7 @@ This guide will take you through the essential steps to set up Tabler in your pr

 ### Create a basic HTML file

-Begin by creating a new `index.html` file in the root of your project. This file will serve as the foundation for your Tabler-based interface. Include the basic HTML structure and a `<meta name="viewport" />` tag for proper responsiveness:
+Start with a new `index.html` file in the root of your project. It only needs the usual HTML skeleton and a `<meta name="viewport" />` tag, so the page scales correctly on phones:

 ```html
 <!doctype html>
@@ -39,11 +39,11 @@ Begin by creating a new `index.html` file in the root of your project. This file

 ### Add Tabler CSS and JavaScript

-Enhance your page by including Tabler's CSS and JavaScript files. Use the following links to load the core Tabler styles and scripts from the CDN:
+Next, add Tabler's CSS and JavaScript. These two tags load the core files from the CDN:

 <CdnImportPackage />

-Update your HTML file to include these resources:
+Put the stylesheet in `<head>` and the script at the end of `<body>`. The file then looks like this:

 <Code
  lang="html"
@@ -62,14 +62,14 @@ Update your HTML file to include these resources:
 </html>`}
 />

-This setup includes the Tabler CSS and JavaScript via a CDN, providing a responsive and functional base for your project.
+That's the whole setup. The CSS covers the layout and components, and the script adds the interactive parts such as dropdowns and modals.

-You can also download the files and include them locally in your project. For more information, see the [Download](/ui/getting-started/download) page.
+If you'd rather not depend on a CDN, you can download the files and serve them from your own project. The [Download](/ui/getting-started/download) page explains how.

 ### Open in your browser

-Save the file and open it in your browser. You should see your first Tabler-powered page! From here, you can start adding layouts and components to create a fully functional and visually appealing web application.
+Save the file and open it in your browser. You should see your first page styled by Tabler. From here you can add a layout, drop in components and build up the app.

 </Steps>

-With these simple steps, you're ready to explore Tabler's features and build stunning web interfaces. For inspiration and guidance, you can view live demos at [preview.tabler.io](https://preview.tabler.io) and consult our [official documentation](https://docs.tabler.io) for detailed instructions and examples.
+If you want to see what's possible, the demo pages at [preview.tabler.io](https://preview.tabler.io) show every layout and component in use. The rest of this documentation covers each of them in detail.
@@ -1,11 +1,11 @@
 ---
 title: Tabler license
-summary: The MIT license grants you the flexibility to use Tabler in commercial or personal projects, modify its code, and distribute it freely. Ensure you include the required license and copyright notices to stay compliant with the terms.
+summary: Tabler is MIT licensed. You can use it in commercial and personal projects, modify it and distribute it, as long as you keep the license and copyright notices.
 description: "Tabler's MIT license: freedom to use, modify, and share."
 ---
 import Example from '@components/Example.astro';

-Tabler is an open-source project licensed under the **MIT license**, giving you extensive freedom to use, modify, and distribute the software. This license ensures that you can adapt Tabler to your needs while maintaining the required attributions. While attribution is not required, it is greatly appreciated to acknowledge the hard work of the developers.
+Tabler is open source under the **MIT license**. You can use, modify and distribute it, as long as you keep the license and copyright notices. A credit to Tabler in your project isn't required, but it's appreciated.

 ## What you can do with Tabler

@@ -19,7 +19,7 @@ The MIT license allows you to:

 ## What you cannot do with Tabler

- The software is provided **“as is”**, meaning you cannot hold the authors or contributors liable for any issues, bugs, or damages that may arise from its use.
+- The software is provided **"as is"**, meaning you cannot hold the authors or contributors liable for any issues, bugs, or damages that may arise from its use.

 ## What you must do when using Tabler

@@ -29,5 +29,3 @@ When using Tabler, you must:
 2. Include the **copyright notice** in all copies of the work, except for the footer of the example HTML pages provided in the repository.

 For more details, please refer to the full [Tabler License](https://github.com/tabler/tabler/blob/main/LICENSE).
-
-By adhering to these requirements, you help ensure the continued openness and usability of Tabler for everyone. Thank you for supporting open-source software!
@@ -10,8 +10,8 @@ Large language models work better when they read the real documentation instead

 [llms.txt](https://llmstxt.org) is a simple convention. A site puts one markdown file at its root that describes what the site is about and links to the pages worth reading. Tabler follows it:

- `https://docs.tabler.io/llms.txt` — the index of the whole documentation.
- `https://docs.tabler.io/<page>.md` — the markdown version of a single page.
+- `https://docs.tabler.io/llms.txt` - the index of the whole documentation.
+- `https://docs.tabler.io/<page>.md` - the markdown version of a single page.

 Both are plain text. You can open them in a browser, download them with `curl`, or paste the url into a chat with an AI assistant.

@@ -1,7 +1,7 @@
 ---
 title: RTL support
 summary: Turn on right-to-left layouts for Arabic, Hebrew, and other RTL languages, and learn which styles flip automatically.
-description: Learn how to enable RTL in Tabler, which stylesheet to load, how the RTL CSS is generated, and which utility classes are direction-aware.
+description: How to enable RTL in Tabler, which stylesheet to load, how the RTL CSS is generated and which utilities are direction-aware.
 related: [/ui/getting-started/upgrade, /ui/components/popover]
 ---
 import Example from '@components/Example.astro';
@@ -22,7 +22,7 @@ You don't need a separate stylesheet for this to work. Setting `dir="rtl"` is en

 ## The `*.rtl.css` files

-Tabler still builds and publishes an RTL variant of every stylesheet, generated with [rtlcss](https://rtlcss.com/). These exist for a few rules that aren't logical-property-based yet — see [Known gap: text alignment](#known-gap-text-alignment) below — and for projects that upgraded before the logical-properties change and don't want to touch their markup.
+Tabler still builds and publishes an RTL variant of every stylesheet, generated with [rtlcss](https://rtlcss.com/). These exist for a few rules that aren't logical-property-based yet - see [Known gap: text alignment](#known-gap-text-alignment) below - and for projects that upgraded before the logical-properties change and don't want to touch their markup.

 Stylesheet|RTL variant
 -|-
@@ -35,7 +35,7 @@ Stylesheet|RTL variant
 `dist/css/tabler-themes.css`|`dist/css/tabler-themes.rtl.css`
 `dist/css/tabler-vendors.css`|`dist/css/tabler-vendors.rtl.css`

-Each of these also has a minified `.rtl.min.css` version. If you load an RTL stylesheet, keep `dir="rtl"` on `<html>` too — the CSS and the `dir` attribute are meant to be used together.
+Each of these also has a minified `.rtl.min.css` version. If you load an RTL stylesheet, keep `dir="rtl"` on `<html>` too - the CSS and the `dir` attribute are meant to be used together.

 ```diff
  <html dir="rtl">
@@ -47,7 +47,7 @@ Each of these also has a minified `.rtl.min.css` version. If you load an RTL sty

 The `.rtl.css` files are not hand-written. Tabler's build compiles each stylesheet as usual, then runs it through rtlcss, which flips physical values like `left`/`right`, `margin-left`/`margin-right`, and text direction to their mirrored equivalent.

-If you compile Tabler from source and write your own SCSS, keep this in mind: anything you add to a stylesheet that also runs through the RTL build gets mirrored the same way. When a rule must stay fixed in both directions — an icon, a chevron, a background image position — wrap it in an rtlcss control comment:
+If you compile Tabler from source and write your own SCSS, keep this in mind: anything you add to a stylesheet that also runs through the RTL build gets mirrored the same way. When a rule must stay fixed in both directions - an icon, a chevron, a background image position - wrap it in an rtlcss control comment:

 ```scss
 // Skip the next declaration only
@@ -68,7 +68,7 @@ These comments are read by rtlcss at build time, not by the browser, so they onl

 ## Direction-aware utilities

-Most of Tabler's spacing and position utilities use CSS logical properties, so they flip automatically with `dir="rtl"` — no RTL stylesheet needed:
+Most of Tabler's spacing and position utilities use CSS logical properties, so they flip automatically with `dir="rtl"` - no RTL stylesheet needed:

 Class|Physical equivalent (LTR)|CSS property
 -|-|-
@@ -1,12 +1,12 @@
 ---
 title: Upgrade to 1.5
-summary: Move your project from Tabler 1.4 to 1.5. This guide lists every breaking change, with a before and after example for each one, so you know exactly what to update in your markup, JavaScript and Sass.
+summary: Move a project from Tabler 1.4 to 1.5. Every breaking change is listed with a before and after example for markup, JavaScript and Sass.
 description: Upgrade guide from Tabler 1.4 to 1.5 with all breaking changes, renamed classes and Sass updates.
 added-in: '1.5.0'
 related: [/ui/getting-started/rtl]
 ---

-Most projects only use the compiled CSS and JavaScript from `dist/`. If that is you, the upgrade is short: update the package, remove Bootstrap, and check the [color mode default](#color-mode-defaults-to-auto) and the [visual changes](#visual-changes). Projects that compile Tabler from the Sass sources have more work to do — see [Sass changes](#sass-changes).
+Most projects only use the compiled CSS and JavaScript from `dist/`. If that is you, the upgrade is short: update the package, remove Bootstrap, and check the [color mode default](#color-mode-defaults-to-auto) and the [visual changes](#visual-changes). Projects that compile Tabler from the Sass sources have more work to do - see [Sass changes](#sass-changes).

 ## Overview

@@ -14,18 +14,18 @@ Use this table to find the changes that affect you.

 If you…|You need to…
 ---|---
-Load `dist/css` and `dist/js`|Remove Bootstrap's CSS and JS — Tabler now ships them
+Load `dist/css` and `dist/js`|Remove Bootstrap's CSS and JS - Tabler now ships them
 Load `bootstrap.bundle.min.js`|Remove it, or components will start twice
 Use `window.bootstrap.Modal`|Use `window.tabler.Modal`
 Compile `scss/tabler.scss` yourself|Switch to `@use … with ()` and add the PostCSS prefix step
 Override Sass variables|Check the [list of removed variables](#removed-sass-variables)
 Use `.badges-list` or `.tags-list`|Rename to `.badge-list` and `.tag-list` (old names still work)
 Use ApexCharts|Update to ApexCharts 7
-Use Turbo with Tabler|The built-in integration is gone — see [Turbo](#turbo-integration-removed)
-Load `tabler-theme.js`|Pages follow the OS color scheme now — see [Color mode](#color-mode-defaults-to-auto)
+Use Turbo with Tabler|The built-in integration is gone - see [Turbo](#turbo-integration-removed)
+Load `tabler-theme.js`|Pages follow the OS color scheme now - see [Color mode](#color-mode-defaults-to-auto)
 Use payment provider icons|Check the [removed providers](#removed-payment-providers)
 Link files inside `dist/libs`|Check the [moved paths](#smaller-distlibs-folder)
-Load `tabler.rtl.css`|You can drop it — plain `tabler.css` now handles RTL
+Load `tabler.rtl.css`|You can drop it - plain `tabler.css` now handles RTL

 ## Update the package

@@ -193,7 +193,7 @@ import prefixCustomProperties from 'postcss-prefix-custom-properties'
 const result = await postcss([
  prefixCustomProperties({
    prefix: 'tblr-',
-    // Vendor stylesheets read their own variable names — never prefix these
+    // Vendor stylesheets read their own variable names - never prefix these
    ignore: [/^--tblr-/, /^--bs-/, /^--fc-/, /^--gl-/, /^--litepicker-/, /^--plyr-/, /^--ts-/, '--section-bg'],
  }),
 ]).process(css, { from: undefined })
@@ -267,14 +267,14 @@ Old|New|Status

 These changes are not breaking, but they change how a page looks. Check your screens after the upgrade.

- **Fonts** — the defaults are now the system fonts of the device, instead of Inter. To keep your old stack, set `--tblr-font-sans-serif`.
- **Shadows** — the `--tblr-shadow-*` tokens use a new `xs` to `2xl` scale, plus `overlay`, with softer defaults.
- **Colors** — body text is lighter, dark mode borders and disabled inputs are easier to see, and `--tblr-gray-*-fg` tokens now map straight to `--tblr-gray-*`.
- **Links** — in dark mode, links use a lighter tint of the primary color, so they meet the 4.5:1 contrast ratio on dark surfaces. Override `--tblr-link-color` to change it.
- **Sizes** — `.form-control`, `.btn` and `.input-group` now agree on `sm` and `lg` sizes, `.btn-icon` is square, and `.icon-sm` uses a `1.5` stroke width.
- **Cards** — `--tblr-card-header-bg` and `--tblr-card-footer-bg` can be set on their own, and the card status bar is `3px`.
- **Layout** — `scrollbar-gutter: stable` on `html` removes the white gap next to the scrollbar.
- **Trending** — the component uses the `arrow-up` and `arrow-down` icons instead of `trending-up` and `trending-down`.
+- **Fonts**: the defaults are now the system fonts of the device, instead of Inter. To keep your old stack, set `--tblr-font-sans-serif`.
+- **Shadows**: the `--tblr-shadow-*` tokens use a new `xs` to `2xl` scale, plus `overlay`, with softer defaults.
+- **Colors**: body text is lighter, dark mode borders and disabled inputs are easier to see, and `--tblr-gray-*-fg` tokens now map straight to `--tblr-gray-*`.
+- **Links**: in dark mode, links use a lighter tint of the primary color, so they meet the 4.5:1 contrast ratio on dark surfaces. Override `--tblr-link-color` to change it.
+- **Sizes**: `.form-control`, `.btn` and `.input-group` now agree on `sm` and `lg` sizes, `.btn-icon` is square, and `.icon-sm` uses a `1.5` stroke width.
+- **Cards**: `--tblr-card-header-bg` and `--tblr-card-footer-bg` can be set on their own, and the card status bar is `3px`.
+- **Layout**: `scrollbar-gutter: stable` on `html` removes the white gap next to the scrollbar.
+- **Trending**: the component uses the `arrow-up` and `arrow-down` icons instead of `trending-up` and `trending-down`.

 ## RTL

@@ -290,7 +290,7 @@ The `*.rtl.css` files are still published, so nothing breaks if you keep them. S

 ## Third party libraries

- **ApexCharts** moved from 3.54 to 7.0. If you install ApexCharts yourself, update it too and read the [ApexCharts changelog](https://github.com/apexcharts/apexcharts.js/releases) — the major versions renamed several options. Charts also read `--chart-{id}-color-{index}` variables now.
+- **ApexCharts** moved from 3.54 to 7.0. If you install ApexCharts yourself, update it too and read the [ApexCharts changelog](https://github.com/apexcharts/apexcharts.js/releases) - the major versions renamed several options. Charts also read `--chart-{id}-color-{index}` variables now.
 - **Tabler Icons** moved to 3.46, and **Tabler Illustrations** to 1.16.

 ## Browser support
@@ -2,7 +2,7 @@
 title: Tabler UI
 order: 1
 description: Free and open source web application UI kit based on Bootstrap
-summary: Tabler UI is a carefully crafted collection of modern and responsive user interface components. Built on top of Bootstrap, it helps developers create stunning and functional web applications quickly and efficiently.
+summary: Tabler UI is a set of responsive interface components built on Bootstrap, for admin panels, dashboards and web apps.
 ---

 import { Image } from 'astro:assets'
@@ -1,8 +1,8 @@
 ---
 title: Layout
 order: 3
-description: Learn how to structure Tabler pages - navigation placement, content arrangement, and page headers that keep your app consistent.
-summary: The layout section covers essential tools and techniques for structuring content and organizing UI elements, helping you build visually appealing and functional designs.
+description: How Tabler pages are structured, from navigation placement and content arrangement to page headers.
+summary: "How Tabler pages are structured: where the navigation sits, how content is arranged and how page headers behave."
 ---

 Layout defines how your pages are structured: where navigation sits, how content is arranged, and how page headers behave. Use these patterns to keep every page of your application consistent.
@@ -1,7 +1,7 @@
 ---
 title: Navbars
-summary: A navbar serves as a central navigation tool, offering users quick and easy access to key sections of a website or application, improving usability and enhancing the overall user experience.
-description: Create and customize responsive navigation bars with ease.
+summary: A navbar is the horizontal bar at the top of the page with the logo, the main links and controls such as search or a user menu.
+description: Responsive navigation bars, with the markup, the variants and a language selector.
 related: [/ui/layout/page-layouts, /ui/components/dropdown]
 ---

@@ -10,20 +10,19 @@ import Logo from '@shared/components/navbar/Logo.astro'
 import Icon from '@ui/Icon.astro'
 import CodeDocs from '@components/CodeDocs.astro';

-The navbar is a core component of any website or application, serving as the primary navigation tool. It provides users with quick access to key sections, enhancing usability and improving the overall user experience. Positioned typically at the top of the page, the navbar can contain links, [buttons](/ui/components/button), branding elements,
-and even interactive components like [dropdown menus](/ui/components/dropdown) or search bars.
+A navbar is the horizontal bar at the top of the page. It holds the logo, the main links and often a search field, [buttons](/ui/components/button) or [dropdown menus](/ui/components/dropdown) such as a user menu.

-With Tabler's utility classes, creating and customizing a responsive navbar is straightforward. Whether you’re building a simple site or a complex dashboard, Tabler’s navbar utilities offer the flexibility to design navigation that aligns perfectly with your project’s requirements.
+On small screens the links collapse behind a toggle button, and the same markup works in the light and the dark color mode.

 ## Sample navbar

-To create a navbar, use the `.navbar` class. The navbar is a horizontal bar that contains links to different sections of a website. It is typically placed at the top of the page and is used to provide navigation to the rest of the site.
+Start with the `.navbar` class on a `header` element. `navbar-expand-md` sets the breakpoint at which the collapsed menu turns into a row of links, and `d-print-none` hides the bar when the page is printed.

 ```html
 <header class="navbar navbar-expand-md d-print-none">...</header>
 ```

-The navbar can contain links, buttons, and other elements. You can customize the appearance of the navbar by adding classes to the elements inside it.
+Inside it, a `container-xl` keeps the content aligned with the page. The full markup with the brand, the toggler, the links and a user menu looks like this:

 <Example>
 <header class="navbar navbar-expand-md d-print-none">
@@ -1,20 +1,18 @@
 ---
 title: Navs and tabs
-summary: This guide covers the basics of creating different types of navigation bars and tabs, including horizontal, vertical, pill-shaped, and underline-styled navs.
-description: "Essential guide to nav styles: tabs, pills, dropdowns, and more."
+summary: "How to build navs and tabs: horizontal and vertical navs, tabs, pills, the underline style and tabs with a dropdown."
+description: "Nav styles: tabs, pills, underline, dropdowns and vertical navs."
 related: [/ui/components/tab]
 ---
 import Example from '@components/Example.astro';
 import CodeDocs from '@components/CodeDocs.astro';

-Navigation bars are essential components of modern web applications, providing users with intuitive ways to navigate between different sections and content. This guide explores various types of navigation bars and tabs that can be easily implemented using predefined classes in HTML and CSS. Each type serves specific use cases, from horizontal and vertical layouts to tabbed interfaces and dropdown menus. By utilizing these examples, developers can enhance the usability and aesthetics of their web projects.
+A nav is a list of links, and the classes on this page change how that list looks: a horizontal row, a vertical column, tabs, pills or a line under the active link. All of them start from the same `.nav` markup, so you can switch between styles by changing one class.

 ## Horizontal nav

 If you want to create a horizontal navigation bar, you can use the `.nav` class. The `.nav-item` class is used to style each item within the navigation bar, and `.nav-link` is applied to the links. The `.active` class highlights the current active link, while the `.disabled` class styles non-clickable links.

-Look at the example below to see how the horizontal navigation bar is displayed.
-
 <Example>
 <ul class="nav">
  <li class="nav-item"><a class="nav-link active" aria-current="page" href="#">Active</a></li>
@@ -25,7 +23,7 @@ Look at the example below to see how the horizontal navigation bar is displayed.

 ## Vertical nav

-To create a vertical navigation bar, add the `.flex-column` class to the `.nav` element. This arranges the navigation items in a column instead of a row, making it suitable for sidebars or vertical menus.
+To create a vertical navigation bar, add the `.flex-column` class to the `.nav` element. This arranges the items in a column instead of a row, which is what you want in a sidebar.

 ```html
 <ul class="nav flex-column">
@@ -33,8 +31,6 @@ To create a vertical navigation bar, add the `.flex-column` class to the `.nav`
 </ul>
 ```

-There is an example below to see how the vertical navigation bar is displayed.
-
 <Example>
 <ul class="nav flex-column">
  <li class="nav-item"><a class="nav-link active" aria-current="page" href="#">Active</a></li>
@@ -45,7 +41,7 @@ There is an example below to see how the vertical navigation bar is displayed.

 ## Tabs

-To create a tabbed navigation interface, use the `.nav-tabs` class. This is ideal for displaying different content sections within a single interface, where each tab represents a section.
+To create a tabbed navigation interface, use the `.nav-tabs` class. Use it when each link switches a panel of content on the same page, so every tab stands for one section.

 ```html
 <ul class="nav nav-tabs">
@@ -53,8 +49,6 @@ To create a tabbed navigation interface, use the `.nav-tabs` class. This is idea
 </ul>
 ```

-The example below shows how the tabbed navigation interface is displayed.
-
 <Example>
 <ul class="nav nav-tabs">
  <li class="nav-item"><a class="nav-link active" aria-current="page" href="#">Active</a></li>
@@ -65,7 +59,7 @@ The example below shows how the tabbed navigation interface is displayed.

 ## Pills

-For a pill-shaped navigation style, use the `.nav-pills` class. This is a great choice for a sleek, modern look, especially in the interactive UI components.
+For a pill-shaped navigation style, use the `.nav-pills` class. The active link gets a filled, rounded background instead of a border.

 <Example>
 <ul class="nav nav-pills">
@@ -77,7 +71,7 @@ For a pill-shaped navigation style, use the `.nav-pills` class. This is a great

 ## Underline

-To create a navigation bar with an underline effect for active links, use the `.nav-underline` class. This provides a clean and minimalistic style.
+To create a navigation bar with an underline effect for active links, use the `.nav-underline` class. The active link is marked with a line under it and nothing else.

 <Example>
 <ul class="nav nav-underline">
@@ -89,7 +83,7 @@ To create a navigation bar with an underline effect for active links, use the `.

 ## Tabs with dropdown

-You can enhance tabs by adding [dropdown menus](/ui/components/dropdown) using the `.dropdown` class inside a `.nav-tabs` structure. This allows for additional options under a single tab, improving the navigation experience.
+A tab can open a [dropdown menu](/ui/components/dropdown). Put the `.dropdown` markup inside a `.nav-item` of the `.nav-tabs` list. That's useful when one tab has several related options and you don't want a separate tab for each.

 ```html
 <ul class="nav nav-tabs">
@@ -111,8 +105,6 @@ You can enhance tabs by adding [dropdown menus](/ui/components/dropdown) using t
 </ul>
 ```

-Example below shows how tabs with dropdown menus are displayed.
-
 <Example overflow="visible">
 <ul class="nav nav-tabs">
  <li class="nav-item"><a class="nav-link active" aria-current="page" href="#">Active</a></li>
@@ -1,6 +1,6 @@
 ---
 title: Page headers
-summary: Page heading examples for Tabler
+summary: Page header layouts with a title, a pretitle, breadcrumbs, meta information and action buttons.
 description: Ready-to-use page header examples with titles, subtitles, breadcrumbs, and action buttons for consistent page layouts.
 related: [/ui/layout/page-layouts, /ui/components/breadcrumb]
 ---
@@ -94,7 +94,7 @@ Combine the page title with a result count, a search input, and a primary action

 ## Bordered header

-A page header with a border to separate content is an effective way to organize and present information in a clear and visually appealing way.
+Add `page-header-border` to draw a line under the header, which separates it from the content below.

 <Example>
 <div class="page-header page-header-border">
@@ -122,9 +122,7 @@ A page header with a border to separate content is an effective way to organize

 ## Header with breadcrumb and actions

-A page header with [breadcrumb](/ui/components/breadcrumb) and actions is a common design element found in many websites and applications. The header typically appears at the top of the page and includes a breadcrumb trail, which shows the user the path they have taken to reach the current page. The breadcrumb can be clickable, allowing the user to navigate back to previous pages.
-
-In addition to the breadcrumb, the header often includes actions or buttons that allow the user to perform common tasks related to the current page. These actions may include things like adding a new item, editing existing content, or deleting items.
+A [breadcrumb](/ui/components/breadcrumb) above the title shows where the page sits in the hierarchy, and the actions on the right hold the tasks for this page, such as adding or editing an item.

 <Example>
 <div class="page-header">
@@ -1,7 +1,7 @@
 ---
 title: Page layouts
 summary: Learn how to build a sample version of the dashboard
-description: Learn how to combine containers, navigation, and page structure to build a complete dashboard layout step by step.
+description: Combine containers, navigation and page structure into a complete dashboard layout, step by step.
 related: [/ui/layout/page-headers, /ui/layout/navbars]
 ---

@@ -242,7 +242,7 @@ Group related menu items with a label. Add a `nav-section-title` list item befor
 </ul>
 ```

-The label is aligned with the item text and muted, so it does not compete with the links. In the folded sidebar, the label text is replaced with a short separator line centered in the gap between the groups, and the label keeps its height, so the menu does not shift when the sidebar folds. Section labels render only in vertical navbars — a horizontal navbar hides them.
+The label is aligned with the item text and muted, so it does not compete with the links. In the folded sidebar, the label text is replaced with a short separator line centered in the gap between the groups, and the label keeps its height, so the menu does not shift when the sidebar folds. Section labels render only in vertical navbars - a horizontal navbar hides them.

 ### Sidebar footer and user block

@@ -2,7 +2,7 @@
 title: Advanced select
 seoTitle: Advanced select (Tom Select)
 order: 8
-summary: Tom Select turns a normal `<select>` into a searchable, keyboard-friendly dropdown. Use it for long option lists, multi-value fields, or options that need an avatar, flag, or badge next to the text.
+summary: Tom Select turns a `<select>` into a searchable, keyboard-friendly dropdown, for long option lists, multi-value fields and options with an avatar or a flag.
 docs-libs: [tom-select]
 description: Build searchable single and multi-value selects with the Tom Select plugin, including optgroups, validation states, and rich options with avatars or flags.
 related: [/ui/forms/select-group, /ui/forms/elements]
@@ -135,7 +135,7 @@ Add `.is-valid` or `.is-invalid` to the `<select>` to show a validation state. T

 ### Rich options

-An option can carry extra markup — an avatar, a flag, a badge — through a `data-custom-properties` attribute. Read it in a custom `render.option` / `render.item` function and show it next to the option text.
+An option can carry extra markup - an avatar, a flag, a badge - through a `data-custom-properties` attribute. Read it in a custom `render.option` / `render.item` function and show it next to the option text.

 <Example>
 <select class="form-select" id="select-avatar" data-placeholder="Assign to…">
@@ -191,7 +191,7 @@ These are the options you will need most often. Tom Select has more, and they ar

 - Always add a `<label>` linked to the `<select>` with `for` and `id`. Tom Select's generated markup does not replace the need for a label.
 - The dropdown can be operated with the keyboard: type to search, arrow keys to move between options, <kbd>Enter</kbd> to pick one, and <kbd>Backspace</kbd> to remove the last tag on a multi-value select.
- When using `render.option`, keep enough text content in the rendered HTML — an avatar or flag alone does not tell a screen reader user which option it is.
+- When using `render.option`, keep enough text content in the rendered HTML - an avatar or flag alone does not tell a screen reader user which option it is.
 - Escape user-supplied text in custom render functions with the `escape` argument, so option text can never break out of the generated HTML.

 <script>{`
@@ -1,7 +1,7 @@
 ---
 title: Chart
 docs-libs: [apexcharts]
-summary: 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 draws charts with ApexCharts and ships a container class, a color palette and theme tokens that make them match the interface.
 description: Build interactive line, bar, pie, and other charts with ApexCharts. Copy ready-to-use configurations styled to match Tabler.
 related: [/ui/plugins/countup, /ui/components/trending]
 ---
@@ -156,7 +156,7 @@ See the [ApexCharts documentation](https://apexcharts.com/docs/) for the full li

 ### Line chart

-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:
+A line chart shows how values change over time, such as traffic or sales per day. This example has three series: session duration, page views and total visits:

 <Example>
  <div class="card">
@@ -168,7 +168,7 @@ Line charts are an essential tool for visualizing data trends over time. They ar

 ### Area chart

-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:
+An area chart is a line chart with the space under the line filled in, which makes the size of each series easier to compare. This example has two series and smooth curves:

 <Example>
  <div class="card">
@@ -180,7 +180,7 @@ Area charts are ideal for representing cumulative data over time. They add visua

 ### Bar chart

-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:
+A bar chart compares values across categories. This example stacks the bars, so each bar also shows the total:

 <Example>
  <div class="card">
@@ -192,7 +192,7 @@ Bar charts are highly effective for comparing data across different categories.

 ### Pie chart

-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:
+A pie chart shows how a whole splits into parts. This example shows the share of each category:

 <Example>
  <div class="card">
@@ -204,7 +204,7 @@ Pie charts are a simple and effective way to visualize proportions and ratios. T

 ### Heatmap chart

-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:
+A heatmap encodes each value as a color, which makes a pattern in a large grid easy to see. This example shows a distribution across a grid:

 <Example>
  <div class="card">
@@ -300,7 +300,7 @@ A funnel shows how many items are left at each step of a process. It is a horizo

 ### Advanced example

-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:
+You can combine several series and custom options in one chart. This example shows referrals from Facebook, Twitter and Dribbble:

 <Example>
  <div class="card">
@@ -377,7 +377,7 @@ Charts that share a `chart.group` name move together. Hover one and the others s

 ## Legend key

-ApexCharts draws its own legend, but you can also build a plain-HTML legend next to a chart's title — for example to label the series above the chart instead of below it. Add a `legend` span before each label and color it with a `bg-*` utility class.
+ApexCharts draws its own legend, but you can also build a plain-HTML legend next to a chart's title - for example to label the series above the chart instead of below it. Add a `legend` span before each label and color it with a `bg-*` utility class.

 <Example>
 <div class="d-flex align-items-center gap-3">
@@ -1,7 +1,7 @@
 ---
 title: Color picker
 order: 9
-summary: A color picker lets users pick a color from a gradient, a set of swatches, or by typing a value. Use it in theme settings, tag colors, and any field that stores a color.
+summary: A color picker lets users pick a color from a gradient, a set of swatches or a typed value, for theme settings and tag colors.
 docs-libs: [coloris.js]
 description: Let users pick a color in a form.
 related: [/ui/plugins/date-picker]