From c02b6d13ff74e2fdf1372821c3123a6a618f1271 Mon Sep 17 00:00:00 2001 From: codecalm Date: Sun, 5 Jan 2025 05:33:53 +0100 Subject: [PATCH] Enhance documentation with descriptions and summaries for various UI and icon sections --- docs/icons/index.mdx | 95 +-------------------- docs/icons/libraries/index.mdx | 2 + docs/icons/libraries/preact.mdx | 4 +- docs/icons/libraries/react.mdx | 4 +- docs/icons/libraries/solidjs.mdx | 4 +- docs/icons/libraries/svelte.mdx | 4 +- docs/icons/libraries/vue.mdx | 4 +- docs/icons/libraries/webfont.mdx | 2 + docs/icons/plugins/figma.mdx | 2 + docs/icons/plugins/index.mdx | 1 + docs/icons/static-files/eps.mdx | 1 + docs/icons/static-files/index.mdx | 2 + docs/icons/static-files/pdf.mdx | 1 + docs/icons/static-files/png.mdx | 1 + docs/icons/static-files/svg.mdx | 1 + docs/index.mdx | 8 +- docs/ui/base/colors.mdx | 3 +- docs/ui/base/index.mdx | 2 + docs/ui/base/typography.mdx | 3 +- docs/ui/components/alerts.mdx | 3 +- docs/ui/components/autosize.mdx | 3 +- docs/ui/components/avatars.mdx | 3 +- docs/ui/components/badges.mdx | 3 +- docs/ui/components/breadcrumb.mdx | 3 +- docs/ui/components/buttons.mdx | 3 +- docs/ui/components/cards.mdx | 3 +- docs/ui/components/carousel.mdx | 3 +- docs/ui/components/charts.mdx | 3 +- docs/ui/components/countup.mdx | 3 +- docs/ui/components/datagrid.mdx | 3 +- docs/ui/components/divider.mdx | 4 +- docs/ui/components/dropdowns.mdx | 3 +- docs/ui/components/dropzone.mdx | 3 +- docs/ui/components/empty.mdx | 3 +- docs/ui/components/icons.mdx | 3 +- docs/ui/components/index.mdx | 2 + docs/ui/components/inline-player.mdx | 3 +- docs/ui/components/modals.mdx | 3 +- docs/ui/components/placeholder.mdx | 3 +- docs/ui/components/popover.mdx | 3 +- docs/ui/components/progress.mdx | 3 +- docs/ui/components/range-slider.mdx | 2 + docs/ui/components/ribbons.mdx | 3 +- docs/ui/components/spinners.mdx | 3 +- docs/ui/components/statuses.mdx | 3 +- docs/ui/components/steps.mdx | 3 +- docs/ui/components/switch-icon.mdx | 3 +- docs/ui/components/tables.mdx | 3 +- docs/ui/components/tabs.mdx | 3 +- docs/ui/components/timelines.mdx | 3 +- docs/ui/components/tinymce.mdx | 3 +- docs/ui/components/toasts.mdx | 3 +- docs/ui/components/tooltips.mdx | 3 +- docs/ui/components/tracking.mdx | 3 +- docs/ui/forms/form-color-check.mdx | 3 +- docs/ui/forms/form-elements.mdx | 4 +- docs/ui/forms/form-fieldset.mdx | 3 +- docs/ui/forms/form-helpers.mdx | 3 +- docs/ui/forms/form-image-check.mdx | 3 +- docs/ui/forms/form-input-mask.mdx | 3 +- docs/ui/forms/form-selectboxes.mdx | 3 +- docs/ui/forms/form-validation.mdx | 3 +- docs/ui/forms/index.mdx | 2 + docs/ui/getting-started/browser-support.mdx | 2 + docs/ui/getting-started/customize.mdx | 3 +- docs/ui/getting-started/download.mdx | 3 +- docs/ui/getting-started/faq.mdx | 3 +- docs/ui/getting-started/index.mdx | 3 +- docs/ui/index.mdx | 2 + docs/ui/layout/index.mdx | 2 + docs/ui/layout/page-headers.mdx | 3 +- docs/ui/layout/page-layouts.mdx | 3 +- docs/ui/plugins/flags.mdx | 3 +- docs/ui/plugins/index.mdx | 2 + docs/ui/plugins/payments.mdx | 3 +- docs/ui/plugins/social-icons.mdx | 3 +- docs/ui/utilities/borders.mdx | 3 +- docs/ui/utilities/cursors.mdx | 3 +- docs/ui/utilities/index.mdx | 1 + docs/ui/utilities/interactions.mdx | 3 +- 80 files changed, 163 insertions(+), 157 deletions(-) diff --git a/docs/icons/index.mdx b/docs/icons/index.mdx index 4dbd5cd57..2fced3350 100644 --- a/docs/icons/index.mdx +++ b/docs/icons/index.mdx @@ -1,101 +1,10 @@ --- title: Tabler Icons -description: 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. +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 --- -```html example centered separated - - - - - - - - - - - - - - - - - - - - - - -``` - -## Customize stroke - -The `stroke-width` property is a powerful tool for customizing icons. This property allows you to control the thickness of the stroke used to outline an icon, giving you precise control over its appearance. By adjusting the `stroke-width` property, you can make an icon more or less prominent, change its emphasis, or create unique visual effects. For example, a thinner stroke may be ideal for icons with intricate designs or fine details, while a thicker stroke can add visual weight and impact to simpler, bolder icons. - -All icons are designed by default with `2px` stroke. - -```html example centered separated - - - - - - - - - - - - - - - - - - - - - - - - -``` - -```html - - ... - - - ... - - - ... - -``` - -## Filled version of icons - -```html example centered separated - - - - - - - - - - - - - - - - - -``` - ## Browse icons Tabler Icons is a comprehensive icon library that features over high-quality icons. These icons are designed with a clean and modern aesthetic, making them suitable for a wide range of applications. diff --git a/docs/icons/libraries/index.mdx b/docs/icons/libraries/index.mdx index f1295c84a..787a85b55 100644 --- a/docs/icons/libraries/index.mdx +++ b/docs/icons/libraries/index.mdx @@ -1,3 +1,5 @@ --- title: Libraries +description: Explore Tabler Icons libraries. +summary: The libraries section offers various integrations of Tabler Icons for popular frameworks and technologies, making it easy to incorporate icons into any project. --- \ No newline at end of file diff --git a/docs/icons/libraries/preact.mdx b/docs/icons/libraries/preact.mdx index c662b252e..b22e80534 100644 --- a/docs/icons/libraries/preact.mdx +++ b/docs/icons/libraries/preact.mdx @@ -1,5 +1,7 @@ --- -title: Tabler Icons for Preact +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. --- ![](https://raw.githubusercontent.com/tabler/tabler-icons/master/.github/packages/og-package-preact.png) diff --git a/docs/icons/libraries/react.mdx b/docs/icons/libraries/react.mdx index dc598279f..ebc363170 100644 --- a/docs/icons/libraries/react.mdx +++ b/docs/icons/libraries/react.mdx @@ -1,5 +1,7 @@ --- -title: Tabler Icons for React +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. --- ![](https://raw.githubusercontent.com/tabler/tabler-icons/master/.github/packages/og-package-react.png) diff --git a/docs/icons/libraries/solidjs.mdx b/docs/icons/libraries/solidjs.mdx index 3de3e78ac..76f44e620 100644 --- a/docs/icons/libraries/solidjs.mdx +++ b/docs/icons/libraries/solidjs.mdx @@ -1,5 +1,7 @@ --- -title: Tabler Icons for SolidJS +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. --- ![](https://raw.githubusercontent.com/tabler/tabler-icons/master/.github/packages/og-package-solidjs.png) diff --git a/docs/icons/libraries/svelte.mdx b/docs/icons/libraries/svelte.mdx index 7001229e8..9e29728dc 100644 --- a/docs/icons/libraries/svelte.mdx +++ b/docs/icons/libraries/svelte.mdx @@ -1,5 +1,7 @@ --- -title: Tabler Icons for Svelte +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. --- ![](https://raw.githubusercontent.com/tabler/tabler-icons/master/.github/packages/og-package-svelte.png) diff --git a/docs/icons/libraries/vue.mdx b/docs/icons/libraries/vue.mdx index 4f6011559..c237adb0a 100644 --- a/docs/icons/libraries/vue.mdx +++ b/docs/icons/libraries/vue.mdx @@ -1,5 +1,7 @@ --- -title: Tabler Icons for Vue +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. --- ![](https://raw.githubusercontent.com/tabler/tabler-icons/master/.github/packages/og-package-vue.png) diff --git a/docs/icons/libraries/webfont.mdx b/docs/icons/libraries/webfont.mdx index c8e4aff30..7e7f32340 100644 --- a/docs/icons/libraries/webfont.mdx +++ b/docs/icons/libraries/webfont.mdx @@ -1,5 +1,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. --- ![](https://raw.githubusercontent.com/tabler/tabler-icons/master/.github/packages/og-package-webfont.png) diff --git a/docs/icons/plugins/figma.mdx b/docs/icons/plugins/figma.mdx index 344206fa9..a0af4b73f 100644 --- a/docs/icons/plugins/figma.mdx +++ b/docs/icons/plugins/figma.mdx @@ -1,5 +1,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. --- ![Tabler Figma Plugin](/docs/icons/figma-plugin.png) diff --git a/docs/icons/plugins/index.mdx b/docs/icons/plugins/index.mdx index aa0a4e614..91d828ef8 100644 --- a/docs/icons/plugins/index.mdx +++ b/docs/icons/plugins/index.mdx @@ -1,3 +1,4 @@ --- title: Plugins +description: Icon plugins for seamless integration. --- \ No newline at end of file diff --git a/docs/icons/static-files/eps.mdx b/docs/icons/static-files/eps.mdx index 01b036d9d..376dcc7c5 100644 --- a/docs/icons/static-files/eps.mdx +++ b/docs/icons/static-files/eps.mdx @@ -1,5 +1,6 @@ --- title: EPS version +description: Download Tabler Icons in EPS format. --- ![](https://raw.githubusercontent.com/tabler/tabler-icons/master/.github/packages/og-package-eps.png) diff --git a/docs/icons/static-files/index.mdx b/docs/icons/static-files/index.mdx index 583f466c1..959840978 100644 --- a/docs/icons/static-files/index.mdx +++ b/docs/icons/static-files/index.mdx @@ -1,3 +1,5 @@ --- title: Static files +description: Download static file formats of icons. +summary: Static files provide multiple formats of Tabler Icons, including EPS, PDF, PNG, and SVG, offering flexibility for different design and development workflows. --- \ No newline at end of file diff --git a/docs/icons/static-files/pdf.mdx b/docs/icons/static-files/pdf.mdx index d1b04bb70..a8bbfe583 100644 --- a/docs/icons/static-files/pdf.mdx +++ b/docs/icons/static-files/pdf.mdx @@ -1,5 +1,6 @@ --- title: PDF version +description: Download Tabler Icons in PDF format. --- ![Tabler icon and PDF icon merging with npm command to install](https://raw.githubusercontent.com/tabler/tabler-icons/master/.github/packages/og-package-pdf.png) diff --git a/docs/icons/static-files/png.mdx b/docs/icons/static-files/png.mdx index 19e60ff4d..b6998cff3 100644 --- a/docs/icons/static-files/png.mdx +++ b/docs/icons/static-files/png.mdx @@ -1,5 +1,6 @@ --- title: PNG version +description: Download Tabler Icons in PNG format. --- ![](https://raw.githubusercontent.com/tabler/tabler-icons/master/.github/packages/og-package-png.png) diff --git a/docs/icons/static-files/svg.mdx b/docs/icons/static-files/svg.mdx index 7ac6276f9..748e334bb 100644 --- a/docs/icons/static-files/svg.mdx +++ b/docs/icons/static-files/svg.mdx @@ -1,5 +1,6 @@ --- title: SVG version +description: Download Tabler Icons in SVG format. --- ![](https://raw.githubusercontent.com/tabler/tabler-icons/master/.github/packages/og-package-svg.png) diff --git a/docs/index.mdx b/docs/index.mdx index 54b65e904..ad2d76149 100644 --- a/docs/index.mdx +++ b/docs/index.mdx @@ -1,5 +1,6 @@ --- -title: Welcome to Tabler Docs +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. --- @@ -9,6 +10,7 @@ Find all the guides and resources you need to develop with Tabler and our other Free and open source web application UI kit based on Bootstrap pixel-perfect icons for web design and development - customizable SVG illustrations for your web project - responsive email templates for your project + customizable SVG illustrations for your web project + responsive email templates ready to use in your marketing campaigns + Package of over 100 avatars for your next web project diff --git a/docs/ui/base/colors.mdx b/docs/ui/base/colors.mdx index 4b9727ec4..811ad9ad7 100644 --- a/docs/ui/base/colors.mdx +++ b/docs/ui/base/colors.mdx @@ -1,7 +1,8 @@ --- title: Colors -description: 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. +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. --- ## Base colors diff --git a/docs/ui/base/index.mdx b/docs/ui/base/index.mdx index 1700d3566..33e1c894a 100644 --- a/docs/ui/base/index.mdx +++ b/docs/ui/base/index.mdx @@ -1,4 +1,6 @@ --- title: Base order: 2 +description: Foundational elements for UI design. +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. --- \ No newline at end of file diff --git a/docs/ui/base/typography.mdx b/docs/ui/base/typography.mdx index e6e0af39f..c465c7cdb 100644 --- a/docs/ui/base/typography.mdx +++ b/docs/ui/base/typography.mdx @@ -1,7 +1,8 @@ --- title: Typography -description: 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. +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. --- ## Headings diff --git a/docs/ui/components/alerts.mdx b/docs/ui/components/alerts.mdx index 2551f2658..d13f2e5e7 100644 --- a/docs/ui/components/alerts.mdx +++ b/docs/ui/components/alerts.mdx @@ -1,7 +1,8 @@ --- title: Alerts -description: 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. +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. --- ## Default markup diff --git a/docs/ui/components/autosize.mdx b/docs/ui/components/autosize.mdx index d9d854123..1babaf273 100644 --- a/docs/ui/components/autosize.mdx +++ b/docs/ui/components/autosize.mdx @@ -1,7 +1,8 @@ --- title: Autosize -description: The autosize element will automatically adjust the textarea height and make it easier for users to follow as they type. +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. --- To be able to use the autosize in your application you will need to install the autosize dependency with `npm install autosize`. diff --git a/docs/ui/components/avatars.mdx b/docs/ui/components/avatars.mdx index bd27eb847..48b71c13e 100644 --- a/docs/ui/components/avatars.mdx +++ b/docs/ui/components/avatars.mdx @@ -1,6 +1,7 @@ --- title: Avatars -description: 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. +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. --- ## Default markup diff --git a/docs/ui/components/badges.mdx b/docs/ui/components/badges.mdx index e2020b2eb..b0b373a7c 100644 --- a/docs/ui/components/badges.mdx +++ b/docs/ui/components/badges.mdx @@ -1,6 +1,7 @@ --- title: Badges -description: 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. +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/ --- diff --git a/docs/ui/components/breadcrumb.mdx b/docs/ui/components/breadcrumb.mdx index c9459de2a..102291e0f 100644 --- a/docs/ui/components/breadcrumb.mdx +++ b/docs/ui/components/breadcrumb.mdx @@ -1,7 +1,8 @@ --- title: Breadcrumb -description: 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. +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. --- ## Default markup diff --git a/docs/ui/components/buttons.mdx b/docs/ui/components/buttons.mdx index 65ae20cd5..33e5782b9 100644 --- a/docs/ui/components/buttons.mdx +++ b/docs/ui/components/buttons.mdx @@ -1,7 +1,8 @@ --- title: Buttons -description: 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. +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. --- ## Button tag diff --git a/docs/ui/components/cards.mdx b/docs/ui/components/cards.mdx index 1b2da4c22..2ff5e41c0 100644 --- a/docs/ui/components/cards.mdx +++ b/docs/ui/components/cards.mdx @@ -1,7 +1,8 @@ --- title: Cards -description: Cards are flexible user interface elements, which help organize content into meaningful sections and make it easier to display on different screen sizes. Cards contain various smaller components, such as images, text, links and buttons and may act as an entry to more detailed information, helping users scan the page quickly and find the most relevant content. +summary: Cards are flexible user interface elements, which help organize content into meaningful sections and make it easier to display on different screen sizes. Cards contain various smaller components, such as images, text, links and buttons and may act as an entry to more detailed information, helping users scan the page quickly and find the most relevant content. bootstrapLink: components/card/ +description: Organize content with flexible cards. --- ## Default card diff --git a/docs/ui/components/carousel.mdx b/docs/ui/components/carousel.mdx index efb16d60c..0c619e4c3 100644 --- a/docs/ui/components/carousel.mdx +++ b/docs/ui/components/carousel.mdx @@ -1,7 +1,8 @@ --- title: Carousel -description: A carousel is used to display multiple pieces of visual content without taking up too much space. Carousels eliminate the need to scroll down the page to see all content and are a popular method of displaying marketing information. +summary: A carousel is used to display multiple pieces of visual content without taking up too much space. Carousels eliminate the need to scroll down the page to see all content and are a popular method of displaying marketing information. bootstrapLink: components/carousel/ +description: Display visual content with carousels. --- ## Default markup diff --git a/docs/ui/components/charts.mdx b/docs/ui/components/charts.mdx index bd67478bc..d6b236cbf 100644 --- a/docs/ui/components/charts.mdx +++ b/docs/ui/components/charts.mdx @@ -1,7 +1,8 @@ --- title: Charts libs: apexcharts -description: Tabler uses ApexCharts - a free and open-source modern charting library that helps developers to create beautiful and interactive visualizations for web pages. +summary: Tabler uses ApexCharts - a free and open-source modern charting library that helps developers to create beautiful and interactive visualizations for web pages. +description: Interactive data visualizations with ApexCharts. --- To be able to use the charts in your application you will need to install the apexcharts dependency with `npm install apexcharts`. diff --git a/docs/ui/components/countup.mdx b/docs/ui/components/countup.mdx index e007df5ac..397ca3189 100644 --- a/docs/ui/components/countup.mdx +++ b/docs/ui/components/countup.mdx @@ -1,7 +1,8 @@ --- title: Countup -description: A countup element is used to display numerical data in an interesting way and make the interface more interactive. +summary: A countup element is used to display numerical data in an interesting way and make the interface more interactive. libs: countup +description: Display numbers dynamically with countups. --- To be able to use the countup in your application you will need to install the countup.js dependency with `npm install countup.js`. diff --git a/docs/ui/components/datagrid.mdx b/docs/ui/components/datagrid.mdx index dbcc36921..cd746af6d 100644 --- a/docs/ui/components/datagrid.mdx +++ b/docs/ui/components/datagrid.mdx @@ -1,6 +1,7 @@ --- title: Data grid -description: Use the data grid component to display detailed information about your product. The data is displayed as a column of items consisting of a title and content. +summary: Use the data grid component to display detailed information about your product. The data is displayed as a column of items consisting of a title and content. +description: Detailed product information in grids. --- ```html example vcentered height="460px" diff --git a/docs/ui/components/divider.mdx b/docs/ui/components/divider.mdx index df768ef91..aa8afbf3b 100644 --- a/docs/ui/components/divider.mdx +++ b/docs/ui/components/divider.mdx @@ -1,7 +1,7 @@ --- title: Divider -description: Dividers help organize content and make the interface layout clear and uncluttered. Greater clarity adds up to better user experience and enhanced interaction with a website or app. -bootstrapLink: components/dropdowns/#dividers +summary: Dividers help organize content and make the interface layout clear and uncluttered. Greater clarity adds up to better user experience and enhanced interaction with a website or app. +description: Separate content with clear dividers. --- ## Default markup diff --git a/docs/ui/components/dropdowns.mdx b/docs/ui/components/dropdowns.mdx index d4e8f2c1d..3e5eda79e 100644 --- a/docs/ui/components/dropdowns.mdx +++ b/docs/ui/components/dropdowns.mdx @@ -1,7 +1,8 @@ --- title: Dropdowns -description: 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. +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. --- ## Default dropdown diff --git a/docs/ui/components/dropzone.mdx b/docs/ui/components/dropzone.mdx index ef1d32ad1..7dc947b53 100644 --- a/docs/ui/components/dropzone.mdx +++ b/docs/ui/components/dropzone.mdx @@ -1,6 +1,7 @@ --- title: Dropzone -description: 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. +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. --- ## Default Dropzone diff --git a/docs/ui/components/empty.mdx b/docs/ui/components/empty.mdx index 164a88618..f6eb51b0f 100644 --- a/docs/ui/components/empty.mdx +++ b/docs/ui/components/empty.mdx @@ -1,6 +1,7 @@ --- title: Empty states -description: 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. +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. --- ## Default markup diff --git a/docs/ui/components/icons.mdx b/docs/ui/components/icons.mdx index 342912528..46e2d1d4b 100644 --- a/docs/ui/components/icons.mdx +++ b/docs/ui/components/icons.mdx @@ -1,7 +1,8 @@ --- title: Icons -description: Use one of over 3000 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. +summary: Use one of over 3000 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. --- ## Base icon diff --git a/docs/ui/components/index.mdx b/docs/ui/components/index.mdx index 9bb9e1dff..18c42b6a0 100644 --- a/docs/ui/components/index.mdx +++ b/docs/ui/components/index.mdx @@ -1,4 +1,6 @@ --- title: Components order: 4 +description: Various components to enhance UI. +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. --- \ No newline at end of file diff --git a/docs/ui/components/inline-player.mdx b/docs/ui/components/inline-player.mdx index 6ccecec9e..eceab9922 100644 --- a/docs/ui/components/inline-player.mdx +++ b/docs/ui/components/inline-player.mdx @@ -1,7 +1,8 @@ --- title: Inline player libs: plyr -description: A simple, lightweight, accessible and customizable HTML5, YouTube and Vimeo media player that supports modern browsers. +summary: A simple, lightweight, accessible and customizable HTML5, YouTube and Vimeo media player that supports modern browsers. +description: Lightweight media player for websites. --- ## Sample demo diff --git a/docs/ui/components/modals.mdx b/docs/ui/components/modals.mdx index cc64c7f1f..cabc12fac 100644 --- a/docs/ui/components/modals.mdx +++ b/docs/ui/components/modals.mdx @@ -1,6 +1,7 @@ --- title: Modals -description: Use Bootstrap’s JavaScript modal plugin to add dialogs to your site for lightboxes, user notifications, or completely custom content. +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. --- ## Default markup diff --git a/docs/ui/components/placeholder.mdx b/docs/ui/components/placeholder.mdx index a0fa869d4..dc3f874ec 100644 --- a/docs/ui/components/placeholder.mdx +++ b/docs/ui/components/placeholder.mdx @@ -1,6 +1,7 @@ --- title: Placeholder -description: Placeholder is used to reserve space for content that soon will appear in a layout. +summary: Placeholder is used to reserve space for content that soon will appear in a layout. +description: Reserve space for upcoming content. --- ## Placeholder line diff --git a/docs/ui/components/popover.mdx b/docs/ui/components/popover.mdx index 3e8919c3f..33aec50e8 100644 --- a/docs/ui/components/popover.mdx +++ b/docs/ui/components/popover.mdx @@ -1,7 +1,8 @@ --- title: Popovers -description: Popovers are used to provide additional information on elements where a simple tooltip is not sufficient. +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. --- ## Default markup diff --git a/docs/ui/components/progress.mdx b/docs/ui/components/progress.mdx index d24dcbd9c..3705ece4a 100644 --- a/docs/ui/components/progress.mdx +++ b/docs/ui/components/progress.mdx @@ -1,7 +1,8 @@ --- title: Progress bars -description: 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. +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. --- ## Default markup diff --git a/docs/ui/components/range-slider.mdx b/docs/ui/components/range-slider.mdx index d049ba247..cfa6c9d4c 100644 --- a/docs/ui/components/range-slider.mdx +++ b/docs/ui/components/range-slider.mdx @@ -1,6 +1,8 @@ --- 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. --- To be able to use the range slider in your application you will need to install the nouislider dependency with `npm install nouislider`. diff --git a/docs/ui/components/ribbons.mdx b/docs/ui/components/ribbons.mdx index 9e57dc982..2c541afe8 100644 --- a/docs/ui/components/ribbons.mdx +++ b/docs/ui/components/ribbons.mdx @@ -1,6 +1,7 @@ --- title: Ribbons -description: Ribbons are graphical elements which attract users' attention to a given element of an interface and make it stand out. +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. --- ## Default markup diff --git a/docs/ui/components/spinners.mdx b/docs/ui/components/spinners.mdx index 70c91ec3c..c48f77e23 100644 --- a/docs/ui/components/spinners.mdx +++ b/docs/ui/components/spinners.mdx @@ -1,7 +1,8 @@ --- title: Spinners -description: 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. +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. --- ## Default markup diff --git a/docs/ui/components/statuses.mdx b/docs/ui/components/statuses.mdx index 1b4b99eea..8e9cd375c 100644 --- a/docs/ui/components/statuses.mdx +++ b/docs/ui/components/statuses.mdx @@ -1,6 +1,7 @@ --- title: Statuses -description: Status dots are particularly useful if you want to make an interface element more noticeable regardless of limited space. +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. --- ## Default markup diff --git a/docs/ui/components/steps.mdx b/docs/ui/components/steps.mdx index 4d1b58039..af0cf4842 100644 --- a/docs/ui/components/steps.mdx +++ b/docs/ui/components/steps.mdx @@ -1,7 +1,8 @@ --- title: Steps -description: 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. +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. --- ## Default markup diff --git a/docs/ui/components/switch-icon.mdx b/docs/ui/components/switch-icon.mdx index 5e0bb0d85..752f22214 100644 --- a/docs/ui/components/switch-icon.mdx +++ b/docs/ui/components/switch-icon.mdx @@ -1,7 +1,8 @@ --- title: Switch icon -description: The Switch Icon component is used to create a transition between two icons. You can use any icon, both line and filled version. +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. --- ## Default markup diff --git a/docs/ui/components/tables.mdx b/docs/ui/components/tables.mdx index 0b2098509..0f7eed4a4 100644 --- a/docs/ui/components/tables.mdx +++ b/docs/ui/components/tables.mdx @@ -1,7 +1,8 @@ --- title: Tables -description: 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. +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. --- ## Basic Table diff --git a/docs/ui/components/tabs.mdx b/docs/ui/components/tabs.mdx index 405708649..95980739e 100644 --- a/docs/ui/components/tabs.mdx +++ b/docs/ui/components/tabs.mdx @@ -1,7 +1,8 @@ --- title: Tabs -description: 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. +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. --- ## Default markup diff --git a/docs/ui/components/timelines.mdx b/docs/ui/components/timelines.mdx index d5ee8d1b6..8a79868a7 100644 --- a/docs/ui/components/timelines.mdx +++ b/docs/ui/components/timelines.mdx @@ -1,6 +1,7 @@ --- title: Timelines -description: 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 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. --- ## Timeline diff --git a/docs/ui/components/tinymce.mdx b/docs/ui/components/tinymce.mdx index 7061d2503..ce9add350 100644 --- a/docs/ui/components/tinymce.mdx +++ b/docs/ui/components/tinymce.mdx @@ -1,7 +1,8 @@ --- title: TinyMCE libs: tinymce -description: 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. +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. --- [TinyMCE](https://www.tiny.cloud/docs/) documentation. diff --git a/docs/ui/components/toasts.mdx b/docs/ui/components/toasts.mdx index 671c15d17..0b8f8eda2 100644 --- a/docs/ui/components/toasts.mdx +++ b/docs/ui/components/toasts.mdx @@ -1,7 +1,8 @@ --- title: Toasts -description: 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. +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. --- ## Default markup diff --git a/docs/ui/components/tooltips.mdx b/docs/ui/components/tooltips.mdx index 540594833..bc5895c13 100644 --- a/docs/ui/components/tooltips.mdx +++ b/docs/ui/components/tooltips.mdx @@ -1,7 +1,8 @@ --- title: Tooltips -description: 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. +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. --- ## Default markup diff --git a/docs/ui/components/tracking.mdx b/docs/ui/components/tracking.mdx index 1866e5d2d..89c05a33b 100644 --- a/docs/ui/components/tracking.mdx +++ b/docs/ui/components/tracking.mdx @@ -1,6 +1,7 @@ --- title: Tracking -description: 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. +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. --- ## Basic example diff --git a/docs/ui/forms/form-color-check.mdx b/docs/ui/forms/form-color-check.mdx index edc1ed5bb..04d5199f2 100644 --- a/docs/ui/forms/form-color-check.mdx +++ b/docs/ui/forms/form-color-check.mdx @@ -1,6 +1,7 @@ --- title: Color check -description: The color check is a great way to make your form more user-friendly and engaging. You can use the color check to create a visually appealing form that will help users make decisions quickly and easily. +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. --- 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. diff --git a/docs/ui/forms/form-elements.mdx b/docs/ui/forms/form-elements.mdx index 86bcb06d8..b0bbe5571 100644 --- a/docs/ui/forms/form-elements.mdx +++ b/docs/ui/forms/form-elements.mdx @@ -1,8 +1,10 @@ --- title: Form elements -description: 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: 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. bootstrapLink: components/forms/ libs: nouislider +description: Design user-friendly and effective forms. +order: 1 --- ## Classic inputs diff --git a/docs/ui/forms/form-fieldset.mdx b/docs/ui/forms/form-fieldset.mdx index ee16e6859..f9d5c8395 100644 --- a/docs/ui/forms/form-fieldset.mdx +++ b/docs/ui/forms/form-fieldset.mdx @@ -1,6 +1,7 @@ --- title: Form fieldset -description: 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: 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. --- ## Default markup diff --git a/docs/ui/forms/form-helpers.mdx b/docs/ui/forms/form-helpers.mdx index fc1c087c6..050c2ac5b 100644 --- a/docs/ui/forms/form-helpers.mdx +++ b/docs/ui/forms/form-helpers.mdx @@ -1,6 +1,7 @@ --- title: Form helpers -description: Use form helpers to provide additional information about a form element. You can use input help, required field, form hint, and additional info inside the label. +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. --- ## Input help diff --git a/docs/ui/forms/form-image-check.mdx b/docs/ui/forms/form-image-check.mdx index 478f0aff5..b5e2b12b8 100644 --- a/docs/ui/forms/form-image-check.mdx +++ b/docs/ui/forms/form-image-check.mdx @@ -1,6 +1,7 @@ --- title: Image check -description: The image check is a great way to make your form more user-friendly and engaging. You can use the image check to create a visually appealing form that will help users make decisions quickly and easily. +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. --- ## Default markup diff --git a/docs/ui/forms/form-input-mask.mdx b/docs/ui/forms/form-input-mask.mdx index c62fd57ad..0da2d6f70 100644 --- a/docs/ui/forms/form-input-mask.mdx +++ b/docs/ui/forms/form-input-mask.mdx @@ -1,6 +1,7 @@ --- title: Input mask -description: An input mask is a used to clarify the input format required in a given field and is helpful for users, removing confusion and reducing the number of validation errors. +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. --- ## Installation diff --git a/docs/ui/forms/form-selectboxes.mdx b/docs/ui/forms/form-selectboxes.mdx index 34f0d6d1b..676b56138 100644 --- a/docs/ui/forms/form-selectboxes.mdx +++ b/docs/ui/forms/form-selectboxes.mdx @@ -1,6 +1,7 @@ --- title: Form selectgroup -description: Use selectgroup to make your form more intuitive by providing users with a set of options to choose from. You can add simple selectgroup with a label, use icons only or icons with labels. Alternatively, you can use pill selectgroup if they go well with your design. +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. --- ## Simple selectgroup diff --git a/docs/ui/forms/form-validation.mdx b/docs/ui/forms/form-validation.mdx index 85e1ea0fb..18c036737 100644 --- a/docs/ui/forms/form-validation.mdx +++ b/docs/ui/forms/form-validation.mdx @@ -1,6 +1,7 @@ --- title: Validation states -description: To inform users whether the entered value is correct or not, use either of the validation states. Thanks to that, users will immediately know which form elements they need to correct and, if the state displays as invalid, why the value is incorrect. +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. --- ## Validation states diff --git a/docs/ui/forms/index.mdx b/docs/ui/forms/index.mdx index ccc1d26b5..0b784c6f1 100644 --- a/docs/ui/forms/index.mdx +++ b/docs/ui/forms/index.mdx @@ -1,4 +1,6 @@ --- title: Forms order: 5 +description: Build and manage web forms. +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. --- \ No newline at end of file diff --git a/docs/ui/getting-started/browser-support.mdx b/docs/ui/getting-started/browser-support.mdx index cdd7c7cf5..c1a1a12ee 100644 --- a/docs/ui/getting-started/browser-support.mdx +++ b/docs/ui/getting-started/browser-support.mdx @@ -1,5 +1,7 @@ --- title: Browser Support +description: Check browser compatibility for Tabler. +summaty: Learn about the supported browsers and compatibility guidelines for using Tabler UI components to ensure a consistent experience across different devices and platforms. --- As of this latest release, Tabler has launched many new features that may not be compatible with all browsers, especially older ones. diff --git a/docs/ui/getting-started/customize.mdx b/docs/ui/getting-started/customize.mdx index a5045ec9a..194a3578f 100644 --- a/docs/ui/getting-started/customize.mdx +++ b/docs/ui/getting-started/customize.mdx @@ -1,6 +1,7 @@ --- title: Customize Tabler -description: 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: 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. --- ## Custom Google Font diff --git a/docs/ui/getting-started/download.mdx b/docs/ui/getting-started/download.mdx index 4431513b6..48629f289 100644 --- a/docs/ui/getting-started/download.mdx +++ b/docs/ui/getting-started/download.mdx @@ -1,6 +1,7 @@ --- title: Download -description: 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: 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. --- ## CDN via jsDelivr diff --git a/docs/ui/getting-started/faq.mdx b/docs/ui/getting-started/faq.mdx index a60417289..76945a36f 100644 --- a/docs/ui/getting-started/faq.mdx +++ b/docs/ui/getting-started/faq.mdx @@ -1,6 +1,7 @@ --- title: FAQ -description: Answers to the most frequently asked questions. +summary: Answers to the most frequently asked questions. +description: Common questions and answers. --- ## I found an issue, what can I do? diff --git a/docs/ui/getting-started/index.mdx b/docs/ui/getting-started/index.mdx index 3f6dda54f..523fca615 100644 --- a/docs/ui/getting-started/index.mdx +++ b/docs/ui/getting-started/index.mdx @@ -1,7 +1,8 @@ --- title: Introduction -description: Free and open-source HTML Dashboard UI Kit built on Bootstrap +summary: Free and open-source HTML Dashboard UI Kit built on Bootstrap order: 1 +description: Overview of Tabler UI Kit. --- ## What is Tabler? diff --git a/docs/ui/index.mdx b/docs/ui/index.mdx index 25a812d04..440d79c33 100644 --- a/docs/ui/index.mdx +++ b/docs/ui/index.mdx @@ -1,4 +1,6 @@ --- 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. --- \ No newline at end of file diff --git a/docs/ui/layout/index.mdx b/docs/ui/layout/index.mdx index 084fbb871..7166d579c 100644 --- a/docs/ui/layout/index.mdx +++ b/docs/ui/layout/index.mdx @@ -1,4 +1,6 @@ --- title: Layout order: 3 +description: Structure your UI effectively. +summary: The layout section covers essential tools and techniques for structuring content and organizing UI elements, helping you build visually appealing and functional designs. --- \ No newline at end of file diff --git a/docs/ui/layout/page-headers.mdx b/docs/ui/layout/page-headers.mdx index 779c4097b..56dea04f5 100644 --- a/docs/ui/layout/page-headers.mdx +++ b/docs/ui/layout/page-headers.mdx @@ -1,6 +1,7 @@ --- title: Page headers -description: Page heading examples for Tabler +summary: Page heading examples for Tabler +description: Examples of Tabler page headers. --- ## Simple header diff --git a/docs/ui/layout/page-layouts.mdx b/docs/ui/layout/page-layouts.mdx index 022aa524a..e72b6dceb 100644 --- a/docs/ui/layout/page-layouts.mdx +++ b/docs/ui/layout/page-layouts.mdx @@ -1,6 +1,7 @@ --- title: Page layouts -description: Learn how to build a sample version of the dashboard +summary: Learn how to build a sample version of the dashboard +description: Learn to design dashboard layouts. --- diff --git a/docs/ui/plugins/flags.mdx b/docs/ui/plugins/flags.mdx index bb2035173..6a26710c4 100644 --- a/docs/ui/plugins/flags.mdx +++ b/docs/ui/plugins/flags.mdx @@ -1,8 +1,9 @@ --- title: Flags -description: Thanks to the Tabler flags plugin, you can create flags to visually represent countries or languages. Flags are often used in forms, as an element of a delivery address, phone number dialling code and many more. +summary: Thanks to the Tabler flags plugin, you can create flags to visually represent countries or languages. Flags are often used in forms, as an element of a delivery address, phone number dialling code and many more. plugin: flags libs: tabler-flags +description: Visual representation of countries/languages. --- ## Installation diff --git a/docs/ui/plugins/index.mdx b/docs/ui/plugins/index.mdx index 668b82657..1bd605ded 100644 --- a/docs/ui/plugins/index.mdx +++ b/docs/ui/plugins/index.mdx @@ -1,4 +1,6 @@ --- title: Plugins order: 7 +description: Enhance Tabler UI with useful plugins. +summary: Tabler plugins extend the functionality of the framework, providing additional tools and features to enhance your projects and streamline the development process. --- \ No newline at end of file diff --git a/docs/ui/plugins/payments.mdx b/docs/ui/plugins/payments.mdx index ecd9c2010..fe5d46c0d 100644 --- a/docs/ui/plugins/payments.mdx +++ b/docs/ui/plugins/payments.mdx @@ -1,7 +1,8 @@ --- title: Payments -description: 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 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. --- ## Installation diff --git a/docs/ui/plugins/social-icons.mdx b/docs/ui/plugins/social-icons.mdx index 8c5b80cc2..1ff5bc499 100644 --- a/docs/ui/plugins/social-icons.mdx +++ b/docs/ui/plugins/social-icons.mdx @@ -1,8 +1,9 @@ --- title: Social Icons -description: Social icons are a great way to make your website more engaging and user-friendly. You can use social icons to help users quickly find your social media profiles and connect with you. +summary: Social icons are a great way to make your website more engaging and user-friendly. You can use social icons to help users quickly find your social media profiles and connect with you. plugin: socials libs: tabler-socials +description: Connect users to your social profiles. --- ## Installation diff --git a/docs/ui/utilities/borders.mdx b/docs/ui/utilities/borders.mdx index e219e6236..a37a79047 100644 --- a/docs/ui/utilities/borders.mdx +++ b/docs/ui/utilities/borders.mdx @@ -1,6 +1,7 @@ --- title: Borders -description: Use border utilities to quickly style the border and border-radius of an element. Great for images, buttons, or any other element. +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. --- ## Border direction diff --git a/docs/ui/utilities/cursors.mdx b/docs/ui/utilities/cursors.mdx index 9f52de482..89826ebe9 100644 --- a/docs/ui/utilities/cursors.mdx +++ b/docs/ui/utilities/cursors.mdx @@ -1,6 +1,7 @@ --- title: Cursors -description: 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. +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. --- ## Cursor utilities diff --git a/docs/ui/utilities/index.mdx b/docs/ui/utilities/index.mdx index b034bca5d..9a5af5b6d 100644 --- a/docs/ui/utilities/index.mdx +++ b/docs/ui/utilities/index.mdx @@ -1,4 +1,5 @@ --- title: Utilities order: 6 +description: Helper classes for layout and design. --- \ No newline at end of file diff --git a/docs/ui/utilities/interactions.mdx b/docs/ui/utilities/interactions.mdx index 9c9075423..d25b638ec 100644 --- a/docs/ui/utilities/interactions.mdx +++ b/docs/ui/utilities/interactions.mdx @@ -1,6 +1,7 @@ --- title: Interactions -description: Utility classes that change how users interact with contents of a website. +summary: Utility classes that change how users interact with contents of a website. +description: Modify user interactions efficiently. --- ## Text selection