Guide · Open source

How to use Tabler: install, load CSS and build an admin dashboard

Updated 2026-10-29 · written with AI from the project's own documentation and checked against our catalogue data

Tabler is a free, open source admin dashboard UI kit built on Bootstrap 5. It gives you ready-made layouts, components and demo pages so you can build admin panels, dashboards and web apps without designing every screen yourself. This guide shows you how to load Tabler from a CDN or install it with npm, and how to start building a page with it.

Tablertabler/tabler · ★ 42k · MIT Install options & downloads

Quick start

1Pick a loading method. Use the CDN for a quick test, or npm install @tabler/core for a project with a build step.
2Add the stylesheet. Link dist/css/tabler.min.css from the CDN or import it in your entry file.
3Add the script. Include dist/js/tabler.min.js if you need the interactive components.
4Build with the classes. Use Bootstrap 5 style classes such as btn and btn-primary in your HTML.
5Check the demo pages. Browse preview.tabler.io to copy layouts and components that fit your screen.
6Read the docs. Use docs.tabler.io for customization, dark mode, RTL and the full component list.

What Tabler is and who it is for

Tabler is a set of layouts, components and demo pages for admin panels, dashboards and web apps. Every component is built on Bootstrap 5 and works in light and dark mode. The live demo includes more than 120 pages, covering dashboards, forms, tables, auth screens and error pages.

Tabler is a UI kit, not a finished application. You still write the code, data and logic for your app. It suits developers building internal admin panels quickly, teams already comfortable with Bootstrap, and developers using frameworks such as React, Vue or Laravel who want a styled base.

Good fit: internal admin panels, dashboards, projects that need dark mode or RTL layouts.
Not a fit: people who want a finished app with no coding, or projects that do not want Bootstrap styling.

Load Tabler from a CDN in one HTML file

The fastest way to try Tabler is to add its stylesheet and script to a plain HTML page. The CSS file is enough for most projects. Load the script too if you use the interactive components.

Save the example below as an HTML file and open it in a browser.

<!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>

Install Tabler with npm for a project

If you use a build tool or framework, install the package with npm. The package is published as @tabler/core. After installing, import the styles and scripts in your entry file.

The README also notes you can download the latest release as a ZIP archive from the releases page.

Installation guide with more options: docs.tabler.io (Getting started > Installation).

npm install @tabler/core

// then, in your entry file:
import '@tabler/core/dist/css/tabler.min.css'
import '@tabler/core/dist/js/tabler.min.js'

Know what is in the package

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. Load only the stylesheets you need. tabler.css covers most projects. Optional stylesheets add country flags, payment logos, social icons, marketing layouts or alternative gray palettes.

Tabler includes more than 20 bundled plugins in dist/libs, including charts, date pickers, selects, sliders, editors and drag and drop. Tabler Icons provides over 6,000 icons drawn on a 24×24 grid.

dist/css: tabler.css and optional stylesheets, each with .min and .rtl versions.
dist/js: tabler.js and tabler.esm.js, plus the standalone tabler-theme.js.
dist/libs: bundled plugins such as ApexCharts, Tom Select, Vanilla Calendar Pro and FullCalendar.
scss and js folders: Sass and TypeScript sources for customization.

Use Tabler with a framework or a coding agent

Tabler is plain HTML and CSS, so it works with any framework. The documentation has setup guides for React, Vue, Angular, Next.js, Nuxt, SvelteKit, Astro, Laravel, Django, Rails and Symfony.

If you use a coding agent, you can install the Tabler skill so the agent reads the real docs instead of guessing class names.

npx skills add tabler/tabler

Try Tabler without installing anything

To experiment without a local setup, the README points to the tabler-starter template. You can open it on StackBlitz, CodeSandbox or GitHub Codespaces.

Live demo: preview.tabler.io
Full documentation, including customization, color modes, RTL and every component: docs.tabler.io

What people use it for

Internal admin panel for managing users, orders or content.
Analytics dashboard with charts from the bundled ApexCharts plugin.
Back-office forms and tables styled with ready-made components.
Dashboard in a Laravel, Django or Rails app using the framework setup guide.
Admin interface for a right-to-left language using the RTL stylesheets.

Frequently asked questions

Is Tabler free to use?

Yes. Tabler is free and open source under the MIT licence, as stated in the project's README and package metadata. Check the LICENSE file in the repository for the full terms.

How do I install Tabler?

Run npm install @tabler/core in your project, or load the CSS and JavaScript from the jsDelivr CDN in an HTML file. The README also lists a ZIP download from the releases page.

Does Tabler require a specific framework or prerequisites?

The README does not list prerequisites. Tabler is plain HTML and CSS, so it works with any framework, and it is built on Bootstrap 5.

Does Tabler support dark mode and RTL?

Yes. Every component has a dark colour scheme, and every stylesheet ships in an RTL version.

How does Tabler compare to Bootstrap, AdminLTE, CoreUI or Argon Dashboard?

Tabler is built on Bootstrap 5 and adds ready-made admin layouts, components and demo pages. Bootstrap alone is a general CSS framework, while AdminLTE, CoreUI and Argon Dashboard are other admin templates. Compare their demos and licences against your needs.

Is Tabler a finished app I can deploy as is?

No. Tabler is a UI kit. It gives you layouts and components, but you still need to write the application logic and data handling for your project.

New agent skills, repos and AI tools — every week

The best new skills and open-source projects, the fastest-growing repos, and one free prompt. Five minutes to read. Unsubscribe anytime.

Our verdict

Tabler suits developers and teams who want a polished, Bootstrap 5 based admin interface quickly, with dark mode and RTL included. Pick something else if you need a finished app with no coding, you do not want Bootstrap styling, or you need a design system built from scratch.

Install options & downloads