Update color values for 'tabler' theme across various files

* Remove unused dependencies from package.json and pnpm-lock.yaml

* Create cool-rules-learn.md

.all-contributorsrc

@@ -1,89 +0,0 @@
-{
-  "projectName": "tabler",
-  "projectOwner": "tabler",
-  "repoType": "github",
-  "repoHost": "https://github.com",
-  "files": [
-    "CONTRIBUTORS.md"
-  ],
-  "imageSize": 100,
-  "commit": true,
-  "commitConvention": "angular",
-  "contributors": [
-    {
-      "login": "codecalm",
-      "name": "Paweł Kuna",
-      "avatar_url": "https://avatars.githubusercontent.com/u/1282324?v=4",
-      "profile": "https://tabler.io/",
-      "contributions": [
-        "code",
-        "doc"
-      ]
-    },
-    {
-      "login": "martynaaj",
-      "name": "Martyna",
-      "avatar_url": "https://avatars.githubusercontent.com/u/60158888?v=4",
-      "profile": "https://github.com/martynaaj",
-      "contributions": [
-        "doc"
-      ]
-    },
-    {
-      "login": "deralaxo",
-      "name": "Dawid Harat",
-      "avatar_url": "https://avatars.githubusercontent.com/u/40028795?v=4",
-      "profile": "https://github.com/deralaxo",
-      "contributions": [
-        "code"
-      ]
-    },
-    {
-      "login": "rjd22",
-      "name": "Robert-Jan de Dreu",
-      "avatar_url": "https://avatars.githubusercontent.com/u/160743?v=4",
-      "profile": "https://codersopinion.com/",
-      "contributions": [
-        "code"
-      ]
-    },
-    {
-      "login": "FreexD",
-      "name": "Michał Wolny",
-      "avatar_url": "https://avatars.githubusercontent.com/u/7117869?v=4",
-      "profile": "https://github.com/FreexD",
-      "contributions": [
-        "code"
-      ]
-    },
-    {
-      "login": "wangkanai",
-      "name": "Sarin Na Wangkanai",
-      "avatar_url": "https://avatars.githubusercontent.com/u/10666633?v=4",
-      "profile": "https://www.wangkanai.com/",
-      "contributions": [
-        "code"
-      ]
-    },
-    {
-      "login": "WinterSilence",
-      "name": "Anton",
-      "avatar_url": "https://avatars.githubusercontent.com/u/3521094?v=4",
-      "profile": "https://ensostudio.ru/",
-      "contributions": [
-        "code"
-      ]
-    },
-    {
-      "login": "dheineman",
-      "name": "Dave Heineman",
-      "avatar_url": "https://avatars.githubusercontent.com/u/516028?v=4",
-      "profile": "https://github.com/dheineman",
-      "contributions": [
-        "code"
-      ]
-    }
-  ],
-  "contributorsPerLine": 7,
-  "linkToUsage": false
-}

.build/changelog.js

@@ -1,28 +0,0 @@
-#!/usr/bin/env node
-
-'use strict'
-
-const fs = require('fs'),
-	path = require('path'),
-	YAML = require('yaml');
-
-const content = YAML.parse(fs.readFileSync(path.join(__dirname, '../src/pages/_data/changelog.yml'), 'utf8')).reverse()
-let readme = `# Changelog
-
-All notable changes to this project will be documented in this file.\n`
-
-content.forEach((change) => {
-	readme += `\n\n## \`${change.version}\` - ${change.date}\n\n`
-
-	if (change.description) {
-		readme += `**${change.description}**\n\n`
-	}
-
-	change.changes.forEach((line) => {
-		readme += `- ${line}\n`
-	})
-
-	console.log(change.version);
-})
-
-fs.writeFileSync(path.join(__dirname, '../CHANGELOG.md'), readme)

.build/download-images.js

@@ -2,56 +2,55 @@
 
 'use strict'
 
-const YAML = require('yaml')
 const fs = require('node:fs')
 const path = require('node:path')
 const request = require('request')
-const filePath = path.join(__dirname, '../src/pages/_data/photos.yml')
+const filePath = path.join(__dirname, '../src/pages/_data/photos.json')
 
-const photos = YAML.parse(fs.readFileSync(filePath, 'utf8'))
+const photos = JSON.parse(fs.readFileSync(filePath, 'utf8'))
 
 const urlTitle = (str) => {
-  str = str
+	str = str
 		.toLowerCase()
 		.replaceAll('&', 'and')
 		.replace(/[^[a-z0-9-]/g, '-')
 		.replace(/-+/g, '-')
 
-  return str
+	return str
 }
 
-const download = function(uri, filename, callback, error) {
-  request.head(uri, function(err, res, body) {
-	 request(uri).pipe(fs.createWriteStream(filename))
-		  .on('close', callback)
-		  .on('error', error)
-  })
+const download = function (uri, filename, callback, error) {
+	request.head(uri, function (err, res, body) {
+		request(uri).pipe(fs.createWriteStream(filename))
+			.on('close', callback)
+			.on('error', error)
+	})
 }
 
 async function downloadPhotos() {
-  for (const key in photos) {
-	 const photo = photos[key]
+	for (const key in photos) {
+		const photo = photos[key]
 
-	 let filename, i = 1;
+		let filename, i = 1;
 
-	 do {
-		filename = `${urlTitle(photo['title'])}${i > 1 ? `-${i}` : ''}.jpg`
-		i++
-	 } while (fs.existsSync(path.join(__dirname, `../src/static/photos/${filename}`)))
+		do {
+			filename = `${urlTitle(photo['title'])}${i > 1 ? `-${i}` : ''}.jpg`
+			i++
+		} while (fs.existsSync(path.join(__dirname, `../src/static/photos/${filename}`)))
 
-	 await new Promise((resolve, reject) => {
-		download(photo['path'], path.join(__dirname, `../src/static/photos/${filename}`), function(){
-		  resolve()
-		}, function() {
-		  reject()
-		});
-	 })
+		await new Promise((resolve, reject) => {
+			download(photo['path'], path.join(__dirname, `../src/static/photos/${filename}`), function () {
+				resolve()
+			}, function () {
+				reject()
+			});
+		})
 
-	 photos[key]['file'] = filename
-	 photos[key]['horizontal'] = photo['width'] > photo['height']
-  }
+		photos[key]['file'] = filename
+		photos[key]['horizontal'] = photo['width'] > photo['height']
+	}
 
-  fs.writeFileSync(filePath, YAML.stringify(photos))
+	fs.writeFileSync(filePath, JSON.stringify(photos))
 }
 
 downloadPhotos();

.build/import-illustrations.js

@@ -12,8 +12,33 @@ const illustrations = glob
 		return path.basename(file, '.png')
 	})
 
-
 fs.writeFileSync(
 	path.join(__dirname, `../src/pages/_data/illustrations.json`),
 	JSON.stringify(illustrations)
 )
+
+
+// let i = {}
+// const dirs = ['light', 'dark', 'autodark']
+// const ilustrations = ['not-found', 'computer-fix', 'boy-with-key', 'boy-girl']
+
+// for(const dir of dirs) {
+// 	i[dir] = {}
+
+// 	for(const ilustration of ilustrations) {
+// 		let svg = fs.readFileSync(path.join(__dirname, `../src/pages/_free-illustrations/${dir}/${ilustration}.svg`), 'utf8')
+
+// 		svg = svg
+// 			.replace(/\n+/g, ' ')
+// 			.replace(/>\s+</g, '><')
+// 			.replace(/\s+/g, ' ')
+// 			.replace(/^[\n\s-]+/, '')
+
+// 		i[dir][ilustration] = svg
+// 	}
+// }
+
+// fs.writeFileSync(
+// 	path.join(__dirname, `../src/pages/_data/free-illustrations.json`),
+// 	JSON.stringify(i)
+// )

.build/reformat-mdx.js

@@ -0,0 +1,36 @@
+#!/usr/bin/env node
+
+'use strict'
+
+const fs = require('fs'),
+	path = require('path'),
+	glob = require('glob'),
+	beautifyHtml = require('js-beautify').html;
+
+const docs = glob
+	.sync(path.join(__dirname, `../docs/**/*.mdx`))
+
+docs.forEach((file, i) => {
+	const oldContent = fs.readFileSync(file, 'utf8')
+
+	// get codeblocks from markdown
+	const content = oldContent.replace(/(```([a-z0-9]+).*?\n)(.*?)(```)/gs, (m, m1, m2, m3, m4) => {
+		if (m2 === 'html') {
+			let m3m = beautifyHtml(m3, {
+				"indent_size": 2,
+				"indent_char": " ",
+			}).trim();
+
+			// remove empty lines
+			m3m = m3m.replace(/^\s*[\r\n]/gm, '');
+
+			return m1 + m3m + "\n" + m4;
+		}
+		return m
+	})
+
+	if (content !== oldContent) {
+		fs.writeFileSync(file, content, 'utf8')
+		console.log(`Reformatted ${file}`)
+	}
+})

.build/unused-files.js

