Repository files navigation

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 onTailwindCSS anddjango-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 byUnpoly.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 toINSTALLED_APPS:

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

3. Collect static files (production):

   python manage.py collectstatic

4. In your template:

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

• Modify design tokens inmaterial/assets/ and rebuild:

  npm run build:cssnpm run build:js

• Develop with live reloading:

  npm run dev

• Run tests:

  npmtest

• Lint and format:

  npm run lintnpm run format

Explore comprehensive docs and live demos atmaterial.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.