Django Unfold Admin
Modern Django admin theme with Tailwind CSS, HTMX, and Alpine.js. Replaces Django's default admin with a polished, feature-rich interface.
Quick Start
Installation
python
# settings.py - unfold MUST be before django.contrib.admin
INSTALLED_APPS = [
"unfold",
"unfold.contrib.filters", # advanced filters
"unfold.contrib.forms", # array/wysiwyg widgets
"unfold.contrib.inlines", # nonrelated inlines
"unfold.contrib.import_export", # styled import/export
"unfold.contrib.guardian", # django-guardian integration
"unfold.contrib.simple_history", # django-simple-history integration
"unfold.contrib.constance", # django-constance integration
"unfold.contrib.location_field", # django-location-field integration
# ...
"django.contrib.admin",
]
Minimal Admin
python
from unfold.admin import ModelAdmin
@admin.register(MyModel)
class MyModelAdmin(ModelAdmin):
pass # inherits Unfold styling
Site Configuration
Replace the default
or configure via
dict in settings. See
references/configuration.md for the complete settings reference.
python
UNFOLD = {
"SITE_TITLE": "My Admin",
"SITE_HEADER": "My Admin",
"SITE_SYMBOL": "dashboard", # Material Symbols icon name
"SIDEBAR": {
"show_search": True,
"navigation": [
{
"title": _("Navigation"),
"items": [
{
"title": _("Dashboard"),
"icon": "dashboard",
"link": reverse_lazy("admin:index"),
},
],
},
],
},
}
Core Workflow
When building Unfold admin interfaces, follow this sequence:
- Configure site - UNFOLD settings dict (branding, sidebar, theme)
- Register models - Extend
- Enhance display - decorator for list columns
- Add actions - decorator for row/list/detail/submit actions
- Configure filters - Replace default filters with Unfold filter classes
- Override widgets - Apply Unfold widgets via
- Set up inlines - Use Unfold's inline classes with tabs, pagination, sorting
- Build dashboard - + for KPI cards
ModelAdmin Attributes
Unfold extends Django's
with these additional attributes:
| Attribute | Type | Purpose |
|---|
| bool | Full-width changelist (no sidebar) |
| bool | Add submit button to filters |
| bool | Filters in sliding sheet panel |
| bool | Compact field spacing in forms |
| bool | Warn before leaving unsaved form |
| str | Field name for drag-to-reorder |
| bool | Hide the ordering field column |
list_horizontal_scrollbar_top
| bool | Scrollbar at top of list |
| bool | Disable "select all" checkbox |
change_form_show_cancel_button
| bool | Show cancel button on form |
| list | Global changelist actions |
| list | Per-row actions in changelist |
| list | Actions on change form |
| list | Actions in form submit area |
actions_list_hide_default
| bool | Hide default list actions |
actions_detail_hide_default
| bool | Hide default detail actions |
| dict | JS expressions for field visibility |
| list | BaseDataset subclasses for change form |
| list | TableSection/TemplateSection for list |
| str | CSS grid classes for sections |
readonly_preprocess_fields
| dict | Transform readonly field content |
| list | Separate fieldsets for add form (like UserAdmin) |
Template Injection Points
Insert custom HTML before/after changelist or change form:
python
class MyAdmin(ModelAdmin):
# Changelist
list_before_template = "myapp/list_before.html"
list_after_template = "myapp/list_after.html"
# Change form (inside <form> tag)
change_form_before_template = "myapp/form_before.html"
change_form_after_template = "myapp/form_after.html"
# Change form (outside <form> tag)
change_form_outer_before_template = "myapp/outer_before.html"
change_form_outer_after_template = "myapp/outer_after.html"
Conditional Fields
Show/hide fields based on other field values (Alpine.js expressions):
python
class MyAdmin(ModelAdmin):
conditional_fields = {
"premium_features": "plan == 'PRO'",
"discount_amount": "has_discount == true",
}
Actions System
Four action types, each with different signatures. See references/actions-filters.md for complete reference.
python
from unfold.decorators import action
from unfold.enums import ActionVariant
# List action (no object context)
@action(description=_("Rebuild Index"), icon="sync", variant=ActionVariant.PRIMARY)
def rebuild_index(self, request):
# process...
return redirect(request.headers["referer"])
# Row action (receives object_id)
@action(description=_("Approve"), url_path="approve")
def approve_row(self, request, object_id):
obj = self.model.objects.get(pk=object_id)
return redirect(request.headers["referer"])
# Detail action (receives object_id, shown on change form)
@action(description=_("Send Email"), permissions=["send_email"])
def send_email(self, request, object_id):
return redirect(reverse_lazy("admin:myapp_mymodel_change", args=[object_id]))
# Submit line action (receives obj instance, runs on save)
@action(description=_("Save & Publish"))
def save_and_publish(self, request, obj):
obj.published = True
Action Groups (Dropdown Menus)
python
actions_list = [
"primary_action",
{
"title": _("More"),
"variant": ActionVariant.PRIMARY,
"items": ["secondary_action", "tertiary_action"],
},
]
Permissions
python
@action(permissions=["can_export", "auth.view_user"])
def export_data(self, request):
pass
def has_can_export_permission(self, request):
return request.user.is_superuser
Display Decorator
Enhance list_display columns. See references/actions-filters.md.
python
from unfold.decorators import display
# Colored status labels
@display(description=_("Status"), ordering="status", label={
"active": "success", # green
"pending": "info", # blue
"warning": "warning", # orange
"inactive": "danger", # red
})
def show_status(self, obj):
return obj.status
# Rich header with avatar
@display(description=_("User"), header=True)
def show_header(self, obj):
return [
obj.full_name, # primary text
obj.email, # secondary text
obj.initials, # badge text
{"path": obj.avatar.url, "width": 24, "height": 24, "borderless": True},
]
# Interactive dropdown
@display(description=_("Teams"), dropdown=True)
def show_teams(self, obj):
return {
"title": f"{obj.teams.count()} teams",
"items": [{"title": t.name, "link": t.get_admin_url()} for t in obj.teams.all()],
"striped": True,
"max_height": 200,
}
# Boolean checkmark
@display(description=_("Active"), boolean=True)
def is_active(self, obj):
return obj.is_active
Filters
Unfold provides advanced filter classes. See references/actions-filters.md.
python
from unfold.contrib.filters.admin import (
TextFilter, RangeNumericFilter, RangeDateFilter, RangeDateTimeFilter,
SingleNumericFilter, SliderNumericFilter, RelatedDropdownFilter,
RelatedCheckboxFilter, ChoicesCheckboxFilter, AllValuesCheckboxFilter,
BooleanRadioFilter, CheckboxFilter, AutocompleteSelectMultipleFilter,
)
class MyAdmin(ModelAdmin):
list_filter_submit = True # required for input-based filters
list_filter = [
("salary", RangeNumericFilter),
("status", ChoicesCheckboxFilter),
("created_at", RangeDateFilter),
("category", RelatedDropdownFilter),
("is_active", BooleanRadioFilter),
]
Custom Text Filter
python
class NameFilter(TextFilter):
title = _("Name")
parameter_name = "name"
def queryset(self, request, queryset):
if self.value() in EMPTY_VALUES:
return queryset
return queryset.filter(name__icontains=self.value())
Widgets
Override form widgets for Unfold styling. See references/widgets-inlines.md.
python
from unfold.widgets import (
UnfoldAdminTextInputWidget, UnfoldAdminSelectWidget, UnfoldAdminSelect2Widget,
UnfoldBooleanSwitchWidget, UnfoldAdminColorInputWidget,
UnfoldAdminSplitDateTimeWidget, UnfoldAdminImageFieldWidget,
)
from unfold.contrib.forms.widgets import WysiwygWidget, ArrayWidget
class MyAdmin(ModelAdmin):
formfield_overrides = {
models.TextField: {"widget": WysiwygWidget},
models.ImageField: {"widget": UnfoldAdminImageFieldWidget},
}
Text Input with Icons
python
widget = UnfoldAdminTextInputWidget(attrs={
"prefix_icon": "search",
"suffix_icon": "euro",
})
Inlines
Unfold inlines support tabs, pagination, sorting, and nonrelated models. See references/widgets-inlines.md.
python
from unfold.admin import TabularInline, StackedInline
from unfold.contrib.inlines.admin import NonrelatedStackedInline
class OrderItemInline(TabularInline):
model = OrderItem
tab = True # show as tab
per_page = 10 # paginated
ordering_field = "weight" # drag-to-reorder
hide_title = True
collapsible = True
Fieldset Tabs
Group fieldsets into tabs using
:
python
fieldsets = [
(None, {"fields": ["name", "email"]}), # always visible
(_("Profile"), {"classes": ["tab"], "fields": ["bio", "avatar"]}),
(_("Settings"), {"classes": ["tab"], "fields": ["theme", "notifications"]}),
]
Dashboard Components
Build KPI cards and custom dashboard widgets. See references/dashboard.md.
python
from unfold.components import BaseComponent, register_component
from django.template.loader import render_to_string
@register_component
class ActiveUsersComponent(BaseComponent):
def get_context_data(self, **kwargs):
context = super().get_context_data(**kwargs)
context["children"] = render_to_string("myapp/kpi_card.html", {
"total": User.objects.filter(is_active=True).count(),
"label": "Active Users",
})
return context
Configure in settings:
python
UNFOLD = {
"DASHBOARD_CALLBACK": "myapp.views.dashboard_callback",
}
Sections (Changelist Panels)
Embed related data panels in changelist views:
python
from unfold.sections import TableSection, TemplateSection
class RecentOrdersSection(TableSection):
related_name = "order_set"
fields = ["id", "total", "status"]
height = 380
class ChartSection(TemplateSection):
template_name = "myapp/chart.html"
class MyAdmin(ModelAdmin):
list_sections = [RecentOrdersSection, ChartSection]
list_sections_classes = "lg:grid-cols-2"
Datasets (Change Form Panels)
Embed model listings within change forms:
python
from unfold.datasets import BaseDataset
class RelatedItemsDatasetAdmin(ModelAdmin):
list_display = ["name", "status"]
search_fields = ["name"]
class RelatedItemsDataset(BaseDataset):
model = RelatedItem
model_admin = RelatedItemsDatasetAdmin
tab = True # show as tab
class MyAdmin(ModelAdmin):
change_form_datasets = [RelatedItemsDataset]
Paginator
Use infinite scroll pagination:
python
from unfold.paginator import InfinitePaginator
class MyAdmin(ModelAdmin):
paginator = InfinitePaginator
show_full_result_count = False
list_per_page = 20
Third-Party Integrations
Unfold provides styled wrappers for common Django packages. See references/resources.md for complete setup guides.
| Package | Unfold Module | Setup |
|---|
| django-import-export | unfold.contrib.import_export
| Use , , SelectableFieldsExportForm
|
| django-guardian | | Styled guardian integration |
| django-simple-history | unfold.contrib.simple_history
| Styled history integration |
| django-constance | | Styled constance config |
| django-location-field | unfold.contrib.location_field
| Location widget |
| django-modeltranslation | Compatible | Mix with |
| django-celery-beat | Compatible (rewire) | Unregister 5 models, re-register with Unfold |
| django-money | | |
| djangoql | Compatible | Mix with |
| django-crispy-forms | Compatible | Unfold template pack available |
python
# Multiple inheritance - Unfold ModelAdmin always last
@admin.register(MyModel)
class MyAdmin(DjangoQLSearchMixin, SimpleHistoryAdmin, GuardedModelAdmin, ModelAdmin):
pass
Built-In Template Components
Unfold ships reusable template components for dashboards and custom pages:
| Component | Path | Key Variables |
|---|
| Card | unfold/components/card.html
| , , , |
| Bar Chart | unfold/components/chart/bar.html
| (JSON), , |
| Line Chart | unfold/components/chart/line.html
| (JSON), , |
| Progress | unfold/components/progress.html
| , , |
| Table | unfold/components/table.html
| , , |
| Button | unfold/components/button.html
| , , |
| Tracker | unfold/components/tracker.html
| |
| Cohort | unfold/components/cohort.html
| |
html
{% load unfold %}
{% component "MyKPIComponent" %}{% endcomponent %}
User Admin Forms
Unfold provides styled versions of Django's auth admin forms:
python
from unfold.forms import AdminPasswordChangeForm, UserChangeForm, UserCreationForm
@admin.register(User)
class UserAdmin(BaseUserAdmin, ModelAdmin):
form = UserChangeForm
add_form = UserCreationForm
change_password_form = AdminPasswordChangeForm
Reference Files
Detailed documentation split by topic:
- references/configuration.md - Complete UNFOLD settings dict, sidebar, tabs, theming, environment, login
- references/actions-filters.md - Action types and signatures, display decorator, all filter classes
- references/widgets-inlines.md - Complete widget class list (35+), inline variants, nonrelated inlines, forms
- references/dashboard.md - Dashboard components, sections, datasets, custom templates, Tailwind patterns
- references/resources.md - Official links, all third-party integrations, common patterns, version compatibility, Unfold Studio
Read the relevant reference file when you need detailed configuration options, the full list of available classes, complete code examples, or integration setup guides for a specific feature area.
Key External References
When uncertain about an implementation pattern, consult
and
in the Formula demo repo - it covers virtually every Unfold feature.