Django

Set up Tabler in Django and build a first working page.

Django templates render server-side HTML, which makes Tabler a drop-in: add Tabler classes to your markup and serve the compiled CSS and JS through Django's static files system - no Node build step required at runtime.

You will install @tabler/core, copy its compiled assets into your static directory, and render a first template with a Tabler card.

Setup

Install Tabler package

Install @tabler/core with your preferred package manager:

npm install @tabler/core

yarn add @tabler/core

pnpm install @tabler/core

bun install @tabler/core

You can also use CDN files when you need a quick setup:

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

Import styles

Django can use Tabler in two common ways:

Build frontend assets with npm and serve compiled files.
Copy static CSS/JS files into your Django static directory.

If you use static files directly, copy the compiled files from the installed npm package into your static directory:

mkdir -p static/css static/js
cp node_modules/@tabler/core/dist/css/tabler.min.css static/css/
cp node_modules/@tabler/core/dist/js/tabler.min.js static/js/

Then add Tabler CSS to your base template:

{% load static %}
<link rel="stylesheet" href="{% static 'css/tabler.min.css' %}" />

For full theme customization, build from SCSS sources:

@use '@tabler/core/scss/tabler';

Import and initialize JavaScript

Tabler JavaScript is required for interactive components such as dropdowns, modals, and tooltips.

If you use static files, include Tabler JS in your base template:

{% load static %}
<script src="{% static 'js/tabler.min.js' %}"></script>

Django-specific note: when serving local static assets in production, run collectstatic so Tabler files are included in your final static output.

Minimal working example

Create a minimal base template in templates/base.html:

{% load static %}
<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="{% static 'css/tabler.min.css' %}" />
  </head>
  <body>
    {% block content %}{% endblock %}
    <script src="{% static 'js/tabler.min.js' %}"></script>
  </body>
</html>

Then add a simple page in templates/home.html:

{% extends "base.html" %}

{% block content %}
<div class="page">
  <div class="page-wrapper">
    <div class="container-xl py-4">
      <div class="card">
        <div class="card-body">
          <h3 class="card-title">Django + Tabler</h3>
          <p class="text-secondary mb-0">Your Tabler setup is working.</p>
        </div>
      </div>
    </div>
  </div>
</div>
{% endblock %}

Run the app:

python manage.py runserver

Open the local Django URL and confirm the card is styled with Tabler.

Next steps

Continue with Customize to adjust styles and build setup.
Explore Layout to choose page structures.
Browse Components to add UI building blocks.

Menu