Beautifying your Django Admin with Django Unfold

So you've set up a new Django project, you navigate to the Admin and you're presented with these Windows 98 vibes 🥱:

Image description

But what if I told you that you can easily turn this into a beautiful and modern admin with just a few steps? Well, you can using Django Unfold! Django Unfold uses Tailwind to restyle the admin and add some other nice features. Here's how that same page looks:

Image description

😍 🎆 🤩 And here's how to do it:

  1. Install Django Unfold by running pip install django-unfold.
  2. Add unfold to the top of your INSTALLED_APPS list in the settings.py file like this:
INSTALLED_APPS = [
    'unfold',
    # other apps
]
  1. If you don't already have one, make an admin.py file in your main project folder and add the following code:
from django.contrib import admin
from unfold.admin import ModelAdmin


@admin.register(MyModel)
class CustomAdminClass(ModelAdmin): # note that we use ModelAdmin instead of admin.ModelAdmin
    pass

  1. That's it - it should be working now! However, there are some additional items you may want to add to your INSTALLED_APPS for more advanced elements or for working with some other Django packages:
    "unfold.contrib.filters",  # optional, if special filters are needed
    "unfold.contrib.forms",  # optional, if special form elements are needed
    "unfold.contrib.inlines",  # optional, if special inlines are needed
    "unfold.contrib.import_export",  # optional, if django-import-export package is used
    "unfold.contrib.guardian",  # optional, if django-guardian package is used
    "unfold.contrib.simple_history",  # optional, if django-simple-history package is used

Ever since I started with Django, I've always felt the Admin was lacking, so this is a welcome change and one I'll definitely be using on future projects!

TailwindDjango
Avatar for Stephen

Written by Stephen

I am a fullstack developer who likes to build useful things.

Loading

Fetching comments

Hey! 👋

Got something to say?

or to leave a comment.