hace 7 meses · 93e156bfe1
--- a/docs/_includes/logo.html
+++ b/docs/_includes/logo.html
--- a/docs/_includes/menu.html
+++ b/docs/_includes/menu.html
@@ -0,0 +1 @@
 
				+menu
			
--- a/docs/_includes/default.html
+++ b/docs/_includes/default.html
@@ -9,15 +9,20 @@
 
				 </head> 
			
 
				 <body>
			
 
				 	<div class="navbar">
			
 
				-		<div class="container">
			
 
				-			Lorem ipsum dolor, sit amet consectetur adipisicing elit. Harum voluptatem rem beatae, quia odit quo corporis exercitationem modi, laborum commodi ratione quos possimus eius incidunt quas in mollitia, molestias magni?
			
 
				+		<div class="container-xl">
			
 
				+			<div class="navbar-brand">
			
 
				+				{% include "logo.html" %}
			
 
				+			</div>
			
 
				+			<div class="navbar-nav flex-row order-md-last">13</div>
			
 
				 		</div>
			
 
				 	</div>
			
 
				 	<div class="container">
			
 
				 		<div class="row">
			
 
				-			<div class="col-3">MENU</div>
			
 
				+			<div class="col-3">{{ include "menu.html" }}</div>
			
 
				 			<div class="col">{{ content }}</div>
			
 
				 		</div>
			
 
				 	</div>
			
 
				+
			
 
				+	<script src="/core/js/tabler.esm.js"></script>
			
 
				 </body>
			
 
				 </html>
			
--- a/docs/eleventy.config.mjs
+++ b/docs/eleventy.config.mjs
@@ -13,4 +13,17 @@ export default function (eleventyConfig) {
 
				 		dynamicPartials: true,
			
 
				 		jekyllWhere: true,
			
 
				 	});
			
 
				+
			
 
				+	return {
			
 
				+		dir: {
			
 
				+			output: "dist",
			
 
				+			includes: "_includes",
			
 
				+			data: "_data",
			
 
				+			layouts: "_layouts",
			
 
				+		},
			
 
				+		passthroughFileCopy: true,
			
 
				+		templateFormats: ["html", "md", "liquid"],
			
 
				+		htmlTemplateEngine: "liquid",
			
 
				+		markdownTemplateEngine: "liquid",
			
 
				+	}
			
 
				 };
			
--- a/docs/icons/index.mdx
+++ b/docs/icons/index.mdx
@@ -3,6 +3,7 @@ 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 customisation 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.
			
 
				 order: 2
			
 
				 description: Over 5000 pixel-perfect icons for web design and development
			
 
				+layout: default
			
 
				 ---
			
 
				 
			
 
				 ## Browse icons
			
--- a/docs/icons/libraries/index.mdx
+++ b/docs/icons/libraries/index.mdx
--- a/docs/icons/libraries/preact.mdx
+++ b/docs/icons/libraries/preact.mdx
@@ -2,6 +2,7 @@
 
				 title: Preact
			
 
				 description: Tabler Icons library for Preact framework.
			
 
				 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.
			
 
				+layout: default
			
 
				 ---
			
 
				 
			
 
				 ![](/docs/icons/package-preact.png)
			
--- a/docs/icons/libraries/react.mdx
+++ b/docs/icons/libraries/react.mdx
@@ -2,6 +2,7 @@
 
				 title: React
			
 
				 description: Tabler Icons library for React framework.
			
 
				 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.
			
 
				+layout: default
			
 
				 ---
			
 
				 
			
 
				 ![](/docs/icons/package-react.png)
			
--- a/docs/icons/libraries/solidjs.mdx
+++ b/docs/icons/libraries/solidjs.mdx
@@ -2,6 +2,7 @@
 
				 title: SolidJS
			
 
				 description: Tabler Icons library for SolidJS framework.
			
 
				 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.
			
 
				+layout: default
			
 
				 ---
			
 
				 
			
 
				 ![](/docs/icons/package-solidjs.png)
			
--- a/docs/icons/libraries/svelte.mdx
+++ b/docs/icons/libraries/svelte.mdx
@@ -2,6 +2,7 @@
 
				 title: Svelte
			
 
				 description: Tabler Icons library for Svelte framework.
			
 
				 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.
			
 
				+layout: default
			
 
				 ---
			
 
				 
			
 
				 ![](/docs/icons/package-svelte.png)
			
--- a/docs/icons/libraries/vue.mdx
+++ b/docs/icons/libraries/vue.mdx
@@ -2,6 +2,7 @@
 
				 title: Vue
			
 
				 description: Tabler Icons library for Vue framework.
			
 
				 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.
			
 
				+layout: default
			
 
				 ---
			
 
				 
			
 
				 ![](/docs/icons/package-vue.png)
			
--- a/docs/icons/libraries/webfont.mdx
+++ b/docs/icons/libraries/webfont.mdx
@@ -2,6 +2,7 @@
 
				 title: Webfont
			
 
				 description: Tabler Icons as a webfont.
			
 
				 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.
			
 
				+layout: default
			
 
				 ---
			
 
				 
			
 
				 ![](/docs/icons/package-webfont.png)
			
--- a/docs/icons/plugins/figma.mdx
+++ b/docs/icons/plugins/figma.mdx
@@ -2,6 +2,7 @@
 
				 title: Figma plugin
			
 
				 description: Use Tabler Icons directly in 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.
			
 
				+layout: default
			
 
				 ---
			
 
				 
			
 
				 ![Tabler Figma Plugin](/docs/icons/figma-plugin.png)
			
