Render docs pages from a content collection instead of file routing (#2849)

2026-08-29 05:12:36 +04:00 · 2026-08-11 23:06:19 +02:00
parent 4b01fb591c
commit 37b5f5a5ca
162 changed files with 366 additions and 489 deletions
@@ -59,7 +59,8 @@ export default defineConfig({
    ),
  },
  // pages live at the package root (./pages) — content-first layout; all
-  // components/lib/data are shared (see the @shared alias)
+  // components/lib/data are shared (see the @shared alias). The docs content
+  // itself lives in ./content and is rendered by pages/[...slug].astro.
  srcDir: '.',
  server: {
    port: 3010,
@@ -79,10 +80,10 @@ export default defineConfig({
        '@ui': fileURLToPath(new URL('../shared/ui', import.meta.url)),
        // docs-only components (Example, DocsMenu, …)
        '@components': fileURLToPath(new URL('./components', import.meta.url)),
-        // docs-only layouts (DocsLayout + the MDX adapter, referenced by `layout:` front matter)
+        // docs-only layouts (DocsLayout)
        '@layouts': fileURLToPath(new URL('./layouts', import.meta.url)),
-        // this package's pages dir — used by @shared/lib/docs-children's glob
-        '@pages': fileURLToPath(new URL('./pages', import.meta.url)),
+        // docs-only helpers (docs collection queries)
+        '@lib': fileURLToPath(new URL('./lib', import.meta.url)),
      },
    },
  },
@@ -0,0 +1,18 @@
+---
+// Cards for the direct child pages of a docs index url. MDX cannot await, so
+// pages use this component instead of calling getDocsChildren() inline.
+// Renders bare cards — the caller supplies the surrounding `.row`.
+import DocsCard from '@components/DocsCard.astro'
+import { getDocsChildren } from '@lib/docs-pages'
+
+interface Props {
+  /** docs url whose children are listed, e.g. "/ui/getting-started/frameworks" */
+  url: string
+}
+
+const { url } = Astro.props
+
+const children = await getDocsChildren(url)
+---
+
+{children.map((child) => <DocsCard href={child.url} icon={child.icon} title={child.title} description={child.description} />)}
@@ -2,8 +2,8 @@
 import DocsCard from './DocsCard.astro'
 import docs from '@data/docs.json'
 import Icon from '@ui/Icon.astro'
-import { getDocsChildren } from '@shared/lib/docs-children'
-import type { DocsChildPage } from '@shared/lib/docs-children'
+import { getDocsChildren } from '@lib/docs-pages'
+import type { DocsPage } from '@lib/docs-pages'

 interface MenuLeaf {
  title: string
@@ -23,7 +23,7 @@ interface Props {

 const { url } = Astro.props

-const children = getDocsChildren(url)
+const children = await getDocsChildren(url)

 type Pagination = {
  prev: MenuLeaf | null
@@ -64,7 +64,7 @@ const { prev, next, found } = findPage(docs.menu as MenuNode[]) ?? {
  children.length > 0 && (
    <div class="mt-6 pt-6">
      <div class="row row-deck row-cards">
-        {children.map((child: DocsChildPage) => (
+        {children.map((child: DocsPage) => (
          <DocsCard href={child.url} title={child.title} description={child.description} icon={child.icon} />
        ))}
      </div>
@@ -0,0 +1,51 @@
+import { defineCollection } from 'astro:content'
+import { glob } from 'astro/loaders'
+// `z` re-exported from astro:content is deprecated and slated for removal.
+import { z } from 'astro/zod'
+
+// Docs pages live in ./content (not ./pages) so they are not routed by the file
+// system — pages/[...slug].astro renders them from this collection instead.
+
+/** Accepts both `docs-libs: apexcharts` and `docs-libs: [apexcharts]`. */
+const stringList = z.union([z.string(), z.array(z.string())]).transform((value) => (Array.isArray(value) ? value : [value]))
+
+const docs = defineCollection({
+  loader: glob({
+    pattern: '**/*.mdx',
+    base: './content',
+    // Ids mirror the page URL without the leading slash: `ui/components/button`,
+    // `ui/components` (from ui/components/index.mdx), `index` for the home page.
+    // Explicit so ids never depend on Astro's default slugification.
+    generateId: ({ entry }) => entry.replace(/\.mdx$/, '').replace(/\/index$/, ''),
+  }),
+  schema: z
+    .object({
+      /** the page's h1 heading */
+      'title': z.string(),
+      /** lead paragraph below the title */
+      'summary': z.string(),
+      /** SEO description */
+      'description': z.string(),
+      'seoTitle': z.string().optional(),
+      'seoDescription': z.string().optional(),
+      /** icon name for the card this page gets on its parent index page */
+      'icon': z.string().optional(),
+      /** position among sibling pages; unordered pages sort last, then by title */
+      'order': z.number().default(999),
+      /** docs URLs of related pages, rendered above the pagination */
+      'related': z.array(z.string()).default([]),
+      /** extra libraries from libs.json (css+js) */
+      'docs-libs': stringList.default([]),
+      /** extra tabler-<name>.css sheets for this page's demos */
+      'css-plugins': stringList.default([]),
+      'hide-pagination': z.boolean().default(false),
+      /** renders the "Added in X" badge next to the h1 */
+      'added-in': z.string().optional(),
+    })
+    // strict so a mistyped key fails the build instead of being silently dropped
+    .strict()
+    // kebab-case front matter keys → the camelCase props DocsLayout expects
+    .transform(({ 'docs-libs': docsLibs, 'css-plugins': cssPlugins, 'hide-pagination': hidePagination, 'added-in': addedIn, ...rest }) => ({ ...rest, docsLibs, cssPlugins, hidePagination, addedIn })),
+})
+
+export const collections = { docs }
@@ -5,7 +5,6 @@ order: 4
 description: Customizable email templates for over 90 clients and devices.
 summary: Tabler Emails is a set of 80 eye-catching, customizable HTML templates. They are compatible with over 90 email clients and devices.
 seoDescription: Tabler Emails is a collection of 80 premium, customizable HTML templates. They are compatible with over 90 email clients and devices.
-layout: '@layouts/DocsMdxLayout.astro'
 ---

 Tabler Emails is a package of ready-to-use HTML email templates. Each template is tested in more than 90 email clients and devices, so your messages look right everywhere. Use the [compiled templates](/emails/introduction/compiled-html) as they are, or customize the [source files](/emails/introduction/source-html) to match your brand.
@@ -5,7 +5,6 @@ seoTitle: Compiled HTML templates
 description: Learn how to use the compiled HTML email templates from the Tabler Emails package.
 summary: The compiled HTML files from the Tabler Emails package are ready to use in your email marketing campaigns. This guide explains how to use them effectively.
 seoDescription: The compiled HTML files from the Tabler Emails package are ready to use in your email marketing campaigns. This guide explains how to use them effectively.
-layout: '@layouts/DocsMdxLayout.astro'
 ---
 import Example from '@components/Example.astro';

@@ -5,7 +5,6 @@ seoTitle: Package contents
 description: See what is inside the Tabler Emails package - folder structure, compiled HTML templates ready to use, and editable source files.
 summary: The Tabler Emails package contains files which can be used by everyone, even without great knowledge of HTML.
 seoDescription: See what is inside the Tabler Emails package - folder structure, compiled HTML templates ready to use and source files for customization.
-layout: '@layouts/DocsMdxLayout.astro'
 ---
 import Example from '@components/Example.astro';

@@ -4,7 +4,6 @@ seoTitle: Introduction to Tabler Emails
 description: Learn what the Tabler Emails package includes and how to start using its responsive HTML email templates in your campaigns.
 summary: Learn what is inside the Tabler Emails package and how to start using the templates in your campaigns.
 seoDescription: Learn what is inside the Tabler Emails package - folder structure, compiled HTML templates and customizable source files.
-layout: '@layouts/DocsMdxLayout.astro'
 ---

 This section explains what you get in the Tabler Emails package and how to work with it. Read about the [package contents](/emails/introduction/contents), use the [compiled HTML templates](/emails/introduction/compiled-html) right away, or build your own versions from the [source files](/emails/introduction/source-html).
@@ -5,7 +5,6 @@ seoTitle: Source HTML templates
 description: Learn how to use the source HTML email templates from the Tabler Emails package.
 summary: The source HTML files from the Tabler Emails package need a bit more work than the compiled ones. Learn how to use them.
 seoDescription: The source HTML files from the Tabler Emails package need a bit more work than the compiled ones. Learn how to use them.
-layout: '@layouts/DocsMdxLayout.astro'
 ---
 import Example from '@components/Example.astro';

@@ -5,7 +5,6 @@ summary:
  developers looking to enhance their projects with high-quality icons.
 order: 2
 description: Over 5000 pixel-perfect icons for web design and development
-layout: '@layouts/DocsMdxLayout.astro'
 ---

 import { site } from '@shared/lib/site'
@@ -2,7 +2,6 @@
 title: Astro
 description: Add Tabler Icons to Astro projects with the official tree-shakable package. Import any of over 5000 icons as native Astro components.
 summary: Tabler Icons for Astro provides an optimized collection of icons specifically designed for use with Astro. These lightweight and scalable icons are easy to integrate into Astro-based projects.
-layout: '@layouts/DocsMdxLayout.astro'
 ---

 import TabsPackage from '@components/TabsPackage.astro'
@@ -2,7 +2,6 @@
 title: Libraries
 description: Official Tabler Icons libraries for React, Vue, Svelte, Angular and more. Use over 5000 icons as native components or a simple webfont.
 summary: The libraries section offers various integrations of Tabler Icons for popular frameworks and technologies, making it easy to incorporate icons into any project.
-layout: '@layouts/DocsMdxLayout.astro'
 ---

 Tabler Icons ships official libraries for the most popular frameworks. Pick the package for your stack and use icons as native components, with tree-shaking and full styling control. A [webfont](/icons/libraries/webfont) is also available if you prefer plain CSS classes.
@@ -2,7 +2,6 @@
 title: Preact
 description: Add Tabler Icons to Preact apps with the official tree-shakable package. Import any of over 5000 lightweight SVG icons as components.
 summary: Tabler Icons for Preact provides an optimized collection of icons specifically designed for use with Preact. These lightweight and scalable icons are easy to integrate into Preact-based projects.
-layout: '@layouts/DocsMdxLayout.astro'
 ---

 import TabsPackage from '@components/TabsPackage.astro'
@@ -2,7 +2,6 @@
 title: React
 description: Add Tabler Icons to React apps with the official tree-shakable package. Import over 5000 scalable SVG icons as customizable components.
 summary: Tabler Icons for React offers a robust set of icons tailored for React applications, providing developers with a seamless way to enhance their user interfaces with high-quality, scalable graphics.
-layout: '@layouts/DocsMdxLayout.astro'
 ---

 import TabsPackage from '@components/TabsPackage.astro'
@@ -2,7 +2,6 @@
 title: SolidJS
 description: Add Tabler Icons to SolidJS apps with the official tree-shakable package. Import over 5000 high-quality SVG icons as components.
 summary: Tabler Icons for SolidJS is a lightweight library offering a vast selection of high-quality icons. It is designed for seamless integration with SolidJS, enabling developers to build visually appealing interfaces.
-layout: '@layouts/DocsMdxLayout.astro'
 ---

 import TabsPackage from '@components/TabsPackage.astro'
@@ -2,7 +2,6 @@
 title: Svelte
 description: Add Tabler Icons to Svelte apps with the official tree-shakable package. Import over 5000 clean SVG icons as customizable components.
 summary: Tabler Icons for Svelte provides a clean and efficient way to use Tabler's comprehensive icon set in Svelte applications, helping developers deliver polished, user-friendly designs.
-layout: '@layouts/DocsMdxLayout.astro'
 ---

 import TabsPackage from '@components/TabsPackage.astro'
@@ -2,7 +2,6 @@
 title: Vue
 description: Add Tabler Icons to Vue apps with the official package. Import over 5000 SVG icons as Vue components with tree-shaking and full styling control.
 summary: Tabler Icons for Vue offers a collection of customizable and scalable icons designed for use in Vue applications, providing a powerful tool for creating modern and engaging interfaces.
-layout: '@layouts/DocsMdxLayout.astro'
 ---

 import TabsPackage from '@components/TabsPackage.astro'
@@ -2,7 +2,6 @@
 title: Webfont
 description: Use Tabler Icons as a webfont and add icons with simple CSS classes. A lightweight and scalable way to include over 5000 icons on any website.
 summary: Tabler Icons as a webfont allows you to easily include icons in your projects using simple CSS classes, offering a lightweight and scalable solution for web development.
-layout: '@layouts/DocsMdxLayout.astro'
 ---

 import TabsPackage from '@components/TabsPackage.astro'
@@ -2,7 +2,6 @@
 title: Figma plugin
 description: Use the Tabler Icons Figma plugin to insert over 5000 customizable icons directly into your designs without leaving Figma.
 summary: The Tabler Figma plugin allows designers to seamlessly integrate Tabler Icons into their Figma projects, providing quick access to a vast library of customizable icons that enhance the design workflow.
-layout: '@layouts/DocsMdxLayout.astro'
 ---

 import DownloadButton from '@components/DownloadButton.astro'
@@ -2,7 +2,6 @@
 title: Plugins
 description: Bring Tabler Icons into your design tools with official plugins. Access the full, always up-to-date icon set right inside Figma.
 summary: Plugins bring Tabler Icons directly into your design tools, so you can use the full icon set without leaving your workflow.
-layout: '@layouts/DocsMdxLayout.astro'
 ---

 Use plugins to work with Tabler Icons inside your favorite design tools. The [Figma plugin](/icons/plugins/figma) gives you the full, always up-to-date icon set right on your canvas.
@@ -2,7 +2,6 @@
 title: EPS version
 summary: Use the EPS files in print projects and vector editing tools that do not support SVG.
 description: Download Tabler Icons as EPS files for print projects and vector editing tools that do not support the SVG format.
-layout: '@layouts/DocsMdxLayout.astro'
 ---

 import TabsPackage from '@components/TabsPackage.astro'
@@ -2,7 +2,6 @@
 title: Static files
 description: Download Tabler Icons as static files in SVG, PNG, EPS, and PDF formats. Pick the format that fits your design or development workflow.
 summary: Static files provide multiple formats of Tabler Icons, including EPS, PDF, PNG, and SVG, offering flexibility for different design and development workflows.
-layout: '@layouts/DocsMdxLayout.astro'
 ---

 Every Tabler icon is available as a set of static files. Download [SVG](/icons/static-files/svg) for the web, [PNG](/icons/static-files/png) for quick mockups, or [EPS](/icons/static-files/eps) and [PDF](/icons/static-files/pdf) for print and vector editing tools. Pick the format that fits your workflow.
@@ -2,7 +2,6 @@
 title: PDF version
 summary: Use the PDF files in documents, presentations and print workflows.
 description: Download Tabler Icons as PDF files, ready to place in documents, presentations, and print workflows without conversion.
-layout: '@layouts/DocsMdxLayout.astro'
 ---

 import TabsPackage from '@components/TabsPackage.astro'
@@ -2,7 +2,6 @@
 title: PNG version
 summary: Use the PNG files when you need raster icons for mockups, chats or tools without vector support.
 description: Download Tabler Icons as PNG files - raster images for mockups, chat apps, and tools that do not support vector formats.
-layout: '@layouts/DocsMdxLayout.astro'
 ---

 import TabsPackage from '@components/TabsPackage.astro'
@@ -2,7 +2,6 @@
 title: SVG version
 summary: Use the SVG files for the web - they scale without quality loss and are easy to style.
 description: Download Tabler Icons as SVG files that scale without quality loss. Use them as images, backgrounds, or inline elements on the web.
-layout: '@layouts/DocsMdxLayout.astro'
 ---

 import TabsPackage from '@components/TabsPackage.astro'
@@ -3,7 +3,6 @@ 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: '@layouts/DocsMdxLayout.astro'
 ---

 <img src="/img/cover-illustrations.png" alt="Tabler Illustrations" class="hide-theme-dark" width="1600" height="750" />
@@ -2,7 +2,6 @@
 title: Contents
 description: Explore the folder structure of the Tabler Illustrations package and learn where to find each format, color variant, and theme.
 summary: The Tabler Illustrations package is thoughtfully structured to provide designers and developers with an array of high-quality assets. This guide explores the various folders and their contents, helping users make the most of these resources.
-layout: '@layouts/DocsMdxLayout.astro'
 ---
 import Example from '@components/Example.astro';

@@ -2,7 +2,6 @@
 title: Customization
 description: Learn how to customize Tabler Illustrations with CSS variables - change colors, sizes, and formats to match your brand and design.
 summary: Learn how to tailor Tabler Illustrations by adjusting colors, sizes, and formats. This section provides insights into seamlessly integrating illustrations to align with your design and branding.
-layout: '@layouts/DocsMdxLayout.astro'
 ---
 import Example from '@components/Example.astro';

@@ -2,7 +2,6 @@
 title: Introduction
 description: Introduction to Tabler Illustrations and their key features.
 summary: Tabler Illustrations is a collection of high-quality, customizable illustrations designed to enhance the visual appeal of your projects. These illustrations align seamlessly with the Tabler design system, making it easy to create engaging and cohesive designs for websites, apps, and presentations
-layout: '@layouts/DocsMdxLayout.astro'
 ---

 This section covers everything you need to start with Tabler Illustrations. [Preview the collection](/illustrations/introduction/preview), check [what is inside the package](/illustrations/introduction/contents), learn how to [customize the illustrations](/illustrations/introduction/customization), and read the [license terms](/illustrations/introduction/license).
@@ -2,7 +2,6 @@
 title: License
 summary: Read what you can and cannot do with Tabler Illustrations under the personal and team licenses.
 description: License terms for personal and team use of Tabler Illustrations.
-layout: '@layouts/DocsMdxLayout.astro'
 ---
 import Example from '@components/Example.astro';

@@ -2,7 +2,6 @@
 title: Preview
 summary: 'Tabler Illustrations offers 80 illustrations in two themes: light and dark. You can use them in your projects to enhance the visual appeal and convey messages effectively.'
 description: Browse all Tabler Illustrations in light and dark themes.
-layout: '@layouts/DocsMdxLayout.astro'
 ---

 import illustrations from '@data/illustrations.json'
@@ -3,7 +3,6 @@ title: Welcome to Tabler Documentation
 summary: Tabler Docs provides a comprehensive guide to help you get started with the Tabler ecosystem, including its UI components, plugins, and icons. Explore detailed documentation to understand and leverage the full potential of Tabler in your projects.
 description: Find comprehensive guides, examples, and resources to help you use Tabler UI components, plugins, icons, and tools effectively in your projects.
 hide-pagination: true
-layout: '@layouts/DocsMdxLayout.astro'
 ---

 import Card from '@components/DocsCard.astro'
@@ -4,7 +4,6 @@ summary:
  The choice of colors for a website or app interface has a big influence on how users interact with the product and what decisions they make. Harmonious colors can contribute to a nice first impression and encourage users to engage with your product, so it's a very important aspect of a successful design, which needs
  to be well thought out.
 description: Explore the Tabler color palette and learn how to use base and pastel shades to style components, indicate states, and guide user actions.
-layout: '@layouts/DocsMdxLayout.astro'
 ---

 import Colors from '@components/Colors.astro'
@@ -3,7 +3,6 @@ title: Base
 order: 2
 description: Foundational styles that every Tabler project builds on - colors, typography, and long-form content - for a consistent user interface.
 summary: The base section includes foundational elements such as colors, typography, and spacing that form the building blocks of a cohesive and consistent user interface.
-layout: '@layouts/DocsMdxLayout.astro'
 ---

 Base styles are the foundation every Tabler project builds on. They define colors, typography, and long-form content styles, so all components share one consistent look. Start here before you customize anything else.
@@ -3,7 +3,6 @@ title: Prose
 summary: Use the `.prose` wrapper to style long-form content without adding classes to every element.
 description: Style long-form content with the prose class. Apply consistent typography to headings, paragraphs, lists, and tables without extra classes.
 related: [/ui/base/typography]
-layout: '@layouts/DocsMdxLayout.astro'
 ---
 import Example from '@components/Example.astro';
 import Prose from '@ui/Prose.astro';
@@ -3,7 +3,6 @@ title: Typography
 summary: Typography plays an important role in creating an attractive and clear interface design. Good typography will make the content easy to follow and improve the usability of your website.
 description: Learn how Tabler styles headings, paragraphs, and text elements to keep content readable and interfaces clear and easy to follow.
 related: [/ui/base/prose]
-layout: '@layouts/DocsMdxLayout.astro'
 ---
 import Example from '@components/Example.astro';
 import Prose from '@ui/Prose.astro';
@@ -3,7 +3,6 @@ title: Accordion
 summary: Use accordion panels to group related content and show one section at a time.
 description: Build collapsible content sections with accordion classes and modifiers.
 related: [/ui/components/tab]
-layout: '@layouts/DocsMdxLayout.astro'
 ---
 import Example from '@components/Example.astro';
 import Icon from '@ui/Icon.astro';
@@ -3,7 +3,6 @@ title: Alert
 summary: An alert message is used to inform users about the status of their action and help them solve problems that may occur. Good alert design is important for the overall user experience of a website or app.
 description: Show alert messages that inform users about success, info, warning, or danger states, with icons, links, and dismissible options.
 related: [/ui/components/toast]
-layout: '@layouts/DocsMdxLayout.astro'
 ---
 import Example from '@components/Example.astro';
 import CodeDocs from '@components/CodeDocs.astro';
@@ -4,7 +4,6 @@ summary: The autosize element will automatically adjust the textarea height and
 docs-libs: [autosize]
 description: Make textareas grow automatically as users type with the autosize plugin, so longer text stays visible without manual resizing.
 related: [/ui/forms/form-elements]
-layout: '@layouts/DocsMdxLayout.astro'
 ---
 import Example from '@components/Example.astro';
 import CodeDocs from '@components/CodeDocs.astro';
@@ -3,7 +3,6 @@ title: Avatar
 summary: An avatar helps customize interface elements and make the product experience more personalized. It is often used in communication apps, collaboration tools, and social media.
 description: Display user avatars with images, initials, or icons. Change sizes, shapes, and colors, or group them into stacked avatar lists.
 related: [/ui/components/status, /ui/components/badge]
-layout: '@layouts/DocsMdxLayout.astro'
 ---
 import Example from '@components/Example.astro';
 import Icon from '@ui/Icon.astro';
@@ -3,7 +3,6 @@ title: Badge
 summary: A badge is a small count and labeling component used to add extra information to an interface element. You can use it to draw user attention to a new element, notify about unread messages, or provide additional context.
 description: Add badges to show counts, labels, or statuses. Use colors, outline and pill styles, links, and notification dots to add context.
 related: [/ui/components/status, /ui/components/tag]
-layout: '@layouts/DocsMdxLayout.astro'
 ---
 import BadgesList from '@ui/BadgesList.astro';
 import Example from '@components/Example.astro';
@@ -3,7 +3,6 @@ title: Breadcrumb
 summary: A breadcrumb is used to show the current website or app location and reduce the number of actions users need to take. It helps users navigate the website hierarchy and better understand its structure.
 description: Show the current page location with a breadcrumb trail. Help users navigate your site hierarchy and understand its structure.
 related: [/ui/components/pagination]
-layout: '@layouts/DocsMdxLayout.astro'
 ---
 import Example from '@components/Example.astro';
 import Breadcrumb from '@ui/Breadcrumb.astro';
@@ -3,7 +3,6 @@ title: Button
 summary: Use a button style that best suits your design and encourages users to take the desired action. You can customize button properties to improve user experience by changing size, shape, color, and more.
 description: Create buttons in many colors, sizes, and shapes. Add icons, loading states, and social styles to guide users to the right action.
 related: [/ui/components/dropdown]
-layout: '@layouts/DocsMdxLayout.astro'
 ---
 import ButtonGroup from '@ui/ButtonGroup.astro';
 import Example from '@components/Example.astro';
@@ -3,7 +3,6 @@ title: Card gradient
 summary: Card gradients add rich color backgrounds to cards and help emphasize key information in dashboards and marketing sections.
 description: Build eye-catching cards with gradient variants, directions, and animated backgrounds.
 related: [/ui/components/card]
-layout: '@layouts/DocsMdxLayout.astro'
 ---

 import Example from '@components/Example.astro'
@@ -3,7 +3,6 @@ title: Card
 summary: A card is a flexible user interface element that helps organize content into meaningful sections and display it across different screen sizes. It can contain smaller elements such as images, text, links, and buttons, and can act as an entry point to more detailed information.
 description: Organize content with flexible cards. Combine headers, footers, images, and actions to build sections that work on any screen size.
 related: [/ui/components/card-gradient, /ui/components/ribbon]
-layout: '@layouts/DocsMdxLayout.astro'
 ---
 import Example from '@components/Example.astro';
 import Icon from '@ui/Icon.astro';
@@ -3,7 +3,6 @@ title: Carousel
 summary: A carousel is used to display multiple pieces of visual content without taking up too much space. It eliminates the need to scroll down the page to see all content and is a popular method of presenting marketing information.
 description: Display multiple images or slides in a compact carousel with indicators, captions, and automatic or manual navigation.
 related: [/ui/components/inline-player]
-layout: '@layouts/DocsMdxLayout.astro'
 ---
 import Example from '@components/Example.astro';
 import CodeDocs from '@components/CodeDocs.astro';
@@ -4,7 +4,6 @@ docs-libs: [apexcharts]
 summary: Tabler uses ApexCharts - a free and open-source modern charting library that helps developers to create beautiful and interactive visualizations for web pages.
 description: Build interactive line, bar, pie, and other charts with ApexCharts. Copy ready-to-use configurations styled to match Tabler.
 related: [/ui/components/countup, /ui/components/trending]
-layout: '@layouts/DocsMdxLayout.astro'
 ---

 import Example from '@components/Example.astro'
@@ -4,7 +4,6 @@ summary: A countup element is used to display numerical data in an interesting w
 docs-libs: [countup]
 description: Animate numbers with the countup component to display statistics dynamically and make dashboards more engaging.
 related: [/ui/components/chart]
-layout: '@layouts/DocsMdxLayout.astro'
 ---
 import Example from '@components/Example.astro';
 import CodeDocs from '@components/CodeDocs.astro';
@@ -3,7 +3,6 @@ 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: Display labeled data in a compact datagrid - a responsive list of title and content pairs, ideal for detail panels and summaries.
 related: [/ui/components/table]
-layout: '@layouts/DocsMdxLayout.astro'
 ---
 import Example from '@components/Example.astro';
 import CodeDocs from '@components/CodeDocs.astro';
@@ -2,7 +2,6 @@
 title: Divider
 summary: Dividers help organize content and make the interface layout clear and uncluttered. Greater clarity adds up to better user experience and enhanced interaction with a website or app.
 description: Separate content with horizontal dividers. Add optional text labels aligned left, center, or right to keep layouts clear.
-layout: '@layouts/DocsMdxLayout.astro'
 ---
 import Example from '@components/Example.astro';

@@ -3,7 +3,6 @@ title: Dropdown
 summary: A dropdown is used to display a list of options or include more items in a menu without overwhelming users with too many buttons and long lists. It improves interaction with your website or software and keeps the interface clear.
 description: Build dropdown menus that reveal lists of options or actions. Add icons, dividers, and custom triggers to keep the interface clean.
 related: [/ui/components/button, /ui/components/popover]
-layout: '@layouts/DocsMdxLayout.astro'
 ---
 import Example from '@components/Example.astro';
 import CodeDocs from '@components/CodeDocs.astro';
@@ -4,7 +4,6 @@ summary: Dropzone is a simple JavaScript library that helps you add file drag an
 description: Add drag-and-drop file uploads to your forms with the Dropzone library, styled to match Tabler out of the box.
 docs-libs: [dropzone]
 related: [/ui/forms/form-elements]
-layout: '@layouts/DocsMdxLayout.astro'
 ---
 import Example from '@components/Example.astro';

@@ -3,7 +3,6 @@ title: Empty state
 summary: An empty state or blank page is commonly used as a placeholder for first-use, empty data, or an error screen. Its goal is to engage users when there is no content to display, which makes its design important for the overall user experience of your website or app.
 description: Design empty states that guide users when there is no content to show. Combine images, text, and actions for first-use and error screens.
 related: [/ui/components/placeholder]
-layout: '@layouts/DocsMdxLayout.astro'
 ---
 import Example from '@components/Example.astro';
 import Illustration from '@ui/Illustration.astro';
@@ -3,7 +3,6 @@ title: FullCalendar
 summary: A calendar shows events in a month, week, day, or list view. Use it for schedules, bookings, and team plans.
 docs-libs: [fullcalendar]
 description: Show events in a calendar.
-layout: '@layouts/DocsMdxLayout.astro'
 ---
 import Example from '@components/Example.astro';
 import CdnImportPlugin from '@components/CdnImportPlugin.astro';
@@ -3,7 +3,6 @@ title: Icon
 summary: Use an icon from over 5000 options created specifically for Tabler to make your dashboard more attractive. Each icon is available under the MIT license, so it can be used in both private and commercial projects.
 description: Use over 5000 free MIT-licensed Tabler icons in your interface. Learn how to embed, size, and animate them in your projects.
 related: [/ui/components/switch-icon]
-layout: '@layouts/DocsMdxLayout.astro'
 ---
 import Example from '@components/Example.astro';
 import Icon from '@ui/Icon.astro';
@@ -3,7 +3,6 @@ title: Components
 order: 4
 description: Browse all Tabler UI components - buttons, cards, modals, tables, and more - with live previews and ready-to-copy HTML code.
 summary: Tabler UI includes a variety of components to help you build web applications that are both functional and visually appealing. From buttons and cards to modals and navigation, these components provide a wide range of features to enhance your site.
-layout: '@layouts/DocsMdxLayout.astro'
 ---

 Components are the core of Tabler UI. Each one is built with plain HTML and CSS classes on top of Bootstrap, so you can copy an example and use it right away. Every page below shows live previews with ready-to-copy code.
@@ -4,7 +4,6 @@ docs-libs: [plyr]
 summary: A simple, lightweight, accessible and customizable HTML5, YouTube and Vimeo media player that supports modern browsers.
 description: Embed audio and video with a lightweight, accessible media player that supports HTML5, YouTube, and Vimeo sources.
 related: [/ui/components/carousel]
-layout: '@layouts/DocsMdxLayout.astro'
 ---
 import Example from '@components/Example.astro';
 import { Code } from 'astro:components';
@@ -3,7 +3,6 @@ title: Lightbox
 summary: A lightbox opens images and videos in a fullscreen overlay above the page. Use it for galleries, photo grids, and media previews.
 docs-libs: [fslightbox]
 description: Open images and videos in a fullscreen lightbox.
-layout: '@layouts/DocsMdxLayout.astro'
 ---
 import Example from '@components/Example.astro';
 import { Code } from 'astro:components';
@@ -2,7 +2,6 @@
 title: List group
 summary: A list group shows a series of related items in one block. Use it for simple lists, navigation, settings, and lists of records inside a card.
 description: Group related items in one list.
-layout: '@layouts/DocsMdxLayout.astro'
 ---
 import Example from '@components/Example.astro';
 import Icon from '@ui/Icon.astro';
@@ -3,7 +3,6 @@ title: Map
 summary: A map shows places and markers on an interactive world map. Tabler provides the markup and the setup code, and the map itself is rendered by Mapbox GL JS.
 description: Show interactive maps with markers using Mapbox GL JS. Tabler provides the container markup and setup code to get you started.
 related: [/ui/components/vector-map]
-layout: '@layouts/DocsMdxLayout.astro'
 ---
 import Example from '@components/Example.astro';
 import { Code } from 'astro:components';
@@ -3,7 +3,6 @@ title: Modal
 summary: Use Bootstrap’s JavaScript modal plugin to add dialogs to your site for lightboxes, user notifications, or completely custom content.
 description: Create modal dialogs for notifications, confirmations, and custom content. Adjust sizes, add forms, and control them with JavaScript.
 related: [/ui/components/offcanvas, /ui/components/toast]
-layout: '@layouts/DocsMdxLayout.astro'
 ---
 import Example from '@components/Example.astro';
 import Icon from '@ui/Icon.astro';
@@ -3,7 +3,6 @@ title: Offcanvas
 summary: Offcanvas is a hidden sidebar that slides into view from the edge of the screen. Use it for navigation, filters or settings that should not take up space all the time.
 description: Sidebar panel that slides in from the edge of the viewport.
 related: [/ui/components/modal]
-layout: '@layouts/DocsMdxLayout.astro'
 ---
 import Example from '@components/Example.astro';
 import CodeDocs from '@components/CodeDocs.astro';
@@ -3,7 +3,6 @@ title: Pagination
 summary: Pagination is a user interface element that allows users to navigate through a set of data or content that is divided into multiple pages. It is commonly used in web applications, blogs, and e-commerce sites to display large amounts of information in a manageable way.
 description: Navigate through multi-page content with pagination controls.
 related: [/ui/components/table]
-layout: '@layouts/DocsMdxLayout.astro'
 ---
 import Example from '@components/Example.astro';
 import Pagination from '@ui/Pagination.astro';
@@ -3,7 +3,6 @@ title: Placeholder
 summary: Placeholder is used to reserve space for content that will soon appear in a layout.
 description: Reserve space for loading content with placeholders. Use lines, headings, and image blocks to build skeleton screens.
 related: [/ui/components/spinner, /ui/components/empty]
-layout: '@layouts/DocsMdxLayout.astro'
 ---
 import Example from '@components/Example.astro';
 import CodeDocs from '@components/CodeDocs.astro';
@@ -3,7 +3,6 @@ title: Popover
 summary: A popover is used to provide additional information for elements where a simple tooltip is not sufficient.
 description: Show extra information in popovers when a tooltip is not enough. Set the placement and trigger to control how they appear.
 related: [/ui/components/tooltip, /ui/components/dropdown]
-layout: '@layouts/DocsMdxLayout.astro'
 ---
 import Example from '@components/Example.astro';
 import CodeDocs from '@components/CodeDocs.astro';
@@ -3,7 +3,6 @@ title: Progress steps
 summary: A progress step helps users track their place in a short process by breaking it into clear, simple steps. This makes flows like setup or onboarding easier to follow and finish.
 description: Use progress steps to display compact onboarding, checkout, and setup progress.
 related: [/ui/components/progress, /ui/components/step]
-layout: '@layouts/DocsMdxLayout.astro'
 ---
 import Example from '@components/Example.astro';
 import ProgressSteps from '@ui/ProgressSteps.astro';
@@ -3,7 +3,6 @@ title: Progress bar
 summary: A progress bar is used to provide feedback on an action status and inform users about current progress. Although it is a small interface element, it is extremely helpful in managing user expectations and preventing abandonment of an initiated process.
 description: Show task progress with progress bars. Set the value, color, and size, or use indeterminate bars for unknown durations.
 related: [/ui/components/progress-step, /ui/components/spinner]
-layout: '@layouts/DocsMdxLayout.astro'
 ---
 import Example from '@components/Example.astro';
 import ProgressBg from '@ui/ProgressBg.astro';
@@ -4,7 +4,6 @@ docs-libs: [nouislider]
 description: Let users pick a value or range with a slider powered by noUiSlider, styled to match the rest of your Tabler interface.
 summary: A range slider allows users to select a range of values by adjusting two handles along a track, providing an intuitive and space-efficient input method.
 related: [/ui/forms/form-elements]
-layout: '@layouts/DocsMdxLayout.astro'
 ---
 import Example from '@components/Example.astro';

@@ -3,7 +3,6 @@ title: Ribbon
 summary: A ribbon is a graphical element that attracts user attention to a given interface element and makes it stand out.
 description: Highlight cards and other elements with ribbons. Change the position, color, and shape, or add icons and text to draw attention.
 related: [/ui/components/card, /ui/components/badge]
-layout: '@layouts/DocsMdxLayout.astro'
 ---
 import Example from '@components/Example.astro';
 import Icon from '@ui/Icon.astro';
@@ -2,7 +2,6 @@
 title: Segmented control
 summary: A segmented control is a set of two or more segments, each of which functions as a mutually exclusive button. A segmented control is used to display a set of mutually exclusive options.
 description: A set of mutually exclusive options displayed as connected buttons.
-layout: '@layouts/DocsMdxLayout.astro'
 ---
 import Example from '@components/Example.astro';
 import Icon from '@ui/Icon.astro';
@@ -3,7 +3,6 @@ title: Signature
 summary: A signature pad lets users sign with a mouse, a pen, or a finger. Use it to confirm an order, accept a contract, or hand over a delivery.
 docs-libs: [signature_pad]
 description: Collect a drawn signature from users.
-layout: '@layouts/DocsMdxLayout.astro'
 ---
 import Example from '@components/Example.astro';
 import Icon from '@ui/Icon.astro';
@@ -3,7 +3,6 @@ title: Spinner
 summary: A spinner is used to show the loading state of a component or page. It provides feedback for an action that takes longer to complete.
 description: Show loading states with spinners. Choose between border and growing styles, change colors and sizes, or place them in buttons.
 related: [/ui/components/progress, /ui/components/placeholder]
-layout: '@layouts/DocsMdxLayout.astro'
 ---
 import Example from '@components/Example.astro';
 import CodeDocs from '@components/CodeDocs.astro';
@@ -3,7 +3,6 @@ title: Star rating
 summary: Use star rating to show score values with static stars or interactive star states.
 description: Build star rating UI with stars classes and data-star-rating state selectors.
 related: [/ui/components/icon]
-layout: '@layouts/DocsMdxLayout.astro'
 ---
 import Example from '@components/Example.astro';
 import Icon from '@ui/Icon.astro';
@@ -3,7 +3,6 @@ title: Status
 summary: A status dot is particularly useful when you want to make an interface element more noticeable in limited space.
 description: Highlight the state of an element with a small status badge. Add colors, dots, and animations to make statuses easy to scan.
 related: [/ui/components/badge]
-layout: '@layouts/DocsMdxLayout.astro'
 ---
 import Example from '@components/Example.astro';
 import CodeDocs from '@components/CodeDocs.astro';
@@ -3,7 +3,6 @@ title: Step
 summary: A step is used to guide users through a complex process and make it easier to complete. Breaking a multi-step process into smaller parts and tracking progress along the way helps users finish it successfully.
 description: Guide users through multi-step processes with a steps indicator. Show completed, active, and upcoming steps in a clear layout.
 related: [/ui/components/progress-step]
-layout: '@layouts/DocsMdxLayout.astro'
 ---
 import Example from '@components/Example.astro';
 import CodeDocs from '@components/CodeDocs.astro';
@@ -3,7 +3,6 @@ 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.
 description: Animate a smooth transition between two icons with the switch icon component - useful for likes, toggles, and favorite buttons.
 related: [/ui/components/icon]
-layout: '@layouts/DocsMdxLayout.astro'
 ---
 import Example from '@components/Example.astro';
 import Icon from '@ui/Icon.astro';
@@ -3,7 +3,6 @@ title: Tab
 summary: A tab allows users to alternate between equally important views within the same context. By dividing content into meaningful sections, it improves organization and makes navigation easier.
 description: Split content into tabs so users can switch between related views in the same context. Add icons or style the tabs as pills.
 related: [/ui/layout/navs-tabs]
-layout: '@layouts/DocsMdxLayout.astro'
 ---
 import Example from '@components/Example.astro';
 import Icon from '@ui/Icon.astro';
@@ -3,7 +3,6 @@ title: Table
 summary: A table is a useful interface element that lets you visualize data and arrange it clearly. It allows users to browse a lot of information at once, and a good table design improves readability.
 description: Present data in clean, responsive tables. Add hover states, striped rows, sorting, and other options to improve readability.
 related: [/ui/components/datagrid, /ui/components/pagination]
-layout: '@layouts/DocsMdxLayout.astro'
 ---
 import Example from '@components/Example.astro';
 import CodeDocs from '@components/CodeDocs.astro';
@@ -4,7 +4,6 @@ summary: Use tags to show compact metadata values with optional media, badges, a
 description: Build inline tag elements with the tag class API and related tag part classes.
 css-plugins: [flags, payments]
 related: [/ui/components/badge]
-layout: '@layouts/DocsMdxLayout.astro'
 ---
 import Example from '@components/Example.astro';
 import Flag from '@ui/Flag.astro';
@@ -3,7 +3,6 @@ title: Timeline
 summary: A timeline is a perfect way to visualize processes and projects, as it's easy to read and attractive for users. You can use it to give an overview of events, present an agenda or point out important points in time.
 description: Visualize events in chronological order with a timeline. Add icons, avatars, and text to present processes and activity feeds.
 related: [/ui/components/step]
-layout: '@layouts/DocsMdxLayout.astro'
 ---
 import Example from '@components/Example.astro';
 import Timeline from '@ui/Timeline.astro';
@@ -3,7 +3,6 @@ title: Toast
 summary: A toast is a lightweight alert box that displays for a few seconds after a user action to communicate state or outcome. It is useful after actions like clicking a button or submitting a form, where feedback is needed without prompting another action.
 description: Display a lightweight alert notification with a toast.
 related: [/ui/components/alert, /ui/components/modal]
-layout: '@layouts/DocsMdxLayout.astro'
 ---
 import Example from '@components/Example.astro';
 import CodeDocs from '@components/CodeDocs.astro';
@@ -3,7 +3,6 @@ title: Tooltip
 summary: A tooltip is a text label that appears when a user hovers over an interface element. It explains unclear elements and guides users when they need help. When used properly, it can significantly enhance user experience and add value to your website or software.
 description: Explain interface elements with tooltips shown on hover. Control placement, add HTML content, and customize how they appear.
 related: [/ui/components/popover]
-layout: '@layouts/DocsMdxLayout.astro'
 ---
 import Example from '@components/Example.astro';
 import CodeDocs from '@components/CodeDocs.astro';
@@ -3,7 +3,6 @@ title: Tracking
 summary: Component for visualizing activity logs or other monitoring-related data. With its ability to show data in a visually appealing and easily understandable way, the tracking component is an essential tool for any organization that relies on data monitoring and analysis to optimize performance and user experience.
 description: Visualize activity logs and uptime data with the tracking component - a compact row of colored blocks that show status over time.
 related: [/ui/components/tooltip, /ui/components/chart]
-layout: '@layouts/DocsMdxLayout.astro'
 ---
 import Subheader from '@ui/Subheader.astro';
 import Example from '@components/Example.astro';
@@ -3,7 +3,6 @@ title: Trending
 summary: A trend indicator shows how a value changed. It joins the number with an arrow and a color, so users can read the direction at a glance.
 description: Show how a value changed with a trend indicator. Combine a number, arrow icon, and color so users can read direction at a glance.
 related: [/ui/components/chart, /ui/components/badge]
-layout: '@layouts/DocsMdxLayout.astro'
 ---
 import Example from '@components/Example.astro';
 import Icon from '@ui/Icon.astro';
@@ -4,7 +4,6 @@ docs-libs: [jsvectormap]
 description: Interactive guide to creating a vector map with jsVectorMap.
 summary: A vector map is a great way to display geographical data in an interactive and visually appealing way. Learn how to create a vector map with jsVectorMap.
 related: [/ui/components/map]
-layout: '@layouts/DocsMdxLayout.astro'
 ---

 import Example from '@components/Example.astro'
@@ -4,7 +4,6 @@ docs-libs: [hugerte]
 summary: The WYSIWYG editor that is flexible, customizable, and designed with the user in mind. HugeRTE can handle any challenge, from the most simple implementation through to the most complex use case.
 description: Add rich text editing to your forms with HugeRTE, a flexible WYSIWYG editor that works well with Tabler styles.
 related: [/ui/forms/form-elements]
-layout: '@layouts/DocsMdxLayout.astro'
 ---

 import Example from '@components/Example.astro'
@@ -3,7 +3,6 @@ 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: Let users pick a color with radio or checkbox controls styled as color swatches. A simple way to make forms more visual.
 related: [/ui/forms/form-image-check, /ui/base/colors]
-layout: '@layouts/DocsMdxLayout.astro'
 ---

 import Example from '@components/Example.astro'
@@ -3,7 +3,6 @@ title: Color picker
 summary: A color picker lets users pick a color from a gradient, a set of swatches, or by typing a value. Use it in theme settings, tag colors, and any field that stores a color.
 docs-libs: [coloris.js]
 description: Let users pick a color in a form.
-layout: '@layouts/DocsMdxLayout.astro'
 ---
 import Example from '@components/Example.astro';
 import CdnImportPlugin from '@components/CdnImportPlugin.astro';
@@ -5,7 +5,6 @@ docs-libs: [nouislider]
 description: Build user-friendly forms with styled inputs, selects, checkboxes, and radios. Learn about states, sizes, and layout options.
 order: 1
 related: [/ui/forms/form-validation, /ui/forms/form-helpers, /ui/forms/form-fieldset]
-layout: '@layouts/DocsMdxLayout.astro'
 ---
 import Example from '@components/Example.astro';
 import CodeDocs from '@components/CodeDocs.astro';
@@ -3,7 +3,6 @@ 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 related form fields with a styled fieldset to make long forms better organized and easier to understand.
 related: [/ui/forms/form-elements]
-layout: '@layouts/DocsMdxLayout.astro'
 ---
 import Example from '@components/Example.astro';

@@ -2,7 +2,6 @@
 title: Floating labels
 summary: Floating labels put the label inside the field. The label sits over the empty control and moves up when the user types or selects a value.
 description: Show labels inside form controls.
-layout: '@layouts/DocsMdxLayout.astro'
 ---
 import Example from '@components/Example.astro';

@@ -3,7 +3,6 @@ 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: Add help icons, hints, and required field markers to forms to give users extra guidance and reduce input errors.
 related: [/ui/forms/form-elements, /ui/components/popover]
-layout: '@layouts/DocsMdxLayout.astro'
 ---
 import FormHint from '@ui/FormHint.astro';
 import Example from '@components/Example.astro';
@@ -3,7 +3,6 @@ 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: Let users select options with image-based checkboxes and radios. Ideal for choosing templates, themes, or visual products in forms.
 related: [/ui/forms/form-selectboxes, /ui/forms/form-color-check]
-layout: '@layouts/DocsMdxLayout.astro'
 ---
 import Example from '@components/Example.astro';

@@ -4,7 +4,6 @@ summary: An input mask is used to clarify the input format required in a given f
 description: Format user input automatically with input masks for dates, phone numbers, and other patterns to reduce validation errors.
 docs-libs: [imask]
 related: [/ui/forms/form-elements]
-layout: '@layouts/DocsMdxLayout.astro'
 ---

 import Example from '@components/Example.astro'
@@ -4,7 +4,6 @@ summary: Use selectgroup to make your form more intuitive by providing users wit
 description: Offer sets of options with select groups - labeled, icon-only, or pill-shaped controls built on checkboxes and radios.
 css-plugins: [payments]
 related: [/ui/forms/form-image-check, /ui/forms/form-color-check]
-layout: '@layouts/DocsMdxLayout.astro'
 ---
 import Example from '@components/Example.astro';
 import { site } from '@shared/lib/site';
@@ -3,7 +3,6 @@ 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: Show valid and invalid states on form fields with feedback messages, so users know exactly what to correct before submitting.
 related: [/ui/forms/form-elements, /ui/forms/form-helpers]
-layout: '@layouts/DocsMdxLayout.astro'
 ---
 import Example from '@components/Example.astro';
 import CodeDocs from '@components/CodeDocs.astro';
@@ -3,7 +3,6 @@ title: Forms
 order: 5
 description: Everything you need to build accessible forms - inputs, selects, checkboxes, validation states, and helper elements.
 summary: The forms section provides a collection of components and tools for creating user-friendly and accessible forms, enhancing user interaction and improving data collection.
-layout: '@layouts/DocsMdxLayout.astro'
 ---

 Forms collect data from your users, so they need to be clear and easy to use. This section covers all form building blocks: inputs, selects, checkboxes, validation states, and helpers. Combine them to build accessible forms that look consistent with the rest of your interface.
@@ -2,7 +2,6 @@
 title: Browser support
 description: See which browsers Tabler supports. The framework is optimized for the latest versions of Chrome, Firefox, Edge, Safari, and Opera.
 summary: Learn about the supported browsers and compatibility guidelines for using Tabler UI components to ensure a consistent experience across different devices and platforms.
-layout: '@layouts/DocsMdxLayout.astro'
 ---
 import Example from '@components/Example.astro';

@@ -2,7 +2,6 @@
 title: Customize Tabler
 summary: Tabler has been designed so that it can be adjusted to your needs and requirements as much as possible. You can customize your own fonts, colors, font sizes, etc in it.
 description: Customize Tabler fonts, colors, and styles with CSS variables and Sass to make the framework match your brand.
-layout: '@layouts/DocsMdxLayout.astro'
 ---
 import Example from '@components/Example.astro';

@@ -2,7 +2,6 @@
 title: Download
 summary: Download Tabler to get the compiled CSS and JavaScript, source code, or include it with your favorite package managers like npm, yarn and more.
 description: Download Tabler compiled CSS and JavaScript, get the source code from GitHub, or install it with npm, yarn, or a CDN link.
-layout: '@layouts/DocsMdxLayout.astro'
 ---

 import TabsPackage from '@components/TabsPackage.astro'
--- a/Show More
+++ b/Show More