tabler

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.

README.md Unescape Escape

Table of contents

🔎 Preview