--- a/docs/icons/plugins/index.mdx
+++ b/docs/icons/plugins/index.mdx
--- a/docs/icons/static-files/eps.mdx
+++ b/docs/icons/static-files/eps.mdx
@@ -1,6 +1,7 @@
 
				 ---
			
 
				 title: EPS version
			
 
				 description: Download Tabler Icons in EPS format.	
			
 
				+layout: default
			
 
				 ---
			
 
				 
			
 
				 ![](/docs/icons/package-eps.png)
			
--- a/docs/icons/static-files/index.mdx
+++ b/docs/icons/static-files/index.mdx
--- a/docs/icons/static-files/pdf.mdx
+++ b/docs/icons/static-files/pdf.mdx
@@ -1,6 +1,7 @@
 
				 ---
			
 
				 title: PDF version
			
 
				 description: Download Tabler Icons in PDF format.
			
 
				+layout: default
			
 
				 ---
			
 
				 
			
 
				 ![](/docs/icons/package-pdf.png)
			
--- a/docs/icons/static-files/png.mdx
+++ b/docs/icons/static-files/png.mdx
@@ -1,6 +1,7 @@
 
				 ---
			
 
				 title: PNG version
			
 
				 description: Download Tabler Icons in PNG format.
			
 
				+layout: default
			
 
				 ---
			
 
				 
			
 
				 ![](/docs/icons/package-png.png)
			
--- a/docs/icons/static-files/svg.mdx
+++ b/docs/icons/static-files/svg.mdx
@@ -1,6 +1,7 @@
 
				 ---
			
 
				 title: SVG version
			
 
				 description: Download Tabler Icons in SVG format.
			
 
				+layout: default
			
 
				 ---
			
 
				 
			
 
				 ![](/docs/icons/package-svg.png)
			
--- a/docs/illustrations/index.mdx
+++ b/docs/illustrations/index.mdx
@@ -3,6 +3,7 @@ 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.
			
 
				+layout: default
			
 
				 ---
			
 
				 
			
 
				-![](/docs/cover-illustrations.png) 
			
 
				+! [ ] (/docs/cover-illustrations.png) 
			
--- a/docs/illustrations/introduction/contents.mdx
+++ b/docs/illustrations/introduction/contents.mdx
@@ -2,6 +2,7 @@
 
				 title: Contents
			
 
				 description: Explore Tabler Illustrations folder structure
			
 
				 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.
			
 
				+layout: default
			
 
				 ---
			
 
				 
			
 
				 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.
			