@@ -0,0 +1,26 @@
+const glob = require('glob');
+const fs = require('fs')
+const path = require('path')
+
+const srcDir = path.join(__dirname, '../src')
+
+let foundFiles = []
+glob.sync(`${srcDir}/pages/**/*.{html,md}`).forEach((file) => {
+	let fileContent = fs.readFileSync(file)
+
+	fileContent.toString().replace(/\{% include(_cached)? "([a-z0-9\/_-]+\.html)"/g, (f, c, filename) => {
+		filename = `${srcDir}/pages/_includes/${filename}`
+
+		if (!foundFiles.includes(filename)) {
+			foundFiles.push(filename)
+		}
+	})
+})
+
+let includeFiles = glob.sync(`${srcDir}/pages/_includes/**/*.html`)
+
+includeFiles.forEach((file) => {
+	if (!foundFiles.includes(file)) {
+		console.log('file', file)
+	}
+})

.changeset/brave-pigs-unite.md

@@ -0,0 +1,5 @@
+---
+"@tabler/core": patch
+---
+
+Order menu items alphabetically

.changeset/bright-planes-bathe.md

@@ -0,0 +1,5 @@
+---
+"@tabler/core": patch
+---
+
+Automatically retrieve and display the changelog from the CHANGELOG.md file.

.changeset/chilly-mayflies-ring.md

@@ -0,0 +1,5 @@
+---
+"@tabler/core": patch
+---
+
+Initialize Visual Studio Code config

.changeset/chilly-vans-leave.md

@@ -0,0 +1,5 @@
+---
+"@tabler/core": patch
+---
+
+Make horizontal rule direction aware

.changeset/clever-glasses-fold.md

@@ -0,0 +1,5 @@
+---
+"@tabler/core": patch
+---
+
+Update Tabler Illustrations to v1.5

.changeset/cool-kings-cough.md

@@ -0,0 +1,5 @@
+---
+"@tabler/core": patch
+---
+
+Update Tabler Icons to v3.29.0

.changeset/cool-rules-learn.md

@@ -0,0 +1,5 @@
+---
+"@tabler/core": patch
+---
+
+Remove unused dependencies from `package.json`

.changeset/cuddly-tables-help.md

@@ -0,0 +1,5 @@
+---
+"@tabler/core": patch
+---
+
+Replace Jekyll with Eleventy

.changeset/eight-ladybugs-invite.md

@@ -0,0 +1,5 @@
+---
+"@tabler/core": patch
+---
+
+Remove invalid `z-index` setting for dropdowns

.changeset/eleven-badgers-applaud.md

@@ -0,0 +1,5 @@
+---
+"@tabler/core": patch
+---
+
+Update Tabler Emails to v2.0

.changeset/fluffy-papayas-greet.md

@@ -0,0 +1,5 @@
+---
+"@tabler/core": patch
+---
+
+Replace `.page-center` with `.my-auto` in single page layouts

.changeset/four-actors-fix.md

@@ -0,0 +1,5 @@
+---
+"@tabler/core": patch
+---
+
+Add border-opacity variable for improved color utility

.changeset/gentle-dingos-joke.md

@@ -0,0 +1,5 @@
+---
+"@tabler/core": patch
+---
+
+Fix icon display issues in the Star Ratings component

.changeset/good-birds-smash.md

@@ -0,0 +1,5 @@
+---
+"@tabler/core": patch
+---
+
+Fix `color` of disabled `dropdown-item` in Navbar component

.changeset/grumpy-taxis-smile.md

@@ -0,0 +1,5 @@
+---
+"@tabler/core": patch
+---
+
+Add social icons plugin

.changeset/healthy-pumas-attend.md

@@ -0,0 +1,5 @@
+---
+"@tabler/core": patch
+---
+
+Update Jekyll to version 4.3.4

.changeset/hot-vans-peel.md

@@ -0,0 +1,5 @@
+---
+"@tabler/core": patch
+---
+
+Update illustrations and enhance SVG handling in HTML

.changeset/hungry-poets-speak.md

@@ -0,0 +1,5 @@
+---
+"@tabler/core": patch
+---
+
+Fix ids of custom size star ratings

.changeset/kind-days-sneeze.md

@@ -0,0 +1,5 @@
+---
+"@tabler/core": patch
+---
+
+Set `font-size` of an `i` element with `icon` class in a `button` element

.changeset/large-birds-teach.md

@@ -0,0 +1,5 @@
+---
+"@tabler/core": patch
+---
+
+Fix icons in `form-elements.html`

.changeset/late-socks-march.md

@@ -0,0 +1,5 @@
+---
+"@tabler/core": patch
+---
+
+Update Tabler Icons to v3.28.1

.changeset/light-beers-study.md

@@ -0,0 +1,5 @@
+---
+"@tabler/core": patch
+---
+
+Fix description of alerts with a description

.changeset/little-badgers-care.md

@@ -0,0 +1,5 @@
+---
+"@tabler/core": patch
+---
+
+Fix colors of disabled `.ts-control`

.changeset/little-garlics-begin.md

@@ -0,0 +1,5 @@
+---
+"@tabler/core": patch
+---
+
+Center content on error and single page layouts

.changeset/long-months-cross.md

@@ -0,0 +1,5 @@
+---
+"@tabler/core": patch
+---
+
+Improve base font family loading 

.changeset/mighty-ligers-help.md

@@ -0,0 +1,5 @@
+---
+"@tabler/core": patch
+---
+
+Fix `@charset` CSS declaration in bundle.

.changeset/modern-dogs-wonder.md

@@ -0,0 +1,5 @@
+---
+"@tabler/core": patch
+---
+
+Update Tabler Icons to v3.17.0

.changeset/nice-fireants-itch.md

@@ -0,0 +1,5 @@
+---
+"@tabler/core": patch
+---
+
+Refactor data structure by converting YAML files to JSON

.changeset/nine-lions-smell.md

@@ -0,0 +1,5 @@
+---
+"@tabler/core": patch
+---
+
+Increase `z-index` of `ts-dropdown` to prevent overlapping by buttons

.changeset/old-paws-float.md

@@ -0,0 +1,5 @@
+---
+"@tabler/core": patch
+---
+
+Fix padding in code blocks

.changeset/orange-maps-fetch.md

@@ -0,0 +1,5 @@
+---
+"@tabler/core": patch
+---
+
+Remove duplicated setting of color in `th` element

.changeset/perfect-trainers-rush.md

@@ -0,0 +1,5 @@
+---
+"@tabler/core": patch
+---
+
+Fix layout of search results for small and medium screens

.changeset/popular-news-sell.md

@@ -0,0 +1,5 @@
+---
+"@tabler/core": patch
+---
+
+Remove `text-decoration` on hovering `a` element with class having `icon` class

.changeset/quiet-melons-live.md

@@ -0,0 +1,5 @@
+---
+"@tabler/core": patch
+---
+
+Improve documentation for alerts

.changeset/selfish-avocados-battle.md

@@ -0,0 +1,5 @@
+---
+"@tabler/core": patch
+---
+
+Set value of `$font-family-monospace` as default

.changeset/seven-islands-act.md

@@ -0,0 +1,5 @@
+---
+"@tabler/core": patch
+---
+
+Refactor Dockerfile and package.json

.changeset/shiny-sloths-shave.md

@@ -0,0 +1,5 @@
+---
+"@tabler/core": patch
+---
+
+Enhance documentation

.changeset/sixty-spoons-move.md

@@ -0,0 +1,5 @@
+---
+"@tabler/core": patch
+---
+
+Fix cells with inline icons

.changeset/sixty-windows-tickle.md

@@ -0,0 +1,5 @@
+---
+"@tabler/core": patch
+---
+
+Fix `color` of disabled `nav-link` in `nav-bordered`

.changeset/slimy-queens-pull.md

@@ -0,0 +1,5 @@
+---
+"@tabler/core": patch
+---
+
+Fix the `z-index` value of the `nav-tab` inside `card-tab` #1933

.changeset/small-avocados-end.md

@@ -0,0 +1,5 @@
+---
+"@tabler/core": patch
+---
+
+Increase contrast of active `dropdown-item` in vertical layout

.changeset/smart-points-attack.md

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

.changeset/soft-suits-count.md

@@ -0,0 +1,5 @@
+---
+"@tabler/core": patch
+---
+
+Do not display empty `fieldset` element

.changeset/sour-dragons-eat.md

@@ -0,0 +1,5 @@
+---
+"@tabler/core": patch
+---
+
+Refactor SCSS variables to use `color.adjust` for improved color manipulation

.changeset/swift-dogs-serve.md

@@ -0,0 +1,5 @@
+---
+"@tabler/core": patch
+---
+
+Update Tabler Icons to v3.26.0

.changeset/tabler-icons.md

@@ -0,0 +1,5 @@
+---
+"@tabler/core": patch
+---
+
+Updated Tabler Icons to v3.24.0

.changeset/tender-flowers-cheat.md

@@ -0,0 +1,5 @@
+---
+"@tabler/core": patch
+---
+
+Update Node.js engine requirement to allow versions >=20

.changeset/thick-dryers-push.md

@@ -0,0 +1,5 @@
+---
+"@tabler/core": patch
+---
+
+Upgrade Node.js from version 18 to version 20 for improved performance, security, and feature updates.

.changeset/violet-moons-relate-2.md

@@ -0,0 +1,5 @@
+---
+"@tabler/core": minor
+---
+
+New page with payment providers: `payment-providers.html`

.changeset/violet-moons-relate.md

@@ -0,0 +1,5 @@
+---
+"@tabler/core": minor
+---
+
+Add support for new payment providers: 2c2p, Adyen, Affirm, Alipay Plus, Allegro Pay, Amazon Pay, Apple Pay, Autopay, Binance USD, Bkash, Cash App, Chime, EasyPaisa, Ethereum, Google Pay, HubSpot, iDeal, Litecoin, Mercado Pago, MetaMask, MoneyGram, OpenSea, Payconiq, Payka, Payline, PayPo, Paysafe, Poli, Revolut Pay, Samsung Pay, Shop Pay, Solana, Spingo, Stax, Tether, True USD, Venmo, WeChat Pay, Wise, Zelle

.changeset/weak-singers-guess.md

@@ -0,0 +1,5 @@
+---
+"@tabler/core": patch
+---
+
+Update package dependencies to latest versions

.changeset/webfont-unpkg.md

@@ -0,0 +1,5 @@
+---
+"@tabler/core": patch
+---
+
+Fix link to webfont version of Tabler Icons

.changeset/witty-pens-trade.md

@@ -0,0 +1,5 @@
+---
+"@tabler/core": patch
+---
+
+Fix colors in date range datepicker

.github/workflows/bundlewatch.yml

@@ -9,7 +9,7 @@ on:
 
 env:
   FORCE_COLOR: 2
-  NODE: 18
+  NODE: 20
 
 jobs:
   bundlewatch:

.github/workflows/release.yml

@@ -22,7 +22,7 @@ jobs:
       - name: Setup Node.js 18
         uses: actions/setup-node@v4
         with:
-          node-version: 18
+          node-version: 20
 
       - name: Install PNPM
         uses: pnpm/action-setup@v4

.github/workflows/test.yml

@@ -5,7 +5,7 @@ on:
     types: [ opened, reopened ]
 
 env:
-  NODE: 18
+  NODE: 20
 
 permissions:
   contents: read
@@ -27,13 +27,6 @@ jobs:
         with:
           version: 8
 
-      - name: Set up Ruby
-        uses: ruby/setup-ruby@v1
-        with:
-          ruby-version: 3.2
-          bundler-cache: true
-
-      - run: ruby --version
       - run: node --version
 
       - name: Install pnpm dependencies

.gitignore

@@ -12,8 +12,6 @@ node_modules/
 /.cache/
 .sass-cache/
 
-.vscode/
-
 /_gh_pages/
 /site/docs/**/dist/
 /site/static/**/dist/

.nvmrc

@@ -1 +1 @@
-18
+20

.percy.yml

@@ -1,3 +0,0 @@
-version: 1
-snapshot:
-  widths: [1440]

.vscode/settings.json

@@ -0,0 +1,14 @@
+{
+   "files.exclude": {
+      "**/.git": false,
+      "**/.svn": false,
+      "**/.hg": false,
+      "**/CVS": false,
+      "**/.DS_Store": false,
+      "**/Thumbs.db": false,
+      "**/.idea/": false,
+      "dist": false,
+      "demo": false
+   },
+   "explorerExclude.backup": {}
+}

CHANGELOG.md

@@ -1,7 +1,108 @@
 # Changelog
 
-All notable changes to this project will be documented in this file.
+## `1.0.0-beta24` - 2025-01-11
 
+- Enhanced documentation.
+- Updated illustrations and improved SVG handling in HTML.
+- Updated copyright year in LICENSE file to 2025.
+- Added marketing pages plugin.
+
+## `1.0.0-beta23` - 2025-01-07
+
+- Documentation improvements.
+- Added countup functionality and updated documentation example.
+- Do not display empty `<fieldset>`.
+- Set font-size of webfont icon inside a button.
+- Ordered menu items alphabetically.
+- Marked value of `$font-family-monospace` as `!default`.
+- Fixed unpkg links to static-files icons.
+- Fixed description of alerts with a description.
+- Fixed layout of search results for small and medium screens.
+- Removed invalid z-index setting for dropdown.
+- Fixed IDs of custom size star ratings.
+- Removed text-decoration on hover for elements with child icons.
+- Fixed link to webfont icons.
+- Updated color reference links in UI component documentation.
+- Fixed typo in browser support documentation summary.
+- Enhanced Figma plugin documentation with detailed usage instructions.
+- Added documentation for Tabler Illustrations and updated index with a link.
+- Enhanced documentation for various UI and icon sections.
+- Added new documentation files for icons and UI components; restructured existing files.
+- Updated documentation structure and content for icons and UI components.
+- Removed outdated `menu.json` and added `index.mdx` files for UI documentation structure.
+- General docs update.
+- Increased contrast of active dropdown-item in vertical layout.
+- Removed duplicated color setting in table headers.
+- Increased `z-index` of `ts-dropdown`.
+- Added social icons plugin.
+- Described variables for datagrid in docs.
+- Fixed multiple documentation issues.
+- Removed unused config from the code.
+- Fixed links to Tabler Icons.
+- Updated dark image.
+- Updated screenshot.
+- Fixed icon issues.
+- Fixed URL in documentation.
+
+## `1.0.0-beta22` - 2025-01-02
+
+- Fixed `@charset` CSS declaration in bundle.
+- Fixed cells with inline icons.
+- Fixed padding in code blocks.
+- Fixed colors in date range datepicker.
+- Fixed icon display issues in the Star Ratings component.
+- Fixed `z-index` value of the `nav-tab` inside `card-tab`.
+- Fixed wrong gray colors.
+- Fixed incorrect CDN URL in `webfont.mdx`.
+- Ensured border color works in dark mode.
+- Replaced `.page-center` with `.my-auto` in single-page layouts.
+- Updated Tabler Emails to v2.0.
+- Updated Tabler Icons to v3.26.0.
+- Updated docs structure.
+- Updated `download.mdx`.
+- Updated Node.js to version 20.
+- Improved base font family.
+- Made horizontal rule direction-aware.
+- Added new payment providers.
+- Read changelog from `CHANGELOG.md` file.
+- Initialized VS Code configuration.
+
+## `1.0.0-beta21` - 2024-09-8
+
+- Updated dependencies.
+- Updated Tabler Icons to v3.14.0 and the import script.
+- Fixed invisible scrollbar in dark mode when navigating the preview.
+- Styled `btn-close` specifically for `.modal-header`.
+- Added proper borders to the ribbon start class.
+- Changed brand color.
+- Included `docs` in the `npm` package.
+- Added Tabler Illustrations.
+- Fixed use of the secondary color in specific form elements.
+- Introduced Docker Compose Config for local Tabler builds.
+- Allowed usage of `tinymce` v7.x as a peer dependency.
+- Updated TinyMCE to v7.0.
+- Rebranded Twitter to X.
+- Replaced undraw illustrations with Tabler Illustrations.
+- Added punctuation to `SECURITY.md`.
+- Updated `_navbar.scss` to correct disabled dropdown menu item colors.
+- Removed unused packages.
+- Fixed map pages.
+- Resolved issues with toasts in dark mode.
+- Fixed alert background prefix.
+- Corrected a typo in CHANGELOG.md.
+- Fixed radial chart issue.
+- Added documentation on running the site locally in Site README.
+- Updated colors in `colors.mdx`.
+- Fixed dynamic SCSS prefix in mixins.
+- Changed `<h1>` to `<div>` in `navbar-logo.html`.
+- Resolved vertical centering on error pages.
+- Fixed navbar menu issues.
+- Added `background-clip: border-box` to `.dropdown-menu` class.
+- Replaced `href="#"` with `href="javascript:void(0)"`.
+- Fixed disabled CSS class for links.
+- Addressed missing variables and minor color adjustments.
+- Improved heights, scrolls, and layouts in Docs examples.
+- Fixed flags display in preview. 
 
 ## `1.0.0-beta20` - 2023-08-24
 

Dockerfile

@@ -3,8 +3,6 @@ FROM ruby:3.2-alpine
 WORKDIR /app
 ADD _config.yml /app/
 ADD _config_prod.yml /app/
-ADD Gemfile /app/
-ADD Gemfile.lock /app/
 ADD package.json /app/
 ADD pnpm-lock.yaml /app/
 ADD gulpfile.js /app/
@@ -13,11 +11,10 @@ RUN apk add --virtual build-dependencies build-base npm
 RUN apk upgrade
 RUN npm i -g pnpm
 RUN pnpm install
-RUN bundle config --global silence_root_warning 1 && bundler install --verbose
 
 # website
 EXPOSE 3000
 # website management (browser auto reload)
 EXPOSE 3001
 # run tabler
-ENTRYPOINT [ "pnpm", "run", "start-plugins" ]
+ENTRYPOINT [ "pnpm", "run", "start" ]

Gemfile

@@ -1,14 +0,0 @@
-source "https://rubygems.org"
-
-gem "jekyll", "4.3.3"
-
-group :jekyll_plugins do
-	gem "jekyll-random"
-	gem "jekyll-tidy"
-	gem "jekyll-timeago"
-	gem 'jekyll-redirect-from'
-end
-
-gem 'wdm', '>= 0.1.1' if Gem.win_platform?
-
-

Gemfile.lock

@@ -1,92 +0,0 @@
-GEM
-  remote: https://rubygems.org/
-  specs:
-    addressable (2.8.6)
-      public_suffix (>= 2.0.2, < 6.0)
-    colorator (1.1.0)
-    concurrent-ruby (1.2.3)
-    em-websocket (0.5.3)
-      eventmachine (>= 0.12.9)
-      http_parser.rb (~> 0)
-    eventmachine (1.2.7)
-    ffi (1.16.3)
-    forwardable-extended (2.6.0)
-    google-protobuf (4.26.1)
-      rake (>= 13)
-    htmlbeautifier (1.4.2)
-    htmlcompressor (0.4.0)
-    http_parser.rb (0.8.0)
-    i18n (1.14.4)
-      concurrent-ruby (~> 1.0)
-    jekyll (4.3.3)
-      addressable (~> 2.4)
-      colorator (~> 1.0)
-      em-websocket (~> 0.5)
-      i18n (~> 1.0)
-      jekyll-sass-converter (>= 2.0, < 4.0)
-      jekyll-watch (~> 2.0)
-      kramdown (~> 2.3, >= 2.3.1)
-      kramdown-parser-gfm (~> 1.0)
-      liquid (~> 4.0)
-      mercenary (>= 0.3.6, < 0.5)
-      pathutil (~> 0.9)
-      rouge (>= 3.0, < 5.0)
-      safe_yaml (~> 1.0)
-      terminal-table (>= 1.8, < 4.0)
-      webrick (~> 1.7)
-    jekyll-random (0.1)
-      jekyll (>= 3.3, < 5.0)
-    jekyll-redirect-from (0.16.0)
-      jekyll (>= 3.3, < 5.0)
-    jekyll-sass-converter (3.0.0)
-      sass-embedded (~> 1.54)
-    jekyll-tidy (0.2.2)
-      htmlbeautifier
-      htmlcompressor
-      jekyll
-    jekyll-timeago (0.15.0)
-      mini_i18n (>= 0.8.0)
-    jekyll-watch (2.2.1)
-      listen (~> 3.0)
-    kramdown (2.4.0)
-      rexml
-    kramdown-parser-gfm (1.1.0)
-      kramdown (~> 2.0)
-    liquid (4.0.4)
-    listen (3.9.0)
-      rb-fsevent (~> 0.10, >= 0.10.3)
-      rb-inotify (~> 0.9, >= 0.9.10)
-    mercenary (0.4.0)
-    mini_i18n (0.9.0)
-    pathutil (0.16.2)
-      forwardable-extended (~> 2.6)
-    public_suffix (5.0.5)
-    rake (13.2.1)
-    rb-fsevent (0.11.2)
-    rb-inotify (0.10.1)
-      ffi (~> 1.0)
-    rexml (3.3.6)
-      strscan
-    rouge (4.2.1)
-    safe_yaml (1.0.5)
-    sass-embedded (1.75.0)
-      google-protobuf (>= 3.25, < 5.0)
-      rake (>= 13.0.0)
-    strscan (3.1.0)
-    terminal-table (3.0.2)
-      unicode-display_width (>= 1.1.1, < 3)
-    unicode-display_width (2.5.0)
-    webrick (1.8.1)
-
-PLATFORMS
-  ruby
-
-DEPENDENCIES
-  jekyll (= 4.3.3)
-  jekyll-random
-  jekyll-redirect-from
-  jekyll-tidy
-  jekyll-timeago
-
-BUNDLED WITH
-   2.4.19

LICENSE

@@ -1,6 +1,6 @@
 The MIT License (MIT)
 
-Copyright (c) 2018-2023 The Tabler Authors
+Copyright (c) 2018-2025 The Tabler Authors
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

README.md

@@ -13,12 +13,29 @@ A premium and open source dashboard template with a responsive and high-quality
 <a href="https://github.com/tabler/tabler" target="__blank"><img alt="GitHub stars" src="https://img.shields.io/github/stars/tabler/tabler?style=social"></a>
 </p>
 
+## Sponsors
+
+**If you want to support our project and help me grow it, you can [become a sponsor on GitHub](https://github.com/sponsors/codecalm) or just [donate on PayPal](https://paypal.me/codecalm) :)**
+
 <p align="center">
   <a href="https://github.com/sponsors/codecalm">
-    <img src='https://raw.githubusercontent.com/tabler/static/main/sponsors.svg'>
+    <img src="https://cdn.jsdelivr.net/gh/tabler/sponsors@latest/sponsors.svg" alt="Tabler sponsors">
   </a>
 </p>
 
+## Testing
+
+<p align="center">Browser testing via:</p>
+
+<p align="center">
+  <a href="https://www.lambdatest.com/" target="_blank">
+    <picture>
+      <source media="(prefers-color-scheme: dark)" srcset="https://github.com/user-attachments/assets/14dd2a0a-bafe-436e-a6cb-29636278c781">
+      <source media="(prefers-color-scheme: light)" srcset="https://github.com/user-attachments/assets/d3dede5a-d702-47c3-bb66-4d887948ed83">
+      <img src="https://github.com/user-attachments/assets/d3dede5a-d702-47c3-bb66-4d887948ed83" alt="Tabler Icons preview" width="296">
+    </picture>
+  </a>
+</p>
 
 ## 🔎 Preview
 
@@ -68,39 +85,25 @@ Support this project by becoming a sponsor. Your logo will show up in this READM
 <a href="https://opencollective.com/tabler/tiers/sponsor/8/website" target="_blank"><img src="https://opencollective.com/tabler/tiers/sponsor/8/avatar.svg" /></a>
 <a href="https://opencollective.com/tabler/tiers/sponsor/9/website" target="_blank"><img src="https://opencollective.com/tabler/tiers/sponsor/9/avatar.svg" /></a>
 
-
 ## 📦 Setup environment
 
 To use our build system and run our documentation locally, you'll need a copy of Tabler's source files. Follow the steps below:
 
 1. [Install Node.js](https://nodejs.org/download/), which we use to manage our dependencies.
 2. Navigate to the root `/tabler` directory and run `pnpm install` to install our local dependencies listed in `package.json`.
-3. [Install Ruby](https://www.ruby-lang.org/en/documentation/installation/) - the recommended version is [2.7.6](https://cache.ruby-lang.org/pub/ruby/2.7/ruby-2.7.6.tar.gz).
-4. [Install Bundler](https://bundler.io) with `gem install bundler` and finally run `bundle install`. It will install all Ruby dependencies, such as [Jekyll and plugins](https://jekyllrb.com).
 
 **OSX users**:
 
-1. NPM ```pnpm install```
-2. install Ruby (2.5.* recommended)
-	```brew install ruby @2.5```
-3. install bundler
-	```gem install bundler```
-4. install
-	```bundle install```
-- if bundler get any errors try
-```
-sudo rm -rf /Library/Developer/CommandLineTools
-sudo xcode-select --install
-```
-5. Run NPM
-	```npm run start```
+```pnpm install```
+
+and then 
+
+```npm run start```
 
 
 **Windows users**:
 
-1. [Install Git](https://git-scm.com/download/win) in `C:\Program Files\git\bin` directory and run `npm config set script-shell "C:\\Program Files\\git\\bin\\bash.exe"` to change the default shell.
-2. [Install Ruby+Devkit](https://rubyinstaller.org/downloads/) - the recommended version is [2.7.6](https://github.com/oneclick/rubyinstaller2/releases/download/RubyInstaller-2.7.6-1/rubyinstaller-devkit-2.7.6-1-x64.exe).
-3. [Read guide](https://jekyllrb.com/docs/installation/windows/) to get Jekyll up and running without problems.
+[Install Git](https://git-scm.com/download/win) in `C:\Program Files\git\bin` directory and run `npm config set script-shell "C:\\Program Files\\git\\bin\\bash.exe"` to change the default shell.
 
 Once you complete the setup, you'll be able to run the various commands provided from the command line.
 
@@ -109,10 +112,8 @@ Once you complete the setup, you'll be able to run the various commands provided
 
 You need to have `pnpm` and `bundler` installed.
 
-1. From the root `/tabler` directory, run installation in the command line:
-  - `pnpm install` 
-  - `bundler install` 
-2. Then execute `pnpm run start-plugins` to start up the application stack.
+1. From the root `/tabler` directory, run installation in the command line: `pnpm install` 
+2. Then execute `pnpm run start` to start up the application stack.
 3. Open [http://localhost:3000](http://localhost:3000) in your browser, and voilà.
 4. Any change in the `/src` directory will build the application and refresh the page.
 
@@ -132,7 +133,7 @@ npm install --save @tabler/core
 
 **Plain Docker**
 
-If you don't want to install node/npm/ruby and the dependencies on your local environment, you can use the provided Dockerfile to build a docker image.
+If you don't want to install node/npm and the dependencies on your local environment, you can use the provided Dockerfile to build a docker image.
 This Dockerfile is provided as an example to spin-up a container running Tabler.
 
 Example of how to use this image:

_config.yml

@@ -1,279 +0,0 @@
-source: src/pages
-destination: tmp
-
-keep_files:
-  - css
-  - js
-  - img
-  - dist
-  - static
-  - playground.html
-
-use-iconfont: false
-rtl: false
-
-title: Tabler
-description: Premium and Open Source dashboard template with responsive and high quality UI.
-theme-color: "#066fd1"
-
-email: support@tabler.io
-homepage: https://tabler.io
-github-url: https://github.com/tabler/tabler
-github-sponsors-url: https://github.com/sponsors/codecalm
-changelog-url: https://github.com/tabler/tabler/releases
-sponsor-url: https://github.com/sponsors/codecalm
-preview-url: https://tabler.io/demo
-docs-url: https://tabler.io/docs
-
-mapbox-key: pk.eyJ1IjoidGFibGVyIiwiYSI6ImNscHh3dnhndjB2M3QycW85bGd0NXRmZ3YifQ.9LfHPsNoEXQH-xzz-81Ffw
-google-maps-key: AIzaSyAr5mRB4U1KRkVznIrDWEvZjroYcD202DI
-google-maps-dev-key: AIzaSyCL-BY8-sq12m0S9H-S_yMqDmcun3A9znw
-npm-package: "@tabler/core"
-
-random-date-from: "2018-01-01"
-random-date-to: "2022-01-01"
-
-debug: false
-
-layout-dark: false
-
-plugins:
-  - jekyll-random
-  - jekyll-tidy
-  - jekyll-timeago
-  - jekyll-redirect-from
-
-tabler-css-plugins:
-  - tabler-flags
-  - tabler-payments
-  - tabler-vendors
-
-exclude:
-  - .jekyll-cache
-  - redirects.json
-
-markdown: kramdown
-kramdown:
-  input: GFM
-  syntax_highlighter: rouge
-
-jekyll_tidy:
-  compress_html: false
-  ignore_env: development
-
-collections:
-  - free-illustrations
-
-defaults:
-  - scope:
-      type: "pages"
-      path: "*.md"
-    values:
-      layout: markdown
-  - scope:
-      type: "pages"
-    values:
-      layout: default
-
-colors:
-  blue:
-    class: blue
-    hex: '#066fd1'
-    title: Blue
-  azure:
-    class: azure
-    hex: '#45aaf2'
-    title: Azure
-  indigo:
-    class: indigo
-    hex: '#6574cd'
-    title: Indigo
-  purple:
-    class: purple
-    hex: '#a55eea'
-    title: Purple
-  pink:
-    class: pink
-    hex: '#f66d9b'
-    title: Pink
-  red:
-    class: red
-    hex: '#fa4654'
-    title: Red
-  orange:
-    class: orange
-    hex: '#fd9644'
-    title: Orange
-  yellow:
-    class: yellow
-    hex: '#f1c40f'
-    title: Yellow
-  lime:
-    class: lime
-    hex: '#7bd235'
-    title: Lime
-  green:
-    class: green
-    hex: '#5eba00'
-    title: Green
-  teal:
-    class: teal
-    hex: '#2bcbba'
-    title: Teal
-  cyan:
-    class: cyan
-    hex: '#17a2b8'
-    title: Cyan
-
-skin-colors: 
-  rose:
-    hex: '#FFCB9D'
-    title: Rose
-    class: rose
-  yellow:
-    hex: '#F0BA60'
-    title: Yellow
-    class: yellow
-  skin-1:
-    hex: '#e2c6a7'
-    title: Skin 1
-    class: skin-1
-  skin-2:
-    hex: '#c7a786'
-    title: Skin 2
-    class: skin-2
-  skin-3:
-    hex: '#a68063'
-    title: Skin 3
-    class: skin-3
-  skin-4:
-    hex: '#926241'
-    title: Skin 4
-    class: skin-4
-  skin-5:
-    hex: '#654c45'
-    title: Skin 5
-    class: skin-5
-  gray:
-    hex: '#d5d7dd'
-    title: Gray
-    class: gray
-
-colors-extra:
-  white:
-    hex: '#ffffff'
-    title: White
-  dark:
-    hex: '#303645'
-    title: Dark
-  gray:
-    hex: '#868e96'
-    title: Gray
-
-variants:
-  - name: success
-    icon: check
-  - name: info
-    icon: info-circle
-  - name: warning
-    icon: alert-triangle
-  - name: danger
-    icon: alert-circle
-
-theme-colors:
-  primary:
-    class: primary
-    title: Primary
-  secondary:
-    class: secondary
-    title: Secondary
-  success:
-    class: success
-    title: Success
-  warning:
-    class: warning
-    title: Warning
-  danger:
-    class: danger
-    title: Danger
-  info:
-    class: info
-    title: Info
-  dark:
-    class: dark
-    title: Dark
-  light:
-    class: light
-    title: Light
-
-button-states:
-  - class:
-    title: Normal
-  - class: active
-    title: Active state
-  - class: disabled
-    title: Disabled
-
-socials:
-  x:
-    icon: brand-x
-    title: X
-  facebook:
-    icon: brand-facebook
-    title: Facebook
-  twitter:
-    icon: brand-twitter
-    title: Twitter
-  google:
-    icon: brand-google
-    title: Google
-  youtube:
-    icon: brand-youtube
-    title: Youtube
-  vimeo:
-    icon: brand-vimeo
-    title: Vimeo
-  dribbble:
-    icon: brand-dribbble
-    title: Dribbble
-  github:
-    icon: brand-github
-    title: Github
-  instagram:
-    icon: brand-instagram
-    title: Instagram
-  pinterest:
-    icon: brand-pinterest
-    title: Pinterest
-  vk:
-    icon: brand-vk
-    title: VK
-  rss:
-    icon: rss
-    title: RSS
-  flickr:
-    icon: brand-flickr
-    title: Flickr
-  bitbucket:
-    icon: brand-bitbucket
-    title: Bitbucket
-  tabler:
-    icon: brand-tabler
-    title: Tabler
-
-months-short: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
-months-long: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December']
-
-icons:
-  link: https://tabler-icons.io
-
-emails:
-  price: "$29"
-  count: 54
-  buy_link: https://r.tabler.io/buy-emails
-
-illustrations:
-  price: "$59"
-  count: 50
-  buy_link: https://r.tabler.io/buy-illustrations
-

_config_prod.yml

@@ -1,4 +0,0 @@
-exclude:
-  - redirects.json
-  - playground.html
-  - playground-*.html

docs/base/colors.mdx

@@ -1,25 +0,0 @@
----
-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.
-bootstrapLink: utilities/colors/
----
-
-## Base colors
-
-Choose one of the available colors from the basic color palette and make your design attractive for users. You can use the colors to customize the design of components, indicate different states or suggest actions you want users to take.
-
-<ColorsTable name="base" />
-
-## Light colors
-
-All available colors can come in pastel shades, which are perfect for more subtle designs and can be easily combined with the basic palette to create eye-catching designs.
-
-<ColorsTable name="light" />
-
-## Gray palette
-
-<ColorsTable name="grays" />
-
-## Social colors
-
-<ColorsTable name="social" />

docs/components/alerts.mdx

@@ -1,430 +0,0 @@
----
-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.
-bootstrapLink: components/alerts/
----
-
-## Default markup
-
-Depending on the information you need to convey, you can use one of the following types of alert messages - **success**, **info**, **warning** or **danger**. Using the right type of alert modal will help draw users' attention to the message and prompt them to take action.
-
-```html example vertical height="420px"
-<div class="alert alert-success" role="alert">
-  <h4 class="alert-title">Wow! Everything worked!</h4>
-  <div class="text-secondary">Your account has been saved!</div>
-</div>
-<div class="alert alert-info" role="alert">
-  <h4 class="alert-title">Did you know?</h4>
-  <div class="text-secondary">Here is something that you might like to know.</div>
-</div>
-<div class="alert alert-warning" role="alert">
-  <h4 class="alert-title">Uh oh, something went wrong</h4>
-  <div class="text-secondary">Sorry! There was a problem with your request.</div>
-</div>
-<div class="alert alert-danger" role="alert">
-  <h4 class="alert-title">I'm so sorry&hellip;</h4>
-  <div class="text-secondary">Your account has been deleted and can't be restored.</div>
-</div>
-```
-
-```html
-<div class="alert alert-success" role="alert">
-  <h4 class="alert-title">Wow! Everything worked!</h4>
-  <div class="text-secondary">Your account has been saved!</div>
-</div>
-```
-
-## Alert links
-
-Add a link to your alert message to redirect users to the details they need to complete or additional information they should read.
-
-```html example vertical code height="7rem"
-<div class="alert alert-danger m-0">
-  This is a danger alert — <a href="#" class="alert-link">check it out</a>!
-</div>
-```
-
-## Dismissible alerts
-
-Add the `x` close button to make an alert modal dismissible. Thanks to that, your alert modal will disappear only once the user closes it.
-
-```html example height="420px"
-<div class="alert alert-success alert-dismissible" role="alert">
-  <div class="d-flex">
-    <div>
-      <svg xmlns="http://www.w3.org/2000/svg" class="icon alert-icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
-        <path stroke="none" d="M0 0h24v24H0z" fill="none" />
-        <path d="M5 12l5 5l10 -10" />
-      </svg>
-    </div>
-    <div>
-      <h4 class="alert-title">Wow! Everything worked!</h4>
-      <div class="text-secondary">Your account has been saved!</div>
-    </div>
-  </div>
-  <a class="btn-close" data-bs-dismiss="alert" aria-label="close"></a>
-</div>
-<div class="alert alert-info alert-dismissible" role="alert">
-  <div class="d-flex">
-    <div>
-      <svg xmlns="http://www.w3.org/2000/svg" class="icon alert-icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
-        <path stroke="none" d="M0 0h24v24H0z" fill="none" />
-        <circle cx="12" cy="12" r="9" />
-        <line x1="12" y1="8" x2="12.01" y2="8" />
-        <polyline points="11 12 12 12 12 16 13 16" />
-      </svg>
-    </div>
-    <div>
-      <h4 class="alert-title">Did you know?</h4>
-      <div class="text-secondary">Here is something that you might like to know.</div>
-    </div>
-  </div>
-  <a class="btn-close" data-bs-dismiss="alert" aria-label="close"></a>
-</div>
-<div class="alert alert-warning alert-dismissible" role="alert">
-  <div class="d-flex">
-    <div>
-      <svg xmlns="http://www.w3.org/2000/svg" class="icon alert-icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
-        <path stroke="none" d="M0 0h24v24H0z" fill="none" />
-        <path d="M12 9v2m0 4v.01" />
-        <path d="M5 19h14a2 2 0 0 0 1.84 -2.75l-7.1 -12.25a2 2 0 0 0 -3.5 0l-7.1 12.25a2 2 0 0 0 1.75 2.75" />
-      </svg>
-    </div>
-    <div>
-      <h4 class="alert-title">Uh oh, something went wrong</h4>
-      <div class="text-secondary">Sorry! There was a problem with your request.</div>
-    </div>
-  </div>
-  <a class="btn-close" data-bs-dismiss="alert" aria-label="close"></a>
-</div>
-<div class="alert alert-danger alert-dismissible" role="alert">
-  <div class="d-flex">
-    <div>
-      <svg xmlns="http://www.w3.org/2000/svg" class="icon alert-icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
-        <path stroke="none" d="M0 0h24v24H0z" fill="none" />
-        <circle cx="12" cy="12" r="9" />
-        <line x1="12" y1="8" x2="12" y2="12" />
-        <line x1="12" y1="16" x2="12.01" y2="16" />
-      </svg>
-    </div>
-    <div>
-      <h4 class="alert-title">I'm so sorry&hellip;</h4>
-      <div class="text-secondary">Your account has been deleted and can't be restored.</div>
-    </div>
-  </div>
-  <a class="btn-close" data-bs-dismiss="alert" aria-label="close"></a>
-</div>
-```
-
-```html
-<div class="alert alert-success alert-dismissible" role="alert">
-  <div class="d-flex">
-    <div>
-      <!-- SVG icon from http://tabler-icons.io/i/check -->
-      <svg>...</svg>
-    </div>
-    <div>
-      <h4 class="alert-title">Wow! Everything worked!</h4>
-      <div class="text-secondary">Your account has been saved!</div>
-    </div>
-  </div>
-  <a class="btn-close" data-bs-dismiss="alert" aria-label="close"></a>
-</div>
-```
-
-## Alerts with icons
-
-Add an icon to your alert modal to make it more user-friendly and help users easily identify the message.
-
-```html example height="420px"
-<div class="alert alert-success" role="alert">
-  <div class="d-flex">
-    <div>
-      <svg xmlns="http://www.w3.org/2000/svg" class="icon alert-icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
-        <path stroke="none" d="M0 0h24v24H0z" fill="none" />
-        <path d="M5 12l5 5l10 -10" />
-      </svg>
-    </div>
-    <div>
-      <h4 class="alert-title">Wow! Everything worked!</h4>
-      <div class="text-secondary">Your account has been saved!</div>
-    </div>
-  </div>
-</div>
-<div class="alert alert-info" role="alert">
-  <div class="d-flex">
-    <div>
-      <svg xmlns="http://www.w3.org/2000/svg" class="icon alert-icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
-        <path stroke="none" d="M0 0h24v24H0z" fill="none" />
-        <circle cx="12" cy="12" r="9" />
-        <line x1="12" y1="8" x2="12.01" y2="8" />
-        <polyline points="11 12 12 12 12 16 13 16" />
-      </svg>
-    </div>
-    <div>
-      <h4 class="alert-title">Did you know?</h4>
-      <div class="text-secondary">Here is something that you might like to know.</div>
-    </div>
-  </div>
-</div>
-<div class="alert alert-warning" role="alert">
-  <div class="d-flex">
-    <div>
-      <svg xmlns="http://www.w3.org/2000/svg" class="icon alert-icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
-        <path stroke="none" d="M0 0h24v24H0z" fill="none" />
-        <path d="M12 9v2m0 4v.01" />
-        <path d="M5 19h14a2 2 0 0 0 1.84 -2.75l-7.1 -12.25a2 2 0 0 0 -3.5 0l-7.1 12.25a2 2 0 0 0 1.75 2.75" />
-      </svg>
-    </div>
-    <div>
-      <h4 class="alert-title">Uh oh, something went wrong</h4>
-      <div class="text-secondary">Sorry! There was a problem with your request.</div>
-    </div>
-  </div>
-</div>
-<div class="alert alert-danger" role="alert">
-  <div class="d-flex">
-    <div>
-      <svg xmlns="http://www.w3.org/2000/svg" class="icon alert-icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
-        <path stroke="none" d="M0 0h24v24H0z" fill="none" />
-        <circle cx="12" cy="12" r="9" />
-        <line x1="12" y1="8" x2="12" y2="12" />
-        <line x1="12" y1="16" x2="12.01" y2="16" />
-      </svg>
-    </div>
-    <div>
-      <h4 class="alert-title">I'm so sorry&hellip;</h4>
-      <div class="text-secondary">Your account has been deleted and can't be restored.</div>
-    </div>
-  </div>
-</div>
-```
-
-```html
-<div class="alert alert-success" role="alert">
-  <div class="d-flex">
-    <div>
-      <!-- SVG icon from http://tabler-icons.io/i/check -->
-      <svg>...</svg>
-    </div>
-    <div>
-      <h4 class="alert-title">Wow! Everything worked!</h4>
-      <div class="text-secondary">Your account has been saved!</div>
-    </div>
-  </div>
-</div>
-<div class="alert alert-info" role="alert">
-  <div class="d-flex">
-    <div>
-      <!-- SVG icon from http://tabler-icons.io/i/info-circle -->
-      <svg>...</svg>
-    </div>
-    <div>
-      <h4 class="alert-title">Did you know?</h4>
-      <div class="text-secondary">Here is something that you might like to know.</div>
-    </div>
-  </div>
-</div>
-<div class="alert alert-warning" role="alert">
-  <div class="d-flex">
-    <div>
-      <!-- SVG icon from http://tabler-icons.io/i/alert-triangle -->
-      <svg>...</svg>
-    </div>
-    <div>
-      <h4 class="alert-title">Uh oh, something went wrong</h4>
-      <div class="text-secondary">Sorry! There was a problem with your request.</div>
-    </div>
-  </div>
-</div>
-<div class="alert alert-danger" role="alert">
-  <div class="d-flex">
-    <div>
-      <!-- SVG icon from http://tabler-icons.io/i/alert-circle -->
-      <svg>...</svg>
-    </div>
-    <div>
-      <h4 class="alert-title">I'm so sorry&hellip;</h4>
-      <div class="text-secondary">Your account has been deleted and can't be restored.</div>
-    </div>
-  </div>
-</div>
-```
-
-## Alert with avatar
-
-Add an avatar to your alert modal to make it more personalized.
-
-```html code example height="420px"
-<div class="alert alert-success" role="alert">
-  <div class="d-flex">
-    <div>
-      <span class="avatar float-start me-3"></span>
-    </div>
-    <div>
-      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit.
-    </div>
-  </div>
-</div>
-<div class="alert alert-info" role="alert">
-  <div class="d-flex">
-    <div>
-      <span class="avatar float-start me-3">JL</span>
-    </div>
-    <div>
-      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit.
-    </div>
-  </div>
-</div>
-<div class="alert alert-warning" role="alert">
-  <div class="d-flex">
-    <div>
-      <span class="avatar float-start me-3"></span>
-    </div>
-    <div>
-      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit.
-    </div>
-  </div>
-</div>
-<div class="alert alert-danger" role="alert">
-  <div class="d-flex">
-    <div>
-      <span class="avatar float-start me-3"></span>
-    </div>
-    <div>
-      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit.
-    </div>
-  </div>
-</div>
-```
-
-## Alert with buttons
-
-Add primary and secondary buttons to your alert modals if you want users to take a particular action based on the information included in the modal message.
-
-```html code example height="500px" scrollable
-<div class="alert alert-success alert-dismissible" role="alert">
-  <h3 class="mb-1">Some Title</h3>
-  <p>Lorem ipsum Minim ad pariatur eiusmod ea ut nulla aliqua est quis id dolore minim voluptate.</p>
-  <div class="btn-list">
-    <a href="#" class="btn btn-success">Okay</a>
-    <a href="#" class="btn">Cancel</a>
-  </div>
-  <a class="btn-close" data-bs-dismiss="alert" aria-label="close"></a>
-</div>
-<div class="alert alert-info alert-dismissible" role="alert">
-  <h3 class="mb-1">Some Title</h3>
-  <p>Lorem ipsum Minim ad pariatur eiusmod ea ut nulla aliqua est quis id dolore minim voluptate.</p>
-  <div class="btn-list">
-    <a href="#" class="btn btn-info">Okay</a>
-    <a href="#" class="btn">Cancel</a>
-  </div>
-  <a class="btn-close" data-bs-dismiss="alert" aria-label="close"></a>
-</div>
-<div class="alert alert-warning alert-dismissible" role="alert">
-  <h3 class="mb-1">Some Title</h3>
-  <p>Lorem ipsum Minim ad pariatur eiusmod ea ut nulla aliqua est quis id dolore minim voluptate.</p>
-  <div class="btn-list">
-    <a href="#" class="btn btn-warning">Okay</a>
-    <a href="#" class="btn">Cancel</a>
-  </div>
-  <a class="btn-close" data-bs-dismiss="alert" aria-label="close"></a>
-</div>
-<div class="alert alert-danger alert-dismissible" role="alert">
-  <h3 class="mb-1">Some Title</h3>
-  <p>Lorem ipsum Minim ad pariatur eiusmod ea ut nulla aliqua est quis id dolore minim voluptate.</p>
-  <div class="btn-list">
-    <a href="#" class="btn btn-danger">Okay</a>
-    <a href="#" class="btn">Cancel</a>
-  </div>
-  <a class="btn-close" data-bs-dismiss="alert" aria-label="close"></a>
-</div>
-```
-
-## Important alerts
-
-If you want your alert to be really eye-catching, you can add a class `alert-important`.
-
-```html example vertical height="210px"
-<div class="alert alert-important alert-success alert-dismissible" role="alert">
-  <div class="d-flex">
-    <div>
-		<svg xmlns="http://www.w3.org/2000/svg" class="icon alert-icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
-			<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
-			<path d="M5 12l5 5l10 -10"></path>
-		</svg>
-    </div>
-    <div>
-		 <h4 class="alert-title">Wow! Everything worked!</h4>
-		 <div class="text-secondary">Your account has been saved!</div>
-    </div>
-  </div>
-  <a class="btn-close btn-close-white" data-bs-dismiss="alert" aria-label="close"></a>
-</div>
-<div class="alert alert-important alert-danger alert-dismissible" role="alert">
-  <div class="d-flex">
-    <div>
-      <svg xmlns="http://www.w3.org/2000/svg" class="icon alert-icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
-        <path stroke="none" d="M0 0h24v24H0z" fill="none" />
-        <circle cx="12" cy="12" r="9" />
-        <line x1="12" y1="8" x2="12" y2="12" />
-        <line x1="12" y1="16" x2="12.01" y2="16" />
-      </svg>
-    </div>
-    <div>Your account has been deleted and can't be restored.</div>
-  </div>
-  <a class="btn-close btn-close-white" data-bs-dismiss="alert" aria-label="close"></a>
-</div>
-```
-
-```html
-<div class="alert alert-important alert-success alert-dismissible" role="alert">
-  <div class="d-flex">
-    <div>
-      <!-- SVG icon from http://tabler-icons.io/i/check -->
-      <svg>...</svg>
-    </div>
-    <div>
-      Your account has been saved!
-    </div>
-  </div>
-  <a class="btn-close btn-close-white" data-bs-dismiss="alert" aria-label="close"></a>
-</div>
-<div class="alert alert-important alert-info alert-dismissible" role="alert">
-  <div class="d-flex">
-    <div>
-      <!-- SVG icon from http://tabler-icons.io/i/info-circle -->
-      <svg>...</svg>
-    </div>
-    <div>
-      Here is something that you might like to know.
-    </div>
-  </div>
-  <a class="btn-close btn-close-white" data-bs-dismiss="alert" aria-label="close"></a>
-</div>
-<div class="alert alert-important alert-warning alert-dismissible" role="alert">
-  <div class="d-flex">
-    <div>
-      <!-- SVG icon from http://tabler-icons.io/i/alert-triangle -->
-      <svg>...</svg>
-    </div>
-    <div>
-      Sorry! There was a problem with your request.
-    </div>
-  </div>
-  <a class="btn-close btn-close-white" data-bs-dismiss="alert" aria-label="close"></a>
-</div>
-<div class="alert alert-important alert-danger alert-dismissible" role="alert">
-  <div class="d-flex">
-    <div>
-      <!-- SVG icon from http://tabler-icons.io/i/alert-circle -->
-      <svg>...</svg>
-    </div>
-    <div>
-      Your account has been deleted and can't be restored.
-    </div>
-  </div>
-  <a class="btn-close btn-close-white" data-bs-dismiss="alert" aria-label="close"></a>
-</div>
-```
-

docs/components/autosize.mdx

@@ -1,16 +0,0 @@
----
-title: Autosize
-description: The autosize element will automatically adjust the textarea height and make it easier for users to follow as they type.
-libs: autosize
----
-
-To be able to use the autosize in your application you will need to install the autosize dependency with `npm install autosize`.
-
-## Default markup
-
-Add the autosize element to your input to make it automatically adjust to the length of a text as a user types it.
-
-```html code example centered columns={1} scrollable
-<label class="form-label">Autosize example</label>
-<textarea class="form-control" data-bs-toggle="autosize" placeholder="Type something…"></textarea>
-```

docs/components/badges.mdx

@@ -1,127 +0,0 @@
----
-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.
-bootstrapLink: components/badge/
----
-
-## Default markup
-
-The default badges are square and come in the basic set of colors.
-
-```html code example vertical centered separated scrollable height="15rem"
-<span class="badge bg-blue">Blue</span>
-<span class="badge bg-azure">Azure</span>
-<span class="badge bg-indigo">Indigo</span>
-<span class="badge bg-purple">Purple</span>
-<span class="badge bg-pink">Pink</span>
-<span class="badge bg-red">Red</span>
-<span class="badge bg-orange">Orange</span>
-<span class="badge bg-yellow">Yellow</span>
-<span class="badge bg-lime">Lime</span>
-<span class="badge bg-green">Green</span>
-<span class="badge bg-teal">Teal</span>
-<span class="badge bg-cyan">Cyan</span>
-```
-
-## Headings
-
-```html code example height="240px"
-<h1>Example heading <span class="badge bg-secondary">New</span></h1>
-<h2>Example heading <span class="badge bg-secondary">New</span></h2>
-<h3>Example heading <span class="badge bg-secondary">New</span></h3>
-<h4>Example heading <span class="badge bg-secondary">New</span></h4>
-<h5>Example heading <span class="badge bg-secondary">New</span></h5>
-<h6>Example heading <span class="badge bg-secondary">New</span></h6>
-```
-
-## Outline badges
-
-```html code example vertical centered separated scrollable height="15rem"
-<span class="badge badge-outline text-blue">blue</span>
-<span class="badge badge-outline text-azure">azure</span>
-<span class="badge badge-outline text-indigo">indigo</span>
-<span class="badge badge-outline text-purple">purple</span>
-<span class="badge badge-outline text-pink">pink</span>
-<span class="badge badge-outline text-red">red</span>
-<span class="badge badge-outline text-orange">orange</span>
-<span class="badge badge-outline text-yellow">yellow</span>
-<span class="badge badge-outline text-lime">lime</span>
-<span class="badge badge-outline text-green">green</span>
-<span class="badge badge-outline text-teal">teal</span>
-<span class="badge badge-outline text-cyan">cyan</span>
-```
-
-## Pill badges
-
-Use the `.badge-pill` class if you want to create a badge with rounded corners. Its width will adjust to the label text.
-
-```html code example centered separated height="7rem"
-<span class="badge badge-pill bg-blue">1</span>
-<span class="badge badge-pill bg-azure">2</span>
-<span class="badge badge-pill bg-indigo">3</span>
-<span class="badge badge-pill bg-purple">4</span>
-<span class="badge badge-pill bg-pink">5</span>
-<span class="badge badge-pill bg-red">6</span>
-<span class="badge badge-pill bg-orange">7</span>
-<span class="badge badge-pill bg-yellow">8</span>
-<span class="badge badge-pill bg-lime">9</span>
-<span class="badge badge-pill bg-green">10</span>
-<span class="badge badge-pill bg-teal">11</span>
-<span class="badge badge-pill bg-cyan">12</span>
-```
-
-## Soft color badges
-
-You can create a soft colour variant of a corresponding contextual badge variation, to make it look more subtle. Click [here](colors) to see the list of available colors and choose ones that best suit your design.
-
-```html code example vertical centered separated scrollable height="15rem"
-<span class="badge bg-blue-lt">Blue</span>
-<span class="badge bg-azure-lt">Azure</span>
-<span class="badge bg-indigo-lt">Indigo</span>
-<span class="badge bg-purple-lt">Purple</span>
-<span class="badge bg-pink-lt">Pink</span>
-<span class="badge bg-red-lt">Red</span>
-<span class="badge bg-orange-lt">Orange</span>
-<span class="badge bg-yellow-lt">Yellow</span>
-<span class="badge bg-lime-lt">Lime</span>
-<span class="badge bg-green-lt">Green</span>
-<span class="badge bg-teal-lt">Teal</span>
-<span class="badge bg-cyan-lt">Cyan</span>
-```
-
-## Links
-
-Place the badge within an `<a>` element if you want it to perform the function of a link and make it clickable.
-
-```html code example vertical centered separated scrollable height="15rem"
-<a href="#" class="badge bg-blue">Blue</a>
-<a href="#" class="badge bg-azure">Azure</a>
-<a href="#" class="badge bg-indigo">Indigo</a>
-<a href="#" class="badge bg-purple">Purple</a>
-<a href="#" class="badge bg-pink">Pink</a>
-<a href="#" class="badge bg-red">Red</a>
-<a href="#" class="badge bg-orange">Orange</a>
-<a href="#" class="badge bg-yellow">Yellow</a>
-<a href="#" class="badge bg-lime">Lime</a>
-<a href="#" class="badge bg-green">Green</a>
-<a href="#" class="badge bg-teal">Teal</a>
-<a href="#" class="badge bg-cyan">Cyan</a>
-```
-
-## Button with badge
-
-Badges can be used as part of links or buttons to provide a counter.
-
-```html example centered separated height="7rem"
-<button type="button" class="btn">Notifications <span class="badge bg-red ms-2">4</span></button>
-<button type="button" class="btn">Notifications <span class="badge bg-green ms-2">4</span></button>
-```
-
-```html
-<button type="button" class="btn">
-  Notifications <span class="badge bg-red ms-2">4</span>
-</button>
-<button type="button" class="btn">
-  Notifications <span class="badge bg-green ms-2">4</span>
-</button>
-```

docs/components/breadcrumb.mdx

@@ -1,107 +0,0 @@
----
-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.
-bootstrapLink: components/breadcrumb/
----
-
-## Default markup
-
-Add the `:before` pseudo-element in `li` tags to use the default separators. The `active` modifier in a `li` tag will help you indicate the current page location and facilitate navigation within your website or app.
-
-```html code example centered
-<ol class="breadcrumb" aria-label="breadcrumbs">
-  <li class="breadcrumb-item"><a href="#">Home</a></li>
-  <li class="breadcrumb-item"><a href="#">Library</a></li>
-  <li class="breadcrumb-item active" aria-current="page"><a href="#">Data</a></li>
-</ol>
-```
-
-## Breadcrumb variations
-
-If you wish to use different separators, modify the `$breadcrumb-variants` variable in the Tabler config. Depending on the aesthetics of your design, you can choose dots, bullets or arrows.
-
-```html code example centered
-<ol class="breadcrumb breadcrumb-dots" aria-label="breadcrumbs">
-  <li class="breadcrumb-item"><a href="#">Home</a></li>
-  <li class="breadcrumb-item"><a href="#">Library</a></li>
-  <li class="breadcrumb-item active" aria-current="page"><a href="#">Data</a></li>
-</ol>
-```
-
-```html code example centered
-<ol class="breadcrumb breadcrumb-arrows" aria-label="breadcrumbs">
-  <li class="breadcrumb-item"><a href="#">Home</a></li>
-  <li class="breadcrumb-item"><a href="#">Library</a></li>
-  <li class="breadcrumb-item active" aria-current="page"><a href="#">Data</a></li>
-</ol>
-```
-
-```html code example centered
-<ol class="breadcrumb breadcrumb-bullets" aria-label="breadcrumbs">
-  <li class="breadcrumb-item"><a href="#">Home</a></li>
-  <li class="breadcrumb-item"><a href="#">Library</a></li>
-  <li class="breadcrumb-item active" aria-current="page"><a href="#">Data</a></li>
-</ol>
-```
-
-## Breadcrumb in headers
-
-If you wish to use breadcrumbs in headers, place them above the headers.
-
-```html example vertical centered columns={3}
-<div class="page-header">
-  <div class="row align-items-center mw-100">
-    <div class="col">
-      <div class="mb-1">
-        <ol class="breadcrumb" aria-label="breadcrumbs">
-          <li class="breadcrumb-item"><a href="#">Home</a></li>
-          <li class="breadcrumb-item"><a href="#">Library</a></li>
-          <li class="breadcrumb-item active" aria-current="page"><a href="#">Articles</a></li>
-        </ol>
-      </div>
-      <h2 class="page-title">
-        <span class="text-truncate">Knights of Ni, we are but simple travelers who seek the enchanter who lives beyond these woods.</span>
-      </h2>
-    </div>
-    <div class="col-auto">
-      <div class="btn-list">
-        <a href="#" class="btn d-none d-md-inline-flex"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
-            <path stroke="none" d="M0 0h24v24H0z" fill="none" />
-            <path d="M7 7h-1a2 2 0 0 0 -2 2v9a2 2 0 0 0 2 2h9a2 2 0 0 0 2 -2v-1" />
-            <path d="M20.385 6.585a2.1 2.1 0 0 0 -2.97 -2.97l-8.415 8.385v3h3l8.385 -8.415z" />
-            <path d="M16 5l3 3" />
-          </svg> Edit</a>
-        <a href="#" class="btn btn-primary">Publish</a>
-      </div>
-    </div>
-  </div>
-</div>
-```
-
-```html
-<div class="page-header">
-  <div class="row align-items-center mw-100">
-    <div class="col">
-      <div class="mb-1">
-        <ol class="breadcrumb" aria-label="breadcrumbs">
-          <li class="breadcrumb-item"><a href="#">Home</a></li>
-          <li class="breadcrumb-item"><a href="#">Library</a></li>
-          <li class="breadcrumb-item active" aria-current="page"><a href="#">Articles</a></li>
-        </ol>
-      </div>
-      <h2 class="page-title">
-        <span class="text-truncate">Knights of Ni, we are but simple travelers who seek the enchanter who lives beyond these woods.</span>
-      </h2>
-    </div>
-    <div class="col-auto">
-      <div class="btn-list">
-        <a href="#" class="btn d-none d-md-inline-flex">
-          <!-- SVG icon from http://tabler-icons.io/i/edit -->
-          <svg>...</svg> Edit
-        </a>
-        <a href="#" class="btn btn-primary">Publish</a>
-      </div>
-    </div>
-  </div>
-</div>
-```

docs/components/countup.mdx

@@ -1,136 +0,0 @@
----
-title: Countup
-description: A countup element is used to display numerical data in an interesting way and make the interface more interactive.
-libs: countup
----
-
-To be able to use the countup in your application you will need to install the countup.js dependency with `npm install countup.js`.
-
-## Default countup
-
-To create a countup, add `data-countup` to any HTML text tag and specify the number which is to be reached. The animation will be triggered as soon as the number enters the viewport.
-
-```html code example
-<script src="$TABLER_CDN/dist/libs/countup.js/dist/countUp.js"></script>
-
-<h1 data-countup>30000</h1>
-```
-
-## Duration
-
-Set the `duration` to determine how long the animation should take. By default, the duration is set to 2 seconds, but you can modify it as you wish.
-
-```html code example
-<script src="$TABLER_CDN/dist/libs/countup.js/dist/countUp.js"></script>
-
-<h1 data-countup>30000</h1>
-<h1 data-countup='{"duration":4}'>30000</h1>
-<h1 data-countup='{"duration":6}'>30000</h1>
-```
-
-## Starting value
-
-By default the countup will start from zero. If you want to set a different start value use `startVal`.
-You can also set the start value to be greater than the final value, so that it counts down instead of up.
-
-```html code example
-<script src="$TABLER_CDN/dist/libs/countup.js/dist/countUp.js"></script>
-
-<h1 data-countup='{"startVal":12345}'>30000</h1>
-<h1 data-countup='{"startVal":47655}'>30000</h1>
-```
-
-## Decimal places
-
-Set how many decimal numbers should be displayed using `decimalPlaces`.
-
-```html code example
-<script src="$TABLER_CDN/dist/libs/countup.js/dist/countUp.js"></script>
-
-<h1 data-countup>3.123</h1>
-<h1 data-countup='{"decimalPlaces":1}'>3.123</h1>
-<h1 data-countup='{"decimalPlaces":2}'>3.123</h1>
-<h1 data-countup='{"decimalPlaces":3}'>3.123</h1>
-```
-
-## Easing
-
-Disable easing using `"useEasing": false`. Easing is set to `true` by default, so that the animation speed changes over the course of its duration.
-
-```html code example
-<script src="$TABLER_CDN/dist/libs/countup.js/dist/countUp.js"></script>
-
-<h1 data-countup>30000</h1>
-<h1 data-countup='{"useEasing": false}'>30000</h1>
-```
-
-## Use grouping
-
-Disable grouping using `"useGrouping": false`. Grouping is set to `true` by default and the default group separator is a comma.
-
-```html code example
-<script src="$TABLER_CDN/dist/libs/countup.js/dist/countUp.js"></script>
-
-<h1 data-countup>30000</h1>
-<h1 data-countup='{"useGrouping": false}'>30000</h1>
-```
-
-## Separator
-
-You can change the default comma group separator using `separator` and specifying the one you wish to use.
-
-```html code example
-<script src="$TABLER_CDN/dist/libs/countup.js/dist/countUp.js"></script>
-
-<h1 data-countup>3000000</h1>
-<h1 data-countup='{"separator":" "}'>3000000</h1>
-<h1 data-countup='{"separator":"-"}'>3000000</h1>
-<h1 data-countup='{"separator":":"}'>3000000</h1>
-```
-
-## Decimal separator
-
-You can also change the decimal separator which is set to a full stop by default. To do it, use `decimal` and specify the decimal separator of your choice.
-
-```html code example
-<script src="$TABLER_CDN/dist/libs/countup.js/dist/countUp.js"></script>
-
-<h1 data-countup='{"decimalPlaces":2}'>3.12</h1>
-<h1 data-countup='{"decimalPlaces":2,"decimal":".."}'>3.12</h1>
-<h1 data-countup='{"decimalPlaces":2,"decimal":"^"}'>3.12</h1>
-<h1 data-countup='{"decimalPlaces":2,"decimal":":"}'>3.12</h1>
-```
-
-## Prefix
-
-Set the countup prefix using `prefix` and specifying the prefix you want to add, for instance a currency symbol.
-
-```html code example
-<script src="$TABLER_CDN/dist/libs/countup.js/dist/countUp.js"></script>
-
-<h1 data-countup='{"prefix":"$"}'>30000</h1>
-<h1 data-countup='{"prefix":"€"}'>30000</h1>
-<h1 data-countup='{"prefix":"£"}'>30000</h1>
-```
-
-## Suffix
-
-Set the countup suffix using `suffix`.
-
-```html code example
-<script src="$TABLER_CDN/dist/libs/countup.js/dist/countUp.js"></script>
-
-<h1 data-countup='{"suffix":"%"}'>30</h1>
-<h1 data-countup='{"suffix":"‰"}'>30</h1>
-<h1 data-countup='{"suffix":"k"}'>30</h1>
-```
-
-Of course you can mix all of these:
-
-```html code example
-<script src="$TABLER_CDN/dist/libs/countup.js/dist/countUp.js"></script>
-
-<h1 data-countup='{"duration":6,"startVal":12345,"decimalPlaces":2,"separator":" ","prefix":"$"}'>64547834.76</h1>
-```
-
-For more advanced features of countups, click [**here**](https://inorganik.github.io/countUp.js/) and see what more you can do.

docs/components/dropzone.mdx

@@ -1,63 +0,0 @@
----
-title: Dropzone
-libs: 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.
----
-
-## Default Dropzone
-
-```html example code vendors height="240px"
-<form class="dropzone" id="dropzone-default" action="." autocomplete="off" novalidate>
-  <div class="fallback">
-    <input name="file" type="file" />
-  </div>
-</form>
-
-<link href="$TABLER_CDN/dist/libs/dropzone/dist/dropzone.css" rel="stylesheet" />
-<script src="$TABLER_CDN/dist/libs/dropzone/dist/dropzone-min.js"></script>
-<script>
-  document.addEventListener("DOMContentLoaded", function() {
-    new Dropzone("#dropzone-default")
-  })
-</script>
-```
-
-## Add multiple files
-
-```html example code vendors height="240px"
-<form class="dropzone" id="dropzone-mulitple" action="." autocomplete="off" novalidate>
-  <div class="fallback">
-    <input name="file" type="file" multiple />
-  </div>
-</form>
-
-<link href="$TABLER_CDN/dist/libs/dropzone/dist/dropzone.css" rel="stylesheet" />
-<script src="$TABLER_CDN/dist/libs/dropzone/dist/dropzone-min.js"></script>
-<script>
-  document.addEventListener("DOMContentLoaded", function() {
-    new Dropzone("#dropzone-mulitple")
-  })
-</script>
-```
-
-## Custom Dropzone
-
-```html example code vendors height="240px"
-<form class="dropzone" id="dropzone-custom" action="." autocomplete="off" novalidate>
-  <div class="fallback">
-    <input name="file" type="file" />
-  </div>
-  <div class="dz-message">
-    <h3 class="dropzone-msg-title">Your text here</h3>
-    <span class="dropzone-msg-desc">Your custom description here</span>
-  </div>
-</form>
-
-<link href="$TABLER_CDN/dist/libs/dropzone/dist/dropzone.css" rel="stylesheet" />
-<script src="$TABLER_CDN/dist/libs/dropzone/dist/dropzone-min.js"></script>
-<script>
-  document.addEventListener("DOMContentLoaded", function() {
-    new Dropzone("#dropzone-custom")
-  })
-</script>
-```

docs/components/inline-player.mdx

@@ -1,31 +0,0 @@
----
-title: Inline player
-libs: plyr
-description: A simple, lightweight, accessible and customizable HTML5, YouTube and Vimeo media player that supports modern browsers.
----
-
-## Sample demo
-
-```html example code vendors height="500px"
-<div id="player-youtube" data-plyr-provider="youtube" data-plyr-embed-id="dQw4w9WgXcQ"></div>
-
-<script src="$TABLER_CDN/dist/libs/plyr/dist/plyr.min.js"></script>
-<script>
-  document.addEventListener("DOMContentLoaded", function() {
-    window.Plyr && (new Plyr('#player-youtube'));
-  });
-</script>
-```
-
-## Vimeo file
-
-```html example code vendors height="500px"
-<div id="player-vimeo" data-plyr-provider="vimeo" data-plyr-embed-id="515937365"></div>
-
-<script src="$TABLER_CDN/dist/libs/plyr/dist/plyr.min.js"></script>
-<script>
-  document.addEventListener("DOMContentLoaded", function() {
-    window.Plyr && (new Plyr('#player-vimeo'));
-  });
-</script>
-```

docs/components/progress.mdx

@@ -1,92 +0,0 @@
----
-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.
-bootstrapLink: components/progress
----
-
-## Default markup
-
-To create a default progress bar, add a `.progress` class to a `<div>` element. Thanks to that, you will be able to notify users how long they have to wait for a process to complete.
-
-```html example columns={1} centered
-<div class="progress">
-  <div class="progress-bar" style="width: 38%"></div>
-</div>
-```
-
-```html
-<div class="progress">
-  <div class="progress-bar" style="width: 38%" role="progressbar" aria-valuenow="38" aria-valuemin="0" aria-valuemax="100" aria-label="38% Complete">
-    <span class="visually-hidden">38% Complete</span>
-  </div>
-</div>
-```
-
-## Progress size
-
-Using Bootstrap’s typical naming structure, you can create a standard progress bar or scale it up or down to different sizes based on what’s needed.
-
-```html code example columns={1} centered
-<div class="progress progress-sm">
-  <div class="progress-bar" style="width: 57%" role="progressbar" aria-valuenow="57" aria-valuemin="0" aria-valuemax="100" aria-label="57% Complete">
-    <span class="visually-hidden">57% Complete</span>
-  </div>
-</div>
-```
-
-## Progress without value
-
-Remove the displayed value by adding the `.visually-hidden` class.
-
-```html code example columns={1} centered
-<div class="progress">
-  <div class="progress-bar" style="width: 75%" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" aria-label="75% Complete">
-    <span class="visually-hidden">75% Complete</span>
-  </div>
-</div>
-```
-
-## Indeterminate progress
-
-You can create a progress bar which shows indeterminate progress by adding `.progress-bar-indeterminate` to the `.progress-bar` element.
-
-```html code example columns={1} centered
-<div class="progress progress-sm">
-  <div class="progress-bar progress-bar-indeterminate"></div>
-</div>
-```
-
-## Native progress element
-
-You can also use native HTML5 `<progress>` element.
-
-```html code example columns={1} centered
-<progress class="progress progress-sm" value="15" max="100" />
-```
-
-## Progress color
-
-Customize the color of the progress bar to suit your design. Click [here](colors) to see the list of available colors.
-
-```html code example columns={1} centered separated
-<div class="progress">
-  <div class="progress-bar bg-red" style="width: 24%" role="progressbar" aria-valuenow="24" aria-valuemin="0" aria-valuemax="100" aria-label="24% Complete">
-    <span class="visually-hidden">24% Complete</span>
-  </div>
-</div>
-<div class="progress">
-  <div class="progress-bar bg-green" style="width: 45%" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" aria-label="45% Complete">
-    <span class="visually-hidden">45% Complete</span>
-  </div>
-</div>
-<div class="progress">
-  <div class="progress-bar bg-purple" style="width: 64%" role="progressbar" aria-valuenow="64" aria-valuemin="0" aria-valuemax="100" aria-label="64% Complete">
-    <span class="visually-hidden">64% Complete</span>
-  </div>
-</div>
-<div class="progress">
-  <div class="progress-bar bg-blue" style="width: 38%" role="progressbar" aria-valuenow="38" aria-valuemin="0" aria-valuemax="100" aria-label="38% Complete">
-    <span class="visually-hidden">38% Complete</span>
-  </div>
-</div>
-```

docs/components/progressbg.mdx

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

docs/components/range-slider.mdx

@@ -1,17 +0,0 @@
----
-title: Range slider
-libs: nouislider
----
-
-To be able to use the range slider in your application you will need to install the nouislider dependency with `npm install nouislider`.
-
-All options and features can be found [**here**](https://refreshless.com/nouislider/).
-
-## Basic range slider
-
-```html code example centered
-<div data-slider='{"js-name": "slider0","start": 50,"range": {"min": 0,"max": 100}}'></div>
-<p demo-slider="slider0"></p>
-```
-
-That's only the basic features and options of range slider. More possibilities can be found [**here**](https://refreshless.com/nouislider/).

docs/components/steps.mdx

@@ -1,111 +0,0 @@
----
-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.
-new: true
----
-
-## Default markup
-
-Steps show users where they are within a process, what steps they have already completed and what they are expected to complete. Making multi-step processes more user-friendly facilitates users' interaction with your interface.
-
-Use the `steps` class to create the default progress tracker and name the steps accordingly.
-
-```html code example
-<div class="steps">
-  <a href="#" class="step-item">
-    Step 1
-  </a>
-  <a href="#" class="step-item">
-    Step 2
-  </a>
-  <a href="#" class="step-item active">
-    Step 3
-  </a>
-  <span href="#" class="step-item">
-    Step 4
-  </span>
-</div>
-```
-
-## Tooltips
-
-Add tooltips, if you want to provide users with additional information about the steps they are expected to complete. Tooltips are displayed when a user hovers over a given step and help clarify what might not be clear from the interface.
-
-```html code example
-<div class="steps">
-  <a href="#" class="step-item" data-bs-toggle="tooltip" title="Step 1 description">
-    Step 1
-  </a>
-  <a href="#" class="step-item" data-bs-toggle="tooltip" title="Step 2 description">
-    Step 2
-  </a>
-  <a href="#" class="step-item active" data-bs-toggle="tooltip" title="Step 3 description">
-    Step 3
-  </a>
-  <span href="#" class="step-item" data-bs-toggle="tooltip" title="Step 4 description">
-    Step 4
-  </span>
-</div>
-```
-
-## Color
-
-You can customize the default progress indicator by changing the color to one that better suits your design. Click [here](colors) to see the range of available colors.
-
-```html code example
-<div class="steps steps-green">
-  <a href="#" class="step-item">
-    Step 1
-  </a>
-  <a href="#" class="step-item">
-    Step 2
-  </a>
-  <a href="#" class="step-item active">
-    Step 3
-  </a>
-  <span href="#" class="step-item">
-    Step 4
-  </span>
-</div>
-<div class="steps steps-red">
-  <a href="#" class="step-item">
-    Step 1
-  </a>
-  <a href="#" class="step-item">
-    Step 2
-  </a>
-  <a href="#" class="step-item active">
-    Step 3
-  </a>
-  <span href="#" class="step-item">
-    Step 4
-  </span>
-</div>
-```
-
-## Steps without title
-
-For designs with limited space, use progress indicators without titles and add tooltips to provide the necessary details.
-
-```html code example
-<div class="steps">
-  <a href="#" class="step-item" data-bs-toggle="tooltip" title="Step 1 description"></a>
-  <a href="#" class="step-item" data-bs-toggle="tooltip" title="Step 2 description"></a>
-  <a href="#" class="step-item active" data-bs-toggle="tooltip" title="Step 3 description"></a>
-  <span href="#" class="step-item" data-bs-toggle="tooltip" title="Step 4 description"></span>
-</div>
-```
-
-## Steps with numbers
-
-Use the `steps-counter` class to create a progress tracker with numbers instead of titles and change the color to customize it.
-
-```html code example
-<div class="steps steps-counter steps-lime">
-  <a href="#" class="step-item"></a>
-  <a href="#" class="step-item active"></a>
-  <span href="#" class="step-item"></span>
-  <span href="#" class="step-item"></span>
-  <span href="#" class="step-item"></span>
-</div>
-```

docs/forms/form-helpers.mdx

@@ -1,12 +0,0 @@
----
-title: Form helpers
-description: A form helper can be used to provide users with additional information about the elements of a form that may be unclear.
----
-
-## Input help
-
-Use an input helper to display additional information about a form element. The text label will appear once a user hovers over the helper.
-
-```html example code centered
-<span class="form-help" data-bs-toggle="popover" data-bs-placement="top" data-bs-html="true" data-bs-content="<p>ZIP Code must be US or CDN format. You can use an extended ZIP+4 code to determine address more accurately.</p><p class='mb-0'><a href=''>USP ZIP codes lookup tools</a></p>">?</span>
-```

docs/forms/form-input-mask.mdx

@@ -1,18 +0,0 @@
----
-title: Input mask
-description: An input mask is a used to clarify the input format required in a given field and is helpful for users, removing confusion and reducing the number of validation errors.
----
-
-<Callout>
-  To be able to use the input mask in your application you will need to install the imask dependency with `npm install imask`.
-</Callout>
-
-## Default markup
-
-Use an input mask in the fields where users have to enter their phone number, to make the formatting rules clear and help them avoid confusion.
-
-```html example code centered columns={1}
-<label class="form-label">Telephone mask</label>
-<input type="text" name="input-mask" class="form-control" data-mask="(00) 0000-0000" data-mask-visible="true" placeholder="(00) 0000-0000" autocomplete="off" />
-```
-

docs/forms/form-validation.mdx

@@ -1,25 +0,0 @@
----
-title: Validation states
-description: To inform users whether the entered value is correct or not, use either of the validation states. Thanks to that, users will immediately know which form elements they need to correct and, if the state displays as invalid, why the value is incorrect.
----
-
-```html example code centered columns="1" height="20rem"
-<div class="mb-3">
-  <label class="form-label">Validation States </label>
-  <input type="text" class="form-control is-valid mb-2" placeholder="Valid State..." />
-  <input type="text" class="form-control is-invalid" placeholder="Invalid State..." />
-  <div class="invalid-feedback">Invalid feedback</div>
-</div>
-```
-
-## Subtle validation states
-
-If you prefer a more subtle manner of informing users of the input control validation state, you can use tick and cross symbols and resign from colored control frames and the validation feedback.
-
-```html example code centered columns="1" height="20rem"
-<div class="mb-3">
-  <label class="form-label">Validation States (lite)</label>
-  <input type="text" class="form-control is-valid is-valid-lite mb-2" placeholder="Valid State..." />
-  <input type="text" class="form-control is-invalid is-invalid-lite" placeholder="Invalid State..." />
-</div>
-```

docs/getting-started/browser-support.mdx

@@ -1,20 +0,0 @@
----
-title: Browser Support
----
-
-As of this latest release, Tabler has launched many new features that may not be compatible with all browsers, especially older ones.
-
-For instance, Tabler no longer uses **vendor prefixes** in styles that are known to have some compatibility issues except for a few parts. Tabler also supports new features such as **CSS grid**, **object fit**, and **sticky positioning** which is not yet supported on all browsers. In short, Tabler supports all the latest supported browsers with **only** partial support for Internet Explorer.
-
-## Supported Browsers
-
-Browser|Version
----|----------
-<img src="/docs/browsers/edge.svg" width="48" height="48" alt="Edge Logo"/>|last 3 versions
-<img src="/docs/browsers/firefox.svg" width="48" height="48" alt="Firefox Logo"/>|last 3 versions, ESR
-<img src="/docs/browsers/chrome.svg" width="48" height="48" alt="Chrome Logo"/>|last 3 versions
-<img src="/docs/browsers/safari.svg" width="48" height="48" alt="Safari Logo"/>|last 3 versions
-<img src="/docs/browsers/opera.svg" width="48" height="48" alt="Opera Logo"/>|last 3 versions
-<img src="/docs/browsers/electron.svg" width="48" height="48" alt="Electron Logo"/>|last 3 versions
-<img src="/docs/browsers/brave.svg" width="48" height="48" alt="Brave Logo"/>|last 3 versions
-<img src="/docs/browsers/vivaldi.svg" width="48" height="48" alt="Vivaldi Logo"/>|last 3 versions

docs/getting-started/index.mdx

@@ -1,40 +0,0 @@
----
-title: Introduction
-description: Free and open-source HTML Dashboard UI Kit built on Bootstrap
----
-
-## What is Tabler?
-
-Tabler is fully responsive and compatible with all modern browsers. Thanks to its modern and user-friendly design you can create a fully functional interface that users will love! Choose the layouts and components you need and customize them to make your design consistent and eye-catching. Every component has been created with attention to detail to make your interface beautiful!
-
-## What are the benefits?
-
-Tabler is a perfect solution if you want to create an interface which is not only user-friendly but also fully responsive. Thanks to the big choice of ready-made components, you can customize your design and adapt it to the needs of even the most demanding users. On top of that, Tabler is an open source solution, continuously developed and improved by the open source community.
-
-![Screencap of tabler site showing global traffic and statistics](https://raw.githubusercontent.com/tabler/tabler/dev/src/static/tabler-preview.png)
-
-## Set up the environment
-
-To use our build system and run our documentation locally, you'll need a copy of Tabler's source files. Follow the steps below:
-
-1. [Install Node.js](https://nodejs.org/download/), which we use to manage our dependencies.
-2. Navigate to the root `/tabler` directory and run `npm install` to install our local dependencies listed in `package.json`.
-3. [Install Ruby](https://ruby-lang.org/en/documentation/installation/) - the recommended version is [2.5.5](https://cache.ruby-lang.org/pub/ruby/2.5/ruby-2.5.5.tar.gz).
-4. [Install Bundler](https://bundler.io) with `gem install bundler` and, finally, run `bundle install`. It will install all Ruby dependencies, such as [Jekyll and plugins](https://jekyllrb.com).
-
-### Windows users
-1. [Install Git](https://git-scm.com/download/win) in `C:\Program Files\git\bin` directory and run `npm config set script-shell "C:\Program Files\git\bin\bash.exe"` to change the default shell.
-2. [Install Ruby+Devkit](https://rubyinstaller.org/downloads/) - recommended version is [2.5.5](https://github.com/oneclick/rubyinstaller2/releases/download/RubyInstaller-2.5.5-1/rubyinstaller-devkit-2.5.5-1-x86.exe).
-3. [Read guide](https://jekyllrb.com/docs/installation/windows/) to get Jekyll up and running without problems.
-
-Once you've completed the setup, you'll be able to run the various commands provided from the command line.
-
-## Build Tabler locally
-
-1. From the root `/tabler` directory, run `npm run start` in the command line.
-2. Open [http://localhost:3000](http://localhost:3000) in your browser, and voilà.
-3. Any change in `/src` directory will build the application and refresh the page.
-
-## Bugs and feature requests
-
-Found a bug or have a feature request? [Please open a new issue](https://github.com/tabler/tabler/issues/new).

docs/icons/figma.mdx

@@ -1,7 +0,0 @@
----
-title: Figma plugin
----
-
-![Tabler Figma Plugin](/docs/icons/figma-plugin.png)
-
-[Download Plugin](https://www.figma.com/community/plugin/1169807996149376642/Tabler-Icons)

docs/icons/index.mdx

@@ -1,100 +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
-<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-lg icon-tabler icon-tabler-ghost" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
-  <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
-  <path d="M5 11a7 7 0 0 1 14 0v7a1.78 1.78 0 0 1 -3.1 1.4a1.65 1.65 0 0 0 -2.6 0a1.65 1.65 0 0 1 -2.6 0a1.65 1.65 0 0 0 -2.6 0a1.78 1.78 0 0 1 -3.1 -1.4v-7"></path>
-  <path d="M10 10l.01 0"></path>
-  <path d="M14 10l.01 0"></path>
-  <path d="M10 14a3.5 3.5 0 0 0 4 0"></path>
-</svg>
-<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-lg icon-tabler icon-tabler-star" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
-  <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
-  <path d="M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z"></path>
-</svg>
-<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-lg icon-tabler icon-tabler-yin-yang" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
-  <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
-  <path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path>
-  <path d="M12 3a4.5 4.5 0 0 0 0 9a4.5 4.5 0 0 1 0 9"></path>
-  <circle cx="12" cy="7.5" r=".5" fill="currentColor"></circle>
-  <circle cx="12" cy="16.5" r=".5" fill="currentColor"></circle>
-</svg>
-<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-lg icon-tabler icon-tabler-heart" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
-  <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
-  <path d="M19.5 12.572l-7.5 7.428l-7.5 -7.428a5 5 0 1 1 7.5 -6.566a5 5 0 1 1 7.5 6.572"></path>
-</svg>
-```
-
-## 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
-<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-lg icon-tabler icon-tabler-cherry" width="24" height="24" viewBox="0 0 24 24" stroke-width="1" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round" style="stroke-width: 1">
-  <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
-  <path d="M7.5 16.5m-3.5 0a3.5 3.5 0 1 0 7 0a3.5 3.5 0 1 0 -7 0"></path>
-  <path d="M17 18m-3 0a3 3 0 1 0 6 0a3 3 0 1 0 -6 0"></path>
-  <path d="M9 13c.366 -2 1.866 -3.873 4.5 -5.6"></path>
-  <path d="M17 15c-1.333 -2.333 -2.333 -5.333 -1 -9"></path>
-  <path d="M5 6c3.667 -2.667 7.333 -2.667 11 0c-3.667 2.667 -7.333 2.667 -11 0"></path>
-</svg>
-<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-lg icon-tabler icon-tabler-cherry" width="24" height="24" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round" style="stroke-width: 1.5">
-  <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
-  <path d="M7.5 16.5m-3.5 0a3.5 3.5 0 1 0 7 0a3.5 3.5 0 1 0 -7 0"></path>
-  <path d="M17 18m-3 0a3 3 0 1 0 6 0a3 3 0 1 0 -6 0"></path>
-  <path d="M9 13c.366 -2 1.866 -3.873 4.5 -5.6"></path>
-  <path d="M17 15c-1.333 -2.333 -2.333 -5.333 -1 -9"></path>
-  <path d="M5 6c3.667 -2.667 7.333 -2.667 11 0c-3.667 2.667 -7.333 2.667 -11 0"></path>
-</svg>
-<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-lg icon-tabler icon-tabler-cherry" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round" style="stroke-width: 2">
-  <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
-  <path d="M7.5 16.5m-3.5 0a3.5 3.5 0 1 0 7 0a3.5 3.5 0 1 0 -7 0"></path>
-  <path d="M17 18m-3 0a3 3 0 1 0 6 0a3 3 0 1 0 -6 0"></path>
-  <path d="M9 13c.366 -2 1.866 -3.873 4.5 -5.6"></path>
-  <path d="M17 15c-1.333 -2.333 -2.333 -5.333 -1 -9"></path>
-  <path d="M5 6c3.667 -2.667 7.333 -2.667 11 0c-3.667 2.667 -7.333 2.667 -11 0"></path>
-</svg>
-```
-
-```html
-<svg stroke-width="1" ...>
-   ...
-</svg>
-<svg stroke-width="1.5" ...>
-   ...
-</svg>
-<svg stroke-width="2" ...>
-   ...
-</svg>
-```
-
-## Filled version of icons
-
-```html example centered separated
-<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-lg icon-tabler icon-tabler-bell-filled" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
-  <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
-  <path d="M14.235 19c.865 0 1.322 1.024 .745 1.668a3.992 3.992 0 0 1 -2.98 1.332a3.992 3.992 0 0 1 -2.98 -1.332c-.552 -.616 -.158 -1.579 .634 -1.661l.11 -.006h4.471z" stroke-width="0" fill="currentColor"></path>
-  <path d="M12 2c1.358 0 2.506 .903 2.875 2.141l.046 .171l.008 .043a8.013 8.013 0 0 1 4.024 6.069l.028 .287l.019 .289v2.931l.021 .136a3 3 0 0 0 1.143 1.847l.167 .117l.162 .099c.86 .487 .56 1.766 -.377 1.864l-.116 .006h-16c-1.028 0 -1.387 -1.364 -.493 -1.87a3 3 0 0 0 1.472 -2.063l.021 -.143l.001 -2.97a8 8 0 0 1 3.821 -6.454l.248 -.146l.01 -.043a3.003 3.003 0 0 1 2.562 -2.29l.182 -.017l.176 -.004z" stroke-width="0" fill="currentColor"></path>
-</svg>
-<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-lg icon-tabler icon-tabler-diamond-filled" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
-  <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
-  <path d="M18 4a1 1 0 0 1 .783 .378l.074 .108l3 5a1 1 0 0 1 -.032 1.078l-.08 .103l-8.53 9.533a1.7 1.7 0 0 1 -1.215 .51c-.4 0 -.785 -.14 -1.11 -.417l-.135 -.126l-8.5 -9.5a1 1 0 0 1 -.172 -1.067l.06 -.115l3.013 -5.022l.064 -.09a.982 .982 0 0 1 .155 -.154l.089 -.064l.088 -.05l.05 -.023l.06 -.025l.109 -.032l.112 -.02l.117 -.005h12zm-8.886 3.943a1 1 0 0 0 -1.371 .343l-.6 1l-.06 .116a1 1 0 0 0 .177 1.07l2 2.2l.09 .088a1 1 0 0 0 1.323 -.02l.087 -.09a1 1 0 0 0 -.02 -1.323l-1.501 -1.65l.218 -.363l.055 -.103a1 1 0 0 0 -.398 -1.268z" stroke-width="0" fill="currentColor"></path>
-</svg>
-<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-lg icon-tabler icon-tabler-discount-check-filled" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
-  <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
-  <path d="M12.01 2.011a3.2 3.2 0 0 1 2.113 .797l.154 .145l.698 .698a1.2 1.2 0 0 0 .71 .341l.135 .008h1a3.2 3.2 0 0 1 3.195 3.018l.005 .182v1c0 .27 .092 .533 .258 .743l.09 .1l.697 .698a3.2 3.2 0 0 1 .147 4.382l-.145 .154l-.698 .698a1.2 1.2 0 0 0 -.341 .71l-.008 .135v1a3.2 3.2 0 0 1 -3.018 3.195l-.182 .005h-1a1.2 1.2 0 0 0 -.743 .258l-.1 .09l-.698 .697a3.2 3.2 0 0 1 -4.382 .147l-.154 -.145l-.698 -.698a1.2 1.2 0 0 0 -.71 -.341l-.135 -.008h-1a3.2 3.2 0 0 1 -3.195 -3.018l-.005 -.182v-1a1.2 1.2 0 0 0 -.258 -.743l-.09 -.1l-.697 -.698a3.2 3.2 0 0 1 -.147 -4.382l.145 -.154l.698 -.698a1.2 1.2 0 0 0 .341 -.71l.008 -.135v-1l.005 -.182a3.2 3.2 0 0 1 3.013 -3.013l.182 -.005h1a1.2 1.2 0 0 0 .743 -.258l.1 -.09l.698 -.697a3.2 3.2 0 0 1 2.269 -.944zm3.697 7.282a1 1 0 0 0 -1.414 0l-3.293 3.292l-1.293 -1.292l-.094 -.083a1 1 0 0 0 -1.32 1.497l2 2l.094 .083a1 1 0 0 0 1.32 -.083l4 -4l.083 -.094a1 1 0 0 0 -.083 -1.32z" stroke-width="0" fill="currentColor"></path>
-</svg>
-<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-lg icon-tabler icon-tabler-shield-check-filled" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
-  <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
-  <path d="M11.998 2l.118 .007l.059 .008l.061 .013l.111 .034a.993 .993 0 0 1 .217 .112l.104 .082l.255 .218a11 11 0 0 0 7.189 2.537l.342 -.01a1 1 0 0 1 1.005 .717a13 13 0 0 1 -9.208 16.25a1 1 0 0 1 -.502 0a13 13 0 0 1 -9.209 -16.25a1 1 0 0 1 1.005 -.717a11 11 0 0 0 7.531 -2.527l.263 -.225l.096 -.075a.993 .993 0 0 1 .217 -.112l.112 -.034a.97 .97 0 0 1 .119 -.021l.115 -.007zm3.71 7.293a1 1 0 0 0 -1.415 0l-3.293 3.292l-1.293 -1.292l-.094 -.083a1 1 0 0 0 -1.32 1.497l2 2l.094 .083a1 1 0 0 0 1.32 -.083l4 -4l.083 -.094a1 1 0 0 0 -.083 -1.32z" stroke-width="0" fill="currentColor"></path>
-</svg>
-```
-
 ## Browse icons
 
 Tabler Icons is a comprehensive icon library that features over <IconsCount rounded /> high-quality icons. These icons are designed with a clean and modern aesthetic, making them suitable for a wide range of applications.

docs/icons/libraries/index.mdx

@@ -0,0 +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.
+---

docs/icons/libraries/preact.mdx

@@ -1,8 +1,10 @@
 ---
-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)
+![](/docs/icons/package-preact.png)
 
 ## Installation
 

docs/icons/libraries/react.mdx

@@ -1,8 +1,10 @@
 ---
-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)
+![](/docs/icons/package-react.png)
 
 ## Installation
 
@@ -14,7 +16,7 @@ or just [download from Github](https://github.com/tabler/tabler-icons/releases).
 
 It's build with ESmodules so it's completely tree-shakable. Each icon can be imported as a component.
 
-```js
+```jsx
 import { IconArrowLeft } from '@tabler/icons-react';
 
 const App = () => {

docs/icons/libraries/solidjs.mdx

@@ -1,8 +1,11 @@
 ---
-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)
+![](/docs/icons/package-solidjs.png)
+
 
 ## Installation
 

docs/icons/libraries/svelte.mdx

@@ -1,8 +1,11 @@
 ---
-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)
+![](/docs/icons/package-svelte.png)
+
 
 ## Installation
 

docs/icons/libraries/vue.mdx

@@ -1,8 +1,11 @@
 ---
-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)
+![](/docs/icons/package-vue.png)
+
 
 ## Installation
 
@@ -20,12 +23,14 @@ All icons are Vue components that contain SVG elements. So any icon can be impor
 </template>
 
 <script>
-// Returns Vue component
-import { IconHome } from '@tabler/icons-vue';
+  // Returns Vue component
+  import { IconHome } from '@tabler/icons-vue';
 
-export default {
-  components: { IconHome }
-};
+  export default {
+    components: {
+      IconHome
+    }
+  };
 </script>
 ```