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" />
<script src="https://cdn.jsdelivr.net/npm/@tabler/[email protected]/dist/js/tabler.min.js"></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" />
</head>
<body>
<h1>Hello, Tabler!</h1>
<script src="https://cdn.jsdelivr.net/npm/@tabler/[email protected]/dist/js/tabler.min.js"></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.
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.
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.