--- a/docs/illustrations/introduction/customization.mdx
+++ b/docs/illustrations/introduction/customization.mdx
@@ -2,6 +2,7 @@
 
				 title: Customization
			
 
				 description: Customize the illustrations to match your brand.
			
 
				 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.
			
 
				+layout: default
			
 
				 ---
			
 
				 
			
 
				 ```html example columns={1} centered vertical height="25rem"
			
--- a/docs/illustrations/introduction/index.mdx
+++ b/docs/illustrations/introduction/index.mdx
--- a/docs/illustrations/introduction/license.mdx
+++ b/docs/illustrations/introduction/license.mdx
@@ -1,5 +1,6 @@
 
				 ---
			
 
				 title: Tabler Illustrations License
			
 
				+layout: default
			
 
				 ---
			
 
				 
			
 
				 ### Personal License
			
@@ -26,7 +27,9 @@ You **cannot**:
 
				 
			
 
				 #### Example usage
			
 
				 
			
 
				-Examples of usage **allowed** by the license:* Creating a personal website by yourself.
			
 
				+Examples of usage **allowed** by the license:
			
 
				+
			
 
				+* Creating a personal website by yourself.
			
 
				 * Creating a website or web application for a client that will be owned by that client.
			
 
				 * Creating a commercial SaaS application (like an invoicing app for example) where end users have to pay a fee to use the application.
			
 
				 * Creating a commercial self-hosted web application that is sold to end users for a one-time fee.
			
@@ -85,6 +88,7 @@ Examples of use **not allowed** by the license:
 
				 * Giving someone access to Tabler Illustrations when they purchase a product from you. For example, you can't use a Team License as a way to give someone access to Tabler Illustrations when they purchase an online course from you.
			
 
				 * Selling access to your team account to people who don't work for you company.
			
 
				 
			
 
				+layout: default
			
 
				 ---
			
 
				 
			
 
				 In case of differences between above license agreements and the license agreements provided with the product, the license agreement provided with the product shall prevail.
			
--- a/docs/index.md
+++ b/docs/index.md
@@ -1,7 +1,7 @@
 
				 ---
			
 
				-layout: default
			
 
				 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.
			
 
				+layout: default
			
 
				 ---
			
 
				 
			
 
				 <ResponsiveImage src="/docs/tabler.png" src-dark="/docs/tabler-dark.png" alt="Tabler" width="816" height="620" className="mb-4" />
			
--- a/docs/ui/base/colors.mdx
+++ b/docs/ui/base/colors.mdx
@@ -3,6 +3,7 @@ title: Colors
 
				 summary: The choice of colors for a website or app interface has an big influence on how users interact with the product and what decisions they make. Harmonic 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.
			
 
				 bootstrapLink: utilities/colors/
			
 
				 description: Impact of colors on user interface design.
			
 
				+layout: default
			
 
				 ---
			
 
				 
			
 
				 ## Base colors
			
--- a/docs/ui/base/index.mdx
+++ b/docs/ui/base/index.mdx
--- a/docs/ui/base/typography.mdx
+++ b/docs/ui/base/typography.mdx
@@ -3,6 +3,7 @@ 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.
			
 
				 bootstrapLink: content/typography/
			
 
				 description: Role of typography in interface design.
			
 
				+layout: default
			
 
				 ---
			
 
				 
			
 
				 ## Headings
			
--- a/docs/ui/components/alerts.mdx
+++ b/docs/ui/components/alerts.mdx
@@ -3,6 +3,7 @@ title: Alerts
 
				 summary: Alert messages are used to inform users of the status of their action and help them solve any problems that might have occurred. Good design of alert modals is very important for the overall user experience of a website or app.
			
 
				 bootstrapLink: components/alerts/
			
 
				 description: Alert messages for user notifications.
			
 
				+layout: default
			
 
				 ---
			
 
				 
			
 
				 ## Default markup
			
--- a/docs/ui/components/autosize.mdx
+++ b/docs/ui/components/autosize.mdx
@@ -3,6 +3,7 @@ title: Autosize
 
				 summary: The autosize element will automatically adjust the textarea height and make it easier for users to follow as they type.
			
 
				 libs: autosize
			
 
				 description: Auto-adjusting textarea for better usability.
			
 
				+layout: default
			
 
				 ---
			
 
				 
			
 
				 To be able to use the autosize in your application you will need to install the autosize dependency with `npm install autosize`.
			
--- a/docs/ui/components/avatars.mdx
+++ b/docs/ui/components/avatars.mdx
@@ -2,6 +2,7 @@
 
				 title: Avatars
			
 
				 summary: Avatars help customise various elements of a user interface and make the product experience more personalised. They are often used in communication apps, collaboration tools and social media.
			
 
				 description: Personalize UI with user avatars.
			
 
				+layout: default
			
 
				 ---
			
 
				 
			
 
				 ## Default markup
			
--- a/docs/ui/components/badges.mdx
+++ b/docs/ui/components/badges.mdx
@@ -3,6 +3,7 @@ title: Badges
 
				 summary: Badges are small count and labeling components, which are used to add extra information to an interface element. You can use them to draw users' attention to a new element, notify about unread messages or provide any kind of additional info.
			
 
				 description: Add extra information with badges.
			
 
				 bootstrapLink: components/badge/
			
 
				+layout: default
			
 
				 ---
			
 
				 
			
 
				 ## Default markup
			
--- a/docs/ui/components/breadcrumb.mdx
+++ b/docs/ui/components/breadcrumb.mdx
@@ -3,6 +3,7 @@ title: Breadcrumb
 
				 summary: Breadcrumbs are used to show the current website or app location and reduce the number of actions users have to take. Thanks to breadcrumbs, they can easily navigate within the website hierarchy and better understand its structure.
			
 
				 bootstrapLink: components/breadcrumb/
			
 
				 description: Navigation aid for better structure.
			
 
				+layout: default
			
 
				 ---
			
 
				 
			
 
				 ## Default markup
			
--- a/docs/ui/components/buttons.mdx
+++ b/docs/ui/components/buttons.mdx
@@ -3,6 +3,7 @@ title: Buttons
 
				 summary: Use button styles that best suit your designs and encourage users to take the desired actions. You can customize the button's properties to improve the user experience of your website or system, changing the size, shape, color and many more.
			
 
				 bootstrapLink: components/buttons/
			
 
				 description: Customizable buttons for user actions.
			
 
				+layout: default
			
 
				 ---
			
 
				 
			
 
				 ## Button tag
			
--- a/docs/ui/components/cards.mdx
+++ b/docs/ui/components/cards.mdx
@@ -3,6 +3,7 @@ title: Cards
 
				 summary: Cards are flexible user interface elements, which help organize content into meaningful sections and make it easier to display on different screen sizes. Cards contain various smaller components, such as images, text, links and buttons and may act as an entry to more detailed information, helping users scan the page quickly and find the most relevant content.
			
 
				 bootstrapLink: components/card/
			
 
				 description: Organize content with flexible cards.
			
 
				+layout: default
			
 
				 ---
			
 
				 
			
 
				 ## Default card
			
--- a/docs/ui/components/carousel.mdx
+++ b/docs/ui/components/carousel.mdx
@@ -3,6 +3,7 @@ title: Carousel
 
				 summary: A carousel is used to display multiple pieces of visual content without taking up too much space. Carousels eliminate the need to scroll down the page to see all content and are a popular method of displaying marketing information.
			
 
				 bootstrapLink: components/carousel/
			
 
				 description: Display visual content with carousels.
			
 
				+layout: default
			
 
				 ---
			
 
				 
			
 
				 ## Default markup
			
--- a/docs/ui/components/charts.mdx
+++ b/docs/ui/components/charts.mdx
@@ -3,6 +3,7 @@ title: Charts
 
				 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.
			
 
				 description: Interactive data visualizations with ApexCharts.
			
 
				+layout: default
			
 
				 ---
			
 
				 
			
 
				 To be able to use the charts in your application you will need to install the apexcharts dependency with `npm install apexcharts`.
			
--- a/docs/ui/components/countup.mdx
+++ b/docs/ui/components/countup.mdx
@@ -3,6 +3,7 @@ title: Countup
 
				 summary: A countup element is used to display numerical data in an interesting way and make the interface more interactive.
			
 
				 libs: countup
			
 
				 description: Display numbers dynamically with countups.
			
 
				+layout: default
			
 
				 ---
			
 
				 
			
 
				 The countup component is used to display numbers dynamically. It is a great way to make the interface more interactive and engaging. The countup component is a simple and easy way to animate numbers in your application.
			
--- a/docs/ui/components/datagrid.mdx
+++ b/docs/ui/components/datagrid.mdx
@@ -2,6 +2,7 @@
 
				 title: Data grid
			
 
				 summary: Use the data grid component to display detailed information about your product. The data is displayed as a column of items consisting of a title and content.
			
 
				 description: Detailed product information in grids.
			
 
				+layout: default
			
 
				 ---
			
 
				 
			
 
				 ```html example vcentered height="460px"
			
