docs/pages/ui/getting-started/frameworks/django.mdx - dev - githubmirror/tabler

docs/pages/ui/getting-started/frameworks/django.mdx
129 строк4 KB
Paweł Kuna
Improve docs SEO, performance and content quality (#2841)
11 авг 2026, 15:45
11 авг 2026, 15:4539634cb
---
title: Django
order: 8
summary: Set up Tabler in Django and build a first working page.
description: Install Tabler in Django - serve the CSS and JS through static files and render a minimal template layout with a Tabler card.
icon: brand-django
seoDescription: Install `@tabler/core`, load CSS and optional JS in Django templates, and render a minimal page layout with a Tabler card.
layout: '@layouts/DocsMdxLayout.astro'
---

import TabsPackage from '@components/TabsPackage.astro'
import CdnImportPackage from '@components/CdnImportPackage.astro'
import Steps from '@components/Steps.astro'

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

<Steps>

### Install Tabler package

Install `@tabler/core` with your preferred package manager:

<TabsPackage name="@tabler/core" />

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

<CdnImportPackage />

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

```shell
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:

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

For full theme customization, build from SCSS sources:

```scss
@import '@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:

```jinja
{% 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`:

```jinja
{% 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`:

```jinja
{% 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:

```shell
python manage.py runserver
```

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

### Next steps

- Continue with [Customize](/ui/getting-started/customize) to adjust styles and build setup.
- Explore [Layout](/ui/layout) to choose page structures.
- Browse [Components](/ui/components) to add UI building blocks.

</Steps>