@tabler/core 1.0.0-beta22 → 1.0.0-beta24

package/docs/ui/forms/form-selectboxes.mdx

@@ -1,12 +1,60 @@
 ---
-title: Form selectboxes
+title: Form selectgroup
+summary: Use selectgroup to make your form more intuitive by providing users with a set of options to choose from. You can add simple selectgroup with a label, use icons only or icons with labels. Alternatively, you can use pill selectgroup if they go well with your design.
+description: Improve form UX with select groups.
 ---
 
-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.
+## Simple selectgroup
 
-```html example code columns={1} centered
-<div class="mb-3">
-  <label class="form-label">Simple selectgroup</label>
+To create a simple selectgroup, use the `.form-selectgroup` class. You should add a label to the selectgroup by using the `.form-selectgroup-item` class for the input element and the `.form-selectgroup-label` class for the label.
+
+```html
+<label class="form-selectgroup-item">
+  <input type="checkbox" name="name" value="..." class="form-selectgroup-input" checked />
+  <span class="form-selectgroup-label">...</span>
+</label>
+```
+
+Look at the example below to see how the simple selectgroup works:
+
+```html example columns={1} centered
+<div>
+  <div class="form-selectgroup">
+    <label class="form-selectgroup-item">
+      <input type="radio" name="name" value="HTML" class="form-selectgroup-input" checked />
+      <span class="form-selectgroup-label">HTML</span>
+    </label>
+    <label class="form-selectgroup-item">
+      <input type="radio" name="name" value="CSS" class="form-selectgroup-input" />
+      <span class="form-selectgroup-label">CSS</span>
+    </label>
+    <label class="form-selectgroup-item">
+      <input type="radio" name="name" value="PHP" class="form-selectgroup-input" />
+      <span class="form-selectgroup-label">PHP</span>
+    </label>
+    <label class="form-selectgroup-item">
+      <input type="radio" name="name" value="JavaScript" class="form-selectgroup-input" />
+      <span class="form-selectgroup-label">JavaScript</span>
+    </label>
+  </div>
+</div>
+```
+
+## Multiple choices
+
+You can also create a selectgroup with multiple choices. To do this, change the `type` attribute of the input element to `checkbox`.
+
+```html
+<label class="form-selectgroup-item">
+  <input type="checkbox" name="name" value="..." class="form-selectgroup-input" checked />
+  <span class="form-selectgroup-label">...</span>
+</label>
+```
+
+Look at the example below to see how the multiple choices selectgroup works:
+
+```html example columns={1} centered
+<div>
   <div class="form-selectgroup">
     <label class="form-selectgroup-item">
       <input type="checkbox" name="name" value="HTML" class="form-selectgroup-input" checked />
