Tabler Documentation

https://docs.tabler.io
Admin
Tabler Docs offers a comprehensive guide to the Tabler ecosystem, covering UI components, plugins,...
Tokens:208,969
Snippets:1,696
Trust Score:10
Update:3 months ago
Show doc for...
Tokens:
Raw
### Install dependencies

Source: https://docs.tabler.io/ui/getting-started/how-to-contribute

Install all required npm packages using pnpm.

```bash
pnpm install
```

--------------------------------

### Start developer mode

Source: https://docs.tabler.io/ui/getting-started/how-to-contribute

Enable autocompilation with live reload for local development.

```bash
pnpm run dev
```

--------------------------------

### Install Tabler Icons for SolidJS

Source: https://docs.tabler.io/icons/libraries/solidjs?theme=dark

Commands to install the library using various package managers.

```bash
npm install @tabler/icons-solidjs
```

```bash
yarn install @tabler/icons-solidjs
```

```bash
pnpm install @tabler/icons-solidjs
```

```bash
bun install @tabler/icons-solidjs
```

--------------------------------

### Install EPS icons package

Source: https://docs.tabler.io/icons/static-files/eps

Use a package manager to install the EPS icon set.

```bash
npm install @tabler/icons-eps
```

```bash
yarn install @tabler/icons-eps
```

```bash
pnpm install @tabler/icons-eps
```

```bash
bun install @tabler/icons-eps
```

--------------------------------

### Install Tabler Icons for Svelte

Source: https://docs.tabler.io/icons/libraries/svelte

Commands to install the package using various package managers.

```bash
npm install @tabler/icons-svelte
```

```bash
yarn install @tabler/icons-svelte
```

```bash
pnpm install @tabler/icons-svelte
```

```bash
bun install @tabler/icons-svelte
```

--------------------------------

### Install Tabler Icons for Preact

Source: https://docs.tabler.io/icons/libraries/preact?theme=dark

Use your preferred package manager to add the library to your project.

```bash
npm install @tabler/icons-preact
```

```bash
yarn install @tabler/icons-preact
```

```bash
pnpm install @tabler/icons-preact
```

```bash
bun install @tabler/icons-preact
```

--------------------------------

### Install Tabler Icons for Vue

Source: https://docs.tabler.io/icons/libraries/vue

Install the package using your preferred package manager.

```shell
npm install @tabler/icons-vue
```

```shell
yarn install @tabler/icons-vue
```

```shell
pnpm install @tabler/icons-vue
```

```shell
bun install @tabler/icons-vue
```

--------------------------------

### Install Tabler Icons for React

Source: https://docs.tabler.io/icons/libraries/react

Commands to install the package using common JavaScript package managers.

```bash
npm install @tabler/icons-react
```

```bash
yarn install @tabler/icons-react
```

```bash
pnpm install @tabler/icons-react
```

```bash
bun install @tabler/icons-react
```

--------------------------------

### Colored icon examples

Source: https://docs.tabler.io/ui/components/icons

Demonstrates various icons styled with different text color utility classes.

