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.
- 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.
Working with a coding agent? Install the Tabler skill, so the agent reads the real docs instead of guessing class names:
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:
@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:
以上为 README 的开头部分。其余内容请阅读原文。 查看完整 README ↗