--- a/docs/ui/components/divider.mdx
+++ b/docs/ui/components/divider.mdx
@@ -2,6 +2,7 @@
 
				 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.
			
 
				 description: Separate content with clear dividers.
			
 
				+layout: default
			
 
				 ---
			
 
				 
			
 
				 ## Default markup
			
--- a/docs/ui/components/dropdowns.mdx
+++ b/docs/ui/components/dropdowns.mdx
@@ -3,6 +3,7 @@ title: Dropdowns
 
				 summary: Use dropdowns to display lists of options or include more positions in a menu without overwhelming users with too many buttons and long lists. Dropdowns facilitate users' interaction with your website or software and make your design look clear.
			
 
				 bootstrapLink: components/dropdowns
			
 
				 description: Organize options with dropdown menus.
			
 
				+layout: default
			
 
				 ---
			
 
				 
			
 
				 ## Default dropdown
			
--- a/docs/ui/components/dropzone.mdx
+++ b/docs/ui/components/dropzone.mdx
@@ -2,6 +2,7 @@
 
				 title: Dropzone
			
 
				 summary: Dropzone is a simple JavaScript library that helps you add file drag and drop functionality to your web forms. It is one of the most popular drag and drop library on the web and is used by millions of people.
			
 
				 description: Drag-and-drop file upload tool.
			
 
				+layout: default
			
 
				 ---
			
 
				 
			
 
				 ## Basic usage
			
--- a/docs/ui/components/empty.mdx
+++ b/docs/ui/components/empty.mdx
@@ -2,6 +2,7 @@
 
				 title: Empty states
			
 
				 summary: Empty states or blank pages are commonly used as placeholders for first-use, empty data or error screens. Their aim is to engage users when there is no content to display and that is why their design is extremely important from the point of view of the user experience of your website or app.
			
 
				 description: Engage users in empty or error screens.
			
 
				+layout: default
			
 
				 ---
			
 
				 
			
 
				 ## Default markup
			
