Free and open source HTML dashboard UI kit built on Bootstrap 5.
Live demo · Documentation · GitHub · Changelog
`@tabler/core` is the CSS and JavaScript framework behind [Tabler](https://tabler.io). 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: ```sh npm install @tabler/core ``` All files in the package are also available over a CDN: ```html ``` If you don't use a package manager, [download the latest release](https://github.com/tabler/tabler/releases) 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: ```js 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: ```js 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 ()`: ```scss @use '@tabler/core/scss/tabler' with ( $primary: #f11d46, $border-radius: 8px ); ``` The sources write custom properties without a prefix. Add [postcss-prefix-custom-properties](https://www.npmjs.com/package/postcss-prefix-custom-properties) after Sass in your pipeline to get the public `--tblr-` names. The [upgrade guide](https://docs.tabler.io/ui/getting-started/upgrade/#custom-property-prefix-moved-to-postcss) has the full setup. ### Plugins The third-party libraries used by the demo pages (ApexCharts, Tom Select, Litepicker, FullCalendar, Dropzone and others) are bundled in `dist/libs`. The list of shipped files is in [libs.json](https://github.com/tabler/tabler/blob/dev/core/libs.json), and each plugin has its own page in the [plugins documentation](https://docs.tabler.io/ui/plugins/). ## What's included ```text @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](https://docs.tabler.io/ui/getting-started/upgrade/) first. It lists every breaking change with a before-and-after example. Release notes live in the [changelog](https://github.com/tabler/tabler/blob/dev/core/CHANGELOG.md). ## 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](https://docs.tabler.io/ui/getting-started/browser-support/) for details. ## Documentation The full documentation is at [docs.tabler.io](https://docs.tabler.io/). It covers installation, the [framework guides](https://docs.tabler.io/ui/getting-started/frameworks/), customization, color modes, RTL, and every component and plugin. The demo pages are at [preview.tabler.io](https://preview.tabler.io). ## Contributing We welcome contributions of all kinds. See the [contributing guide](https://github.com/tabler/tabler/blob/dev/CONTRIBUTING.md) to get started, [open an issue](https://github.com/tabler/tabler/issues/new/choose) to report a bug or request a feature, or join the [discussions](https://github.com/tabler/tabler/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](https://github.com/sponsors/codecalm) or [donating on PayPal](https://paypal.me/codecalm).
