@tabler/core is the CSS and JavaScript framework behind Tabler. It has the layouts, components and utilities you need for admin panels, dashboards and web apps. Bootstrap 5 ships inside the package. Every component works in light and dark mode, and every stylesheet has an RTL version.

Installation

Install the package with npm or your preferred JavaScript package manager:

npm install @tabler/core

All files in the package are also available over a CDN:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@tabler/core@latest/dist/css/tabler.min.css" />
<script src="https://cdn.jsdelivr.net/npm/@tabler/core@latest/dist/js/tabler.min.js"></script>

If you don't use a package manager, download the latest release as a ZIP archive.

Usage

Compiled CSS and JavaScript

Import the compiled files once in your entry file. The JavaScript bundle includes Bootstrap, so you don't need to install it separately:

import '@tabler/core/dist/css/tabler.min.css'
import '@tabler/core/dist/js/tabler.min.js'

There's also an ES module build with named exports, which is handy when you create components from code:

import { Tooltip } from '@tabler/core'

new Tooltip(document.querySelector('[data-bs-toggle="tooltip"]'))

TypeScript declarations are included in dist/types.

Optional stylesheets

tabler.css covers the UI kit. Load the extra stylesheets only when you need them:

| File | Adds | | ---------------------- | ---------------------------------------------------- | | tabler-flags.css | Country flag icons | | tabler-payments.css | Payment provider logos | | tabler-socials.css | Social media icons | | tabler-marketing.css | Landing page and marketing layouts | | tabler-themes.css | Alternative gray palettes for data-bs-theme-base | | tabler-vendors.css | Styles for the bundled third-party plugins | | tabler-props.css | Design tokens as CSS custom properties, on their own |

Each file has a .min version and a .rtl version in dist/css.

Sass

To customize the theme, compile the Sass sources and override variables with @use … with ():

@use '@tabler/core/scss/tabler' with (
  $primary: #f11d46,
  $border-radius: 8px
);

The sources write custom properties without a prefix. Add postcss-prefix-custom-properties after Sass in your pipeline to get the public --tblr- names. The upgrade guide has the full setup.

Plugins

The third-party libraries used by the demo pages (ApexCharts, Tom Select, Vanilla Calendar Pro, FullCalendar, Dropzone and others) are bundled in dist/libs. The list of shipped files is in libs.json, and each plugin has its own page in the plugins documentation.

What's included

@tabler/core/
├── dist/
│   ├── css/       tabler.css and the optional stylesheets, each with .min and .rtl versions
│   ├── js/        tabler.js and tabler.esm.js, plus the standalone tabler-theme.js
│   ├── libs/      bundled third-party plugins
│   ├── types/     TypeScript declarations
│   ├── fonts/
│   └── img/
├── scss/          Sass sources
├── js/            TypeScript sources
└── libs.json      list of bundled plugin files

Upgrading

Updating from an older version? Read the upgrade guide first. It lists every breaking change with a before-and-after example. Release notes live in the changelog.

Browser support

Tabler works in any current browser. The CSS uses light-dark(), color-mix(), :has() and @property without a fallback. That sets the floor at Chrome and Edge 123, Firefox 128, Safari 17.5, Opera 109, iOS 17.5 and Samsung Internet 27. See the browser support page for details.

Documentation

The full documentation is at docs.tabler.io. It covers installation, the framework guides, customization, color modes, RTL, and every component and plugin. The demo pages are at preview.tabler.io.

Contributing

We welcome contributions of all kinds. See the contributing guide to get started, open an issue to report a bug or request a feature, or join the discussions.

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.

License

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.