```html
<span class="text-red">
  <!-- Download SVG icon from http://tabler.io/icons/icon/heart -->
  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
    viewBox="0 0 24 24" fill="currentColor" class="icon icon-2">
    <path
      d="M6.979 3.074a6 6 0 0 1 4.988 1.425l.037 .033l.034 -.03a6 6 0 0 1 4.733 -1.44l.246 .036a6 6 0 0 1 3.364 10.008l-.18 .185l-.048 .041l-7.45 7.379a1 1 0 0 1 -1.313 .082l-.094 -.082l-7.493 -7.422a6 6 0 0 1 3.176 -10.215z" />
  </svg>
</span>
<span class="text-yellow">
  <!-- Download SVG icon from http://tabler.io/icons/icon/star -->
  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
    viewBox="0 0 24 24" fill="currentColor" class="icon icon-2">
    <path
      d="M8.243 7.34l-6.38 .925l-.113 .023a1 1 0 0 0 -.44 1.684l4.622 4.499l-1.09 6.355l-.013 .11a1 1 0 0 0 1.464 .944l5.706 -3l5.693 3l.1 .046a1 1 0 0 0 1.352 -1.1l-1.091 -6.355l4.624 -4.5l.078 -.085a1 1 0 0 0 -.633 -1.62l-6.38 -.926l-2.852 -5.78a1 1 0 0 0 -1.794 0l-2.853 5.78z" />
  </svg>
</span>
<span class="text-blue">
  <!-- Download SVG icon from http://tabler.io/icons/icon/circle -->
  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
    viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
    stroke-linecap="round" stroke-linejoin="round" class="icon icon-1">
    <path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0" />
  </svg>
</span>
<span class="text-green">
  <!-- Download SVG icon from http://tabler.io/icons/icon/square-rounded -->
  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
    viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
    stroke-linecap="round" stroke-linejoin="round" class="icon icon-1">
    <path d="M12 3c7.2 0 9 1.8 9 9s-1.8 9 -9 9s-9 -1.8 -9 -9s1.8 -9 9 -9z" />
  </svg>
</span>
```

--------------------------------

### Combined Basic Dropzone Implementation

Source: https://docs.tabler.io/ui/components/dropzone

A complete example combining the HTML form structure and the JavaScript initialization script.

```html
<form class="dropzone" id="dropzone-default" action="." autocomplete="off"
  novalidate>
  <div class="fallback">
    <input name="..." type="file" />
  </div>
</form>
<script>
  document.addEventListener("DOMContentLoaded", function() {
    new Dropzone("#dropzone-default");
  });
</script>
```

--------------------------------

### Install imask dependency

Source: https://docs.tabler.io/ui/forms/form-input-mask

Commands to install the required imask package using various package managers.

```bash
npm install imask
```

```bash
yarn install imask
```

```bash
pnpm install imask
```

```bash
bun install imask
```

--------------------------------

### Create Pill Selectgroup Example

Source: https://docs.tabler.io/ui/forms/form-selectboxes?theme=dark

A complete example of a pill selectgroup containing multiple checkbox options.

```html
<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>
```

--------------------------------

### Install PDF icons package

Source: https://docs.tabler.io/icons/static-files/pdf

Use these commands to install the PDF icon set via various package managers.

```bash
npm install @tabler/icons-pdf
```

```bash
yarn install @tabler/icons-pdf
```

```bash
pnpm install @tabler/icons-pdf
```

```bash
bun install @tabler/icons-pdf
```

--------------------------------

### Install jsVectorMap via CDN

Source: https://docs.tabler.io/ui/components/vector-maps?theme=dark

Include the library and map data files directly in your HTML document.

```html
<script
  src="https://cdn.jsdelivr.net/npm/@tabler/core@1.4.0/dist/libs/jsvectormap/dist/js/jsvectormap.min.js">
</script>
<script
  src="https://cdn.jsdelivr.net/npm/@tabler/core@1.4.0/dist/libs/jsvectormap/dist/maps/js/jsvectormap-world.js">
</script>
```

--------------------------------

### Install Tabler via Package Managers

Source: https://docs.tabler.io/ui/getting-started/download?theme=dark

Commands to install the @tabler/core package using various Node.js package managers.

```bash
npm install @tabler/core
```

```bash
yarn install @tabler/core
```

```bash
pnpm install @tabler/core
```

```bash
bun install @tabler/core
```

--------------------------------

### Implement a functional tabbed navigation

Source: https://docs.tabler.io/ui/layout/navs-tabs

This example demonstrates a complete tabbed navigation structure with active, link, and disabled states.

```html
<ul class="nav nav-tabs">
  <li class="nav-item">
    <a class="nav-link active" aria-current="page" href="#">Active</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" aria-disabled="true">Disabled</a>
  </li>
</ul>
```

