Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
Free and open source HTML dashboard UI kit built on Bootstrap 5.
Live demo · Documentation · Releases · Discussions
Table of contents
- Preview
- Quick start
- What's included
- Frameworks
- Ecosystem
- Documentation
- Browser support
- Contributing
- Sponsors
- Creators
- Contributors
- License
🔎 Preview
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.
- Built on Bootstrap 5. Bootstrap ships inside the package, so you only need one CSS and one JS file.
- 120+ demo pages. Dashboards, forms, tables, auth screens, error pages, marketing layouts and more, all in the live demo.
- Dark mode and RTL. Every component has a dark color scheme, and every stylesheet ships in an RTL version.
- Over 6,000 icons. Tabler Icons are drawn on a 24×24 grid and match the UI kit.
- 20+ plugins included. Charts, date pickers, selects, sliders, editors, drag and drop and other libraries are bundled in
dist/libs. - Sass sources and TypeScript types. Customize the theme with
@use … with ()and use typed JavaScript components.
🚀 Quick start
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/core
Then 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, or try Tabler without installing anything: open the tabler-starter template on StackBlitz, CodeSandbox or GitHub Codespaces.
See the installation guide for more options.
📦 What's included
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.
🧩 Frameworks
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
🌍 Ecosystem
Tabler is more than the UI kit. These projects share the same design language:
| 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 |
📖 Documentation
The full documentation is available 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 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 ships a changeset-based changelog.
🌐 Browser support
Tabler runs in every current browser. The minimum versions below come from the CSS features it relies on 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.
🤝 Contributing
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 dev
This 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.
💛 Sponsors
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.
🤓 Creators
- Paweł Kuna · @codecalm · codecalm.net
- Bartłomiej Gawęda · @BG-Software-BG
- Bartosz Dobija · @Bartosz-Do
Follow Tabler on X and Facebook for updates.
👨🚀 Contributors
This project exists thanks to all the people who contribute.
📄 License
Tabler is licensed under the MIT License.
Third-party libraries shipped in dist/libs keep their own licenses. One of them needs attention: ApexCharts is not MIT from version 5 on. It is dual-licensed, free under its Community license for organizations under $2M in annual revenue and paid above that threshold, with a separate OEM license for
redistribution. Check the ApexCharts license options before you ship charts in a commercial product.