`@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, Vanilla Calendar Pro, 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).
## License
Tabler is licensed under the [MIT License](https://github.com/tabler/tabler/blob/dev/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](https://apexcharts.com/license/) before you ship charts in a commercial product.
