Installation
Set up Tabler in a plain HTML file. Create the page, add the CSS and JavaScript from the CDN, and open it in the browser.
Using a framework? See Tabler framework integration guides.
This page walks through the shortest way to get Tabler running: one HTML file, two tags from the CDN, and a page you can open in the browser. There's no build step involved.
Setup
Create a basic HTML file
Start with a new index.html file in the root of your project. It only needs the usual HTML skeleton and a <meta name="viewport" /> tag, so the page scales correctly on phones:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Tabler demo</title>
</head>
<body>
<h1>Hello, world!</h1>
</body>
</html>Add Tabler CSS and JavaScript
Next, add Tabler's CSS and JavaScript. These two tags load the core files from the CDN:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@tabler/[email protected]/dist/css/tabler.min.css" integrity="sha384-tT2UAGE9hxG/p5d0iGIvZ/s8El3nWWG3tfG02i8iOY5Pbf8cZZRVmcrrVs+JG5Vw" crossorigin="anonymous" />
<script src="https://cdn.jsdelivr.net/npm/@tabler/[email protected]/dist/js/tabler.min.js" integrity="sha384-1yCHfhyU8+V33urXkAlLLpNYd9jdzXkxdafCg0+auIIEtYFnOuM/DwJQgk5sXY98" crossorigin="anonymous"></script>Put the stylesheet in <head> and the script at the end of <body>. The file then looks like this:
<!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/[email protected]/dist/css/tabler.min.css" integrity="sha384-tT2UAGE9hxG/p5d0iGIvZ/s8El3nWWG3tfG02i8iOY5Pbf8cZZRVmcrrVs+JG5Vw" crossorigin="anonymous" />
</head>
<body>
<h1>Hello, Tabler!</h1>
<script src="https://cdn.jsdelivr.net/npm/@tabler/[email protected]/dist/js/tabler.min.js" integrity="sha384-1yCHfhyU8+V33urXkAlLLpNYd9jdzXkxdafCg0+auIIEtYFnOuM/DwJQgk5sXY98" crossorigin="anonymous"></script>
</body>
</html>That's the whole setup. The CSS covers the layout and components, and the script adds the interactive parts such as dropdowns and modals.
The integrity attribute lets the browser check that the file it downloaded is the one Tabler published, and crossorigin="anonymous" is what makes that check possible on a CDN. Each hash belongs to one file of one version, so when you move to a newer Tabler, copy the tags from this page again instead of only changing the version number in the URL.
If you'd rather not depend on a CDN, you can download the files and serve them from your own project. The Download page explains how.
Open in your browser
Save the file and open it in your browser. You should see your first page styled by Tabler. From here you can add a layout, drop in components and build up the app.
Bootstrap is already included
Tabler's JavaScript file contains Bootstrap's JavaScript. Do not load bootstrap.bundle.js or import 'bootstrap' next to it.
Use the components that Tabler exposes instead. With the script tag they are on the tabler global, for example tabler.Modal or tabler.Offcanvas. With a bundler, import them from the package:
import { Modal, Offcanvas } from '@tabler/core'If you need your own copy of Bootstrap's JavaScript, load only Tabler's CSS and leave tabler.js out.
If you want to see what's possible, the demo pages at preview.tabler.io show every layout and component in use. The rest of this documentation covers each of them in detail.