@@ -28,7 +76,22 @@ Add selectboxes to make your form more intuitive by providing users with a set o
 </div>
 ```
 
-```html example code columns={1} centered
+## Icon input
+
+To create an icon input, use the `.form-selectgroup` class. You should add a label to the selectgroup by using the `.form-selectgroup-item` class for the input element and the `.form-selectgroup-label` class for the label. You can use the `.icon` class to style the icon.
+
+```html
+<label class="form-selectgroup-item">
+  <input type="checkbox" name="name" value="sun" class="form-selectgroup-input" checked />
+  <span class="form-selectgroup-label">
+    <svg class="icon" width="24" height="24">...</svg>
+  </span>
+</label>
+```
+
+We recommend you use Tabler Icons for the best experience. You can find over <IconsCount rounded /> free icons in the [Tabler Icons](https://tabler-icons.io/) library. Just copy the SVG code and paste it into your project.
+
+```html example columns={1} centered
 <div class="mb-3">
   <label class="form-label">Icon input</label>
   <div class="form-selectgroup">
@@ -78,46 +141,68 @@ Add selectboxes to make your form more intuitive by providing users with a set o
 </div>
 ```
 
-```html example code columns={1} centered
+You can also add text to the element. Look at the example below to see how it works:
+
+```html example 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">
+      <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>
+        </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">
+      <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>
+        </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">
+      <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>
+        </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">
+      <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>
+        </svg> Square
+      </span>
     </label>
   </div>
 </div>
 ```
 
-```html example code columns={1} centered
+## Pill selectgroup
+
+If you want to use pill selectgroup, use the `.form-selectgroup-pills` class. All the other classes are the same as in the simple selectgroup.
+
+```html
+<div class="form-selectgroup form-selectgroup-pills">
+  ...
+</div>
+```
+
+Look at the example below to see how the pill selectgroup works:
+
+```html example columns={1} centered
 <div class="mb-3">
   <label class="form-label">Different style</label>
   <div class="form-selectgroup form-selectgroup-pills">

package/docs/ui/forms/form-validation.mdx

@@ -1,14 +1,50 @@
 ---
 title: Validation states
-description: To inform users whether the entered value is correct or not, use either of the validation states. Thanks to that, users will immediately know which form elements they need to correct and, if the state displays as invalid, why the value is incorrect.
+summary: To inform users whether the entered value is correct or not, use either of the validation states. Thanks to that, users will immediately know which form elements they need to correct and, if the state displays as invalid, why the value is incorrect.
+description: Indicate valid or invalid inputs.
 ---
 
-```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>
+## Validation states
+
+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.
+
+To apply the validation state to the form control, use the `.is-valid` and `.is-invalid` classes.
+
+```html example centered separated columns="1" background="bg-light" height="20rem"
+<input type="text" class="form-control is-valid" placeholder="Valid State..." />
+<input type="text" class="form-control is-invalid" placeholder="Invalid State..." />
+```
+
+## Validation feedback
+
+To provide users with additional information about the validation state, you can use the `.valid-feedback` and `.invalid-feedback` classes.
+
+```html
+<input type="text" class="form-control is-valid" placeholder="Valid State..." />
+<div class="valid-feedback">Looks good!</div>
+```
+
+This is how it works in the example below:
+
+```html example centered columns="1" background="bg-light" height="20rem"
+<div>
+  <label class="form-label required">City</label>
+  <input type="text" class="form-control is-invalid" required>
+  <div class="invalid-feedback">
+    Please provide a valid city.
+  </div>
+</div>
+```
+
+You can also use the `.valid-feedback` to provide users with positive feedback.
+
+```html example centered columns="1" background="bg-light" height="20rem"
+<div>
+  <label class="form-label required">City</label>
+  <input type="text" class="form-control is-valid" value="Warsaw">
+  <div class="valid-feedback">
+    Looks good!
+  </div>
 </div>
 ```
 
@@ -16,10 +52,15 @@ description: To inform users whether the entered value is correct or not, use ei
 
 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>
+To do this, use the `.is-valid-lite` and `.is-invalid-lite` classes.
+
+```html
+<input type="text" class="form-control is-valid is-valid-lite" placeholder="Valid State..." />
+```
+
+Look how it works in the example below:
+
+```html example centered separated vertical columns="1" background="bg-light" height="20rem"
+<input type="text" class="form-control is-valid is-valid-lite" placeholder="Valid State..." />
+<input type="text" class="form-control is-invalid is-invalid-lite" placeholder="Invalid State..." />
 ```

package/docs/ui/forms/index.mdx

@@ -0,0 +1,6 @@
+---
+title: Forms
+order: 5
+description: Build and manage web forms.
+summary: The forms section provides a collection of components and tools for creating user-friendly and accessible forms, enhancing user interaction and improving data collection.
+---

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

@@ -1,10 +1,14 @@
 ---
 title: Browser Support
+description: Check browser compatibility for Tabler.
+summary: Learn about the supported browsers and compatibility guidelines for using Tabler UI components to ensure a consistent experience across different devices and platforms.
 ---
 
-As of this latest release, Tabler has launched many new features that may not be compatible with all browsers, especially older ones.
+Tabler is fully optimized for all modern browsers, including the latest versions of Chrome, Firefox, Edge, Safari, and Opera. These browsers ensure a seamless and responsive experience, allowing users to enjoy Tabler's advanced UI components without compatibility issues.
 
-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.
+In this latest release, Tabler introduces modern features like CSS Grid, object fit, and sticky positioning, which enhance design flexibility but may not be fully supported on older browsers. While Tabler has dropped most vendor prefixes to streamline its styles, partial support remains for Internet Explorer, with some features potentially limited.
+
+For the best experience, we recommend using one of the latest supported browsers to take full advantage of Tabler’s capabilities and design precision.
 
 ## Supported Browsers
 
@@ -18,3 +22,7 @@ Browser|Version
 <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
+
+## Internet Explorer
+
+Internet Explorer is not supported.

package/docs/ui/getting-started/customize.mdx

@@ -1,6 +1,7 @@
 ---
 title: Customize Tabler
-description: Tabler has been designed so that it can be adjusted to your needs and requirements as much as possible. You can customize your own fonts, colors, font sizes, etc in it.
+summary: Tabler has been designed so that it can be adjusted to your needs and requirements as much as possible. You can customize your own fonts, colors, font sizes, etc in it.
+description: Adjust fonts, colors, and styles.	
 ---
 
 ## Custom Google Font
@@ -17,8 +18,8 @@ Now you just need to tell Tabler to use your favorite font:
 
 ```html
 <style>
-:root {
-  --tblr-font-sans-serif: 'Inter';
-}
+  :root {
+    --tblr-font-sans-serif: 'Inter';
+  }
 </style>
 ```

package/docs/ui/getting-started/download.mdx

@@ -1,6 +1,7 @@
 ---
 title: Download
-description: Download Tabler to get the compiled CSS and JavaScript, source code, or include it with your favorite package managers like npm, yarn and more.
+summary: Download Tabler to get the compiled CSS and JavaScript, source code, or include it with your favorite package managers like npm, yarn and more.
+description: Get Tabler CSS, JS, and source code.
 ---
 
 ## CDN via jsDelivr
@@ -17,6 +18,7 @@ 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-social.min.css">
 <link rel="stylesheet" href="$TABLER_CDN/dist/css/tabler-vendors.min.css">
 ```
 
@@ -26,10 +28,6 @@ Install Tabler in your Node.js powered apps with the npm package:
 
 <TabsPackage name="@tabler/core" />
 
-OR install for Webfonts
-
-<TabsPackage name="@tabler/icons-webfont" />
-
 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.
 

package/docs/ui/getting-started/faq.mdx

@@ -1,6 +1,8 @@
 ---
 title: FAQ
-description: Answers to the most frequently asked questions.
+summary: Answers to the most frequently asked questions.
+description: Common questions and answers.
+order: 12
 ---
 
 ## I found an issue, what can I do?

package/docs/ui/getting-started/how-to-contribute.mdx

@@ -0,0 +1,96 @@
+---
+title: How to Contribute
+summary: This guide explains how to contribute to Tabler, from setting up a development environment to making and testing changes. It covers essential steps like forking the repository, installing dependencies, and submitting a pull request to help improve Tabler's features and functionality.
+description: Guide to contributing to Tabler and setting up for development.
+---
+
+Contributions are always welcome and highly encouraged! Whether you're new to open source or a seasoned contributor, your input helps make Tabler better for everyone. If you're new to open source, [start here](https://opensource.guide/how-to-contribute/) to learn more about contributing.
+
+## Contribution Requirements
+
+When contributing to Tabler, please adhere to the following guidelines:
+
+1. By submitting a contribution, you grant a non-exclusive license to the Tabler project to use your contribution in any context deemed appropriate.
+2. If your contribution includes content from other sources, it must be appropriately licensed under an open source license.
+3. Contributions must be submitted via GitHub pull requests.
+4. Ensure your code works in all supported browsers (refer to our [browser support documentation](/docs/ui/getting-started/browser-support)).
+
+## Installation
+
+Follow these steps to set up Tabler for development:
+
+1. Fork the repository: [Guide to forking](https://docs.github.com/en/get-started/quickstart/fork-a-repo).
+
+2. Clone the repository to your local machine:
+
+   ```bash
+   git clone https://github.com/YOUR_USERNAME/tabler.git
+   ```
+
+3. Create a new branch for your changes:
+
+   ```bash
+   git checkout -b your-branch-name
+	```
+
+## Development
+
+To set up Tabler for development, follow these steps:
+
+<div className="steps">
+
+### Ensure Node.js and npm are installed
+
+You’ll need Node.js (v20 or higher) and pnpm to compile Tabler’s files. If you don’t have them installed, download and install them from the official websites:
+
+- [Node.js](https://nodejs.org/)
+- [pnpm](https://pnpm.io/)
+
+### Install Ruby and Bundler
+
+Tabler uses Ruby and Bundler to manage dependencies. Install Ruby and Bundler by following the instructions in the [Ruby documentation](https://www.ruby-lang.org/en/documentation/installation/) and the [Bundler website](https://bundler.io/). 
+
+### Install dependencies
+
+Run the following command to install all required npm packages. We recommend using pnpm for faster installation:
+
+```bash
+pnpm install
+```
+
+### Install Jekyll
+
+Tabler uses Jekyll to build the documentation. Install Jekyll by running the following command:
+
+```bash
+bundle install
+```
+
+### Start developer mode
+
+Use the following command to enable autocompilation with live reload. This will start a local server at `http://localhost:3000/`:
+
+```bash
+pnpm run dev
+```
+
+### Make changes
+
+Make your changes in the appropriate folders, such as `./src/` or `./docs/`. Avoid modifying files in `./dist/`, as they are auto-generated during the build process and will be overwritten.
+</div>
+
+## Compiling for Production
+
+Before submitting a pull request, ensure your changes are properly compiled and tested:
+
+1. Compile the production files
+
+	```bash
+	pnpm run build
+	```
+
+2. Test all pages to confirm everything works as expected.
+
+## Submitting Your Contribution
+
+Once your changes are ready, create a pull request (PR) on GitHub. Make sure to include a clear and concise description of the changes and their purpose. Thank you for contributing to Tabler!

package/docs/ui/getting-started/index.mdx

@@ -1,6 +1,8 @@
 ---
 title: Introduction
-description: Free and open-source HTML Dashboard UI Kit built on Bootstrap
+summary: Free and open-source HTML Dashboard UI Kit built on Bootstrap
+order: 1
+description: Overview of Tabler UI Kit.
 ---
 
 ## What is Tabler?
@@ -11,30 +13,4 @@ Tabler is fully responsive and compatible with all modern browsers. Thanks to it
 
 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).