--------------------------------

### Placeholder Live Examples

Source: https://docs.tabler.io/ui/components/placeholder?theme=dark

Demonstrates complex layouts using placeholders within cards and list groups to simulate loading states for images, text, and avatars.

```html
<div class="card placeholder-glow">
  <div class="ratio ratio-21x9 card-img-top placeholder"></div>
  <div class="card-body">
    <div class="placeholder col-9 mb-3"></div>
    <div class="placeholder placeholder-xs col-10"></div>
    <div class="placeholder placeholder-xs col-11"></div>
    <div class="mt-3">
      <a href="#" tabindex="-1"
        class="btn btn-primary disabled placeholder col-4"
        aria-hidden="true"></a>
    </div>
  </div>
</div>
<div class="card">
  <div class="row g-0 align-items-center placeholder-glow">
    <div class="col-3">
      <div class="ratio ratio-1x1 card-img-start placeholder"></div>
    </div>
    <div class="col">
      <div class="card-body">
        <div class="placeholder col-9 mb-3"></div>
        <div class="placeholder placeholder-xs col-10"></div>
        <div class="placeholder placeholder-xs col-11"></div>
      </div>
    </div>
  </div>
</div>
<div class="card">
  <div class="card-body">
    <div class="row">
      <div class="col-auto">
        <div class="avatar avatar-rounded placeholder"></div>
      </div>
      <div class="col">
        <div class="placeholder placeholder-xs col-9"></div>
        <div class="placeholder placeholder-xs col-7"></div>
      </div>
    </div>
  </div>
</div>
<div class="card">
  <div class="card-body py-5 text-center">
    <div>
      <div class="avatar avatar-rounded avatar-lg placeholder mb-3"></div>
    </div>
    <div class="mt w-75 mx-auto">
      <div class="placeholder col-9 mb-3"></div>
      <div class="placeholder placeholder-xs col-10"></div>
    </div>
  </div>
</div>
<div class="card">
  <ul class="list-group list-group-flush placeholder-glow">
    <li class="list-group-item">
      <div class="row align-items-center">
        <div class="col-auto">
          <div class="avatar avatar-rounded placeholder"></div>
        </div>
        <div class="col-7">
          <div class="placeholder placeholder-xs col-9"></div>
          <div class="placeholder placeholder-xs col-7"></div>
        </div>
        <div class="col-2 ms-auto text-end">
          <div class="placeholder placeholder-xs col-8"></div>
          <div class="placeholder placeholder-xs col-10"></div>
        </div>
      </div>
    </li>
    <li class="list-group-item">
      <div class="row align-items-center">
        <div class="col-auto">
          <div class="avatar avatar-rounded placeholder"></div>
        </div>
        <div class="col-7">
          <div class="placeholder placeholder-xs col-9"></div>
          <div class="placeholder placeholder-xs col-7"></div>
        </div>
        <div class="col-2 ms-auto text-end">
          <div class="placeholder placeholder-xs col-8"></div>
          <div class="placeholder placeholder-xs col-10"></div>
        </div>
      </div>
    </li>
    <li class="list-group-item">
      <div class="row align-items-center">
        <div class="col-auto">
          <div class="avatar avatar-rounded placeholder"></div>
        </div>
        <div class="col-7">
          <div class="placeholder placeholder-xs col-9"></div>
          <div class="placeholder placeholder-xs col-7"></div>
        </div>
        <div class="col-2 ms-auto text-end">
          <div class="placeholder placeholder-xs col-8"></div>
          <div class="placeholder placeholder-xs col-10"></div>
        </div>
      </div>
    </li>
    <li class="list-group-item">
      <div class="row align-items-center">
        <div class="col-auto">
          <div class="avatar avatar-rounded placeholder"></div>
        </div>
        <div class="col-7">
          <div class="placeholder placeholder-xs col-9"></div>
          <div class="placeholder placeholder-xs col-7"></div>
        </div>
        <div class="col-2 ms-auto text-end">
          <div class="placeholder placeholder-xs col-8"></div>
          <div class="placeholder placeholder-xs col-10"></div>
        </div>
      </div>
    </li>
  </ul>
</div>
```

