Mirrors/tabler
1
0 Fork 0
mirror of https://github.com/tabler/tabler.git synced 2026-10-12 05:06:55 +04:00
Code Issues Projects Releases Wiki Activity

Rewrite the README files and switch the framework guides to @use (#2946)

Browse Source
This commit is contained in:
Paweł Kuna authored and GitHub committed 2026-09-03 01:35:02 +02:00
1 parent 85ac4703ba
commit c71a321701
16 files changed
+281 -207
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

.changeset/core-readme-package-guide.md
+5
View File
@@ -0,0 +1,5 @@
---
"@tabler/core": patch
---
Updated the `@tabler/core` README with package usage, optional stylesheets, Sass setup and browser support.
.changeset/framework-guides-sass-use.md
+5
View File
@@ -0,0 +1,5 @@
---
"@tabler/docs": patch
---
Fixed the Sass import in the framework guides to use `@use` instead of the deprecated `@import`.
CONTRIBUTING.md
+17
View File
@@ -24,6 +24,23 @@ This starts the preview website at [http://localhost:3000](http://localhost:3000
You can also skip the local setup entirely: open the repository in [GitHub Codespaces](https://codespaces.new/tabler/tabler) or a VS Code Dev Container — the configuration in `.devcontainer/` installs Node.js, pnpm and all dependencies for you. You can also skip the local setup entirely: open the repository in [GitHub Codespaces](https://codespaces.new/tabler/tabler) or a VS Code Dev Container — the configuration in `.devcontainer/` installs Node.js, pnpm and all dependencies for you.
### Docker
If you prefer not to install Node.js, build and run the provided image from the repository root:
```sh
docker build -t tabler .
docker run -p 3000:3000 -p 3010:3010 -v $(pwd)/core:/app/core -v $(pwd)/preview:/app/preview -v $(pwd)/docs:/app/docs -v $(pwd)/shared:/app/shared tabler
```
This mounts the source directories into the container and exposes the preview on port 3000 and the documentation on port 3010. Edit anything in `core/`, `preview/`, `docs/` or `shared/` and the browser refreshes after the rebuild.
Or use Docker Compose, which applies the same mounts and ports:
```sh
docker compose up --build
```
## Where things live ## Where things live
- `core/` — the framework: SCSS (`core/scss/`) and JavaScript (`core/js/`) - `core/` — the framework: SCSS (`core/scss/`) and JavaScript (`core/js/`)
README.md
+147 -139
View File
@@ -1,87 +1,67 @@
<p align="center"> <p align="center">
<a href="https://tabler.io"><img src="https://raw.githubusercontent.com/tabler/tabler/refs/heads/dev/shared/static/logo.svg" alt="Tabler" width="300"></a> <a href="https://tabler.io">
<picture>
<source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/tabler/tabler/dev/shared/static/logo-white.svg">
<img src="https://raw.githubusercontent.com/tabler/tabler/dev/shared/static/logo.svg" alt="Tabler" width="300">
</picture>
</a>
</p> </p>
<p align="center"> <p align="center">
A premium and open source dashboard template with a responsive and high-quality UI. Free and open source HTML dashboard UI kit built on Bootstrap 5.
</p> </p>
<p align="center"> <p align="center">
<a href="https://www.npmjs.com/package/@tabler/core" target="__blank"><img src="https://img.shields.io/npm/v/@tabler/core?color=1864ab&label=Latest+version" alt="NPM version"></a> <a href="https://www.npmjs.com/package/@tabler/core" target="_blank"><img src="https://img.shields.io/npm/v/@tabler/core?color=1864ab&label=Latest+version" alt="NPM version"></a>
<a href="https://www.npmjs.com/package/@tabler/core" target="__blank"><img alt="NPM Downloads" src="https://img.shields.io/npm/dm/@tabler/core?color=1971c2&label=Downloads"></a> <a href="https://www.npmjs.com/package/@tabler/core" target="_blank"><img alt="NPM Downloads" src="https://img.shields.io/npm/dm/@tabler/core?color=1971c2&label=Downloads"></a>
<a href="https://preview.tabler.io" target="__blank"><img src="https://img.shields.io/static/v1?label=Demo&message=preview&color=228be6" alt="Tabler preview"></a> <a href="https://www.jsdelivr.com/package/npm/@tabler/core" target="_blank"><img alt="jsDelivr hits" src="https://img.shields.io/jsdelivr/npm/hm/@tabler/core?color=1c7ed6&label=jsDelivr"></a>
<a href="https://github.com/tabler/tabler/blob/dev/LICENSE"><img src="https://img.shields.io/npm/l/tabler.svg?label=License&message=MIT&color=1c7ed6" alt="License"></a> <a href="https://github.com/tabler/tabler/actions/workflows/build.yml" target="_blank"><img alt="Build" src="https://github.com/tabler/tabler/actions/workflows/build.yml/badge.svg"></a>
<a href="https://github.com/tabler/tabler/actions/workflows/test.yml" target="__blank"><img alt="Test build" src="https://github.com/tabler/tabler/actions/workflows/test.yml/badge.svg"></a> <a href="https://github.com/tabler/tabler/blob/dev/LICENSE"><img src="https://img.shields.io/npm/l/@tabler/core?label=License&color=228be6" alt="License"></a>
<a href="https://github.com/tabler/tabler" target="__blank"><img alt="GitHub stars" src="https://img.shields.io/github/stars/tabler/tabler?style=social"></a> <a href="https://github.com/tabler/tabler" target="_blank"><img alt="GitHub stars" src="https://img.shields.io/github/stars/tabler/tabler?style=social"></a>
</p> </p>
<p align="center"> <p align="center">
<a href="https://preview.tabler.io">Live demo</a> · <a href="https://docs.tabler.io">Documentation</a> · <a href="https://github.com/tabler/tabler/releases">Releases</a> · <a href="https://github.com/tabler/tabler/discussions">Discussions</a> <a href="https://preview.tabler.io">Live demo</a> · <a href="https://docs.tabler.io">Documentation</a> · <a href="https://github.com/tabler/tabler/releases">Releases</a> · <a href="https://github.com/tabler/tabler/discussions">Discussions</a>
</p> </p>
## 💛 Sponsors ## Table of contents
**If you want to support our project and help us grow it, you can [become a sponsor on GitHub](https://github.com/sponsors/codecalm) or just [donate on PayPal](https://paypal.me/codecalm) :)** - [Preview](#-preview)
- [Quick start](#-quick-start)
<p align="center"> - [What's included](#-whats-included)
<a href="https://github.com/sponsors/codecalm"> - [Frameworks](#-frameworks)
<img src="https://raw.githubusercontent.com/tabler/sponsors/main/sponsors.svg" alt="Tabler sponsors"> - [Ecosystem](#-ecosystem)
</a> - [Documentation](#-documentation)
</p> - [Browser support](#-browser-support)
- [Contributing](#-contributing)
- [Sponsors](#-sponsors)
- [Creators](#-creators)
- [Contributors](#-contributors)
- [License](#-license)
## 🔎 Preview ## 🔎 Preview
Tabler is fully responsive and compatible with all modern browsers. Thanks to its modern and user-friendly design you can create a fully functional interface that users will love! Choose the layouts and components you need and customize them to make your design consistent and eye-catching. Every component has been created with attention to detail to make your interface beautiful! [Show me a demo](https://preview.tabler.io) 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.
<p align="center"> <p align="center">
<a href="https://preview.tabler.io" target="_blank"> <a href="https://preview.tabler.io" target="_blank">
<img src="https://raw.githubusercontent.com/tabler/tabler/dev/shared/static/tabler-preview.png" alt="Tabler Preview"> <picture>
</a> <source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/tabler/tabler/dev/shared/static/tabler-preview-dark.png">
<img src="https://raw.githubusercontent.com/tabler/tabler/dev/shared/static/tabler-preview.png" alt="Tabler preview">
</picture>
</a>
</p> </p>
## 🚀 Features - **Built on Bootstrap 5.** Bootstrap ships inside the package, so you only need one CSS and one JS file.
- **120+ demo pages.** Dashboards, forms, tables, auth screens, error pages, marketing layouts and more, all in the [live demo](https://preview.tabler.io).
- **Dark mode and RTL.** Every component has a dark color scheme, and every stylesheet ships in an RTL version.
- **Over 6,000 icons.** [Tabler Icons](https://tabler.io/icons) are drawn on a 24×24 grid and match the UI kit.
- **20+ plugins included.** Charts, date pickers, selects, sliders, editors, drag and drop and other libraries are bundled in `dist/libs`.
- **Sass sources and TypeScript types.** Customize the theme with `@use … with ()` and use typed JavaScript components.
We've created this admin panel for everyone who wants to create templates based on our pre-made components. Our mission is to deliver a user-friendly, clear and easy administration panel that can be used by both simple websites and sophisticated systems. The only requirement is basic HTML and CSS knowledge — as a reward, you'll be able to manage and visualize different types of data in the easiest possible way! ## 🚀 Quick start
- **Responsive:** With the support for mobile, tablet and desktop displays, it doesn't matter what device you're using. Tabler is responsive in all major browsers. Load Tabler from the CDN and start building:
- **Cross Browser:** Our theme works perfectly with the latest Chrome, Firefox, Safari, Opera, Edge and mobile browsers. We work hard to provide continuous support for them.
- **HTML5 & CSS3:** We use only modern web technologies, such as HTML5 and CSS3. Our theme includes some subtle CSS3 animations, which will help you attract attention.
- **Clean Code:** We followed Bootstrap's guidelines carefully to make your integration as easy as possible. All code is handwritten and W3C valid.
- **Demo pages:** Tabler features over 20 individual pages using various components, which gives you the freedom to choose and combine. All components can vary in color and styling that you can easily modify using Sass. Sky is the limit!
## 📦 Installation
### Package managers
Tabler is distributed via npm. You can install it with npm or your preferred JavaScript package manager:
```sh
npm install --save @tabler/core
```
### CDN
All files included in the `@tabler/core` npm package are also available over a CDN.
JavaScript:
```html
<script src="https://cdn.jsdelivr.net/npm/@tabler/core@latest/dist/js/tabler.min.js"></script>
```
Styles:
```html
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@tabler/core@latest/dist/css/tabler.min.css">
```
### Download
If you don't use a package manager, you can [download the latest release](https://github.com/tabler/tabler/releases) as a ZIP archive.
### Quick start
Create an HTML file with Tabler's CSS and JavaScript loaded from the CDN and start building:
```html ```html
<!doctype html> <!doctype html>
@@ -100,112 +80,140 @@ Create an HTML file with Tabler's CSS and JavaScript loaded from the CDN and sta
</html> </html>
``` ```
Or try it without installing anything: open the [tabler-starter](https://github.com/tabler/tabler-starter) template on [StackBlitz](https://stackblitz.com/github/tabler/tabler-starter), [CodeSandbox](https://codesandbox.io/s/github/tabler/tabler-starter) or [GitHub Codespaces](https://codespaces.new/tabler/tabler-starter). 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](https://github.com/tabler/tabler/releases) as a ZIP archive, or try Tabler without installing anything: open the [tabler-starter](https://github.com/tabler/tabler-starter) template on [StackBlitz](https://stackblitz.com/github/tabler/tabler-starter),
[CodeSandbox](https://codesandbox.io/s/github/tabler/tabler-starter) or [GitHub Codespaces](https://codespaces.new/tabler/tabler-starter).
See the [installation guide](https://docs.tabler.io/ui/getting-started/installation/) 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:
```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, Litepicker, 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](https://docs.tabler.io/ui/getting-started/frameworks/react/) · [Vue](https://docs.tabler.io/ui/getting-started/frameworks/vue/) · [Angular](https://docs.tabler.io/ui/getting-started/frameworks/angular/) · [Next.js](https://docs.tabler.io/ui/getting-started/frameworks/nextjs/) ·
[Nuxt](https://docs.tabler.io/ui/getting-started/frameworks/nuxt/) · [SvelteKit](https://docs.tabler.io/ui/getting-started/frameworks/sveltekit/) · [Astro](https://docs.tabler.io/ui/getting-started/frameworks/astro/) · [Laravel](https://docs.tabler.io/ui/getting-started/frameworks/laravel/) ·
[Django](https://docs.tabler.io/ui/getting-started/frameworks/django/) · [Rails](https://docs.tabler.io/ui/getting-started/frameworks/rails/) · [Symfony](https://docs.tabler.io/ui/getting-started/frameworks/symfony/)
## 🌍 Ecosystem
Tabler is more than the UI kit. These projects share the same design language:
| Project | What it is |
| ---------------------------------------------------------------------- | ---------------------------------------------------------------------------------------- |
| [Tabler Icons](https://github.com/tabler/tabler-icons) | Over 6,000 free MIT-licensed SVG icons, with packages for React, Vue, Svelte and Angular |
| [Tabler Illustrations](https://tabler.io/illustrations) | Customizable SVG illustrations in light and dark variants |
| [Tabler Emails](https://tabler.io/emails) | Responsive HTML email templates tested in more than 90 clients |
| [Tabler Avatars](https://tabler.io/avatars) | Avatar illustrations for user profiles and placeholders |
| [Tabler Flags](https://github.com/tabler/tabler-flags) | Over 250 optimized SVG country flags, shipped in `tabler-flags.css` |
| [Tabler Payments](https://docs.tabler.io/payments/) | Payment provider logos in light and dark versions, shipped in `tabler-payments.css` |
| [tabler-starter](https://github.com/tabler/tabler-starter) | Minimal starter template, ready to open in StackBlitz, CodeSandbox or Codespaces |
| [Tabler Icons for Figma](https://github.com/tabler/tabler-icons-figma) | Figma plugin for inserting Tabler Icons into your designs |
## 📖 Documentation ## 📖 Documentation
The full documentation is available at [docs.tabler.io](https://docs.tabler.io/). To see what changed in each release, check the [changelog](core/CHANGELOG.md) and [GitHub releases](https://github.com/tabler/tabler/releases). The full documentation is available at [docs.tabler.io](https://docs.tabler.io/). It covers installation, customization, color modes, RTL, every component and plugin, and the [frequently asked questions](https://docs.tabler.io/ui/getting-started/faq/).
### Upgrading to 1.5 To see what changed in each release, check the [changelog](core/CHANGELOG.md) and [GitHub releases](https://github.com/tabler/tabler/releases). 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.
Tabler 1.5 ships Bootstrap inside the package, moves the Sass sources to the module system, and drops a few unused variables. Read the [upgrade guide](https://docs.tabler.io/ui/getting-started/upgrade/) before updating from 1.4 — it lists every breaking change with a before-and-after example. Tabler follows [Semantic Versioning](https://semver.org/). Breaking changes only land in major releases, and every release ships a changeset-based changelog.
## 🛠️ Development ## 🌐 Browser support
To build a copy of Tabler locally, you have two options: set up the development tools directly on your device, or use the provided Docker setup. You can also start right away in the cloud with [GitHub Codespaces](https://codespaces.new/tabler/tabler) — the dev container installs everything for you. Tabler runs in every current browser. The minimum versions below come from the CSS features it relies on without a fallback: `light-dark()`, `color-mix()`, `:has()` and `@property`.
### Local setup | Browser | Minimum version |
| ---------------- | --------------- |
| Chrome, Edge | 123 |
| Firefox | 128 |
| Safari | 17.5 |
| Opera | 109 |
| iOS Safari | 17.5 |
| Samsung Internet | 27 |
1. Install [Node.js](https://nodejs.org/download/) (version 22.12 or newer) and [pnpm](https://pnpm.io/installation) (we recommend [Corepack](https://pnpm.io/installation#using-corepack)). See the [browser support page](https://docs.tabler.io/ui/getting-started/browser-support/) for details.
2. Clone the repository:
```sh
git clone https://github.com/tabler/tabler.git
cd tabler
```
3. Install dependencies:
```sh
pnpm install
```
4. Start the development servers:
```sh
pnpm run dev
```
5. Open [http://localhost:3000](http://localhost:3000) to view the preview website, or [http://localhost:3010](http://localhost:3010) to view the documentation website. Changes to most source files of Tabler core, preview and docs will rebuild the application and refresh the page.
To perform a one-off production build without a dev server, run:
```sh
pnpm run build
```
### Docker
1. From the root `tabler` directory, build the image:
```sh
docker build -t tabler .
```
2. Run the image. The following command mounts the source directories into the container and exposes port 3000 (preview) and port 3010 (documentation):
```sh
docker run -p 3000:3000 -p 3010:3010 -v $(pwd)/core:/app/core -v $(pwd)/preview:/app/preview -v $(pwd)/docs:/app/docs -v $(pwd)/shared:/app/shared tabler
```
3. Open [http://localhost:3000](http://localhost:3000) (preview) or [http://localhost:3010](http://localhost:3010) (documentation). Edit anything in the `core/`, `preview/`, `docs/` or `shared/` folders and watch your browser refresh the page after it has been rebuilt.
Alternatively, use Docker Compose: `docker compose up --build` builds and starts the container with the same mounts, ports and URLs.
## 🤝 Contributing ## 🤝 Contributing
We welcome contributions of all kinds! Please read the [contributing guide](CONTRIBUTING.md) to learn about the development workflow, project structure and conventions. By participating, you agree to follow our [Code of Conduct](.github/CODE_OF_CONDUCT.md). We welcome contributions of all kinds. The [contributing guide](CONTRIBUTING.md) explains how to run the project locally (with Node.js and pnpm, Docker, or [GitHub Codespaces](https://codespaces.new/tabler/tabler)), where things live in the repository, and what a pull request needs. By participating, you agree to
follow our [Code of Conduct](.github/CODE_OF_CONDUCT.md).
The short version:
```sh
git clone https://github.com/tabler/tabler.git
cd tabler
pnpm install
pnpm run dev
```
This starts the preview at [http://localhost:3000](http://localhost:3000) and the documentation at [http://localhost:3010](http://localhost:3010), both with live reload.
- **Found a bug?** [Open a bug report](https://github.com/tabler/tabler/issues/new?template=bug_report.yml). - **Found a bug?** [Open a bug report](https://github.com/tabler/tabler/issues/new?template=bug_report.yml).
- **Have an idea?** [Open a feature request](https://github.com/tabler/tabler/issues/new?template=feature_request.yml) or start a [discussion](https://github.com/tabler/tabler/discussions). - **Have an idea?** [Open a feature request](https://github.com/tabler/tabler/issues/new?template=feature_request.yml) or start a [discussion](https://github.com/tabler/tabler/discussions).
- **Found a security issue?** Please report it privately — see our [security policy](SECURITY.md). - **Found a security issue?** Please report it privately, see our [security policy](SECURITY.md).
## 💛 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).
<p align="center">
<a href="https://github.com/sponsors/codecalm">
<img src="https://raw.githubusercontent.com/tabler/sponsors/main/sponsors.svg" alt="Tabler sponsors">
</a>
</p>
## 🤓 Creators ## 🤓 Creators
**Paweł Kuna** - **Paweł Kuna** · [@codecalm](https://github.com/codecalm) · [codecalm.net](https://codecalm.net)
- **Bartłomiej Gawęda** · [@BG-Software-BG](https://github.com/BG-Software-BG)
- **Bartosz Dobija** · [@Bartosz-Do](https://github.com/Bartosz-Do)
- <https://x.com/codecalm> Follow Tabler on [X](https://x.com/tabler_io) and [Facebook](https://www.facebook.com/tabler.io) for updates.
- <https://github.com/codecalm>
- <https://codecalm.net>
**Bartłomiej Gawęda**
- <https://x.com/B_Gaweda>
- <https://github.com/BG-Software-BG>
**Bartosz Dobija**
- <https://github.com/Bartosz-Do>
## 👨‍🚀 Contributors ## 👨‍🚀 Contributors
This project exists thanks to all the people who contribute. This project exists thanks to all the people who contribute.
<a href="https://github.com/tabler/tabler/graphs/contributors"> <a href="https://github.com/tabler/tabler/graphs/contributors">
<img src="https://opencollective.com/tabler/contributors.svg?width=890&button=false" alt="Tabler contributors"> <img src="https://opencollective.com/tabler/contributors.svg?width=890&button=false" alt="Tabler contributors">
</a> </a>
## 📣 Social media
Stay up to date by joining our community on [X](https://x.com/tabler_io) and [Facebook](https://www.facebook.com/tabler.io).
## 📄 License ## 📄 License
Tabler is licensed under the [MIT License](LICENSE). Tabler is licensed under the [MIT License](LICENSE).
Third-party libraries shipped in `dist/libs` keep their own licenses. One of them needs Third-party libraries shipped in `dist/libs` keep their own licenses. One of them needs attention: **ApexCharts is not MIT from version 5 on**. It is dual-licensed, free under its Community license for organizations under $2M in annual revenue and paid above that threshold, with a separate OEM license for
attention: **ApexCharts is not MIT from version 5 on**. It is dual-licensed - free under redistribution. Check the [ApexCharts license options](https://apexcharts.com/license/) before you ship charts in a commercial product.
its Community license for organizations under $2M in annual revenue, and paid above that
threshold, with a separate OEM license for redistribution. Check the
[ApexCharts license options](https://apexcharts.com/license/) before you ship charts in a
commercial product.
core/README.md
+96 -57
View File
@@ -1,103 +1,142 @@
<p align="center"> <p align="center">
<a href="https://tabler.io"><img src="https://raw.githubusercontent.com/tabler/tabler/refs/heads/dev/shared/static/logo.svg" alt="Tabler" width="300"></a> <a href="https://tabler.io"><img src="https://raw.githubusercontent.com/tabler/tabler/dev/shared/static/logo.svg" alt="Tabler" width="300"></a>
</p> </p>
<p align="center"> <p align="center">
A premium and open source dashboard template with a responsive and high-quality UI. Free and open source HTML dashboard UI kit built on Bootstrap 5.
</p> </p>
<p align="center"> <p align="center">
<a href="https://www.npmjs.com/package/@tabler/core" target="_blank"><img src="https://img.shields.io/npm/v/@tabler/core?color=1864ab&label=Latest+version" alt="NPM version"></a> <a href="https://www.npmjs.com/package/@tabler/core" target="_blank"><img src="https://img.shields.io/npm/v/@tabler/core?color=1864ab&label=Latest+version" alt="NPM version"></a>
<a href="https://www.npmjs.com/package/@tabler/core" target="_blank"><img alt="NPM Downloads" src="https://img.shields.io/npm/dm/@tabler/core?color=1971c2&label=Downloads"></a> <a href="https://www.npmjs.com/package/@tabler/core" target="_blank"><img alt="NPM Downloads" src="https://img.shields.io/npm/dm/@tabler/core?color=1971c2&label=Downloads"></a>
<a href="https://github.com/tabler/tabler/blob/dev/LICENSE"><img src="https://img.shields.io/npm/l/tabler.svg?label=License&message=MIT&color=1c7ed6" alt="License"></a> <a href="https://github.com/tabler/tabler/blob/dev/LICENSE"><img src="https://img.shields.io/npm/l/@tabler/core?label=License&color=228be6" alt="License"></a>
</p> </p>
<p align="center"> <p align="center">
<a href="https://preview.tabler.io">Live demo</a> · <a href="https://docs.tabler.io">Documentation</a> · <a href="https://github.com/tabler/tabler">GitHub</a> · <a href="https://github.com/tabler/tabler/blob/dev/core/CHANGELOG.md">Changelog</a> <a href="https://preview.tabler.io">Live demo</a> · <a href="https://docs.tabler.io">Documentation</a> · <a href="https://github.com/tabler/tabler">GitHub</a> · <a href="https://github.com/tabler/tabler/blob/dev/core/CHANGELOG.md">Changelog</a>
</p> </p>
## 🔎 Preview `@tabler/core` is the CSS and JavaScript framework behind [Tabler](https://tabler.io): layouts, components and utilities 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.
Tabler is fully responsive and compatible with all modern browsers. Thanks to its modern and user-friendly design you can create a fully functional interface that users will love! Choose the layouts and components you need and customize them to make your design consistent and eye-catching. Every component has been created with attention to detail to make your interface beautiful! ## Installation
<p align="center"> Install the package with npm or your preferred JavaScript package manager:
<a href="https://preview.tabler.io" target="_blank">
<img src="https://raw.githubusercontent.com/tabler/tabler/dev/shared/static/tabler-preview.png" alt="Tabler Preview">
</a>
</p>
## 📦 Installation
Install `@tabler/core` with npm or your preferred JavaScript package manager:
```sh ```sh
npm install --save @tabler/core npm install @tabler/core
``` ```
### CDN All files in the package are also available over a CDN:
All files included in the `@tabler/core` npm package are also available over a CDN.
JavaScript:
```html ```html
<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> <script src="https://cdn.jsdelivr.net/npm/@tabler/core@latest/dist/js/tabler.min.js"></script>
``` ```
Styles: If you don't use a package manager, [download the latest release](https://github.com/tabler/tabler/releases) as a ZIP archive.
```html ## Usage
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@tabler/core@latest/dist/css/tabler.min.css">
### 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'
``` ```
### Quick start The package also has an ES module build with named exports, useful when you create components from code:
Create an HTML file with Tabler's CSS and JavaScript loaded from the CDN and start building: ```js
import { Tooltip } from '@tabler/core'
```html new Tooltip(document.querySelector('[data-bs-toggle="tooltip"]'))
<!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 try it without installing anything: open the [tabler-starter](https://github.com/tabler/tabler-starter) template on [StackBlitz](https://stackblitz.com/github/tabler/tabler-starter), [CodeSandbox](https://codesandbox.io/s/github/tabler/tabler-starter) or [GitHub Codespaces](https://codespaces.new/tabler/tabler-starter). TypeScript declarations are included in `dist/types`.
## 📖 Documentation ### Optional stylesheets
The full documentation is available at [docs.tabler.io](https://docs.tabler.io/). Release notes live in the [changelog](https://github.com/tabler/tabler/blob/dev/core/CHANGELOG.md). `tabler.css` covers the UI kit. Load the extra stylesheets only when you need them:
## 🤝 Contributing | 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 |
We welcome contributions of all kinds! See the [contributing guide](https://github.com/tabler/tabler/blob/dev/CONTRIBUTING.md) to get started. Each file has a `.min` version and a `.rtl` version in `dist/css`.
## 💛 Sponsors ### Sass
**If you want to support our project and help us grow it, you can [become a sponsor on GitHub](https://github.com/sponsors/codecalm) or just [donate on PayPal](https://paypal.me/codecalm) :)** 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 runs in every current browser. The CSS relies on `light-dark()`, `color-mix()`, `:has()` and `@property` without a fallback, which 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 available at [docs.tabler.io](https://docs.tabler.io/): installation, [framework guides](https://docs.tabler.io/ui/getting-started/frameworks/), customization, color modes, RTL, and every component and plugin. 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).
<p align="center"> <p align="center">
<a href="https://github.com/sponsors/codecalm"> <a href="https://github.com/sponsors/codecalm">
<img src="https://cdn.jsdelivr.net/gh/tabler/sponsors@latest/sponsors.svg" alt="Tabler sponsors"> <img src="https://raw.githubusercontent.com/tabler/sponsors/main/sponsors.svg" alt="Tabler sponsors">
</a> </a>
</p> </p>
## 📄 License ## License
Tabler is licensed under the [MIT License](https://github.com/tabler/tabler/blob/dev/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 needs Third-party libraries shipped in `dist/libs` keep their own licenses. One of them needs attention: **ApexCharts is not MIT from version 5 on**. It is dual-licensed, free under its Community license for organizations under $2M in annual revenue and paid above that threshold, with a separate OEM license for
attention: **ApexCharts is not MIT from version 5 on**. It is dual-licensed - free under redistribution. Check the [ApexCharts license options](https://apexcharts.com/license/) before you ship charts in a commercial product.
its Community license for organizations under $2M in annual revenue, and paid above that
threshold, with a separate OEM license for redistribution. Check the
[ApexCharts license options](https://apexcharts.com/license/) before you ship charts in a
commercial product.
docs/content/ui/getting-started/frameworks/angular.mdx
+1 -1
View File
@@ -48,7 +48,7 @@ Alternatively, import the compiled CSS directly in `src/styles.scss`:
For full theme customization, import SCSS sources in `src/styles.scss` instead: For full theme customization, import SCSS sources in `src/styles.scss` instead:
```scss ```scss
@import '@tabler/core/scss/tabler'; @use '@tabler/core/scss/tabler';
``` ```
### Import and initialize JavaScript ### Import and initialize JavaScript
docs/content/ui/getting-started/frameworks/astro.mdx
+1 -1
View File
@@ -40,7 +40,7 @@ import '@tabler/core/dist/css/tabler.min.css'
For full theme customization, import SCSS sources instead: For full theme customization, import SCSS sources instead:
```scss ```scss
@import '@tabler/core/scss/tabler'; @use '@tabler/core/scss/tabler';
``` ```
### Import and initialize JavaScript ### Import and initialize JavaScript
docs/content/ui/getting-started/frameworks/django.mdx
+1 -1
View File
@@ -54,7 +54,7 @@ Then add Tabler CSS to your base template:
For full theme customization, build from SCSS sources: For full theme customization, build from SCSS sources:
```scss ```scss
@import '@tabler/core/scss/tabler'; @use '@tabler/core/scss/tabler';
``` ```
### Import and initialize JavaScript ### Import and initialize JavaScript
docs/content/ui/getting-started/frameworks/laravel.mdx
+1 -1
View File
@@ -40,7 +40,7 @@ In a standard Laravel setup, import Tabler CSS in `resources/css/app.css`:
For full theme customization, you can import SCSS sources from the package: For full theme customization, you can import SCSS sources from the package:
```scss ```scss
@import '@tabler/core/scss/tabler'; @use '@tabler/core/scss/tabler';
``` ```
### Import and initialize JavaScript ### Import and initialize JavaScript
docs/content/ui/getting-started/frameworks/nextjs.mdx
+1 -1
View File
@@ -40,7 +40,7 @@ Import Tabler CSS once in your global stylesheet (`app/globals.css`):
For full theme customization, import SCSS sources: For full theme customization, import SCSS sources:
```scss ```scss
@import '@tabler/core/scss/tabler'; @use '@tabler/core/scss/tabler';
``` ```
### Import and initialize JavaScript ### Import and initialize JavaScript
docs/content/ui/getting-started/frameworks/nuxt.mdx
+1 -1
View File
@@ -42,7 +42,7 @@ export default defineNuxtConfig({
For full theme customization, import SCSS sources in your app stylesheet: For full theme customization, import SCSS sources in your app stylesheet:
```scss ```scss
@import '@tabler/core/scss/tabler'; @use '@tabler/core/scss/tabler';
``` ```
### Import and initialize JavaScript ### Import and initialize JavaScript
docs/content/ui/getting-started/frameworks/rails.mdx
+1 -1
View File
@@ -40,7 +40,7 @@ For Rails with `cssbundling-rails`, import Tabler CSS in `app/assets/stylesheets
For full theme customization, import SCSS sources instead: For full theme customization, import SCSS sources instead:
```scss ```scss
@import '@tabler/core/scss/tabler'; @use '@tabler/core/scss/tabler';
``` ```
### Import and initialize JavaScript ### Import and initialize JavaScript
docs/content/ui/getting-started/frameworks/react.mdx
+1 -1
View File
@@ -40,7 +40,7 @@ import '@tabler/core/dist/css/tabler.min.css'
For full theme customization, import SCSS sources instead: For full theme customization, import SCSS sources instead:
```scss ```scss
@import '@tabler/core/scss/tabler'; @use '@tabler/core/scss/tabler';
``` ```
### Import and initialize JavaScript ### Import and initialize JavaScript
docs/content/ui/getting-started/frameworks/sveltekit.mdx
+1 -1
View File
@@ -40,7 +40,7 @@ Import Tabler CSS once in your global stylesheet (`src/app.css`):
For full theme customization, import SCSS sources instead: For full theme customization, import SCSS sources instead:
```scss ```scss
@import '@tabler/core/scss/tabler'; @use '@tabler/core/scss/tabler';
``` ```
### Import and initialize JavaScript ### Import and initialize JavaScript
docs/content/ui/getting-started/frameworks/symfony.mdx
+1 -1
View File
@@ -40,7 +40,7 @@ If you use Webpack Encore, import Tabler CSS in `assets/styles/app.scss`:
For full theme customization, import SCSS sources instead: For full theme customization, import SCSS sources instead:
```scss ```scss
@import '@tabler/core/scss/tabler'; @use '@tabler/core/scss/tabler';
``` ```
### Import and initialize JavaScript ### Import and initialize JavaScript
docs/content/ui/getting-started/frameworks/vue.mdx
+1 -1
View File
@@ -40,7 +40,7 @@ import '@tabler/core/dist/css/tabler.min.css'
For full theme customization, import SCSS sources instead: For full theme customization, import SCSS sources instead:
```scss ```scss
@import '@tabler/core/scss/tabler'; @use '@tabler/core/scss/tabler';
``` ```
### Import and initialize JavaScript ### Import and initialize JavaScript