1<!DOCTYPE html><html lang="en"><head><!-- BEGIN META --><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta name="theme-color" content="#066fd1"><link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png"><title>Welcome to Tabler Documentation | Tabler Documentation</title><!-- Markdown for LLMs: the docs index and this page's own .md mirror. --><link rel="alternate" type="text/plain" href="/llms.txt" title="llms.txt"><link rel="alternate" type="text/markdown" href="/index.md" title="Welcome to Tabler Documentation (markdown)"><meta name="description" content="Guides, examples and reference for Tabler UI components, plugins, icons and the other Tabler tools."><link rel="canonical" href="https://docs.tabler.io/"><meta property="og:type" content="website"><meta property="og:url" content="https://docs.tabler.io/"><meta property="og:title" content="Welcome to Tabler Documentation"><meta property="og:description" content="Guides, examples and reference for Tabler UI components, plugins, icons and the other Tabler tools."><meta property="og:site_name" content="Tabler Documentation"><meta property="og:image" content="https://docs.tabler.io/static/og.png"><meta name="twitter:card" content="summary_large_image"><meta name="twitter:site" content="@tabler_io"><meta name="twitter:title" content="Welcome to Tabler Documentation"><meta name="twitter:description" content="Guides, examples and reference for Tabler UI components, plugins, icons and the other Tabler tools."><meta name="twitter:image" content="https://docs.tabler.io/static/og.png">
1<script type="application/ld+json">{"@context":"https://schema.org","@type":"WebSite","name":"Tabler Documentation","alternateName":"Tabler Docs","url":"https://docs.tabler.io/"}</script>
1<!-- END META --><!-- BEGIN GLOBAL MANDATORY STYLES --><link rel="stylesheet" href="/dist/css/tabler.css"><!-- END GLOBAL MANDATORY STYLES --><!-- BEGIN PLUGINS STYLES --><link href="/dist/css/tabler-themes.css" rel="stylesheet"><link href="/dist/css/tabler-vendors.css" rel="stylesheet"><!-- END PLUGINS STYLES --><!-- BEGIN DOCS STYLES --><link rel="stylesheet" href="/css/docs.min.css"><!-- END DOCS STYLES --></head><body class="d-flex flex-column"><a href="#content" class="visually-hidden-focusable skip-link">Skip to main content</a><div class="visually-hidden" aria-hidden="true">A Markdown version of this page is available at https://docs.tabler.io/index.md.</div><!-- BEGIN GLOBAL THEME SCRIPT -->
1<script src="/dist/js/tabler-theme.js"></script>
1<script> 2 // The stored *choice* (light/dark/auto) drives the footer theme switcher's 3 // active segment; tabler-theme.js above only exposes the resolved theme. 4 document.documentElement.setAttribute('data-docs-theme', localStorage.getItem('tabler-theme') || 'auto'); 5 </script>
5<!-- END GLOBAL THEME SCRIPT --><!-- BEGIN NAVBAR --><header role="banner" class="sticky-top"><!-- BEGIN DOCS NAVBAR --><nav class="navbar navbar-expand" aria-label="Docs"><div class="container-lg"><div class="d-flex align-items-center flex-fill gap-2"><button type="button" class="btn btn-icon btn-ghost-secondary d-lg-none" data-bs-toggle="offcanvas" data-bs-target="#docs-menu-offcanvas" aria-controls="docs-menu-offcanvas" aria-label="Open documentation menu"><!-- Download SVG icon from http://tabler.io/icons/icon/menu-2 --> 6 <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" aria-hidden="true" focusable="false" class="icon"><path d="M4 6l16 0" /><path d="M4 12l16 0" /><path d="M4 18l16 0" /></svg></button><a href="/" class="navbar-brand navbar-brand-autodark me-2" aria-label="Tabler"><svg xmlns="http://www.w3.org/2000/svg" width="120" height="32" fill="none"><path fill="currentColor" d="M78.263 10.957a5.96 5.96 0 0 1 3.158.895c.947.632 1.737 1.474 2.21 2.474.58 1.105.843 2.368.843 3.631 0 1.369-.264 2.527-.79 3.632-.474 1-1.263 1.895-2.21 2.526-.948.58-2 .895-3.106.895a5.45 5.45 0 0 1-2.263-.474c-.684-.316-1.263-.684-1.79-1.21v.158c0 .42-.157.79-.42 1.105-.263.316-.632.421-1.105.421-.79 0-1.474-.632-1.527-1.421V7.536c0-.42.158-.79.421-1.105a1.24 1.24 0 0 1 1.106-.421c.42 0 .789.158 1.105.421.263.316.42.684.42 1.105V12.8c.475-.579 1.053-1 1.685-1.315.684-.369 1.474-.527 2.263-.527ZM51.737 21.852a.82.82 0 0 1 .631.316c.21.21.316.526.316.895 0 .473-.263.842-.737 1.158-.473.315-1.052.473-1.684.473-.947.053-1.842-.21-2.631-.684-.737-.421-1.053-1.421-1.053-2.842V14.22H45.42c-.737.052-1.368-.58-1.421-1.316v-.106c0-.368.158-.736.421-1 .263-.263.632-.368 1-.368h1.158V9.799c0-.42.158-.789.421-1.105a1.24 1.24 0 0 1 1.105-.42c.421 0 .79.157 1.053.42.263.316.42.684.42 1.105v1.632h1.79c.737-.053 1.369.579 1.421 1.316v.105c0 .737-.631 1.368-1.368 1.368h-1.84v6.843c0 .368.105.631.263.79.21.157.421.262.737.262.108 0 .217-.024.359-.057.065-.015.137-.032.22-.048.21-.105.368-.158.579-.158Zm14.737-10.895c.79 0 1.473.632 1.526 1.421v10.79c0 .42-.158.79-.421 1.105-.263.316-.632.421-1.105.421a1.47 1.47 0 0 1-1.053-.42c-.263-.317-.421-.685-.421-1.106a5.664 5.664 0 0 1-1.684 1.263c-.684.316-1.474.526-2.263.526a5.959 5.959 0 0 1-3.158-.894c-.948-.632-1.737-1.474-2.21-2.474a7.842 7.842 0 0 1-.843-3.632c0-1.368.263-2.526.79-3.631.473-1 1.263-1.895 2.21-2.527.947-.579 2-.894 3.105-.894 1.527 0 2.948.526 4.053 1.579 0-.421.158-.79.421-1.106a1.144 1.144 0 0 1 1.053-.42Zm-2.421 10a4.737 4.737 0 0 0 1.052-3c0-1.21-.368-2.21-1.052-3.052a3.316 3.316 0 0 0-2.685-1.21c-1.105 0-1.947.42-2.631 1.21-.684.842-1.053 1.947-1.053 3.052 0 1.21.369 2.21 1 3 .684.79 1.684 1.264 2.684 1.21 1.106 0 2-.42 2.685-1.21Zm16.473 0c.684-.842 1.053-1.947 1.053-3.052 0-1.21-.316-2.21-1-3a3.405 3.405 0 0 0-2.684-1.21c-1.105 0-2 .42-2.684 1.21a4.842 4.842 0 0 0-1.053 3c0 1.21.316 2.21 1.052 3.052.685.79 1.685 1.264 2.685 1.21 1.105 0 1.947-.42 2.631-1.21Zm9.79 2.21c0 .422-.158.79-.421 1.106-.263.316-.684.421-1.105.421a1.47 1.47 0 0 1-1.053-.42c-.263-.317-.421-.685-.421-1.106V7.536c0-.42.158-.79.42-1.105.317-.316.685-.474 1.106-.421.421 0 .79.158 1.053.421.316.316.42.684.42 1.105v15.632Zm14.947-4.525c.316-.264.474-.58.474-1 0-2.369-1.263-4.58-3.105-5.843-1-.579-2.053-.894-3.158-.894-1.158 0-2.21.316-3.21.894a6.563 6.563 0 0 0-2.422 2.527c-.579 1.052-.895 2.316-.895 3.79a6.729 6.729 0 0 0 .843 3.526c.578 1 1.368 1.842 2.42 2.42 1.053.58 2.264.895 3.685.895.842 0 1.631-.158 2.421-.42a6.38 6.38 0 0 0 1.895-1c.473-.316.684-.738.684-1.211 0-.369-.106-.632-.369-.895a1.153 1.153 0 0 0-.894-.368 1.67 1.67 0 0 0-.843.21l-.473.263c-.316.21-.632.316-.948.421-.421.158-.947.21-1.631.21a3.805 3.805 0 0 1-3.842-3.157h8.316c.421 0 .736-.105 1.052-.368Zm-5.947-4.948c.789 0 1.526.263 2.105.737s1 1.105 1.053 1.842v.158h-6.632c.368-1.842 1.526-2.737 3.474-2.737Zm17.21-2.316c-.315-.263-.737-.42-1.263-.42-.789 0-1.579.157-2.263.526-.737.368-1.316.894-1.684 1.579v-.316c0-.421-.105-.79
6-.421-1.105a1.695 1.695 0 0 0-1.106-.421 1.239 1.239 0 0 0-1.105.42c-.263.316-.421.685-.421 1.106v10.368c0 .421.158.79.421 1.106.316.263.632.42 1.105.42.474 0 .843-.105 1.106-.42.263-.316.421-.685.421-1.106v-6c-.053-.684.105-1.316.368-1.947.211-.474.579-.895 1-1.21.527-.37 1.211-.474 1.842-.316l.316.105c.316.105.579.158.842.158.369.052.684-.106.948-.369.315-.263.421-.631.421-1.158 0-.368-.211-.736-.527-1Z"></path><path fill="#066FD1" d="M31.288 7.107A8.833 8.833 0 0 0 24.893.712a55.899 55.899 0 0 0-17.786 0A8.833 8.833 0 0 0 .712 7.107a55.899 55.899 0 0 0 0 17.786 8.833 8.833 0 0 0 6.395 6.395c5.895.95 11.89.95 17.786 0a8.833 8.833 0 0 0 6.395-6.395c.95-5.895.95-11.89 0-17.786Z"></path><path fill="#fff" d="M10.019 22.452a17.5 17.5 0 0 0 5.498-5.449 2.193 2.193 0 0 0 0-2.328c-1.436-2.18-3.27-4.013-5.498-5.4-1.09-.693-2.527-.297-3.22.793-.05 0-.05.05-.05.05a2.278 2.278 0 0 0 .842 3.12c1.14.743 2.13 1.585 3.022 2.626a11.782 11.782 0 0 1-3.022 2.625c-.743.396-1.189 1.189-1.189 2.031a2.397 2.397 0 0 0 3.617 1.932Zm7.727-.644h5.647c1.04 0 1.883-.495 1.883-1.486 0-.99-.843-1.486-1.883-1.486h-5.647c-1.04 0-1.882.495-1.882 1.486 0 .99.842 1.486 1.882 1.486Z"></path></svg></a><span class="badge d-none d-sm-inline-block">v1.5.1</span><div class="ms-auto d-flex align-items-center gap-2"><nav class="d-none d-md-flex align-items-center me-1" aria-label="Tabler sites"><a href="https://tabler.io" class="nav-link docs-navbar-link" target="_blank" rel="noopener noreferrer">Website</a><a href="https://preview.tabler.io" class="nav-link docs-navbar-link" target="_blank" rel="noopener noreferrer">Preview</a><a href="https://tabler.io/support" class="nav-link docs-navbar-link" target="_blank" rel="noopener noreferrer">Support</a><a href="https://tabler.io/changelog" class="nav-link docs-navbar-link" target="_blank" rel="noopener noreferrer">Changelog</a></nav><a href="https://github.com/tabler/tabler" class="btn btn-icon btn-ghost-secondary" target="_blank" rel="noopener noreferrer" aria-label="Tabler on GitHub"><!-- Download SVG icon from http://tabler.io/icons/icon/brand-github --> 7 <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" aria-hidden="true" focusable="false" class="icon"><path d="M9 19c-4.3 1.4 -4.3 -2.5 -6 -3m12 5v-3.5c0 -1 .1 -1.4 -.5 -2c2.8 -.3 5.5 -1.4 5.5 -6a4.6 4.6 0 0 0 -1.3 -3.2a4.2 4.2 0 0 0 -.1 -3.2s-1.1 -.3 -3.5 1.3a12.3 12.3 0 0 0 -6.2 0c-2.4 -1.6 -3.5 -1.3 -3.5 -1.3a4.2 4.2 0 0 0 -.1 3.2a4.6 4.6 0 0 0 -1.3 3.2c0 4.6 2.7 5.7 5.5 6c-.6 .6 -.6 1.2 -.5 2v3.5" /></svg></a></div></div></div></nav><!-- END DOCS NAVBAR --></header><!-- END NAVBAR --><!-- BEGIN PAGE BODY --><main id="content" class="flex-fill"><div class="container-lg"><div class="row g-0"><!-- BEGIN DOCS MENU --><div class="col-docs offcanvas-lg offcanvas-start" tabindex="-1" id="docs-menu-offcanvas" aria-labelledby="docs-menu-offcanvas-title"><div class="offcanvas-header d-lg-none"><h2 class="offcanvas-title" id="docs-menu-offcanvas-title">Menu</h2><button type="button" class="btn-close" data-bs-dismiss="offcanvas" data-bs-target="#docs-menu-offcanvas" aria-label="Close"></button></div><div class="offcanvas-body"><div class="py-lg-4 flex-fill"><div class="space-y space-y-5"><!-- BEGIN DOCS SEARCH --><div class="input-icon docs-search"><span class="input-icon-addon"><!-- Download SVG icon from http://tabler.io/icons/icon/search --> 8 <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" aria-hidden="true" focusable="false" class="icon"><path d="M3 10a7 7 0 1 0 14 0a7 7 0 1 0 -14 0" /><path d="M21 21l-6 -6" /></svg></span><input type="search" id="docs-search-input" class="form-control cursor-pointer" placeholder="Searchâ¦" aria-label="Search documentation" autocomplete="off" readonly><span class="input-icon-addon"><span id="docs-search-kbd" class="fs-4">âK</span></span></div><div id="docsearch" class="d-none"></div><!-- END DOCS SEARCH -->
8<script type="module" src="/_astro/DocsSearch.astro_astro_type_script_index_0_lang.BI6D1kXB.js?dpl=dpl_9hPEcnopWxd4cie7PovTb6fbZcz7"></script>
8<div class="flex-fill"><!-- BEGIN DOCS MENU --><nav class="space-y space-y-5" id="menu" aria-label="Documentation"><div><div class="subheader mb-2">Tabler UI</div><div class="nav nav-vertical"><div><a class="nav-link" href="/ui"><span class="nav-link-title">Introduction</span></a></div><div><a class="nav-link" href="/ui/getting-started" data-bs-toggle="collapse" data-bs-target="#collapse-uigetting-started" aria-expanded="false"><span class="nav-link-title">Getting started</span> <span class="nav-link-toggle"></span></a><div class="nav nav-vertical collapse" id="collapse-uigetting-started"><div><a class="nav-link" href="/ui/getting-started/installation"><span class="nav-link-title">Installation</span></a></div><div><a class="nav-link" href="/ui/getting-started/download"><span class="nav-link-title">Download</span></a></div><div><a class="nav-link" href="/ui/getting-started/customize"><span class="nav-link-title">Customize Tabler</span></a></div><div><a class="nav-link" href="/ui/getting-started/color-modes"><span class="nav-link-title">Color modes</span></a></div><div><a class="nav-link" href="/ui/getting-started/rtl"><span class="nav-link-title">RTL support</span></a></div><div><a class="nav-link" href="/ui/getting-started/browser-support"><span class="nav-link-title">Browser support</span></a></div><div><a class="nav-link" href="/ui/getting-started/upgrade"><span class="nav-link-title">Upgrade to 1.5</span></a></div></div></div><div><a class="nav-link" href="/ui/getting-started/frameworks" data-bs-toggle="collapse" data-bs-target="#collapse-uigetting-startedframeworks" aria-expanded="false"><span class="nav-link-title">Frameworks</span> <span class="nav-link-toggle"></span></a><div class="nav nav-vertical collapse" id="collapse-uigetting-startedframeworks"><div><a class="nav-link" href="/ui/getting-started/frameworks/laravel"><span class="nav-link-title">Laravel</span></a></div><div><a class="nav-link" href="/ui/getting-started/frameworks/react"><span class="nav-link-title">React</span></a></div><div><a class="nav-link" href="/ui/getting-started/frameworks/nextjs"><span class="nav-link-title">Next.js</span></a></div><div><a class="nav-link" href="/ui/getting-started/frameworks/vue"><span class="nav-link-title">Vue</span></a></div><div><a class="nav-link" href="/ui/getting-started/frameworks/angular"><span class="nav-link-title">Angular</span></a></div><div><a class="nav-link" href="/ui/getting-started/frameworks/nuxt"><span class="nav-link-title">Nuxt</span></a></div><div><a class="nav-link" href="/ui/getting-started/frameworks/symfony"><span class="nav-link-title">Symfony</span></a></div><div><a class="nav-link" href="/ui/getting-started/frameworks/django"><span class="nav-link-title">Django</span></a></div><div><a class="nav-link" href="/ui/getting-started/frameworks/rails"><span class="nav-link-title">Rails</span></a></div><div><a class="nav-link" href="/ui/getting-started/frameworks/sveltekit"><span class="nav-link-title">SvelteKit</span></a></div><div><a class="nav-link" href="/ui/getting-started/frameworks/astro"><span class="nav-link-title">Astro</span></a></div></div></div><div><a class="nav-link" href="/ui/base" data-bs-toggle="collapse" data-bs-target="#collapse-uibase" aria-expanded="false"><span class="nav-link-title">Base</span> <span class="nav-link-toggle"></span></a><div class="nav nav-vertical collapse" id="collapse-uibase"><div><a class="nav-link" href="/ui/base/colors"><span class="nav-link-title">Colors</span></a></div><div><a class="nav-link" href="/ui/base/prose"><span class="nav-link-title">Prose</span></a></div><div><a class="nav-link" href="/ui/base/typography"><span class="nav-link-title">Typography</span></a></div></div></div><div><a class="nav-link" href="/ui/layout" data-bs-toggle="collapse" data-bs-target="#collapse-uilayout" aria-expanded="false"><span class="nav-link-title">Layout</span> <span class="nav-link-toggle"></span></a><div class="nav nav-vertical collapse" id="collapse-uilayout"><div><a class="nav-link" href="/ui/layout/navbars"><span class="nav-link-title">Navbars</span></a></div><div><a class="nav-link" href="/ui/layout/navs-tabs"><span class="nav-link-title">Navs and tabs</span></a></div><div><a class="nav-link" href="/ui/layout/page-headers"><span class="nav-link-title">Page headers</span></a></div><div><a class="nav-link" href="/ui/layout/page-layouts"><span class="nav-link-title">Page layouts</span></a></div></div></div><div><a class="nav-link" href="/ui/components" data-bs-toggle="collapse" data-bs-target="#collapse-uicomponents" aria-expanded="false"><span class="nav-link-title">Components</span> <span class="nav-link-toggle"></span></a><div class="nav nav-vertical collapse" id="collapse-uicomponents"><div>
8<a class="nav-link" href="/ui/components/accordion"><span class="nav-link-title">Accordion</span></a></div><div><a class="nav-link" href="/ui/components/alert"><span class="nav-link-title">Alert</span></a></div><div><a class="nav-link" href="/ui/components/avatar"><span class="nav-link-title">Avatar</span></a></div><div><a class="nav-link" href="/ui/components/badge"><span class="nav-link-title">Badge</span></a></div><div><a class="nav-link" href="/ui/components/breadcrumb"><span class="nav-link-title">Breadcrumb</span></a></div><div><a class="nav-link" href="/ui/components/button"><span class="nav-link-title">Button</span></a></div><div><a class="nav-link" href="/ui/components/card"><span class="nav-link-title">Card</span></a></div><div><a class="nav-link" href="/ui/components/card-gradient"><span class="nav-link-title">Card gradient</span></a></div><div><a class="nav-link" href="/ui/components/carousel"><span class="nav-link-title">Carousel</span></a></div><div><a class="nav-link" href="/ui/components/chat"><span class="nav-link-title">Chat</span></a></div><div><a class="nav-link" href="/ui/components/datagrid"><span class="nav-link-title">Data grid</span></a></div><div><a class="nav-link" href="/ui/components/divider"><span class="nav-link-title">Divider</span></a></div><div><a class="nav-link" href="/ui/components/dropdown"><span class="nav-link-title">Dropdown</span></a></div><div><a class="nav-link" href="/ui/components/empty"><span class="nav-link-title">Empty state</span></a></div><div><a class="nav-link" href="/ui/components/icon"><span class="nav-link-title">Icon</span></a></div><div><a class="nav-link" href="/ui/components/list-group"><span class="nav-link-title">List group</span></a></div><div><a class="nav-link" href="/ui/components/map"><span class="nav-link-title">Map</span></a></div><div><a class="nav-link" href="/ui/components/mention"><span class="nav-link-title">Mention</span></a></div><div><a class="nav-link" href="/ui/components/modal"><span class="nav-link-title">Modal</span></a></div><div><a class="nav-link" href="/ui/components/offcanvas"><span class="nav-link-title">Offcanvas</span></a></div><div><a class="nav-link" href="/ui/components/pagination"><span class="nav-link-title">Pagination</span></a></div><div><a class="nav-link" href="/ui/components/placeholder"><span class="nav-link-title">Placeholder</span></a></div><div><a class="nav-link" href="/ui/components/popover"><span class="nav-link-title">Popover</span></a></div><div><a class="nav-link" href="/ui/components/progress"><span class="nav-link-title">Progress bar</span></a></div><div><a class="nav-link" href="/ui/components/progress-step"><span class="nav-link-title">Progress steps</span></a></div><div><a class="nav-link" href="/ui/components/ribbon"><span class="nav-link-title">Ribbon</span></a></div><div><a class="nav-link" href="/ui/components/segmented-control"><span class="nav-link-title">Segmented control</span></a></div><div><a class="nav-link" href="/ui/components/spinner"><span class="nav-link-title">Spinner</span></a></div><div><a class="nav-link" href="/ui/components/star-rating"><span class="nav-link-title">Star rating</span></a></div><div><a class="nav-link" href="/ui/components/status"><span class="nav-link-title">Status</span></a></div><div><a class="nav-link" href="/ui/components/step"><span class="nav-link-title">Step</span></a></div><div><a class="nav-link" href="/ui/components/switch-icon"><span class="nav-link-title">Switch icon</span></a></div><div><a class="nav-link" href="/ui/components/tab"><span class="nav-link-title">Tab</span></a></div><div><a class="nav-link" href="/ui/components/table"><span class="nav-link-title">Table</span></a></div><div><a class="nav-link" href="/ui/components/tag"><span class="nav-link-title">Tag</span></a></div><div><a class="nav-link" href="/ui/components/timeline"><span class="nav-link-title">Timeline</span></a></div><div><a class="nav-link" href="/ui/components/toast"><span class="nav-link-title">Toast</span></a></div><div><a class="nav-link" href="/ui/components/tooltip"><span class="nav-link-title">Tooltip</span></a></div><div><a class="nav-link" href="/ui/components/tracking"><span class="nav-link-title">Tracking</span></a></div><div><a class="nav-link" href="/ui/components/trending"><span class="nav-link-title">Trending</span></a></div></div></div><div><a class="nav-link" href="/ui/forms" data-bs-toggle="collapse" data-bs-target="#collapse-uiforms" aria-expanded="false"><span class="nav-link-title">Forms</span> <span class="nav-link-toggle"></span></a><div class="nav nav-vertical collapse" id="collapse-uiforms"><div><a class="nav-link" href="/ui/forms/elements"><span class="nav-link-title">Elements</span></a></div><div><a class="nav-link" href="/ui/forms/fieldset"><span class="nav-link-title">Fieldset</span></a></div><div><a class="nav-link" href="/ui/forms/floating-labels"><span class="nav-link-title">Floating labels</span></a></div><div><a class="nav-link" href="/ui/forms/helpers"><span class="nav-link-title">Helpers</span></a></div><div><a class="nav-link" href="/ui/forms/select-group"><span class="nav-link-title">Select group</span></a></div><div><a class="nav-link" href="/ui/forms/image-check"><span class="nav-link-title">Image check</span></a></div><div><a class="nav-link" href="/ui/forms/color-check"><span class="nav-link-title">Color check</span></a></div><div><a class="nav-link" href="/ui/forms/validation"><span class="nav-link-title">Validation</span></a></div></div></div><div><a class="nav-link" href="/ui/utilities" data-bs-toggle="collapse" data-bs-target="#collapse-uiutilities" aria-expanded="false"><span class="nav-link-title">Utilities</span> <span class="nav-link-toggle"></span></a><div class="nav nav-vertical collapse" id="collapse-uiutilities"><div><a class="nav-link" href="/ui/utilities/background-blur"><span class="nav-link-title">
8Background blur</span></a></div><div><a class="nav-link" href="/ui/utilities/background-patterns"><span class="nav-link-title">Background patterns</span></a></div><div><a class="nav-link" href="/ui/utilities/borders"><span class="nav-link-title">Borders</span></a></div><div><a class="nav-link" href="/ui/utilities/cursors"><span class="nav-link-title">Cursors</span></a></div><div><a class="nav-link" href="/ui/utilities/gradients"><span class="nav-link-title">Gradients</span></a></div><div><a class="nav-link" href="/ui/utilities/interactions"><span class="nav-link-title">Interactions</span></a></div><div><a class="nav-link" href="/ui/utilities/margins"><span class="nav-link-title">Margins</span></a></div><div><a class="nav-link" href="/ui/utilities/printing"><span class="nav-link-title">Printing</span></a></div><div><a class="nav-link" href="/ui/utilities/vertical-align"><span class="nav-link-title">Vertical align</span></a></div><div><a class="nav-link" href="/ui/utilities/visually-hidden"><span class="nav-link-title">Visually hidden</span></a></div></div></div><div><a class="nav-link" href="/ui/plugins" data-bs-toggle="collapse" data-bs-target="#collapse-uiplugins" aria-expanded="false"><span class="nav-link-title">Plugins</span> <span class="nav-link-toggle"></span></a><div class="nav nav-vertical collapse" id="collapse-uiplugins"><div><a class="nav-link" href="/ui/plugins/advanced-select"><span class="nav-link-title">Advanced select</span></a></div><div><a class="nav-link" href="/ui/plugins/autosize"><span class="nav-link-title">Autosize</span></a></div><div><a class="nav-link" href="/ui/plugins/chart"><span class="nav-link-title">Chart</span></a></div><div><a class="nav-link" href="/ui/plugins/color-picker"><span class="nav-link-title">Color picker</span></a></div><div><a class="nav-link" href="/ui/plugins/countup"><span class="nav-link-title">Countup</span></a></div><div><a class="nav-link" href="/ui/plugins/date-picker"><span class="nav-link-title">Date picker</span></a></div><div><a class="nav-link" href="/ui/plugins/dropzone"><span class="nav-link-title">Dropzone</span></a></div><div><a class="nav-link" href="/ui/plugins/flags"><span class="nav-link-title">Flags</span></a></div><div><a class="nav-link" href="/ui/plugins/fullcalendar"><span class="nav-link-title">FullCalendar</span></a></div><div><a class="nav-link" href="/ui/plugins/inline-player"><span class="nav-link-title">Inline player</span></a></div><div><a class="nav-link" href="/ui/plugins/input-mask"><span class="nav-link-title">Input mask</span></a></div><div><a class="nav-link" href="/ui/plugins/lightbox"><span class="nav-link-title">Lightbox</span></a></div><div><a class="nav-link" href="/ui/plugins/range-slider"><span class="nav-link-title">Range slider</span></a></div><div><a class="nav-link" href="/ui/plugins/signature"><span class="nav-link-title">Signature</span></a></div><div><a class="nav-link" href="/ui/plugins/social-icons"><span class="nav-link-title">Social icons</span></a></div><div><a class="nav-link" href="/ui/plugins/theme-base-colors"><span class="nav-link-title">Theme base colors</span></a></div><div><a class="nav-link" href="/ui/plugins/vector-map"><span class="nav-link-title">Vector map</span></a></div><div><a class="nav-link" href="/ui/plugins/wysiwyg"><span class="nav-link-title">WYSIWYG editor</span></a></div></div></div><div><button type="button" class="nav-link w-100 bg-transparent border-0 text-start" data-bs-toggle="collapse" data-bs-target="#collapse-resources" aria-expanded="false"><span class="nav-link-title">Resources</span> <span class="nav-link-toggle"></span></button><div class="nav nav-vertical collapse" id="collapse-resources"><div><a class="nav-link" href="/ui/getting-started/faq"><span class="nav-link-title">FAQ</span></a></div><div><a class="nav-link" href="/ui/getting-started/llms"><span class="nav-link-title">Docs for LLMs</span></a></div><div><a class="nav-link" href="/ui/getting-started/references"><span class="nav-link-title">3rd-party libraries & resources</span></a></div><div><a class="nav-link" href="/ui/getting-started/how-to-contribute"><span class="nav-link-title">
8How to contribute</span></a></div><div><a class="nav-link" href="/ui/getting-started/callouts"><span class="nav-link-title">Docs callouts</span></a></div><div><a class="nav-link" href="/ui/getting-started/license"><span class="nav-link-title">Tabler license</span></a></div></div></div></div></div><div><div class="subheader mb-2">Tabler Icons</div><div class="nav nav-vertical"><div><a class="nav-link" href="/icons"><span class="nav-link-title">Introduction</span></a></div><div><a class="nav-link" href="/icons/libraries" data-bs-toggle="collapse" data-bs-target="#collapse-iconslibraries" aria-expanded="false"><span class="nav-link-title">Libraries</span> <span class="nav-link-toggle"></span></a><div class="nav nav-vertical collapse" id="collapse-iconslibraries"><div><a class="nav-link" href="/icons/libraries/astro"><span class="nav-link-title">Astro</span></a></div><div><a class="nav-link" href="/icons/libraries/preact"><span class="nav-link-title">Preact</span></a></div><div><a class="nav-link" href="/icons/libraries/react"><span class="nav-link-title">React</span></a></div><div><a class="nav-link" href="/icons/libraries/solidjs"><span class="nav-link-title">SolidJS</span></a></div><div><a class="nav-link" href="/icons/libraries/svelte"><span class="nav-link-title">Svelte</span></a></div><div><a class="nav-link" href="/icons/libraries/vue"><span class="nav-link-title">Vue</span></a></div><div><a class="nav-link" href="/icons/libraries/webfont"><span class="nav-link-title">Webfont</span></a></div></div></div><div><a class="nav-link" href="/icons/plugins" data-bs-toggle="collapse" data-bs-target="#collapse-iconsplugins" aria-expanded="false"><span class="nav-link-title">Plugins</span> <span class="nav-link-toggle"></span></a><div class="nav nav-vertical collapse" id="collapse-iconsplugins"><div><a class="nav-link" href="/icons/plugins/figma"><span class="nav-link-title">Figma plugin</span></a></div></div></div><div><a class="nav-link" href="/icons/static-files" data-bs-toggle="collapse" data-bs-target="#collapse-iconsstatic-files" aria-expanded="false"><span class="nav-link-title">Static files</span> <span class="nav-link-toggle"></span></a><div class="nav nav-vertical collapse" id="collapse-iconsstatic-files"><div><a class="nav-link" href="/icons/static-files/pdf"><span class="nav-link-title">PDF version</span></a></div><div><a class="nav-link" href="/icons/static-files/png"><span class="nav-link-title">PNG version</span></a></div><div><a class="nav-link" href="/icons/static-files/svg"><span class="nav-link-title">SVG version</span></a></div></div></div></div></div><div><div class="subheader mb-2">Tabler Illustrations</div><div class="nav nav-vertical"><div><a class="nav-link" href="/illustrations"><span class="nav-link-title">Introduction</span></a></div><div><a class="nav-link" href="/illustrations/preview"><span class="nav-link-title">Preview</span></a></div><div><a class="nav-link" href="/illustrations/contents"><span class="nav-link-title">Contents</span></a></div><div><a class="nav-link" href="/illustrations/customization"><span class="nav-link-title">Customization</span></a></div><div><a class="nav-link" href="/illustrations/license"><span class="nav-link-title">License</span></a></div></div></div><div><div class="subheader mb-2">Tabler Emails</div><div class="nav nav-vertical"><div><a class="nav-link" href="/emails"><span class="nav-link-title">Introduction</span></a></div><div><a class="nav-link" href="/emails/contents"><span class="nav-link-title">Contents</span></a></div><div><a class="nav-link" href="/emails/compiled-html"><span class="nav-link-title">Compiled templates</span></a></div><div><a class="nav-link" href="/emails/source-html"><span class="nav-link-title">Source templates</span></a></div></div></div><div><div class="subheader mb-2">Tabler Payments</div><div class="nav nav-vertical"><div><a class="nav-link" href="/payments"><span class="nav-link-title">Introduction</span></a></div><div><a class="nav-link" href="/payments/css"><span class="nav-link-title">CSS plugin</span></a></div><div><a class="nav-link" href="/payments/libraries" data-bs-toggle="collapse" data-bs-target="#collapse-paymentslibraries" aria-expanded="false"><span class="nav-link-title">Libraries</span> <span class="nav-link-toggle"></span></a><div class="nav nav-vertical collapse" id="collapse-paymentslibraries"><div><a class="nav-link" href="/payments/libraries/astro"><span class="nav-link-title">Astro</span></a></div><div><a class="nav-link" href="/payments/libraries/preact"><span class="nav-link-title">Preact</span></a></div><div><a class="nav-link" href="/payments/libraries/react"><span class="nav-link-title">React</span></a></div><div><a class="nav-link" href="/payments/libraries/vue"><span class="nav-link-title">Vue</span></a></div></div></div></div></div></nav><!-- END DOCS MENU --></div><nav class="nav nav-vertical" aria-label="Docs for AI tools"><a class="nav-link" href="/llms.txt"><span class="nav-link-title">llms.txt</span></a></nav></div></div></div></div><!-- END DOCS MENU --><div class="col d-flex flex-column"><div class="docs-article flex-fill"><div class="p-4 py-6 p-lg-6"><div class="d-flex flex-wrap align-items-center justify-content-between gap-2 mb-3"><div class="btn-group ms-auto d-none d-sm-block"><button type="button" class="btn btn-sm" data-docs-copy-markdown-link="/index.md"><!-- Download SVG icon from http://tabler.io/icons/icon/clipboard --> 9 <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" aria-hidden="true" focusable="false" class="icon"><path d="M9 5h-2a2 2 0 0 0 -2 2v12a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-12a2 2 0 0 0 -2 -2h-2" /><path d="M9 5a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2a2 2 0 0 1 -2 2h-2a2 2 0 0 1 -2 -2" /></svg><!-- Download SVG icon from http://tabler.io/icons/icon/check --> 10 <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" aria-hidden="true" focusable="false" class="icon d-none"><path d="M5 12l5 5l10 -10" /></svg><span data-docs-copy-markdown-link-label>Copy to LLM</span></button><button type="button" class="btn btn-sm dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false"><span class="visually-hidden">Toggle dropdown</span></button><div class="dropdown-menu dropdown-menu-end"><a class="dropdown-item" href="/index.md" target="_blank"><!-- Download SVG icon from http://tabler.io/icons/icon/external-link --> 11 <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" aria-hidden="true" focusable="false" class="icon"><path d="M12 6h-6a2 2 0 0 0 -2 2v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-6" /><path d="M11 13l9 -9" /><path d="M15 4h5v5" /></svg><span>View as markdown</span></a><a class="dropdown-item" href="https://chatgpt.com/?q=Read%20https%3A%2F%2Fdocs.tabler.io%2Findex.md%20so%20I%20can%20ask%20questions%20about%20it." target="_blank" rel="noopener noreferrer">
11<svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" focusable="false"><path d="M22.2819 9.8211a5.9847 5.9847 0 0 0-.5157-4.9108 6.0462 6.0462 0 0 0-6.5098-2.9A6.0651 6.0651 0 0 0 4.9807 4.1818a5.9847 5.9847 0 0 0-3.9977 2.9 6.0462 6.0462 0 0 0 .7427 7.0966 5.98 5.98 0 0 0 .511 4.9107 6.051 6.051 0 0 0 6.5146 2.9001A5.9847 5.9847 0 0 0 13.2599 24a6.0557 6.0557 0 0 0 5.7718-4.2058 5.9894 5.9894 0 0 0 3.9977-2.9001 6.0557 6.0557 0 0 0-.7475-7.0729zm-9.022 12.6081a4.4755 4.4755 0 0 1-2.8764-1.0408l.1419-.0804 4.7783-2.7582a.7948.7948 0 0 0 .3927-.6813v-6.7369l2.02 1.1686a.071.071 0 0 1 .038.052v5.5826a4.504 4.504 0 0 1-4.4945 4.4944zm-9.6607-4.1254a4.4708 4.4708 0 0 1-.5346-3.0137l.142.0852 4.783 2.7582a.7712.7712 0 0 0 .7806 0l5.8428-3.3685v2.3324a.0804.0804 0 0 1-.0332.0615L9.74 19.9502a4.4992 4.4992 0 0 1-6.1408-1.6464zM2.3408 7.8956a4.485 4.485 0 0 1 2.3655-1.9728V11.6a.7664.7664 0 0 0 .3879.6765l5.8144 3.3543-2.0201 1.1685a.0757.0757 0 0 1-.071 0l-4.8303-2.7865A4.504 4.504 0 0 1 2.3408 7.872zm16.5963 3.8558L13.1038 8.364 15.1192 7.2a.0757.0757 0 0 1 .071 0l4.8303 2.7913a4.4944 4.4944 0 0 1-.6765 8.1042v-5.6772a.79.79 0 0 0-.407-.667zm2.0107-3.0231l-.142-.0852-4.7735-2.7818a.7759.7759 0 0 0-.7854 0L9.409 9.2297V6.8974a.0662.0662 0 0 1 .0284-.0615l4.8303-2.7866a4.4992 4.4992 0 0 1 6.6802 4.66zM8.3065 12.863l-2.02-1.1638a.0804.0804 0 0 1-.038-.0567V6.0742a4.4992 4.4992 0 0 1 7.3757-3.4537l-.142.0805L8.704 5.459a.7948.7948 0 0 0-.3927.6813zm1.0976-2.3654l2.602-1.4998 2.6069 1.4998v2.9994l-2.5974 1.4997-2.6067-1.4997Z"></path></svg><span>Ask ChatGPT</span></a><a class="dropdown-item" href="https://claude.ai/new?q=Read%20https%3A%2F%2Fdocs.tabler.io%2Findex.md%20so%20I%20can%20ask%20questions%20about%20it." target="_blank" rel="noopener noreferrer"><svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" focusable="false"><path d="m4.7144 15.9555 4.7174-2.6471.079-.2307-.079-.1275h-.2307l-.7893-.0486-2.6956-.0729-2.3375-.0971-2.2646-.1214-.5707-.1215-.5343-.7042.0546-.3522.4797-.3218.686.0608 1.5179.1032 2.2767.1578 1.6514.0972 2.4468.255h.3886l.0546-.1579-.1336-.0971-.1032-.0972L6.973 9.8356l-2.55-1.6879-1.3356-.9714-.7225-.4918-.3643-.4614-.1578-1.0078.6557-.7225.8803.0607.2246.0607.8925.686 1.9064 1.4754 2.4893 1.8336.3643.3035.1457-.1032.0182-.0728-.164-.2733-1.3539-2.4467-1.445-2.4893-.6435-1.032-.17-.6194c-.0607-.255-.1032-.4674-.1032-.7285L6.287.1335 6.6997 0l.9957.1336.419.3642.6192 1.4147 1.0018 2.2282 1.5543 3.0296.4553.8985.2429.8318.091.255h.1579v-.1457l.1275-1.706.2368-2.0947.2307-2.6957.0789-.7589.3764-.9107.7468-.4918.5828.2793.4797.686-.0668.4433-.2853 1.8517-.5586 2.9021-.3643 1.9429h.2125l.2429-.2429.9835-1.3053 1.6514-2.0643.7286-.8196.85-.9046.5464-.4311h1.0321l.759 1.1293-.34 1.1657-1.0625 1.3478-.8804 1.1414-1.2628 1.7-.7893 1.36.0729.1093.1882-.0183 2.8535-.607 1.5421-.2794 1.8396-.3157.8318.3886.091.3946-.3278.8075-1.967.4857-2.3072.4614-3.4364.8136-.0425.0304.0486.0607 1.5482.1457.6618.0364h1.621l3.0175.2247.7892.522.4736.6376-.079.4857-1.2142.6193-1.6393-.3886-3.825-.9107-1.3113-.3279h-.1822v.1093l1.0929 1.0686 2.0035 1.8092 2.5075 2.3314.1275.5768-.3218.4554-.34-.0486-2.2039-1.6575-.85-.7468-1.9246-1.621h-.1275v.17l.4432.6496 2.3436 3.5214.1214 1.0807-.17.3521-.6071.2125-.6679-.1214-1.3721-1.9246L14.38 17.959l-1.1414-1.9428-.1397.079-.674 7.2552-.3156.3703-.7286.2793-.6071-.4614-.3218-.7468.3218-1.4753.3886-1.9246.3157-1.53.2853-1.9004.17-.6314-.0121-.0425-.1397.
110182-1.4328 1.9672-2.1796 2.9446-1.7243 1.8456-.4128.164-.7164-.3704.0667-.6618.4008-.5889 2.386-3.0357 1.4389-1.882.929-1.0868-.0062-.1579h-.0546l-6.3385 4.1164-1.1293.1457-.4857-.4554.0608-.7467.2307-.2429 1.9064-1.3114Z"></path></svg><span>Ask Claude</span></a></div></div>
11<script type="module">document.querySelectorAll(`[data-docs-copy-markdown-link]`).forEach(e=>{let t=e.querySelector(`[data-docs-copy-markdown-link-label]`),[n,r]=e.querySelectorAll(`svg`);e.addEventListener(`click`,async()=>{let i=e.dataset.docsCopyMarkdownLink;if(!(!i||!t))try{let e=await fetch(i);await navigator.clipboard.writeText(await e.text());let a=t.textContent;t.textContent=`Copied`,n?.classList.add(`d-none`),r?.classList.remove(`d-none`),setTimeout(()=>{t.textContent=a,n?.classList.remove(`d-none`),r?.classList.add(`d-none`)},2e3)}catch{}})});</script>
11</div><div class="prose" tabindex="0"><div class="d-flex flex-column flex-sm-row align-items-sm-center gap-2"><h1 class="docs-page-title mb-0">Welcome to Tabler Documentation</h1></div><p class="docs-page-lead text-secondary fs-3 lh-lg">Guides and reference for the Tabler UI kit, its plugins, Tabler Icons, Illustrations and the email templates.</p><img src="/img/tabler.png" alt="Tabler" class="mb-4 hide-theme-dark border-0" width="816" height="620"/> 12<img src="/img/tabler-dark.png" alt="Tabler" class="mb-4 hide-theme-light border-0" width="816" height="620"/> 13<p>This is the documentation for Tabler and the tools around it: the UI kit, its plugins, Tabler Icons, Illustrations and the email templates. Pick a section below to get started.</p> 14<div class="mt-6 pt-6"><div class="row row-deck row-cards"><div class="col-md-6"><a href="/ui" class="card"><div class="card-body"><div class="position-relative"><div class="row"><div class="col-auto"><!-- Download SVG icon from http://tabler.io/icons/icon/paint --> 15 <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" aria-hidden="true" focusable="false" class="icon text-secondary"><path d="M5 5a2 2 0 0 1 2 -2h10a2 2 0 0 1 2 2v2a2 2 0 0 1 -2 2h-10a2 2 0 0 1 -2 -2l0 -2" /><path d="M19 6h1a2 2 0 0 1 2 2a5 5 0 0 1 -5 5l-5 0v2" /><path d="M10 16a1 1 0 0 1 1 -1h2a1 1 0 0 1 1 1v4a1 1 0 0 1 -1 1h-2a1 1 0 0 1 -1 -1l0 -4" /></svg></div><div class="col"><div class="h3">UI Components</div><p class="text-secondary m-0 fs-4 lh-base">Free and open source web application UI kit based on Bootstrap</p></div></div></div></div></a></div><div class="col-md-6"><a href="/ui/plugins" class="card"><div class="card-body"><div class="position-relative"><div class="row"><div class="col-auto"><!-- Download SVG icon from http://tabler.io/icons/icon/plug --> 16 <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" aria-hidden="true" focusable="false" class="icon text-secondary"><path d="M9.785 6l8.215 8.215l-2.054 2.054a5.81 5.81 0 1 1 -8.215 -8.215l2.054 -2.054" /><path d="M4 20l3.5 -3.5" /><path d="M15 4l-3.5 3.5" /><path d="M20 9l-3.5 3.5" /></svg></div><div class="col"><div class="h3">Plugins</div><p class="text-secondary m-0 fs-4 lh-base">Free and open source plugins for Tabler UI components</p></div></div></div></div></a></div><div class="col-md-6"><a href="/icons" class="card"><div class="card-body"><div class="position-relative"><div class="row"><div class="col-auto"><!-- Download SVG icon from http://tabler.io/icons/icon/ghost --> 17 <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" aria-hidden="true" focusable="false" class="icon text-secondary"><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 d="M10 10l.01 0" /><path d="M14 10l.01 0" /><path d="M10 14a3.5 3.5 0 0 0 4 0" /></svg></div><div class="col"><div class="h3">Icons</div><p class="text-secondary m-0 fs-4 lh-base">Pixel-perfect icons for web design and development</p></div></div></div></div></a></div><div class="col-md-6"><a href="/illustrations" class="card"><div class="card-body"><div class="position-relative"><div class="row"><div class="col-auto"><!-- Download SVG icon from http://tabler.io/icons/icon/brand-figma --> 18 <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" aria-hidden="true" focusable="false" class="icon text-secondary"><path d="M12 12a3 3 0 1 0 6 0a3 3 0 1 0 -6 0" /><path d="M6 6a3 3 0 0 1 3 -3h6a3 3 0 0 1 3 3a3 3 0 0 1 -3 3h-6a3 3 0 0 1 -3 -3" /><path d="M9 9a3 3 0 0 0 0 6h3m-3 0a3 3 0 1 0 3 3v-15" /></svg></div><div class="col"><div class="h3">Illustrations</div><p class="text-secondary m-0 fs-4 lh-base">Customizable SVG illustrations for your web project</p></div></div></div></div></a></div><div class="col-md-6"><a href="/emails" class="card"><div class="card-body"><div class="position-relative"><div class="row"><div class="col-auto"><!-- Download SVG icon from http://tabler.io/icons/icon/mail --> 19 <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" aria-hidden="true" focusable="false" class="icon text-secondary"><path d="M3 7a2 2 0 0 1 2 -2h14a2 2 0 0 1 2 2v10a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2v-10" /><path d="M3 7l9 6l9 -6" /></svg></div><div class="col"><div class="h3">Email Templates</div><p class="text-secondary m-0 fs-4 lh-base">Responsive email templates ready to use in your marketing campaigns</p></div></div></div></div></a></div></div></div></div></div></div><footer class="docs-footer"><nav class="d-md-none mb-3" aria-label="Tabler sites"><ul class="list-inline list-inline-dots mb-0 text-secondary"><li class="list-inline-item"><a href="https://tabler.io" class="link-secondary" target="_blank" rel="noopener noreferrer">Website</a></li><li class="list-inline-item"><a href="https://preview.tabler.io" class="link-secondary" target="_blank" rel="noopener noreferrer">Preview</a></li><li class="list-inline-item"><a href="https://tabler.io/support" class="link-secondary" target="_blank" rel="noopener noreferrer">Support</a></li></ul></nav><nav aria-label="Documentation sections"><ul class="list-inline list-inline-dots mb-0 text-secondary"><li class="list-inline-item"><a href="/ui/getting-started" class="link-secondary">Getting started</a></li><li class="list-inline-item"><a href="/ui/components" class="link-secondary">UI components</a></li><li class="list-inline-item"><a href="/icons" class="link-secondary">Icons</a></li><li class="list-inline-item"><a href="/illustrations" class="link-secondary">Illustrations</a></li><li class="list-inline-item"><a href="/emails" class="link-secondary">Emails</a></li><li class="list-inline-item"><a href="/ui/getting-started/faq" class="link-secondary">FAQ</a></li><li class="list-inline-item"><a href="/ui/getting-started/license" class="link-secondary">License</a></li></ul></nav><div class="mt-4"><div class="row"><div class="col-12 col-sm text-secondary">© 2026 Tabler. All rights reserved.</div><div class="col-12 col-sm d-flex align-items-center justify-content-start justify-content-sm-end gap-4 mt-3 mt-sm-0"><nav class="nav nav-segmented nav-sm docs-theme-toggle" aria-label="Color scheme"><a href="?theme=light" class="nav-link docs-theme-toggle-light" data-bs-toggle="tooltip" data-bs-placement="top" title="Light mode" aria-label="Enable light mode"><!-- Download SVG icon from http://tabler.io/icons/icon/sun --> 20 <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" aria-hidden="true" focusable="false" class="icon nav-link-icon"><path d="M8 12a4 4 0 1 0 8 0a4 4 0 1 0 -8 0" /><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></a><a href="?theme=auto" class="nav-link docs-theme-toggle-auto" data-bs-toggle="tooltip" data-bs-placement="top" title="System mode" aria-label="Follow the system color scheme"><!-- Download SVG icon from http://tabler.io/icons/icon/sun-moon --> 21 <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" aria-hidden="true" focusable="false" class="icon nav-link-icon"><path d="M9.173 14.83a4 4 0 1 1 5.657 -5.657" /><path d="M11.294 12.707l.174 .247a7.5 7.5 0 0 0 8.845 2.492a9 9 0 0 1 -14.671 2.914" /><path d="M3 12h1" /><path d="M12 3v1" /><path d="M5.6 5.6l.7 .7" /><path d="M3 21l18 -18" /></svg></a><a href="?theme=dark" class="nav-link docs-theme-toggle-dark" data-bs-toggle="tooltip" data-bs-placement="top" title="Dark mode" aria-label="Enable dark mode"><!-- Download SVG icon from http://tabler.io/icons/icon/moon --> 22 <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" aria-hidden="true" focusable="false" class="icon nav-link-icon"><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.454l0 .008" /></svg></a></nav><div class="d-inline-flex align-items-center gap-2"><a href="https://github.com/tabler/tabler" class="link-secondary" target="_blank" rel="noopener noreferrer" data-bs-toggle="tooltip" data-bs-placement="top" title="Tabler on GitHub" aria-label="Tabler on GitHub"><!-- Download SVG icon from http://tabler.io/icons/icon/brand-github --> 23 <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" aria-hidden="true" focusable="false" class="icon"><path d="M9 19c-4.3 1.4 -4.3 -2.5 -6 -3m12 5v-3.5c0 -1 .1 -1.4 -.5 -2c2.8 -.3 5.5 -1.4 5.5 -6a4.6 4.6 0 0 0 -1.3 -3.2a4.2 4.2 0 0 0 -.1 -3.2s-1.1 -.3 -3.5 1.3a12.3 12.3 0 0 0 -6.2 0c-2.4 -1.6 -3.5 -1.3 -3.5 -1.3a4.2 4.2 0 0 0 -.1 3.2a4.6 4.6 0 0 0 -1.3 3.2c0 4.6 2.7 5.7 5.5 6c-.6 .6 -.6 1.2 -.5 2v3.5" /></svg></a><a href="https://github.com/sponsors/codecalm" class="link-secondary" target="_blank" rel="noopener noreferrer" data-bs-toggle="tooltip" data-bs-placement="top" title="Sponsor on GitHub" aria-label="Sponsor Tabler on GitHub"><!-- Download SVG icon from http://tabler.io/icons/icon/heart --> 24 <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" aria-hidden="true" focusable="false" class="icon"><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" /></svg></a><a href="https://opencollective.com/tabler" class="link-secondary" target="_blank" rel="noopener noreferrer" data-bs-toggle="tooltip" data-bs-placement="top" title="Support on Open Collective" aria-label="Support Tabler on Open Collective"><!-- Download SVG icon from http://tabler.io/icons/icon/hearts --> 25 <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" aria-hidden="true" focusable="false" class="icon"><path d="M14.017 18l-2.017 2l-7.5 -7.428a5 5 0 1 1 7.5 -6.566a5 5 0 0 1 8.153 5.784" /><path d="M15.99 20l4.197 -4.223a2.81 2.81 0 0 0 0 -3.948a2.747 2.747 0 0 0 -3.91 -.007l-.28 .282l-.279 -.283a2.747 2.747 0 0 0 -3.91 -.007a2.81 2.81 0 0 0 -.007 3.948l4.182 4.238l.007 0" /></svg></a><a href="https://x.com/tabler_io" class="link-secondary" target="_blank" rel="noopener noreferrer" data-bs-toggle="tooltip" data-bs-placement="top" title="Tabler on X" aria-label="Tabler on X"><!-- Download SVG icon from http://tabler.io/icons/icon/brand-x --> 26 <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" aria-hidden="true" focusable="false" class="icon"><path d="M4 4l11.733 16h4.267l-11.733 -16l-4.267 0" /><path d="M4 20l6.768 -6.768m2.46 -2.46l6.772 -6.772" /></svg></a><a href="https://www.linkedin.com/company/tabler-io" class="link-secondary" target="_blank" rel="noopener noreferrer" data-bs-toggle="tooltip" data-bs-placement="top" title="Tabler on LinkedIn" aria-label="Tabler on LinkedIn"><!-- Download SVG icon from http://tabler.io/icons/icon/brand-linkedin --> 27 <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" aria-hidden="true" focusable="false" class="icon"><path d="M8 11v5" /><path d="M8 8v.01" /><path d="M12 16v-5" /><path d="M16 16v-3a2 2 0 1 0 -4 0" /><path d="M3 7a4 4 0 0 1 4 -4h10a4 4 0 0 1 4 4v10a4 4 0 0 1 -4 4h-10a4 4 0 0 1 -4 -4l0 -10" /></svg></a></div></div></div></div></footer></div><!-- BEGIN DOCS TOC --><div class="col-2 d-none d-xxl-block"><div class="py-5 sticky-top docs-toc-sticky"><!-- BEGIN DOCS TOC --><a href="https://tabler.io/pricing?ref=tabler-docs-toc#bundle" class="card card-sm shadow-none card-gradient card-gradient-rainbow docs-promo-card" target="_blank" rel="noopener noreferrer"><div class="card-body"><img src="/img/banner-all-package.png" class="mb-3 hide-theme-dark" alt="" width="296" height="160" loading="lazy"><img src="/img/banner-all-package-dark.png" class="mb-3 hide-theme-light" alt="" width="296" height="160" loading="lazy"><h4>Get Admin Template, Icons, Illustrations and Emails in one bundle.</h4><div class="text-secondary">Tabler All Package â one purchase, every premium product.</div></div></a><nav class="docs-page-links mt-6" aria-label="Page tools"><a href="https://github.com/tabler/tabler/edit/dev/docs/content/index.mdx" class="docs-page-link" target="_blank" rel="noopener noreferrer"><!-- Download SVG icon from http://tabler.io/icons/icon/edit --> 28 <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" aria-hidden="true" focusable="false" class="icon"><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.415" /><path d="M16 5l3 3" /></svg>Edit this page on GitHub</a></nav><!-- END DOCS TOC --></div></div><!-- END DOCS TOC --></div></div></main><!-- END PAGE BODY --><!-- BEGIN PAGE LIBRARIES -->
28<script src="/dist/libs/clipboard/dist/clipboard.min.js"></script>
28<!-- END PAGE LIBRARIES --><!-- BEGIN PAGE SCRIPTS -->
28<script> 29 document.addEventListener('DOMContentLoaded', function () { 30 const elements = document.querySelectorAll('[data-clipboard-text]'); 31 32 elements.forEach(function (element) { 33 const clipboard = new ClipboardJS(element, { 34 text: function () { 35 return element.getAttribute('data-clipboard-text'); 36 } 37 }); 38 39 clipboard.on('success', function (e) { 40 e.clearSelection(); 41 e.trigger.classList.add('btn-success'); 42 e.trigger.classList.remove('btn-dark'); 43 e.trigger.children[0].classList.add('d-none'); 44 e.trigger.children[1].classList.remove('d-none'); 45 // The checkmark is the only feedback a sighted user gets; the label 46 // carries the same message to a screen reader. 47 e.trigger.setAttribute('aria-label', 'Copied'); 48 49 setTimeout(function () { 50 e.trigger.classList.remove('btn-success'); 51 e.trigger.classList.add('btn-dark'); 52 53 e.trigger.children[0].classList.remove('d-none'); 54 e.trigger.children[1].classList.add('d-none'); 55 e.trigger.setAttribute('aria-label', 'Copy code'); 56 }, 2000); 57 }); 58 59 clipboard.on('error', function (e) { 60 console.error('Error copying text: ', e); 61 }); 62 }); 63 }) 64 </script>
64<!-- END PAGE SCRIPTS --><!-- BEGIN GLOBAL MANDATORY SCRIPTS -->
64<script src="/dist/js/tabler.js" defer></script>
64<!-- END GLOBAL MANDATORY SCRIPTS -->
64<script src="https://scripts.tabler.io/banner.js" defer data-tblr-ref="tabler-docs"></script>
64</body></html>
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.