--------------------------------

### Initialize Basic Dropzone

Source: https://docs.tabler.io/ui/components/dropzone?theme=light

Sets up a standard drag-and-drop form and initializes it with the Dropzone class.

```html
<form class="dropzone" id="dropzone-default" action="." autocomplete="off"
  novalidate>
  <div class="fallback">
    <input name="file" type="file" />
  </div>
</form>
```

```html
<script>
  document.addEventListener("DOMContentLoaded", function() {
    new Dropzone("#dropzone-default");
  });
</script>
```

```html
<form class="dropzone" id="dropzone-default" action="." autocomplete="off"
  novalidate>
  <div class="fallback">
    <input name="..." type="file" />
  </div>
</form>
<script>
  document.addEventListener("DOMContentLoaded", function() {
    new Dropzone("#dropzone-default");
  });
</script>
```

--------------------------------

### Implement YouTube video player

Source: https://docs.tabler.io/ui/components/inline-player

Initialize a YouTube player by setting the data-plyr-provider attribute to youtube and providing the embed ID.

```html
<div id="player-youtube" data-plyr-provider="youtube"
  data-plyr-embed-id="dQw4w9WgXcQ"></div>
<script
  src="https://cdn.jsdelivr.net/npm/@tabler/core@1.4.0/dist/libs/plyr/dist/plyr.min.js">
</script>
<script>
  document.addEventListener("DOMContentLoaded", function() {
    window.Plyr && new Plyr("#player-youtube");
  });
</script>
```

--------------------------------

### Install Tabler Icons package

Source: https://docs.tabler.io/icons/static-files/svg

Commands to install the @tabler/icons package using different package managers.

```bash
npm install @tabler/icons
```

```bash
yarn install @tabler/icons
```

```bash
pnpm install @tabler/icons
```

```bash
bun install @tabler/icons
```

--------------------------------

### Install Tabler Icons Webfont

Source: https://docs.tabler.io/icons/libraries/webfont

Commands to install the webfont package using various package managers.

```bash
npm install @tabler/icons-webfont
```

```bash
yarn install @tabler/icons-webfont
```

```bash
pnpm install @tabler/icons-webfont
```

```bash
bun install @tabler/icons-webfont
```

--------------------------------

### Initialize HugeRTE with Dark Theme Support

Source: https://docs.tabler.io/ui/components/wysiwyg?theme=dark

Configures the editor instance with specific plugins and toolbars, while checking localStorage to apply the 'oxide-dark' skin and dark content CSS.

```html
<form method="post">
  <textarea id="hugerte-mytextarea">Hello, <b>Tabler</b>!</textarea>
</form>


<script>
  document.addEventListener("DOMContentLoaded", function() {
    let options = {
      selector: '#hugerte-mytextarea',
      height: 300,
      menubar: false,
      statusbar: false,
      plugins: [
        'advlist', 'autolink', 'lists', 'link', 'image', 'charmap',
        'preview', 'anchor',
        'searchreplace', 'visualblocks', 'code', 'fullscreen',
        'insertdatetime', 'media', 'table', 'code', 'help', 'wordcount'
      ],
      toolbar: 'undo redo | formatselect | ' +
        'bold italic backcolor | alignleft aligncenter ' +
        'alignright alignjustify | bullist numlist outdent indent | ' +
        'removeformat',
      content_style: 'body { font-family: -apple-system, BlinkMacSystemFont, San Francisco, Segoe UI, Roboto, Helvetica Neue, sans-serif; font-size: 14px; -webkit-font-smoothing: antialiased; }'
    }
    if (localStorage.getItem("tablerTheme") === 'dark') {
      options.skin = 'oxide-dark';
      options.content_css = 'dark';
    }
    hugeRTE.init(options);
  })
</script>
```

