@tabler/core 1.0.0-beta20 → 1.0.0-beta21

package/docs/forms/form-image-check.mdx

@@ -0,0 +1,162 @@
+---
+title: Image check
+---
+
+Add an image check to your form and give users visually attractive options to choose from.
+
+```html example centered columns="2" height="15rem"
+<div class="mb-3">
+  <label class="form-label">Image Check</label>
+  <div class="row g-2">
+    <div class="col-3">
+      <label class="form-imagecheck">
+        <input name="form-imagecheck" type="checkbox" value="1" class="form-imagecheck-input" />
+        <span class="form-imagecheck-figure">
+          <img src="/samples/photos/everything-you-need-to-work-from-your-bed-2.jpg" alt="" class="form-imagecheck-image" />
+        </span>
+      </label>
+    </div>
+    <div class="col-3">
+      <label class="form-imagecheck">
+        <input name="form-imagecheck" type="checkbox" value="2" class="form-imagecheck-input" checked />
+        <span class="form-imagecheck-figure">
+          <img src="/samples/photos/color-palette-guide-sample-colors-catalog-.jpg" alt="" class="form-imagecheck-image" />
+        </span>
+      </label>
+    </div>
+    <div class="col-3">
+      <label class="form-imagecheck">
+        <input name="form-imagecheck" type="checkbox" value="3" class="form-imagecheck-input" />
+        <span class="form-imagecheck-figure">
+          <img src="/samples/photos/woman-read-book-and-drink-coffee-2.jpg" alt="" class="form-imagecheck-image" />
+        </span>
+      </label>
+    </div>
+    <div class="col-3">
+      <label class="form-imagecheck">
+        <input name="form-imagecheck" type="checkbox" value="4" class="form-imagecheck-input" checked />
+        <span class="form-imagecheck-figure">
+          <img src="/samples/photos/stylish-workspace-with-macbook-pro-2.jpg" alt="" class="form-imagecheck-image" />
+        </span>
+      </label>
+    </div>
+  </div>
+</div>
+```
+
+```html
+<label class="form-imagecheck">
+  <input name="" type="checkbox" value="" class="form-imagecheck-input" checked />
+  <span class="form-imagecheck-figure">
+    <img src="..." alt="" class="form-imagecheck-image" />
+  </span>
+</label>
+```
+
+```html example centered columns="2" height="15rem"
+<div class="mb-3">
+  <label class="form-label">Image Check Radio</label>
+  <div class="row g-2">
+    <div class="col-3">
+      <label class="form-imagecheck mb-2">
+        <input name="form-imagecheck-radio" type="radio" value="1" class="form-imagecheck-input" />
+        <span class="form-imagecheck-figure">
+          <img src="/samples/photos/woman-drinking-hot-tea-in-her-home-office.jpg" alt="" class="form-imagecheck-image" />
+        </span>
+      </label>
+    </div>
+    <div class="col-3">
+      <label class="form-imagecheck mb-2">
+        <input name="form-imagecheck-radio" type="radio" value="2" class="form-imagecheck-input" checked />
+        <span class="form-imagecheck-figure">
+          <img src="/samples/photos/young-woman-sitting-on-the-sofa-and-working-on-her-laptop-3.jpg" alt="" class="form-imagecheck-image" />
+        </span>
+      </label>
+    </div>
+    <div class="col-3">
+      <label class="form-imagecheck mb-2">
+        <input name="form-imagecheck-radio" type="radio" value="3" class="form-imagecheck-input" />
+        <span class="form-imagecheck-figure">
+          <img src="/samples/photos/beautiful-blonde-woman-relaxing-with-a-can-of-coke-on-a-tree-stump-by-the-beach.jpg" alt="" class="form-imagecheck-image" />
+        </span>
+      </label>
+    </div>
+    <div class="col-3">
+      <label class="form-imagecheck mb-2">
+        <input name="form-imagecheck-radio" type="radio" value="4" class="form-imagecheck-input" checked />
+        <span class="form-imagecheck-figure">
+          <img src="/samples/photos/book-on-the-grass.jpg" alt="" class="form-imagecheck-image" />
+        </span>
+      </label>
+    </div>
+  </div>
+</div>
+```
+
+```html
+<label class="form-imagecheck">
+  <input name="form-imagecheck-radio" type="radio" value="1" class="form-imagecheck-input" />
+  <span class="form-imagecheck-figure">
+    <img src="/samples/photos/woman-drinking-hot-tea-in-her-home-office.jpg" alt="" class="form-imagecheck-image" />
+  </span>
+</label>
+```
+
+```html example centered columns="1" height="15rem"
+<div class="mb-3">
+  <label class="form-label">Person Check</label>
+  <div class="row g-2">
+    <div class="col-auto">
+      <label class="form-imagecheck mb-2">
+        <input name="form-imagecheck" type="checkbox" value="1" class="form-imagecheck-input" />
+        <span class="form-imagecheck-figure">
+          <span class="form-imagecheck-image">
+            <span class="avatar avatar-md" style="background-image: url(/samples/avatars/057f.jpg)"></span>
+          </span>
+        </span>
+      </label>
+    </div>
+    <div class="col-auto">
+      <label class="form-imagecheck mb-2">
+        <input name="form-imagecheck" type="checkbox" value="2" class="form-imagecheck-input" checked />
+        <span class="form-imagecheck-figure">
+          <span class="form-imagecheck-image">
+            <span class="avatar avatar-md">HS</span>
+          </span>
+        </span>
+      </label>
+    </div>
+    <div class="col-auto">
+      <label class="form-imagecheck mb-2">
+        <input name="form-imagecheck" type="checkbox" value="3" class="form-imagecheck-input" />
+        <span class="form-imagecheck-figure">
+          <span class="form-imagecheck-image">
+            <span class="avatar avatar-md" style="background-image: url(/samples/avatars/062m.jpg)"></span>
+          </span>
+        </span>
+      </label>
+    </div>
+    <div class="col-auto">
+      <label class="form-imagecheck mb-2">
+        <input name="form-imagecheck" type="checkbox" value="4" class="form-imagecheck-input" checked />
+        <span class="form-imagecheck-figure">
+          <span class="form-imagecheck-image">
+            <span class="avatar avatar-md" style="background-image: url(/samples/avatars/070m.jpg)"></span>
+          </span>
+        </span>
+      </label>
+    </div>
+  </div>
+</div>
+```
+
+```html
+<label class="form-imagecheck">
+  <input name="" type="checkbox" value="" class="form-imagecheck-input" />
+  <span class="form-imagecheck-figure">
+    <span class="form-imagecheck-image">
+      <span class="avatar avatar-md" style="background-image: url(...)"></span>
+    </span>
+  </span>
+</label>
+```

