Top 5 Django Admin Customization Packages to Supercharge Your Dashboard!
Django’s built-in admin panel is one of its most powerful features, but let’s be honest — it looks simple and has limited functionality…
Django’s built-in admin panel is one of its most powerful features, but let’s be honest — it looks simple and has limited functionality out of the box. If you want to make the Django admin more user-friendly, visually appealing, and feature-rich, then these top 5 Django admin customization packages will transform your admin dashboard into a powerful and modern interface!
1. Django-Jazzmin — A Beautiful UI for Django Admin
Jazzmin Gives the Django admin a modern, sleek, and responsive UI. Fully customizable colors, layouts, branding and themes. It Supports dark mode for better accessibility and works seamlessly with Django Rest Framework (DRF).
GitHub: https://github.com/farridav/django-jazzmin
Installation
pip install django-jazzminExample
Add jazzmin to your INSTALLED_APPS before django.contrib.admin, and Voila!
# settings.py
INSTALLED_APPS = [
'jazzmin',
'django.contrib.admin',
]To configure the general behaviour of jazzmin, you can use JAZZMIN_SETTINGS within your django settings, below is a full example, with some of the more complex items explained below that.
# settings.py
JAZZMIN_SETTINGS = {
# title of the window (Will default to current_admin_site.site_title if absent or None)
"site_title": "Library Admin",
# Title on the login screen (19 chars max) (defaults to current_admin_site.site_header if absent or None)
"site_header": "Library",
# Title on the brand (19 chars max) (defaults to current_admin_site.site_header if absent or None)
"site_brand": "Library",
# Logo to use for your site, must be present in static files, used for brand on top left
"site_logo": "books/img/logo.png",
# Logo to use for your site, must be present in static files, used for login form logo (defaults to site_logo)
"login_logo": None,
# Logo to use for login form in dark themes (defaults to login_logo)
"login_logo_dark": None,
# CSS classes that are applied to the logo above
"site_logo_classes": "img-circle",
# Relative path to a favicon for your site, will default to site_logo if absent (ideally 32x32 px)
"site_icon": None,
# Welcome text on the login screen
"welcome_sign": "Welcome to the library",
# Copyright on the footer
"copyright": "Acme Library Ltd",
# List of model admins to search from the search bar, search bar omitted if excluded
# If you want to use a single search field you dont need to use a list, you can use a simple string
"search_model": ["auth.User", "auth.Group"],
# Field name on user model that contains avatar ImageField/URLField/Charfield or a callable that receives the user
"user_avatar": None,
############
# Top Menu #
############
# Links to put along the top menu
"topmenu_links": [
# Url that gets reversed (Permissions can be added)
{"name": "Home", "url": "admin:index", "permissions": ["auth.view_user"]},
# external url that opens in a new window (Permissions can be added)
{"name": "Support", "url": "https://github.com/farridav/django-jazzmin/issues", "new_window": True},
# model admin to link to (Permissions checked against model)
{"model": "auth.User"},
# App with dropdown menu to all its models pages (Permissions checked against models)
{"app": "books"},
],
#############
# User Menu #
#############
# Additional links to include in the user menu on the top right ("app" url type is not allowed)
"usermenu_links": [
{"name": "Support", "url": "https://github.com/farridav/django-jazzmin/issues", "new_window": True},
{"model": "auth.user"}
],
#############
# Side Menu #
#############
# Whether to display the side menu
"show_sidebar": True,
# Whether to aut expand the menu
"navigation_expanded": True,
# Hide these apps when generating side menu e.g (auth)
"hide_apps": [],
# Hide these models when generating side menu (e.g auth.user)
"hide_models": [],
# List of apps (and/or models) to base side menu ordering off of (does not need to contain all apps/models)
"order_with_respect_to": ["auth", "books", "books.author", "books.book"],
# Custom links to append to app groups, keyed on app name
"custom_links": {
"books": [{
"name": "Make Messages",
"url": "make_messages",
"icon": "fas fa-comments",
"permissions": ["books.view_book"]
}]
},
# Custom icons for side menu apps/models See https://fontawesome.com/icons?d=gallery&m=free&v=5.0.0,5.0.1,5.0.10,5.0.11,5.0.12,5.0.13,5.0.2,5.0.3,5.0.4,5.0.5,5.0.6,5.0.7,5.0.8,5.0.9,5.1.0,5.1.1,5.2.0,5.3.0,5.3.1,5.4.0,5.4.1,5.4.2,5.13.0,5.12.0,5.11.2,5.11.1,5.10.0,5.9.0,5.8.2,5.8.1,5.7.2,5.7.1,5.7.0,5.6.3,5.5.0,5.4.2
# for the full list of 5.13.0 free icon classes
"icons": {
"auth": "fas fa-users-cog",
"auth.user": "fas fa-user",
"auth.Group": "fas fa-users",
},
# Icons that are used when one is not manually specified
"default_icon_parents": "fas fa-chevron-circle-right",
"default_icon_children": "fas fa-circle",
#################
# Related Modal #
#################
# Use modals instead of popups
"related_modal_active": False,
#############
# UI Tweaks #
#############
# Relative paths to custom CSS/JS scripts (must be present in static files)
"custom_css": None,
"custom_js": None,
# Whether to link font from fonts.googleapis.com (use custom_css to supply font otherwise)
"use_google_fonts_cdn": True,
# Whether to show the UI customizer on the sidebar
"show_ui_builder": False,
###############
# Change view #
###############
# Render out the change view as a single form, or in tabs, current options are
# - single
# - horizontal_tabs (default)
# - vertical_tabs
# - collapsible
# - carousel
"changeform_format": "horizontal_tabs",
# override change forms on a per modeladmin basis
"changeform_format_overrides": {"auth.user": "collapsible", "auth.group": "vertical_tabs"},
# Add a language dropdown into the admin
"language_chooser": True,
}2. Django-Grappelli — Elegant & Feature-Rich Admin Panel
A UI enhancement for Django admin with a focus on better usability. It Provides a cleaner and more intuitive UI, adds sortable inlines, a horizontal menu, and an enhanced search, comes with built-in support for Django FileBrowser and Supports custom branding and theme modifications
GitHub: https://github.com/sehmaschine/django-grappelli
Installation
pip install django-grappelliExample
Open settings.py and add grappelli to your INSTALLED_APPS (before django.contrib.admin):
# settings.py
INSTALLED_APPS = [
'grappelli',
'django.contrib.admin',
]Add URL-patterns. The grappelli URLs are needed for related–lookups and autocompletes. Your admin interface is available with the URL you defined for admin.site:
# urls.py
from django.conf.urls import include
urlpatterns = [
path('grappelli/', include('grappelli.urls')), # grappelli URLS
path('admin/', admin.site.urls), # admin site
]3. Django-Suit — Fully Customizable Admin Interface
A premium-looking Django admin theme with drag-and-drop reordering and other advanced features. It Offers a modern, polished design with a custom navigation bar. Allows drag-and-drop for sorting related objects in the admin panel. Provides a built-in dashboard for custom widgets and Fully customizable with CSS overrides and template extensions.
GitHub : https://github.com/darklow/django-suit
Installation
pip install django-suitExample
You will need to add the 'suit' application to the INSTALLED_APPS setting of your Django project settings.py file.:
# settings.py
INSTALLED_APPS = [
'suit',
'django.contrib.admin',
]Configuration sample you can use as a start:
# settings.py
# Django Suit configuration example
SUIT_CONFIG = {
'ADMIN_NAME': 'Django Suit',
'HEADER_DATE_FORMAT': 'l, j. F Y',
'HEADER_TIME_FORMAT': 'H:i',
'SHOW_REQUIRED_ASTERISK': True, # Default True
'CONFIRM_UNSAVED_CHANGES': True, # Default True
'SEARCH_URL': '/admin/auth/user/',
'MENU_ICONS': {
'sites': 'icon-leaf',
'auth': 'icon-lock',
},
'MENU_OPEN_FIRST_CHILD': True, # Default True
'MENU_EXCLUDE': ('auth.group',),
'MENU': (
'sites',
{'app': 'auth', 'icon':'icon-lock', 'models': ('user', 'group')},
{'label': 'Settings', 'icon':'icon-cog', 'models': ('auth.user', 'auth.group')},
{'label': 'Support', 'icon':'icon-question-sign', 'url': '/support/'},
),
'LIST_PER_PAGE': 15
}4. Django-Admin-Interface 🖌️ — Advanced Styling for Admin
Lets you customize the Django admin panel with custom logos, colors, and themes. Easily change the Django admin colors, fonts, and layout. It allows custom branding (logos, favicons, and themes). Works well with Django Grappelli and Django Jazzmin and Supports dark mode for better accessibility.
GitHub: https://github.com/fabiocaccamo/django-admin-interface
Installation
pip install django-admin-interfaceExample
Add admin_interface and colorfield to settings.INSTALLED_APPS before django.contrib.admin
# settings.py
INSTALLED_APPS = (
"admin_interface",
"colorfield",
"django.contrib.admin",
)
X_FRAME_OPTIONS = "SAMEORIGIN"
SILENCED_SYSTEM_CHECKS = ["security.W019"]python manage.py migrateThis package ships with optional themes as fixtures, they can be installed using the loaddata admin command. Optional themes are activated on installation.
Django theme (default):
python manage.py loaddata admin_interface_theme_django.jsonBootstrap theme:
python manage.py loaddata admin_interface_theme_bootstrap.jsonFoundation theme:
python manage.py loaddata admin_interface_theme_foundation.jsonU.S. Web Design Standards theme:
python manage.py loaddata admin_interface_theme_uswds.json5. django-unfold — A Modern UI Framework for Django Admin
Django-Unfold is a powerful UI framework designed to make the Django Admin more modern, user-friendly, and visually appealing. If you’re tired of Django’s default admin looking outdated and cluttered, Django-Unfold brings a modern, clean, and well-structured design while maintaining Django’s powerful admin functionalities.
GitHub: https://github.com/unfoldadmin/django-unfold
Installation
pip install django-unfoldExample
Add unfold to INSTALLED_APPS in settings.py:
# settings.py
INSTALLED_APPS = [
"unfold", # Add this before 'django.contrib.admin'
"django.contrib.admin",
]The UNFOLD dictionary contains all available options to configure the admin interface. By default, there is not need to set any options. The admin interface will work as expected. Below you can find full list of available options.
# settings.py
from django.templatetags.static import static
from django.urls import reverse_lazy
from django.utils.translation import gettext_lazy as _
UNFOLD = {
"SITE_TITLE": "Custom suffix in <title> tag",
"SITE_HEADER": "Appears in sidebar at the top",
"SITE_SUBHEADER": "Appears under SITE_HEADER",
"SITE_DROPDOWN": [
{
"icon": "diamond",
"title": _("My site"),
"link": "https://example.com",
},
# ...
],
"SITE_URL": "/",
# "SITE_ICON": lambda request: static("icon.svg"), # both modes, optimise for 32px height
"SITE_ICON": {
"light": lambda request: static("icon-light.svg"), # light mode
"dark": lambda request: static("icon-dark.svg"), # dark mode
},
# "SITE_LOGO": lambda request: static("logo.svg"), # both modes, optimise for 32px height
"SITE_LOGO": {
"light": lambda request: static("logo-light.svg"), # light mode
"dark": lambda request: static("logo-dark.svg"), # dark mode
},
"SITE_SYMBOL": "speed", # symbol from icon set
"SITE_FAVICONS": [
{
"rel": "icon",
"sizes": "32x32",
"type": "image/svg+xml",
"href": lambda request: static("favicon.svg"),
},
],
"SHOW_HISTORY": True, # show/hide "History" button, default: True
"SHOW_VIEW_ON_SITE": True, # show/hide "View on site" button, default: True
"SHOW_BACK_BUTTON": False, # show/hide "Back" button on changeform in header, default: False
"ENVIRONMENT": "sample_app.environment_callback",
"DASHBOARD_CALLBACK": "sample_app.dashboard_callback",
"THEME": "dark", # Force theme: "dark" or "light". Will disable theme switcher
"LOGIN": {
"image": lambda request: static("sample/login-bg.jpg"),
"redirect_after": lambda request: reverse_lazy("admin:APP_MODEL_changelist"),
},
"STYLES": [
lambda request: static("css/style.css"),
],
"SCRIPTS": [
lambda request: static("js/script.js"),
],
"BORDER_RADIUS": "6px",
"COLORS": {
"base": {
"50": "249 250 251",
"100": "243 244 246",
"200": "229 231 235",
"300": "209 213 219",
"400": "156 163 175",
"500": "107 114 128",
"600": "75 85 99",
"700": "55 65 81",
"800": "31 41 55",
"900": "17 24 39",
"950": "3 7 18",
},
"primary": {
"50": "250 245 255",
"100": "243 232 255",
"200": "233 213 255",
"300": "216 180 254",
"400": "192 132 252",
"500": "168 85 247",
"600": "147 51 234",
"700": "126 34 206",
"800": "107 33 168",
"900": "88 28 135",
"950": "59 7 100",
},
"font": {
"subtle-light": "var(--color-base-500)", # text-base-500
"subtle-dark": "var(--color-base-400)", # text-base-400
"default-light": "var(--color-base-600)", # text-base-600
"default-dark": "var(--color-base-300)", # text-base-300
"important-light": "var(--color-base-900)", # text-base-900
"important-dark": "var(--color-base-100)", # text-base-100
},
},
"EXTENSIONS": {
"modeltranslation": {
"flags": {
"en": "🇬🇧",
"fr": "🇫🇷",
"nl": "🇧🇪",
},
},
},
"SIDEBAR": {
"show_search": False, # Search in applications and models names
"show_all_applications": False, # Dropdown with all applications and models
"navigation": [
{
"title": _("Navigation"),
"separator": True, # Top border
"collapsible": True, # Collapsible group of links
"items": [
{
"title": _("Dashboard"),
"icon": "dashboard", # Supported icon set: https://fonts.google.com/icons
"link": reverse_lazy("admin:index"),
"badge": "sample_app.badge_callback",
"permission": lambda request: request.user.is_superuser,
},
{
"title": _("Users"),
"icon": "people",
"link": reverse_lazy("admin:auth_user_changelist"),
},
],
},
],
},
"TABS": [
{
"models": [
"app_label.model_name_in_lowercase",
],
"items": [
{
"title": _("Your custom title"),
"link": reverse_lazy("admin:app_label_model_name_changelist"),
"permission": "sample_app.permission_callback",
},
],
},
],
}
def dashboard_callback(request, context):
"""
Callback to prepare custom variables for index template which is used as dashboard
template. It can be overridden in application by creating custom admin/index.html.
"""
context.update(
{
"sample": "example", # this will be injected into templates/admin/index.html
}
)
return context
def environment_callback(request):
"""
Callback has to return a list of two values represeting text value and the color
type of the label displayed in top right corner.
"""
return ["Production", "danger"] # info, danger, warning, success
def badge_callback(request):
return 3
def permission_callback(request):
return request.user.has_perm("sample_app.change_model")Wrapping Up
Django’s default admin gets the job done, but with these powerful customization packages, you can transform it into a modern, feature-rich, and highly efficient admin dashboard!
Which Django admin customization package is your favorite? Have any other cool admin extensions to share? Drop them in the comments below! 👇