--------------------------------

### Create a Basic HTML File

Source: https://docs.tabler.io/ui/getting-started/installation?theme=light

Initial HTML structure required for a Tabler-based interface, including the viewport meta tag for 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>
```

--------------------------------

### Implement Vimeo video player

Source: https://docs.tabler.io/ui/components/inline-player

Initialize a Vimeo player by setting the data-plyr-provider attribute to vimeo and providing the embed ID.

```html
<div id="player-vimeo" data-plyr-provider="vimeo"
  data-plyr-embed-id="707012696"></div>
<script
  src="https://cdn.jsdelivr.net/npm/@tabler/core@1.4.0/dist/libs/plyr/dist/plyr.min.js">
</script>
<script>
  document.addEventListener("DOMContentLoaded", function() {
    window.Plyr && new Plyr("#player-vimeo");
  });
</script>
```

--------------------------------

### Install Tabler Icons PNG package

Source: https://docs.tabler.io/icons/static-files/png?theme=light

Commands to install the icon package using common JavaScript package managers.

```bash
npm install @tabler/icons-png
```

```bash
yarn install @tabler/icons-png
```

```bash
pnpm install @tabler/icons-png
```

```bash
bun install @tabler/icons-png
```

--------------------------------

### Create a basic navbar

Source: https://docs.tabler.io/ui/layout/navbars

Use the .navbar class to initialize a horizontal navigation bar.

```html
<header class="navbar navbar-expand-md d-print-none">...</header>
```

--------------------------------

### Implement Switch Icon Animations

Source: https://docs.tabler.io/ui/components/switch-icon

Examples of various switch icon configurations using different animation classes and SVG icons.

```html
<button class="switch-icon switch-icon-slide-up" data-bs-toggle="switch-icon">
  <span class="switch-icon-a text-secondary">
    <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="M22 4.01c-1 .49 -1.98 .689 -3 .99c-1.121 -1.265 -2.783 -1.335 -4.38 -.737s-2.643 2.06 -2.62 3.737v1c-3.245 .083 -6.135 -1.395 -8 -4c0 0 -4.182 7.433 4 11c-1.872 1.247 -3.739 2.088 -6 2c3.308 1.803 6.913 2.423 10.034 1.517c3.58 -1.04 6.522 -3.723 7.651 -7.742a13.84 13.84 0 0 0 .497 -3.753c-.002 -.249 1.51 -2.772 1.818 -4.013z" />
    </svg>
  </span>
  <span class="switch-icon-b text-twitter">
    <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="M22 4.01c-1 .49 -1.98 .689 -3 .99c-1.121 -1.265 -2.783 -1.335 -4.38 -.737s-2.643 2.06 -2.62 3.737v1c-3.245 .083 -6.135 -1.395 -8 -4c0 0 -4.182 7.433 4 11c-1.872 1.247 -3.739 2.088 -6 2c3.308 1.803 6.913 2.423 10.034 1.517c3.58 -1.04 6.522 -3.723 7.651 -7.742a13.84 13.84 0 0 0 .497 -3.753c-.002 -.249 1.51 -2.772 1.818 -4.013z" />
    </svg>
  </span>
</button>
```

```html
<button class="switch-icon switch-icon-slide-left" data-bs-toggle="switch-icon">
  <span class="switch-icon-a text-secondary">
    <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="M5 12l5 5l10 -10" />
    </svg>
  </span>
  <span class="switch-icon-b text-red">
    <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" />
      <line x1="18" y1="6" x2="6" y2="18" />
      <line x1="6" y1="6" x2="18" y2="18" />
    </svg>
  </span>
