# 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.

Set up Tabler in a plain HTML file with the CSS and JavaScript from the CDN.

Source: https://docs.tabler.io/ui/getting-started/installation

---

Using a framework? See [Tabler framework integration guides](/ui/getting-started/frameworks).

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:

```html
<!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:

```html
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@tabler/core@1.6.1/dist/css/tabler.min.css" integrity="sha384-tT2UAGE9hxG/p5d0iGIvZ/s8El3nWWG3tfG02i8iOY5Pbf8cZZRVmcrrVs+JG5Vw" crossorigin="anonymous" />
<script src="https://cdn.jsdelivr.net/npm/@tabler/core@1.6.1/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:

```html
<!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@1.6.1/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/core@1.6.1/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](/ui/getting-started/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.

  With two copies on the page, every `data-bs-toggle` element gets two handlers. One click then opens two backdrops for a modal or an offcanvas, and dropdowns and tooltips open twice.

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:

```js
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](https://preview.tabler.io) show every layout and component in use. The rest of this documentation covers each of them in detail.