package/docs/forms/form-input-mask.mdx

@@ -0,0 +1,18 @@
+---
+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" />
+```
+

package/docs/forms/form-selectboxes.mdx

@@ -0,0 +1,205 @@
+---
+title: Form selectboxes
+---
+
+Add selectboxes to make your form more intuitive by providing users with a set of options to choose from. You can add simple selectboxes with a label, use icons only or icons with labels. Alternatively, you can use pill selectboxes if they go well with your design.
+
+```html example code columns={1} centered
+<div class="mb-3">
+  <label class="form-label">Simple selectgroup</label>
+  <div class="form-selectgroup">
+    <label class="form-selectgroup-item">
+      <input type="checkbox" name="name" value="HTML" class="form-selectgroup-input" checked />
+      <span class="form-selectgroup-label">HTML</span>
+    </label>
+    <label class="form-selectgroup-item">
+      <input type="checkbox" name="name" value="CSS" class="form-selectgroup-input" />
+      <span class="form-selectgroup-label">CSS</span>
+    </label>
+    <label class="form-selectgroup-item">
+      <input type="checkbox" name="name" value="PHP" class="form-selectgroup-input" />
+      <span class="form-selectgroup-label">PHP</span>
+    </label>
+    <label class="form-selectgroup-item">
+      <input type="checkbox" name="name" value="JavaScript" class="form-selectgroup-input" />
+      <span class="form-selectgroup-label">JavaScript</span>
+    </label>
+  </div>
+</div>
+```
+
+```html example code columns={1} centered
+<div class="mb-3">
+  <label class="form-label">Icon input</label>
+  <div class="form-selectgroup">
+    <label class="form-selectgroup-item">
+      <input type="checkbox" name="name" value="sun" class="form-selectgroup-input" checked />
+      <span class="form-selectgroup-label">
+        <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" />
+          <circle cx="12" cy="12" r="4" />
+          <path d="M3 12h1m8 -9v1m8 8h1m-9 8v1m-6.4 -15.4l.7 .7m12.1 -.7l-.7 .7m0 11.4l.7 .7m-12.1 -.7l-.7 .7" />
+        </svg>
+      </span>
+    </label>
+    <label class="form-selectgroup-item">
+      <input type="checkbox" name="name" value="moon" class="form-selectgroup-input" />
+      <span class="form-selectgroup-label">
+        <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="M12 3c.132 0 .263 0 .393 0a7.5 7.5 0 0 0 7.92 12.446a9 9 0 1 1 -8.313 -12.454z" />
+        </svg>
+      </span>
+    </label>
+    <label class="form-selectgroup-item">
+      <input type="checkbox" name="name" value="cloud-rain" class="form-selectgroup-input" />
+      <span class="form-selectgroup-label">
+        <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 18a4.6 4.4 0 0 1 0 -9a5 4.5 0 0 1 11 2h1a3.5 3.5 0 0 1 0 7" />
+          <path d="M11 13v2m0 3v2m4 -5v2m0 3v2" />
+        </svg>
+      </span>
+    </label>
+    <label class="form-selectgroup-item">
+      <input type="checkbox" name="name" value="cloud" class="form-selectgroup-input" />
+      <span class="form-selectgroup-label">
+        <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="M6.657 18c-2.572 0 -4.657 -2.007 -4.657 -4.483c0 -2.475 2.085 -4.482 4.657 -4.482c.393 -1.762 1.794 -3.2 3.675 -3.773c1.88 -.572 3.956 -.193 5.444 .996c1.488 1.19 2.162 3.007 1.77 4.769h.99c1.913 0 3.464 1.56 3.464 3.486c0 1.927 -1.551 3.487 -3.465 3.487h-11.878" />
+        </svg>
+      </span>
+    </label>
+    <label class="form-selectgroup-item">
+      <input type="checkbox" name="name" value="Other" class="form-selectgroup-input" />
+      <span class="form-selectgroup-label">Other</span>
+    </label>
+  </div>
+</div>
+```
+
+```html example code columns={1} centered
+<div class="mb-3">
+  <label class="form-label">Selectgroup with icons and text</label>
+  <div class="form-selectgroup">
+    <label class="form-selectgroup-item">
+      <input type="radio" name="icons" value="home" class="form-selectgroup-input" checked />
+      <span class="form-selectgroup-label"><svg xmlns="http://www.w3.org/2000/svg" class="icon me-1" 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" />
+          <polyline points="5 12 3 12 12 3 21 12 19 12" />
+          <path d="M5 12v7a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-7" />
+          <path d="M9 21v-6a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v6" />
+        </svg> Home</span>
+    </label>
+    <label class="form-selectgroup-item">
+      <input type="radio" name="icons" value="user" class="form-selectgroup-input" />
+      <span class="form-selectgroup-label"><svg xmlns="http://www.w3.org/2000/svg" class="icon me-1" 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="7" r="4" />
+          <path d="M6 21v-2a4 4 0 0 1 4 -4h4a4 4 0 0 1 4 4v2" />
+        </svg> User</span>
+    </label>
+    <label class="form-selectgroup-item">
+      <input type="radio" name="icons" value="circle" class="form-selectgroup-input" />
+      <span class="form-selectgroup-label"><svg xmlns="http://www.w3.org/2000/svg" class="icon me-1" 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" />
+        </svg> Circle</span>
+    </label>
+    <label class="form-selectgroup-item">
+      <input type="radio" name="icons" value="square" class="form-selectgroup-input" />
+      <span class="form-selectgroup-label"><svg xmlns="http://www.w3.org/2000/svg" class="icon me-1" 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" />
+          <rect x="4" y="4" width="16" height="16" rx="2" />
+        </svg> Square</span>
+    </label>
+  </div>
+</div>
+```
+
+```html example code columns={1} centered
+<div class="mb-3">
+  <label class="form-label">Different style</label>
+  <div class="form-selectgroup form-selectgroup-pills">
+    <label class="form-selectgroup-item">
+      <input type="checkbox" name="name" value="HTML" class="form-selectgroup-input" checked />
+      <span class="form-selectgroup-label">HTML</span>
+    </label>
+    <label class="form-selectgroup-item">
+      <input type="checkbox" name="name" value="CSS" class="form-selectgroup-input" />
+      <span class="form-selectgroup-label">CSS</span>
+    </label>
+    <label class="form-selectgroup-item">
+      <input type="checkbox" name="name" value="PHP" class="form-selectgroup-input" />
+      <span class="form-selectgroup-label">PHP</span>
+    </label>
+    <label class="form-selectgroup-item">
+      <input type="checkbox" name="name" value="JavaScript" class="form-selectgroup-input" />
+      <span class="form-selectgroup-label">JavaScript</span>
+    </label>
+  </div>
+</div>
+```
+
+## Advanced selectboxes
+
+Use more advanced selectboxes to display the range of available options. You can choose selectboxes with radio buttons, if you want users to select only one option or with checkboxes, if they are allowed to choose multiple options.
+
+```html example height="30rem" centered columns="1" plugins="payments"
+<div class="mb-3">
+  <label class="form-label">Payment method</label>
+  <div class="form-selectgroup form-selectgroup-boxes d-flex flex-column">
+    <label class="form-selectgroup-item flex-fill">
+      <input type="radio" name="form-payment" value="visa" class="form-selectgroup-input" />
+      <div class="form-selectgroup-label d-flex align-items-center p-3">
+        <div class="me-3">
+          <span class="form-selectgroup-check"></span>
+        </div>
+        <div>
+          <span class="payment payment-provider-visa payment-xs me-2"></span>
+          ending in <strong>7998</strong>
+        </div>
+      </div>
+    </label>
+    <label class="form-selectgroup-item flex-fill">
+      <input type="radio" name="form-payment" value="mastercard" class="form-selectgroup-input" checked />
+      <div class="form-selectgroup-label d-flex align-items-center p-3">
+        <div class="me-3">
+          <span class="form-selectgroup-check"></span>
+        </div>
+        <div>
+          <span class="payment payment-provider-mastercard payment-xs me-2"></span>
+          ending in <strong>2807</strong>
+        </div>
+      </div>
+    </label>
+    <label class="form-selectgroup-item flex-fill">
+      <input type="radio" name="form-payment" value="paypal" class="form-selectgroup-input" />
+      <div class="form-selectgroup-label d-flex align-items-center p-3">
+        <div class="me-3">
+          <span class="form-selectgroup-check"></span>
+        </div>
+        <div>
+          <span class="payment payment-provider-paypal payment-xs me-2"></span>
+        </div>
+      </div>
+    </label>
+  </div>
+</div>
+```
+
+```html
+<label class="form-selectgroup-item flex-fill">
+  <input type="radio" name="form-payment" value="mastercard" class="form-selectgroup-input" checked />
+  <div class="form-selectgroup-label d-flex align-items-center p-3">
+    <div class="me-3">
+      <span class="form-selectgroup-check"></span>
+    </div>
+    <div>
+      <span class="payment payment-provider-mastercard payment-xs me-2"></span>
+      ending in <strong>2807</strong>
+    </div>
+  </div>
+</label>
+```
+

package/docs/forms/form-validation.mdx

@@ -0,0 +1,25 @@
+---
+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>
+```

