[opensourcedex]

tabler is a free, open source design & prototyping project written in Astro and released under MIT. It has 41,716 GitHub stars, 4,426 forks and 66 open issues, and was last pushed 3 hours ago. On this registry it ranks #7 of 23 tracked projects in Design & Prototyping, with 5 head-to-head comparisons available.

What is tabler?

Tabler is a free and open-source HTML dashboard UI kit built on Bootstrap 5, aimed at developers and teams that need ready-made layouts, components and demo pages for admin panels, dashboards and web apps.

What it is

Tabler is a set of ready-made layouts, components and demo pages for admin panels, dashboards and web applications. Every component is built on Bootstrap 5, works in light and dark mode, and can be customised with Sass or CSS custom properties. Bootstrap 5 ships inside the package, so a project needs one CSS file and one JS file rather than a separate Bootstrap dependency. The kit lives in the Bootstrap and npm ecosystem as the @tabler/core package, and it is plain HTML and CSS, so it drops into React, Vue, Angular, Next.js, Nuxt, SvelteKit, Astro, Laravel, Django, Rails or Symfony through the setup guide published for each framework.

The concrete problem it solves is the start of an admin interface. Instead of hand-writing a dashboard boilerplate on top of Bootstrap, a team takes the layouts, components and demo pages that already exist and adapts them. The kit replaces that from-scratch boilerplate work: navigation shells, forms, tables, authentication screens, error pages and marketing layouts arrive styled, with a dark colour scheme and an RTL variant for every stylesheet.

Key capabilities

  • Ships Bootstrap 5 inside the package, so one CSS file and one JS file cover most projects.
  • Includes more than 120 demo pages on the live demo, covering dashboards, forms, tables, auth screens, error pages and marketing layouts.
  • Provides a dark colour scheme for every component, and ships every stylesheet in an RTL version.
  • Bundles more than 20 plugins in dist/libs, including ApexCharts, Tom Select, Vanilla Calendar Pro and FullCalendar.
  • Includes Sass sources that allow theme customisation with @use … with (), plus TypeScript sources and declarations in dist/types.
  • Splits optional stylesheets for flags, marketing, payments, socials, themes and vendors, so a project loads only what it uses.
  • Ships tabler.js, tabler.esm.js and a standalone tabler-theme.js, alongside the Tabler Icons set of over 6,000 icons drawn on a 24×24 grid.

Who uses it and how

  • Teams building internal admin panels or back-office dashboards who want a working shell before writing business logic.
  • Framework projects that install @tabler/core and import dist/css/tabler.min.css and dist/js/tabler.min.js into an entry file.
  • Static or server-rendered stacks such as Jekyll, Laravel, Django, Rails and Symfony that consume plain HTML and CSS layouts directly.
  • Developers evaluating the kit without installing anything, using the tabler-starter template on StackBlitz, CodeSandbox or GitHub Codespaces.
  • Projects that need payments, social or flags styling without pulling the full stylesheet set.

Getting started

Load Tabler from the CDN, or run npm install @tabler/core and import the compiled CSS and JS from the package. A ZIP archive of the latest release and an installation guide with framework-specific options are also available.

How it compares

The facts provide no list of paid products this project replaces, and they name no comparable dashboard kits. Tabler therefore stands alone in this registry as an MIT-licensed Bootstrap 5 dashboard UI kit rather than one option among several named alternatives.

When to use it — and when not to

Tabler is a front-end kit, so it brings no database, storage, SMTP or server component, and a self-hoster operates nothing on its behalf. Teams that need framework-native components rather than plain HTML and CSS markup must adapt the layouts themselves, and projects that only want a few controls may find the full stylesheet heavier than a smaller build. It suits projects that already accept Bootstrap conventions and want dashboards, admin panels and web app screens assembled quickly under the MIT licence.

project readme (upstream, from github) — read inline

Tabler

Free and open source HTML dashboard UI kit built on Bootstrap 5.

NPM version NPM Downloads jsDelivr hits Build License GitHub stars

Live demo · Documentation · Releases · Discussions

Table of contents

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

Tabler preview

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

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

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

🧩 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 isn't only the UI kit. A few other projects share the same look and feel:

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 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 the GitHub releases. Updating from an older version?

readme truncated — read the full docs on github

Frequently asked questions

Is tabler free to use?

tabler is open source under the MIT licence. There is no licence fee and no seat count — you can self-host it or, where the project offers one, pay a vendor for a managed version instead.

What does tabler do?

Tabler is free and open-source HTML Dashboard UI Kit built on Bootstrap

What is tabler written in?

tabler is primarily written in Astro. Its source is publicly available at https://github.com/tabler/tabler, and it has 41,716 GitHub stars.