Skip to content
175+ Components • 240 Theme Combinations • Zero Build Step

A Complete Design System
for Django.

175+ theme-aware components powered by djust-components, styled by djust-theming design tokens. No npm. No build step. Switch between 12 theme packs and watch everything adapt.

View Components
$ pip install djust-theming
Component Storybook

175+ Components

Buttons, cards, alerts, badges, forms, modals, tabs, accordion, tooltips, progress, charts, data tables, and 160 more — all theme-aware via djust-components.

Themes & Presets

12 design systems × 20 color presets = 240 unique combinations. Design systems control structure, presets control palette.

12 Theme Packs

Complete bundles: design system + colors + icons + animations + patterns. One pack changes everything — fonts, spacing, radius, shadows, colors.

Documentation

Getting started guide, installation, configuration, template tag reference, layout templates, and page templates.

Integration Guide

How djust-theming + djust-components work together. Token architecture, CSS loading order, and custom overrides.

Component Storybook

Browse all 175+ components organized by category. Live previews, props tables, CSS variables, and template source — plus the live theme editor and diff view.

Architecture Overview

Design Systems vs. Color Presets

Design systems control structure (typography, spacing, shadows, animations). Color presets control palette. Mix any design system with any color preset.

12 × 20 = 240 unique combinations out of the box.

Template Tag Libraries

  • {% load theme_tags %} — theme_head, theme_switcher, mode toggle, preset selector
  • {% load djust_components %} — 175+ UI components (buttons, cards, forms, charts...)
  • {% load theme_form_tags %} — Django form rendering with themed styling

Quick Start

Full documentation →

1. Install

terminal
$ pip install djust-theming djust-components

2. Use

settings.py 
INSTALLED_APPS = ['djust_theming', 'djust_components', ...]

TEMPLATES = [{
    'OPTIONS': {
        'context_processors': [
            'djust_theming.context_processors.theme_context',
        ],
    },
}]

LIVEVIEW_CONFIG = {
    'theme': {
        'preset': 'blue',
        'default_mode': 'system',
        'critical_css': True,
    }
}

3. Use in Templates

template.html 
{% load theme_tags djust_components %}
<head>{% theme_head %}</head>
<body>
    {% theme_switcher %}
    {% dj_button label="Save" variant="primary" %}
    {% alert variant="success" %}Done!{% endalert %}
</body>
Try It

Switch Themes in Real Time

Click the theme button in the top-right corner to switch between 12 theme packs, toggle dark/light mode, and change color presets. Every element on the page adapts instantly.

Learn how it works →

Built-in Tools

Explore themes visually with the built-in gallery, storybook, and editor

Gallery Storybook Editor