+<img src="https://raw.githubusercontent.com/tabler/tabler/dev/src/static/tabler-preview.png?2" src-dark="https://raw.githubusercontent.com/tabler/tabler/dev/src/static/tabler-preview-dark.png?2" alt="Screencap of tabler site showing global traffic and statistics" />

package/docs/ui/getting-started/installation.mdx

@@ -0,0 +1,67 @@
+---
+title: Installation
+order: 1
+summary: Learn how to set up Tabler in your project by creating a basic HTML file, adding Tabler’s CSS and JavaScript, and exploring its powerful components to build responsive and visually stunning web applications.
+description: "Set up Tabler: HTML, CSS, JS, and build stunning UIs."
+---
+
+This guide will take you through the essential steps to set up Tabler in your project, from creating a basic HTML file to incorporating Tabler’s styles and scripts. Let’s dive in!
+
+<div className="steps">
+
+### Step 1: Create a Basic HTML File
+
+Begin by creating a new `index.html` file in the root of your project. This file will serve as the foundation for your Tabler-based interface. Include the basic HTML structure and a `<meta name="viewport">` tag for proper responsiveness:
+
+```html
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>Tabler demo</title>
+</head>
+<body>
+  <h1>Hello, world!</h1>
+</body>
+</html>
+```
+
+### Step 2: Add Tabler CSS and JavaScript
+
+Enhance your page by including Tabler's CSS and JavaScript files. Use the following links to load the core Tabler styles and scripts from the CDN:
+
+```html
+<link rel="stylesheet" href="$TABLER_CDN/dist/css/tabler.min.css">
+<script src="$TABLER_CDN/dist/js/tabler.min.js"></script>
+```
+
+Update your HTML file to include these resources:
+
+```html
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>Tabler Demo</title>
+  <link rel="stylesheet" href="$TABLER_CDN/dist/css/tabler.min.css">
+</head>
+<body>
+  <h1>Hello, Tabler!</h1>
+  <script src="$TABLER_CDN/dist/js/tabler.min.js"></script>
+</body>
+</html>
+```
+
+This setup includes the Tabler CSS and JavaScript via a CDN, providing a responsive and functional base for your project.
+
+You can also download the files and include them locally in your project. For more information, see the [Download](/docs/ui/getting-started/download) page.
+
+### 3. Open in Your Browser
+
+Save the file and open it in your browser. You should see your first Tabler-powered page! From here, you can start adding layouts and components to create a fully functional and visually appealing web application.
+
+</div>
+
+With these simple steps, you're ready to explore Tabler's features and build stunning web interfaces. For inspiration and guidance, you can view live demos at [preview.tabler.io](https://preview.tabler.io) and consult our [official documentation](https://tabler.io/docs) for detailed instructions and examples.

package/docs/ui/getting-started/license.mdx

@@ -0,0 +1,30 @@
+---
+title: Tabler License
+summary: The MIT license grants you the flexibility to use Tabler in commercial or personal projects, modify its code, and distribute it freely. Ensure you include the required license and copyright notices to stay compliant with the terms.
+description: "Tabler's MIT license: freedom to use, modify, and share."
+---
+
+Tabler is an open-source project licensed under the **MIT license**, giving you extensive freedom to use, modify, and distribute the software. This license ensures that you can adapt Tabler to your needs while maintaining the required attributions. While attribution is not required, it is greatly appreciated to acknowledge the hard work of the developers.
+
+## What You Can Do with Tabler
+
+The MIT license allows you to:
+- Use Tabler in **commercial projects**.
+- Use Tabler in **personal or private projects**.
+- **Modify and customize** the source code to fit your requirements.
+- **Distribute** the original or modified code.
+- **Sublicense**: Integrate Tabler into projects with a more restrictive license.
+
+## What You Cannot Do with Tabler
+
+- The software is provided **“as is”**, meaning you cannot hold the authors or contributors liable for any issues, bugs, or damages that may arise from its use.
+
+## What You Must Do When Using Tabler
+
+When using Tabler, you must:
+1. Include the **license notice** in all copies of the work.
+2. Include the **copyright notice** in all copies of the work, except for the footer of the example HTML pages provided in the repository.
+
+For more details, please refer to the full [Tabler License](https://github.com/tabler/tabler/blob/main/LICENSE).
+
+By adhering to these requirements, you help ensure the continued openness and usability of Tabler for everyone. Thank you for supporting open-source software!

package/docs/ui/index.mdx

@@ -0,0 +1,8 @@
+---
+title: Tabler UI
+order: 1
+description: Free and open source web application UI kit based on Bootstrap
+summary: Tabler UI is a carefully crafted collection of modern and responsive user interface components. Built on top of Bootstrap, it helps developers create stunning and functional web applications quickly and efficiently.
+---
+
+![](/docs/cover-tabler.png) 

package/docs/ui/layout/index.mdx

@@ -0,0 +1,6 @@
+---
+title: Layout
+order: 3
+description: Structure your UI effectively.
+summary: The layout section covers essential tools and techniques for structuring content and organizing UI elements, helping you build visually appealing and functional designs.
+---