Vela — Django Port

Introduction

This package ports the Vela React Admin Dashboard Template into a Django project. It contains:

• 197+ real routes, one Django template per page (plus a handful of dynamic-id detail routes such as /users/<id>/), matching the original page-for-page.
• One shared, purged Tailwind CSS bundle under static/assets/ driving every page — same design tokens, spacing, and breakpoints as every other Vela port.
• Dark & light themes, switchable at runtime and persisted to localStorage.
• Working sidebar navigation, mobile drawer, and command palette (⌘K) on every page, shared across templates via templates/base.html.
• A real Django app (pages) with its own urls.py, template-backed views, and a custom 404 handler — a genuine starting point for a Django admin backend, not a static export.

Quick start

Requires Python 3.10+. From inside the vela-django/ folder:

python3 -m venv venv
source venv/bin/activate   # Windows: venv\Scripts\activate
pip install -r requirements.txt 2>/dev/null || pip install django
python manage.py migrate
python manage.py runserver

Then open http://localhost:8000 — it redirects straight to the Analytics dashboard.

Package structure

vela-django/
├─ manage.py
├─ velasite/                 # Project package: settings.py, urls.py, wsgi.py/asgi.py
├─ pages/                     # The single app powering every route
│  ├─ urls.py                 # All 197+ routes — auto-generated by codegen/build_urls.py
│  ├─ nav_data.py              # Sidebar navigation tree (mirrors the React nav-config)
│  └─ context_processors.py    # Sidebar-collapsed-state cookie, available in every template
├─ templates/
│  ├─ base.html                # Shared chrome: sidebar, topbar, mobile drawer, command palette
│  ├─ base_auth.html            # Chrome-less layout for login/register/etc.
│  └─ pages/*.html               # One template per route, {% extends "base.html" %}
├─ static/assets/                # Purged Tailwind CSS bundle, fonts, icons, images
│  └─ js/vela-static.js           # Same hand-written behavior layer as every other Vela port
└─ codegen/                       # The generator that produced urls.py/templates from
                                    # vela-html/dist — re-run only if you know what you're doing

Every sidebar link, breadcrumb, and "view all" button resolves through Django's {% url %} tag against a real named route in pages/urls.py — there is no client-side router.

What's interactive vs. static

Every page ships the same vela-static.js behavior layer used across the HTML, Laravel, and ASP.NET ports of this product: tabs, toggles, accordions, dropdowns, modals, toasts, filters, and search all work against plain data-vela-* attributes baked into the template markup — no page-specific JavaScript needed.

The same known, intentional limitations documented for the static HTML export apply here too (this Django port templates the same generated markup):

• Kanban drag-and-drop stays visual-only, matching the React source.
• Column sorting combined with search/filter/pagination on the Data Tables and Support Tickets pages isn't implemented; search, filtering, and pagination on those pages do work.
• List pages (Users, Projects, Products, Orders, etc.) link every row to one representative detail route (e.g. /users/<id>/) rather than a unique route per mock record.

Themes & navigation

Dark is the default on every page. The theme toggle writes to localStorage["vela-theme"] and is read back on every page load. The sidebar's collapsed/expanded state is additionally persisted server-side via a cookie read in pages/context_processors.py, so it survives a full page reload without a flash of the wrong layout.

Customizing a page

• Content — edit the relevant file directly under templates/pages/. Each one {% extends "base.html" %} and fills the content block.
• Colors / accent — the design tokens are CSS custom properties defined once in static/assets/css/style.css. Change them there and every page updates.
• Navigation — edit pages/nav_data.py; the sidebar is rendered from this single Python data structure in base.html, not duplicated per page.
• Adding a route — add a template under templates/pages/ and register it with path(...) in pages/urls.py, same pattern as the existing entries.

Deployment

Set these before running anywhere other than your own machine — velasite/settings.py reads all three from the environment with safe local-dev fallbacks:

python manage.py collectstatic
DJANGO_DEBUG=False DJANGO_ALLOWED_HOSTS=yourdomain.com DJANGO_SECRET_KEY=$(python -c "import secrets;print(secrets.token_urlsafe(50))") \
  gunicorn velasite.wsgi:application --bind 0.0.0.0:8000

Put Nginx/Apache or a CDN in front for TLS and static-file serving in a real production deployment.

Credits & licenses

Fonts

Images & icons

• All icons and illustrations are hand-drawn inline SVG — no icon font or icon library is bundled.
• Demo product photos are hot-linked from Unsplash (free for commercial use, no attribution required). They are demo placeholders — replace them with your own imagery.

Support

If you have questions not covered here, please reach out through the item's Comments tab or the support contact listed on our ThemeForest profile. Please include your purchase code and a description of the issue.

© Vela. All rights reserved.