Free and open source HTML dashboard UI kit built on Bootstrap 5.
Live demo Β· Documentation Β· Releases Β· Discussions
- Preview
- Quick start
- What's included
- Frameworks
- Ecosystem
- Documentation
- Browser support
- Contributing
- Sponsors
- Creators
- Contributors
- License
Tabler is a set of ready-made layouts, components and demo pages for admin panels, dashboards and web apps. Every component is built on Bootstrap 5, works in light and dark mode, and can be customized with Sass or CSS custom properties.
- Bootstrap 5 ships inside the package, so you only need one CSS file and one JS file.
- There are more than 120 demo pages in the live demo: dashboards, forms, tables, auth screens, error pages, marketing layouts and more.
- Every component has a dark color scheme, and every stylesheet ships in an RTL version.
- Tabler Icons gives you over 6,000 icons, drawn on a 24Γ24 grid to match the UI kit.
- More than 20 plugins are bundled in
dist/libs: charts, date pickers, selects, sliders, editors, drag and drop and other libraries. - The Sass sources and TypeScript types are included, so you can customize the theme with
@use β¦ with ()and use typed JavaScript components.
Load Tabler from the CDN and start building:
<!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="https://cdn.jsdelivr.net/npm/@tabler/core@latest/dist/css/tabler.min.css" />
</head>
<body>
<h1>Hello, Tabler!</h1>
<button class="btn btn-primary">Primary button</button>
<script src="https://cdn.jsdelivr.net/npm/@tabler/core@latest/dist/js/tabler.min.js"></script>
</body>
</html>Or install the package with npm or your preferred JavaScript package manager:
npm install @tabler/coreThen import the styles and scripts in your entry file:
import '@tabler/core/dist/css/tabler.min.css'
import '@tabler/core/dist/js/tabler.min.js'You can also download the latest release as a ZIP archive. If you'd rather try Tabler without installing anything, open the tabler-starter template on StackBlitz, CodeSandbox or GitHub Codespaces.
See the installation guide for more options.
The @tabler/core package contains compiled and minified CSS and JavaScript, the Sass and TypeScript sources, and the third-party plugins used by the demo pages:
@tabler/core/
βββ dist/
β βββ css/ tabler.css and the optional stylesheets (flags, marketing, payments, socials,
β β themes, vendors), each with .min and .rtl versions
β βββ js/ tabler.js and tabler.esm.js, plus the standalone tabler-theme.js
β βββ libs/ bundled plugins: ApexCharts, Tom Select, Litepicker, FullCalendar and others
β βββ types/ TypeScript declarations
β βββ fonts/
β βββ img/
βββ scss/ Sass sources
βββ js/ TypeScript sources
The stylesheets are split so that you load only what you use. tabler.css is enough for most projects. The other files add country flags, payment provider logos, social icons, marketing layouts or alternative gray palettes.
Tabler is plain HTML and CSS, so it works with any framework. The documentation has a setup guide for each of these:
React Β· Vue Β· Angular Β· Next.js Β· Nuxt Β· SvelteKit Β· Astro Β· Laravel Β· Django Β· Rails Β· Symfony
Tabler isn't only the UI kit. A few other projects share the same look and feel:
| Project | What it is |
|---|---|
| Tabler Icons | Over 6,000 free MIT-licensed SVG icons, with packages for React, Vue, Svelte and Angular |
| Tabler Illustrations | Customizable SVG illustrations in light and dark variants |
| Tabler Emails | Responsive HTML email templates tested in more than 90 clients |
| Tabler Avatars | Avatar illustrations for user profiles and placeholders |
| Tabler Flags | Over 250 optimized SVG country flags, shipped in tabler-flags.css |
| Tabler Payments | Payment provider logos in light and dark versions, shipped in tabler-payments.css |
| tabler-starter | Minimal starter template, ready to open in StackBlitz, CodeSandbox or Codespaces |
| Tabler Icons for Figma | Figma plugin for inserting Tabler Icons into your designs |
The full documentation is at docs.tabler.io. It covers installation, customization, color modes, RTL, every component and plugin, and the frequently asked questions.
To see what changed in each release, check the changelog and the GitHub releases. Updating from an older version? Read the upgrade guide first. It lists every breaking change with a before-and-after example.
Tabler follows Semantic Versioning. Breaking changes only land in major releases, and every release comes with a changelog generated from changesets.
Tabler works in any current browser. The minimum versions below come from the CSS features it uses without a fallback: light-dark(), color-mix(), :has() and @property.
| Browser | Minimum version |
|---|---|
| Chrome, Edge | 123 |
| Firefox | 128 |
| Safari | 17.5 |
| Opera | 109 |
| iOS Safari | 17.5 |
| Samsung Internet | 27 |
See the browser support page for details.
We welcome contributions of all kinds. The contributing guide explains how to run the project locally (with Node.js and pnpm, Docker, or GitHub Codespaces), where things live in the repository, and what a pull request needs. By participating, you agree to follow our Code of Conduct.
The short version:
git clone https://github.com/tabler/tabler.git
cd tabler
pnpm install
pnpm run devThis starts the preview at http://localhost:3000 and the documentation at http://localhost:3010, both with live reload.
- Found a bug? Open a bug report.
- Have an idea? Open a feature request or start a discussion.
- Found a security issue? Please report it privately, see our security policy.
Tabler is free to use, and its development is funded by sponsors. If it saves you time, consider becoming a sponsor on GitHub or donating on PayPal.
- PaweΕ Kuna Β· @codecalm Β· codecalm.net
- BartΕomiej GawΔda Β· @BG-Software-BG
- Bartosz Dobija Β· @Bartosz-Do
Follow Tabler on X and Facebook for updates.
This project exists thanks to all the people who contribute.
Tabler is licensed under the MIT License.
Third-party libraries shipped in dist/libs keep their own licenses. One of them deserves a closer look. ApexCharts hasn't been MIT since version 5. It's dual-licensed now. Organizations under $2M in annual revenue can use it for free under the Community license, and anyone above that threshold pays. Redistribution needs a separate OEM license. Check the ApexCharts license options before you ship charts in a commercial product.