</button>
```

```html
<button class="switch-icon switch-icon-slide-down" data-bs-toggle="switch-icon">
  <span class="switch-icon-a text-secondary">
    <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" />
      <line x1="12" y1="5" x2="12" y2="19" />
      <line x1="18" y1="13" x2="12" y2="19" />
      <line x1="6" y1="13" x2="12" y2="19" />
    </svg>
  </span>
  <span class="switch-icon-b text-secondary">
    <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" />
      <line x1="12" y1="5" x2="12" y2="19" />
      <line x1="18" y1="11" x2="12" y2="5" />
      <line x1="6" y1="11" x2="12" y2="5" />
    </svg>
  </span>
</button>
```

--------------------------------

### Set Starting Value

Source: https://docs.tabler.io/ui/components/countup

Define a custom starting point for the animation using startVal. Values greater than the target will result in a countdown.

```html
<h1 data-countup='{"startVal":12345}'>30000</h1>
<h1 data-countup='{"startVal":47655}'>30000</h1>
```

--------------------------------

### Complete Tabs with Dropdown Example

Source: https://docs.tabler.io/ui/layout/navs-tabs

A fully functional example of a tabbed navigation bar featuring an active tab, a dropdown menu with a divider, a standard link, and a disabled link.

```html
<ul class="nav nav-tabs">
  <li class="nav-item">
    <a class="nav-link active" aria-current="page" href="#">Active</a>
  </li>
  <li class="nav-item dropdown">
    <a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#"
      role="button" aria-expanded="false">Dropdown</a>
    <ul class="dropdown-menu">
      <li><a class="dropdown-item" href="#">Action</a></li>
      <li><a class="dropdown-item" href="#">Another action</a></li>
      <li><a class="dropdown-item" href="#">Something else here</a></li>
      <li>
        <hr class="dropdown-divider" />
      </li>
      <li><a class="dropdown-item" href="#">Separated link</a></li>
    </ul>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" aria-disabled="true">Disabled</a>
  </li>
</ul>
```

--------------------------------

### Implement small and large segmented controls

Source: https://docs.tabler.io/ui/components/segmented-control

Full implementation examples showing the structure of small and large segmented controls using Bootstrap tab attributes.

```html
<nav class="nav nav-segmented nav-sm" role="tablist">
  <button class="nav-link active" role="tab" data-bs-toggle="tab"
    aria-selected="true" aria-current="page">
    List
  </button>
  <button class="nav-link" role="tab" data-bs-toggle="tab" aria-selected="false"
    tabindex="-1">
    Kanban
  </button>
  <button class="nav-link disabled" role="tab" data-bs-toggle="tab"
    aria-selected="false" aria-disabled="true" tabindex="-1">
    Calendar
  </button>
  <button class="nav-link" role="tab" data-bs-toggle="tab" aria-selected="false"
    tabindex="-1">
    Files
  </button>
</nav>
<nav class="nav nav-segmented nav-lg" role="tablist">
  <button class="nav-link active" role="tab" data-bs-toggle="tab"
    aria-selected="true" aria-current="page">
    List
  </button>
  <button class="nav-link" role="tab" data-bs-toggle="tab" aria-selected="false"
    tabindex="-1">
    Kanban
  </button>
  <button class="nav-link disabled" role="tab" data-bs-toggle="tab"
    aria-selected="false" aria-disabled="true" tabindex="-1">
    Calendar
  </button>
  <button class="nav-link" role="tab" data-bs-toggle="tab" aria-selected="false"
    tabindex="-1">
    Files
  </button>
</nav>
```

--------------------------------

### Create placeholder headings

Source: https://docs.tabler.io/ui/components/placeholder?theme=dark

Combine standard placeholders with the placeholder-xs class to simulate heading structures.

```html
<div class="placeholder col-9 mb-3"></div>
<div class="placeholder placeholder-xs col-10"></div>
<div class="placeholder placeholder-xs col-11"></div>
```

--------------------------------

### Implement telephone mask with visibility

Source: https://docs.tabler.io/ui/forms/form-input-mask

Example of a telephone input mask with the data-mask-visible attribute enabled.

```html
<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" />
```
Tokens:
Raw