--- a/docs/ui/components/icons.mdx
+++ b/docs/ui/components/icons.mdx
@@ -3,6 +3,7 @@ title: Icons
 
				 summary: Use one of over 5000 icons created specifically for Tabler and make your dashboard look even more attractive. All icons are under MIT license, so you can use them without any problem both in private and commercial projects.
			
 
				 banner: icons
			
 
				 description: Enhance dashboards with custom icons.
			
 
				+layout: default
			
 
				 ---
			
 
				 
			
 
				 If you need to add icons to your website, you can use the Tabler Icons library. 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. You can find the Tabler Icons library [here](https://tabler-icons.io/).
			
--- a/docs/ui/components/index.mdx
+++ b/docs/ui/components/index.mdx
--- a/docs/ui/components/inline-player.mdx
+++ b/docs/ui/components/inline-player.mdx
@@ -3,6 +3,7 @@ title: Inline player
 
				 libs: plyr
			
 
				 summary: A simple, lightweight, accessible and customizable HTML5, YouTube and Vimeo media player that supports modern browsers.
			
 
				 description: Lightweight media player for websites.
			
 
				+layout: default
			
 
				 ---
			
 
				 
			
 
				 
			
--- a/docs/ui/components/modals.mdx
+++ b/docs/ui/components/modals.mdx
@@ -2,6 +2,7 @@
 
				 title: Modals
			
 
				 summary: Use Bootstrap’s JavaScript modal plugin to add dialogs to your site for lightboxes, user notifications, or completely custom content.
			
 
				 description: Dialogs for notifications and content.
			
 
				+layout: default
			
 
				 ---
			
 
				 
			
 
				 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.
			
--- a/docs/ui/components/offcanvas.mdx
+++ b/docs/ui/components/offcanvas.mdx
@@ -1,5 +1,6 @@
 
				 ---
			
 
				 title: Offcanvas
			
 
				+layout: default
			
 
				 ---
			
 
				 
			
 
				 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.
			
--- a/docs/ui/components/placeholder.mdx
+++ b/docs/ui/components/placeholder.mdx
@@ -2,6 +2,7 @@
 
				 title: Placeholder
			
 
				 summary: Placeholder is used to reserve space for content that soon will appear in a layout.
			
 
				 description: Reserve space for upcoming content.
			
 
				+layout: default
			
 
				 ---
			
 
				 
			
 
				 ## Placeholder line
			
--- a/docs/ui/components/popover.mdx
+++ b/docs/ui/components/popover.mdx
@@ -3,6 +3,7 @@ title: Popovers
 
				 summary: Popovers are used to provide additional information on elements where a simple tooltip is not sufficient.
			
 
				 bootstrapLink: components/popovers
			
 
				 description: Provide extra information with popovers.
			
 
				+layout: default
			
 
				 ---
			
 
				 
			
 
				 ## Default markup
			
--- a/docs/ui/components/progress.mdx
+++ b/docs/ui/components/progress.mdx
@@ -3,6 +3,7 @@ title: Progress bars
 
				 summary: Progress bars are used to provide feedback on an action status and inform users of the current progress. Although seemingly small interface elements, they are extremely hepful in managing users' expectations and preventing them from abandoning a process they have initiated.
			
 
				 bootstrapLink: components/progress
			
 
				 description: Track and display progress visually.
			
 
				+layout: default
			
 
				 ---
			
 
				 
			
 
				 ## Default markup
			
--- a/docs/ui/components/range-slider.mdx
+++ b/docs/ui/components/range-slider.mdx
@@ -3,6 +3,7 @@ title: Range slider
 
				 libs: nouislider
			
 
				 description: Adjust values with range sliders.
			
 
				 summary: Range sliders allow users to select a range of values by adjusting two handles along a track, providing an intuitive and space-efficient input method.
			
 
				+layout: default
			
 
				 ---
			
 
				 
			
 
				 To be able to use the range slider in your application you will need to install the nouislider dependency with `npm install nouislider`.
			
--- a/docs/ui/components/ribbons.mdx
+++ b/docs/ui/components/ribbons.mdx
@@ -2,6 +2,7 @@
 
				 title: Ribbons
			
 
				 summary: Ribbons are graphical elements which attract users' attention to a given element of an interface and make it stand out.
			
 
				 description: Highlight elements with graphical ribbons.	
			
 
				+layout: default
			
 
				 ---
			
 
				 
			
 
				 ## Default markup
			
--- a/docs/ui/components/segmented-control.mdx
+++ b/docs/ui/components/segmented-control.mdx
@@ -1,6 +1,7 @@
 
				 ---
			
 
				 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.
			
 
				+layout: default
			
 
				 ---
			
 
				 
			
 
				 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/docs/ui/components/spinners.mdx
+++ b/docs/ui/components/spinners.mdx
@@ -3,6 +3,7 @@ title: Spinners
 
				 summary: Spinners are used to show the loading state of a component or page. They provide feedback for an action a user has taken, when it takes a bit longer to complete.
			
 
				 bootstrapLink: components/spinners/
			
 
				 description: Indicate loading state with spinners.
			
 
				+layout: default
			
 
				 ---
			
 
				 
			
 
				 ## Default markup
			
--- a/docs/ui/components/statuses.mdx
+++ b/docs/ui/components/statuses.mdx
@@ -2,6 +2,7 @@
 
				 title: Statuses
			
 
				 summary: Status dots are particularly useful if you want to make an interface element more noticeable regardless of limited space.
			
 
				 description: Highlight interface elements with status dots.
			
 
				+layout: default
			
 
				 ---
			
 
				 
			
 
				 ## Default markup
			
--- a/docs/ui/components/steps.mdx
+++ b/docs/ui/components/steps.mdx
@@ -3,6 +3,7 @@ title: Steps
 
				 summary: Steps are used to guide users through complex processes, making them easier and more intuitive. Breaking a multi-step process into smaller parts and tracking progress along the way helps users complete it successfully.
			
 
				 new: true
			
 
				 description: Simplify complex processes with steps.
			
 
				+layout: default
			
 
				 ---
			
 
				 
			
 
				 ## Default markup
			
--- a/docs/ui/components/switch-icon.mdx
+++ b/docs/ui/components/switch-icon.mdx
@@ -3,6 +3,7 @@ title: Switch icon
 
				 summary: The Switch Icon component is used to create a transition between two icons. You can use any icon, both line and filled version.
			
 
				 banner: icons
			
 
				 description: Transition between two icons smoothly.
			
 
				+layout: default
			
 
				 ---
			
 
				 
			
 
				 ## Default markup
			
--- a/docs/ui/components/tables.mdx
+++ b/docs/ui/components/tables.mdx
@@ -3,6 +3,7 @@ title: Tables
 
				 summary: Tables are a useful interface element that allows to visualise data and arrange it in a clear way. Thanks to that, users can browse a lot of information at once and a good table design will help you take care of its clarity.
			
 
				 bootstrapLink: content/tables/
			
 
				 description: Visualize data clearly with tables.
			
 
				+layout: default
			
 
				 ---
			
 
				 
			
 
				 ## Basic Table
			
--- a/docs/ui/components/tabs.mdx
+++ b/docs/ui/components/tabs.mdx
@@ -3,6 +3,7 @@ title: Tabs
 
				 summary: Tabs allow users to alternate between equally important views within the same context. By dividing content into meaningful sections, they improve its organization and make it easy for users to navigate.
			
 
				 bootstrapLink: components/navs/
			
 
				 description: Organize content with interactive tabs.
			
 
				+layout: default
			
 
				 ---
			
 
				 
			
 
				 ## Default markup
			
--- a/docs/ui/components/timelines.mdx
+++ b/docs/ui/components/timelines.mdx
@@ -2,6 +2,7 @@
 
				 title: Timelines
			
 
				 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.
			
 
				 description: Visualize events and processes clearly.
			
 
				+layout: default
			
 
				 ---
			
 
				 
			
 
				 ## Timeline
			
--- a/docs/ui/components/tinymce.mdx
+++ b/docs/ui/components/tinymce.mdx
@@ -3,6 +3,7 @@ title: TinyMCE
 
				 libs: tinymce
			
 
				 summary: The WYSIWYG editor that is flexible, customizable, and designed with the user in mind. TinyMCE can handle any challenge, from the most simple implementation through to the most complex use case.
			
 
				 description: Flexible WYSIWYG editor for content.
			
 
				+layout: default
			
 
				 ---
			
 
				 
			
 
				 [TinyMCE](https://www.tiny.cloud/docs/) documentation.
			
--- a/docs/ui/components/toasts.mdx
+++ b/docs/ui/components/toasts.mdx
@@ -3,6 +3,7 @@ title: Toasts
 
				 summary: Toasts are lightweight alert boxes which display for a few seconds after a user has taken an action, to inform them of the state or outcome. They can be used when a user clicks a button or submits a form and their aim is to provide feedback, rather than encourage to take action.
			
 
				 bootstrapLink: components/toasts/
			
 
				 description: Display lightweight alert notifications.
			
 
				+layout: default
			
 
				 ---
			
 
				 
			
 
				 ## Default markup
			
--- a/docs/ui/components/tooltips.mdx
+++ b/docs/ui/components/tooltips.mdx
@@ -3,6 +3,7 @@ title: Tooltips
 
				 summary: Tooltips are text labels which appear when a user hovers over an interface element. They explain the interface elements that may be unclear for users and guide them when they need help. If used properly, tooltips can significantly enhance user experience and add value to your website or software.
			
 
				 bootstrapLink: components/tooltips/
			
 
				 description: Guide users with informative tooltips.
			
 
				+layout: default
			
 
				 ---
			
 
				 
			
 
				 ## Default markup
			
--- a/docs/ui/components/tracking.mdx
+++ b/docs/ui/components/tracking.mdx
@@ -2,6 +2,7 @@
 
				 title: Tracking
			
 
				 summary: Component for visualising 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.
			
 
				 description: Monitor data activity visually.
			
 
				+layout: default
			
 
				 ---
			
 
				 
			
 
				 ## Basic example
			
--- a/docs/ui/components/vector-maps.mdx
+++ b/docs/ui/components/vector-maps.mdx
@@ -2,6 +2,7 @@
 
				 title: Vector Maps
			
 
				 description: Interactive guide to creating vector maps with jsVectorMap.
			
 
				 summary: Vector maps are a great way to display geographical data in an interactive and visually appealing way. Learn how to create vector maps with jsVectorMap.
			
 
				+layout: default
			
 
				 ---
			
 
				 
			
 
				 ## Installation
			
--- a/docs/ui/forms/form-color-check.mdx
+++ b/docs/ui/forms/form-color-check.mdx
@@ -2,6 +2,7 @@
 
				 title: Color check
			
 
				 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: Enhance forms with color checks.
			
 
				+layout: default
			
 
				 ---
			
 
				 
			
 
				 Your input controls can come in a variety of colors, depending on your preferences. Click [here](/docs/ui/base/colors) to see the list of available colors.
			
--- a/docs/ui/forms/form-elements.mdx
+++ b/docs/ui/forms/form-elements.mdx
@@ -5,6 +5,7 @@ bootstrapLink: components/forms/
 
				 libs: nouislider
			
 
				 description: Design user-friendly and effective forms.
			
 
				 order: 1
			
 
				+layout: default
			
 
				 ---
			
 
				 
			
 
				 ## Classic inputs
			
--- a/docs/ui/forms/form-fieldset.mdx
+++ b/docs/ui/forms/form-fieldset.mdx
@@ -2,6 +2,7 @@
 
				 title: Form fieldset
			
 
				 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.
			
 
				 description: Group form elements for clarity.
			
 
				+layout: default
			
 
				 ---
			
 
				 
			
 
				 ## Default markup
			
--- a/docs/ui/forms/form-helpers.mdx
+++ b/docs/ui/forms/form-helpers.mdx
@@ -2,6 +2,7 @@
 
				 title: Form helpers
			
 
				 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.
			
 
				 description: Provide additional guidance in forms.
			
 
				+layout: default
			
 
				 ---
			
 
				 
			
 
				 ## Input help
			
--- a/docs/ui/forms/form-image-check.mdx
+++ b/docs/ui/forms/form-image-check.mdx
@@ -2,6 +2,7 @@
 
				 title: Image check
			
 
				 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: Add visual appeal to forms with images.
			
 
				+layout: default
			
 
				 ---
			
 
				 
			
 
				 ## Default markup
			
--- a/docs/ui/forms/form-input-mask.mdx
+++ b/docs/ui/forms/form-input-mask.mdx
@@ -2,6 +2,7 @@
 
				 title: Input mask
			
 
				 summary: An input mask is a used to clarify the input format required in a given field and is helpful for users, removing confusion and reducing the number of validation errors.
			
 
				 description: Clarify input formats for users.
			
 
				+layout: default
			
 
				 ---
			
 
				 
			
 
				 ## Installation
			
--- a/docs/ui/forms/form-selectboxes.mdx
+++ b/docs/ui/forms/form-selectboxes.mdx
@@ -2,6 +2,7 @@
 
				 title: Form selectgroup
			
 
				 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.
			
 
				 description: Improve form UX with select groups.
			
 
				+layout: default
			
 
				 ---
			
 
				 
			
 
				 ## Simple selectgroup
			
--- a/docs/ui/forms/form-validation.mdx
+++ b/docs/ui/forms/form-validation.mdx
@@ -2,6 +2,7 @@
 
				 title: Validation states
			
 
				 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.
			
 
				 description: Indicate valid or invalid inputs.
			
 
				+layout: default
			
 
				 ---
			
 
				 
			
 
				 ## Validation states
			
--- a/docs/ui/forms/index.mdx
+++ b/docs/ui/forms/index.mdx
--- a/docs/ui/getting-started/browser-support.mdx
+++ b/docs/ui/getting-started/browser-support.mdx
@@ -2,6 +2,7 @@
 
				 title: Browser Support
			
 
				 description: Check browser compatibility for Tabler.
			
 
				 summary: Learn about the supported browsers and compatibility guidelines for using Tabler UI components to ensure a consistent experience across different devices and platforms.
			
 
				+layout: default
			
 
				 ---
			
 
				 
			
 
				 Tabler is fully optimized for all modern browsers, including the latest versions of Chrome, Firefox, Edge, Safari, and Opera. These browsers ensure a seamless and responsive experience, allowing users to enjoy Tabler's advanced UI components without compatibility issues.
			
--- a/docs/ui/getting-started/customize.mdx
+++ b/docs/ui/getting-started/customize.mdx
@@ -2,6 +2,7 @@
 
				 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.
			
 
				 description: Adjust fonts, colors, and styles.	
			
 
				+layout: default
			
 
				 ---
			
 
				 
			
 
				 ## Custom Google Font
			
--- a/docs/ui/getting-started/download.mdx
+++ b/docs/ui/getting-started/download.mdx
@@ -2,6 +2,7 @@
 
				 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.
			
 
				 description: Get Tabler CSS, JS, and source code.
			
 
				+layout: default
			
 
				 ---
			
 
				 
			
 
				 ## CDN via jsDelivr
			
--- a/docs/ui/getting-started/faq.mdx
+++ b/docs/ui/getting-started/faq.mdx
@@ -3,6 +3,7 @@ title: FAQ
 
				 summary: Answers to the most frequently asked questions.
			
 
				 description: Common questions and answers.
			
 
				 order: 12
			
 
				+layout: default
			
 
				 ---
			
 
				 
			
 
				 ## I found an issue, what can I do?
			
--- a/docs/ui/getting-started/how-to-contribute.mdx
+++ b/docs/ui/getting-started/how-to-contribute.mdx
@@ -2,6 +2,7 @@
 
				 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.
			
 
				 description: Guide to contributing to Tabler and setting up for development.
			
 
				+layout: default
			
 
				 ---
			
 
				 
			
 
				 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, [start here](https://opensource.guide/how-to-contribute/) to learn more about contributing.
			
--- a/docs/ui/getting-started/index.mdx
+++ b/docs/ui/getting-started/index.mdx
@@ -3,6 +3,7 @@ title: Introduction
 
				 summary: Free and open-source HTML Dashboard UI Kit built on Bootstrap
			
 
				 order: 1
			
 
				 description: Overview of Tabler UI Kit.
			
 
				+layout: default
			
 
				 ---
			
 
				 
			
 
				 ## What is Tabler?
			
--- a/docs/ui/getting-started/installation.mdx
+++ b/docs/ui/getting-started/installation.mdx
@@ -3,6 +3,7 @@ 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."
			
 
				+layout: default
			
 
				 ---
			
 
				 
			
 
				 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!
			
--- a/docs/ui/getting-started/license.mdx
+++ b/docs/ui/getting-started/license.mdx
@@ -2,6 +2,7 @@
 
				 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.
			
 
				 description: "Tabler's MIT license: freedom to use, modify, and share."
			
 
				+layout: default
			
 
				 ---
			
 
				 
			
 
				 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.
			
--- a/docs/ui/index.mdx
+++ b/docs/ui/index.mdx
@@ -3,6 +3,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.
			
 
				+layout: default
			
 
				 ---
			
 
				 
			
 
				 ![](/docs/cover-tabler.png) 
			
--- a/docs/ui/layout/index.mdx
+++ b/docs/ui/layout/index.mdx
--- a/docs/ui/layout/navbars.mdx
+++ b/docs/ui/layout/navbars.mdx
@@ -2,6 +2,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.
			
 
				+layout: default
			
 
				 ---
			
 
				 
			
 
				 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, branding elements, and even interactive components like dropdown menus or search bars.
			
--- a/docs/ui/layout/navs-tabls.mdx
+++ b/docs/ui/layout/navs-tabls.mdx
@@ -2,6 +2,7 @@
 
				 title: Navs and tabs
			
 
				 summary: This guide covered 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."
			
 
				+layout: default
			
 
				 ---
			
 
				 
			
 
				 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/docs/ui/layout/page-headers.mdx
+++ b/docs/ui/layout/page-headers.mdx
@@ -2,6 +2,7 @@
 
				 title: Page headers
			
 
				 summary: Page heading examples for Tabler
			
 
				 description: Examples of Tabler page headers.
			
 
				+layout: default
			
 
				 ---
			
 
				 
			
 
				 ## Simple header
			
--- a/docs/ui/layout/page-layouts.mdx
+++ b/docs/ui/layout/page-layouts.mdx
@@ -2,6 +2,7 @@
 
				 title: Page layouts
			
 
				 summary: Learn how to build a sample version of the dashboard
			
 
				 description: Learn to design dashboard layouts.
			
 
				+layout: default
			
 
				 ---
			
 
				 
			
 
				 <Callout>
			
--- a/docs/ui/plugins/flags.mdx
+++ b/docs/ui/plugins/flags.mdx
@@ -4,6 +4,7 @@ summary: Thanks to the Tabler flags plugin, you can create flags to visually rep
 
				 plugin: flags
			
 
				 libs: tabler-flags
			
 
				 description: Visual representation of countries/languages.
			
 
				+layout: default
			
 
				 ---
			
 
				 
			
 
				 ## Installation
			
--- a/docs/ui/plugins/index.mdx
+++ b/docs/ui/plugins/index.mdx
--- a/docs/ui/plugins/payments.mdx
+++ b/docs/ui/plugins/payments.mdx
@@ -3,6 +3,7 @@ title: Payments
 
				 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.
			
 
				 plugin: payments
			
 
				 description: User-friendly payment provider icons.
			
 
				+layout: default
			
 
				 ---
			
 
				 
			
 
				 ## Installation
			
--- a/docs/ui/plugins/social-icons.mdx
+++ b/docs/ui/plugins/social-icons.mdx
@@ -4,6 +4,7 @@ summary: Social icons are a great way to make your website more engaging and use
 
				 plugin: socials
			
 
				 libs: tabler-socials
			
 
				 description: Connect users to your social profiles.
			
 
				+layout: default
			
 
				 ---
			
 
				 
			
 
				 ## Installation
			
--- a/docs/ui/utilities/borders.mdx
+++ b/docs/ui/utilities/borders.mdx
@@ -2,6 +2,7 @@
 
				 title: Borders
			
 
				 summary: Use border utilities to quickly style the border and border-radius of an element. Great for images, buttons, or any other element.
			
 
				 description: Style elements with border utilities.
			
 
				+layout: default
			
 
				 ---
			
 
				 
			
 
				 ## Border direction
			
--- a/docs/ui/utilities/cursors.mdx
+++ b/docs/ui/utilities/cursors.mdx
@@ -2,6 +2,7 @@
 
				 title: Cursors
			
 
				 summary: You can use different cursors to reflect the intended user interaction with particular elements of an interface. The cursor will change when a user hovers over a given element to indicate the action which can be performed.
			
 
				 description: Custom cursors for enhanced interaction.
			
 
				+layout: default
			
 
				 ---
			
 
				 
			
 
				 ## Cursor utilities
			
--- a/docs/ui/utilities/index.mdx
+++ b/docs/ui/utilities/index.mdx
--- a/docs/ui/utilities/interactions.mdx
+++ b/docs/ui/utilities/interactions.mdx
@@ -2,6 +2,7 @@
 
				 title: Interactions
			
 
				 summary: Utility classes that change how users interact with contents of a website.
			
 
				 description: Modify user interactions efficiently.
			
 
				+layout: default
			
 
				 ---
			
 
				 
			
 
				 ## Text selection
			
--- a/docs/ui/utilities/margins.mdx
+++ b/docs/ui/utilities/margins.mdx
@@ -2,6 +2,7 @@
 
				 title: Margins
			
 
				 summary: Use margin utilities to control the space between elements.
			
 
				 description: Control the space between elements with margin utilities.
			
 
				+layout: default
			
 
				 ---
			
 
				 
			
 
				 Margin utilities allow you to control the space between elements, providing flexibility to suit different design needs. These utilities are especially useful for creating spacing between components or aligning them consistently. Below are examples of how to use margin utilities for various directions and sizes.
			
--- a/docs/ui/utilities/vertical-align.mdx
+++ b/docs/ui/utilities/vertical-align.mdx
@@ -2,6 +2,7 @@
 
				 title: Vertical align
			
 
				 description: Quickly and easily align elements vertically with utility classes.
			
 
				 summary: Easily modify the vertical alignment of elements such as inline, inline-block, inline-table, and table-cell to ensure proper positioning and alignment within their parent containers, allowing for more precise control over your layout and design.
			
 
				+layout: default
			
 
				 ---
			
 
				 
			
 
				 Choose from `.align-baseline`, `.align-top`, `.align-middle`, `.align-bottom`, `.align-text-bottom`, and `.align-text-top` as needed.
			
--- a/docs/ui/utilities/visually-hidden.mdx
+++ b/docs/ui/utilities/visually-hidden.mdx
@@ -1,6 +1,7 @@
 
				 ---
			
 
				 title: Visually hidden
			
 
				 summary: Use these helpers to visually hide elements but keep them accessible to assistive technologies.
			
 
				+layout: default
			
 
				 ---
			
 
				 
			
 
				 Visually hide an element while still allowing it to be exposed to assistive technologies (such as screen readers) with `.visually-hidden`. Use `.visually-hidden-focusable` to visually hide an element by default, but to display it when it's focused (e.g. by a keyboard-only user). `.visually-hidden-focusable` can also be applied to a container–thanks to `:focus-within`, the container will be displayed when any child element of the container receives focus.