README

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.










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

 🚀 Quick start

Load Tabler from the CDN and start building:

html


  
    
    
    Tabler demo
    
  
  
    Hello, Tabler!
    Primary button
    
  



Or install the package with npm or your preferred JavaScript package manager:

sh
npm install @tabler/core


Then import the styles and scripts in your entry file:

js
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.

Working with a coding agent? Install the Tabler skill, so the agent reads the real docs instead of guessing class names:

sh
npx skills add tabler/tabler


 📦 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:

text
@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, Vanilla Calendar Pro, 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.

Top issues

Discussions

Latest release

Core changes

- 7ecb816: Fixed .card-table bottom border on the last tfoot row and on row header th cells, and kept the rule above a tfoot.
- 4d92aae: Updated $border-color-translucent-dark to white at 8% so card, table and dropdown borders stay visible in dark mode.
- dd50698: Fixed Tabler Icons webfont .ti size in .empty-icon and its alignment in .dropdown-item-icon.
- 141b9f3: Fixed dropdown menus in an expanded .navbar overflowing the viewport edge by letting Popper position them.
- 9ccd968: Fixed hard-coded colors and shadows in .ribbon, .loader, .stars, .card-cover, forms and marke