django-allauth-xui 0.1.0

Modern UI for django-allauth

django‑allauth‑xui

---

Overview

django‑allauth‑xui (XUI) provides a modern, responsive UI layer for django‑allauth, styled with Tailwind CSS and daisyUI.

It’s designed to give authentication flows a clean, contemporary look out of the box, while remaining fully customizable for your brand and product.

---

Key Features

• Modern UI — TailwindCSS + daisyUI styling
• 35+ Built‑in Themes — all daisyUI themes included
• Custom Themes — create and apply your own in minutes
• CI/CD Ready — GitHub Actions pipelines for testing and deployment

---

Screenshots

---

Quick Start

First, install the package (after setting up django‑allauth):

pip install django-allauth-xui

Add to INSTALLED_APPS (order matters):

INSTALLED_APPS = [
    ...
    "allauth_xui",
    "allauth",
    "allauth.account",
    ...
]

Include the URLs:

from django.urls import path, include

urlpatterns = [
    ...
    path("accounts/", include("allauth.urls")),
    path("accounts/", include("allauth_xui.urls")),
    ...
]

---

Customization

XUI is designed to be extended. To override layouts:

mkdir -p your_app/templates/allauth/layouts
touch your_app/templates/allauth/layouts/base.html

Then extend the base template:

{% extends "allauth/layouts/base.html" %}

Add Your Brand

{% extends "allauth/layouts/base.html" %}{% load i18n static %}

<!-- Brand in Navbar -->
{% block branding %}
<li
  class="tooltip tooltip-right rtl:tooltip-left tooltip-primary md:hidden"
  data-tip="{% trans 'YOUR_BRAND' %}"
>
  <a
    href="{% url 'account_profile' %}"
    class="btn btn-square btn-primary lg:btn-lg 2xl:btn-lg"
  >
    <img
      alt="{% trans 'YOUR_BRAND' %}"
      src="{% static 'path/to/your/logo.png' %}"
      class="size-6 lg:size-8 2xl:size-10"
    />
    <span class="sr-only">{% trans 'YOUR_BRAND' %}</span>
  </a>
</li>
{% endblock %}

<!-- Brand in Drawer Menu -->
{% block drawer_branding %}
<li
  class="tooltip tooltip-right rtl:tooltip-left tooltip-primary"
  data-tip="{% trans 'YOUR_BRAND' %}"
>
  <a
    href="{% url 'account_profile' %}"
    class="btn btn-square btn-primary lg:btn-lg 2xl:btn-lg"
  >
    <img
      alt="{% trans 'YOUR_BRAND' %}"
      src="{% static 'path/to/your/logo.png' %}"
      class="size-6 lg:size-8 2xl:size-10"
    />
    <span class="sr-only">{% trans 'YOUR_BRAND' %}</span>
  </a>
</li>
{% endblock %}

<!-- Links in sidebar -->
{% block user_links %}
<li
  class="is-drawer-close:tooltip is-drawer-close:tooltip-right rtl:is-drawer-close:tooltip-left"
  data-tip="{% trans 'Home' %}"
>
  <a href="https://your.domain.com/">
    <i data-lucide="home" class="size-4 lg:size-6"></i>
    <span class="is-drawer-close:sr-only">
      {% trans 'Home' %}
    </span>
  </a>
</li>
...
{% endblock %}

Themes

• Switch themes:

{% block theme %}silk{% endblock %}
{% block toggle_theme %}luxury{% endblock %}

• Remove theme controls:

{% block theme_selector %}{% endblock %}
{% block theme_toggle %}{% endblock %}

• Create your own theme:
  Use daisyUI’s Theme Generator, add the CSS to your stylesheet, and include it in your template:

{% block extra_head %}
<link rel="stylesheet" href="{% static 'your_app/css/output.css' %}" />
{% endblock %}

---

Contributing

Contributions are welcome! Please see the CONTRIBUTING guide for details. Feedback, issues, and pull requests help shape the project.

---

Support

For questions or support, open an issue or join the conversation in GitHub Discussions.

---

License

Licensed under the MIT License. See the LICENSE file for details.