⚠️ IMPORTANT: This project is under active development. APIs, components, and behavior may change between versions. Use for exploration and prototyping; evaluate carefully before production use.

Django Material

Modern Material Design 3 components and full-featured CRUD/admin interfaces for Django

🌐 Explore Material

• About
• Features
• Quickstart
• Usage
• Documentation & Demo
• Contributing
• License

Django Material brings Google's Material Design 3 to Django, offering both low-level UI components and full-featured CRUD/admin interfaces for rapid application development. Built on TailwindCSS and django-cotton, it delivers everything you need — from buttons and cards to list, create, update, and delete views — with minimal setup and zero frontend frameworks.

Our goal is to rethink UI component APIs for AI-assisted development: making them intuitive for developers, predictable for code generation tools, and streamlining the process of crafting interfaces by human or machine.

• 🎨 Material Design 3 components: buttons, cards, forms, tables, navigation, and more
• 🧩 django-cotton integration: intuitive <c-button>, <c-card>, and other component tags
• 🛠️ No build step required: pre-built CSS and JS included for immediate use
• 📱 Fully responsive & accessible: mobile-first design with ARIA support and keyboard navigation
• 🔄 SPA-like navigation: powered by Unpoly.js for seamless page updates
• 🗃️ Full CRUD & admin: ready-to-use list, create, update, and delete views with Material styling and simple customization
• 🤖 AI-first design: APIs optimized for AI-assisted generation and easy human coding
• 🪄 Easily customizable: override templates, tweak styles, or extend components
• ⚡ Zero frontend frameworks: no React, Vue, or Angular dependencies

1. Install via pip:

   pip install django-material

2. Add to INSTALLED_APPS:

   INSTALLED_APPS = [
       # ...
       'material',
       # ...
   ]

3. Collect static files (production):

   python manage.py collectstatic

4. In your template:

   {% extends "material/base.html" %}
   {% block content %}
     <c-button.filled>Start Building</c-button.filled>
   {% endblock %}

• Modify design tokens in material/assets/ and rebuild:

  npm run build:css
  npm run build:js

• Develop with live reloading:

  npm run dev

• Run tests:

  npm test

• Lint and format:

  npm run lint
  npm run format

Explore comprehensive docs and live demos at material.viewflow.io.

Contributions are welcome! See [ISSUES.md] for bug reports and feature requests.

Licensed under AGPLv3 with Additional Permissions. See [LICENSE] and [LICENSE_EXCEPTION]. Commercial terms in [COMM-LICENSE].

Built with ❤️ by the Viewflow Team.