package/docs/getting-started/browser-support.mdx

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

package/docs/getting-started/customize.mdx

@@ -0,0 +1,24 @@
+---
+title: Customize Tabler
+description: Tabler has been designed so that it can be adjusted to your needs and requirements as much as possible. You can customize your own fonts, colors, font sizes, etc in it.
+---
+
+## Custom Google Font
+
+To use a custom Google Fonts font in Tabler you must import the font in the `<head>` section of the page. In this example we will use the _Inter_ font:
+
+```html
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&display=swap" rel="stylesheet">
+```
+
+Now you just need to tell Tabler to use your favorite font:
+
+```html
+<style>
+:root {
+  --tblr-font-sans-serif: 'Inter';
+}
+</style>
+```

package/docs/getting-started/download.mdx

@@ -0,0 +1,42 @@
+---
+title: Download
+description: Download Tabler to get the compiled CSS and JavaScript, source code, or include it with your favorite package managers like npm, yarn and more.
+---
+
+## CDN via jsDelivr
+
+All files included in `@tabler/core` npm package are available over a jsDelivr CDN. Use it to deliver cached version of Tabler’s compiled CSS and JS to your project.
+
+```html
+<script src="$TABLER_CDN/dist/js/tabler.min.js"></script>
+<link rel="stylesheet" href="$TABLER_CDN/dist/css/tabler.min.css">
+```
+
+You can also include additional Tabler plugins:
+
+```html
+<link rel="stylesheet" href="$TABLER_CDN/dist/css/tabler-flags.min.css">
+<link rel="stylesheet" href="$TABLER_CDN/dist/css/tabler-payments.min.css">
+<link rel="stylesheet" href="$TABLER_CDN/dist/css/tabler-vendors.min.css">
+```
+
+## Package managers
+
+Install Tabler in your Node.js powered apps with the npm package:
+
+<TabsPackage name="@tabler/core" />
+
+Tabler uses other packages to enhance the functionality for example charts and input masks. These are not automatically installed to avoid huge
+dependency trees and need to be installed by using npm install. We support the following packages as of writing.
+
+- [apexcharts](https://apexcharts.com/)
+- [autosize](http://www.jacklmoore.com/autosize/)
+- [choices.js](https://github.com/Choices-js/Choices)
+- [countup.js](https://inorganik.github.io/countUp.js/)
+- [flatpickr](https://flatpickr.js.org/)
+- [imask](https://imask.js.org/)
+- [litepicker](https://litepicker.com/)
+- [nouislider](https://refreshless.com/nouislider/)
+- [tom-select](https://tom-select.js.org/)
+
+For the complete list of supported packages you can check the peerDependencies section in our [package.json](https://github.com/tabler/tabler/blob/dev/package.json)

package/docs/getting-started/faq.mdx

@@ -0,0 +1,28 @@
+---
+title: FAQ
+description: Answers to the most frequently asked questions.
+---
+
+## I found an issue, what can I do?
+
+If you think you have found an issue that can only be fixed by the maintainers, feel free to open an issue on [GitHub](https://github.com/tabler/tabler).
+
+## Will there be a version for Vue or React?
+
+We are evaluating adding support for Vue 3 and React to all of our components, but it is not a top priority at the moment.
+
+## Can I use Tabler in open source projects?
+
+Yes, absolutely.
+
+## Can I use Tabler in commercial projects?
+
+Of course! Tabler is under MIT license, so you can confidently use it in commercial projects. However, remember to include a note that your project uses Tabler. You can read about our license here: [License](/license)
+
+## Can Tabler be used with WordPress?
+
+Tabler is an HTML template that can be used for any purpose. However, it is not made to be easily installed on WordPress. It will require some effort and enough knowledge of the WordPress script to do so.
+
+## How do I get notified of new Tabler versions?
+
+You may watch the releases on GitHub or follow me on Twitter.

package/docs/getting-started/index.mdx

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

package/docs/icons/eps.mdx

@@ -0,0 +1,13 @@
+---
+title: EPS version
+---
+
+![](https://raw.githubusercontent.com/tabler/tabler-icons/master/.github/packages/og-package-eps.png)
+
+## Installation
+
+<TabsPackage name="@tabler/icons-eps" />
+
+or just [download from Github](https://github.com/tabler/tabler-icons/releases).
+
+All EPS files are stored in `icons` subdirectory.

package/docs/icons/figma.mdx

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