shadcn_django
Beautifully designed components that you can copy and paste into your apps, based on shadcn/ui.
This is an unofficial Django port of shadcn/ui. This project is not affiliated with shadcn.
Components are built with Tailwind CSS and Alpine.js and are HTMX-compatible, making them highly customizable and interactive.
shadcn_django provides a CLI tool that allows you to initialize and add shadcn-style components to your Django templates.
Docs: https://shadcn-django.com
Video overview by BugBytes:
Features
- 🧩 Add components individually as needed
- 🎨 Based on Tailwind CSS for beautiful, responsive styling
- 🚀 Easy initialization of shadcn component architecture in Django projects
- ⚙️ Uses Alpine.js for interactive functionality
- 🛠️ Simple CLI commands for easy distribution
- 📦 Automatically installs component dependencies
An Example of a component (Toast with an action button)
<div class="p-5" x-data>
<c-toast.trigger variant="outline" toast_target="toast-success">
Show Success Toast
</c-toast.trigger>
</div>
<c-toast id="toast-success">
<c-toast.content
type="default"
title="Success"
description="This is a success message"
>
<c-button>Share</c-button>
</c-toast.content>
</c-toast>
Installation
This is not a component library that you install. It is how you build your component library.
Use the CLI to initialize and add components without the need for installing it in your Django project.
uvx shadcn_django@latest --help
or, if you use pipx:
pipx run shadcn_django@latest --help
Getting Started
0. Add django-cotton to your Django project
shadcn_django uses django-cotton to manage the component architecture, because of it's elegant html like syntax.
It is also interoperable with django templates, so you won't have to switch over your entire project.
See django-cotton installtion instructions.
1. Initialize shadcn-django in your project
uvx shadcn_django init
This will:
- Create a
templates/cottondirectory for your components - Add the necessary Tailwind configuration files
- Set up the CSS variables for shadcn's design system
2. Set up Tailwind CSS
Make sure you have Tailwind CSS and Alpine.js installed:
You can use npm or yarn to install tailwindcss:
npm install -D tailwindcss tw-animate-css
or, you can also use django-tailwind-cli if you don't want to use node,
and follow the manual installation instructions for tw-animate-css here
See alpinejs docs for installation instructions: https://alpinejs.dev/installation
Add the CSS and Alpine.js to your base template <head> tag:
<!-- Tailwind CSS output file -->
<link rel="stylesheet" href="{% static 'css/output.css' %}" />
<!-- Alpine.js tag - directly from CDN (not recommended for production) -->
<script defer src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js"></script>
Run Tailwind to generate your CSS:
npx @tailwindcss/cli -i input.css -o static/css/output.css --watch
3. Add components
List available components:
uvx shadcn_django list
Add a component:
uvx shadcn_django add button
This will add the button component and any of its dependencies to your templates/cotton directory.
Using Components in Django Templates
After adding components, you can use them in your Django templates:
<div>
<c-button variant="outline">Cancel</c-button>
<c-button variant="default">Submit</c-button>
</div>
Customization
When you use the CLI to add components, they are copied into your project folder. You own the components and can customize them as you see fit.
All components use Tailwind CSS classes and can also be customized by passing additional classes:
<c-button variant="default" class="w-full mt-4" />
Contributing
Contributions are welcome! Feel free to open issues or submit pull requests.
Prior Art
- Shadcn UI for React: https://ui.shadcn.com/
- Shadcn for Vue: https://www.shadcn-vue.com/
- Shadcn for svelte: https://www.shadcn-svelte.com/
- Shadcn for JinjaX templates: https://components.basicmachines.co/
License
MIT
1 maintainer
Metadata
1 maintainer
Release files for shadcn_django 0.24.1
For a detailed explanation of source distributions (sdists) and built distributions (wheels), please see the package formats documentation.
Source distribution (sdist)
| File | Size | Uploaded | Provenance | |
|---|---|---|---|---|
| shadcn_django-0.24.1.tar.gz | 62.6 kB | Without provenance | Details |
Built distribution (wheel)
| File | Interpreter | ABI | Platform | Reset |
|---|---|---|---|---|
| shadcn_django-0.24.1-py3-none-any.whl | Python 3 | none | any | Details |
Total release size: 71.4 kB
Release files / shadcn_django-0.24.1.tar.gz
| Download URL | shadcn_django-0.24.1.tar.gz |
|---|---|
| Size | 62.6 kB |
| Tags | Source |
|
SHA-256 checksum How to use checksums |
2e9e53ab293a694cd6d3387aefeecccf985d71c825b517503ba10b7b0ddaed84
|
|
BLAKE2b-256 checksum How to use checksums |
3b4dfda71b5105ed7a35a44e5858965b02a44550943377827caa5ef08a32b042
|
| Upload date | |
|
Uploaded using Trusted Publishing? What is trusted publishing? |
No |
| Uploaded via |
uv/0.9.17 {"installer":{"name":"uv","version":"0.9.17","subcommand":["publish"]},"python":null,"implementation":{"name":null,"version":null},"distro":{"name":"macOS","version":null,"id":null,"libc":null},"system":{"name":null,"release":null},"cpu":null,"openssl_version":null,"setuptools_version":null,"rustc_version":null,"ci":null}
|
Release files / shadcn_django-0.24.1-py3-none-any.whl
| Download URL | shadcn_django-0.24.1-py3-none-any.whl |
|---|---|
| Size | 8.8 kB |
| Tags | Python 3 |
|
SHA-256 checksum How to use checksums |
20ebc646ce1972587687473cefeb19b2750a6eb341210783174d8e37fc1b11f4
|
|
BLAKE2b-256 checksum How to use checksums |
4899445cbad1a0b80c3840e6beafac74628ed5ca2d3d4d182422c5cf2db9f82a
|
| Upload date | |
|
Uploaded using Trusted Publishing? What is trusted publishing? |
No |
| Uploaded via |
uv/0.9.17 {"installer":{"name":"uv","version":"0.9.17","subcommand":["publish"]},"python":null,"implementation":{"name":null,"version":null},"distro":{"name":"macOS","version":null,"id":null,"libc":null},"system":{"name":null,"release":null},"cpu":null,"openssl_version":null,"setuptools_version":null,"rustc_version":null,"ci":null}
|
Security for shadcn_django 0.24.1
Provenance
Provenance describes where a file came from. On PyPI, provenance is shared via attestations, which provide a verifiable record of the build or publishing details. View details, limitations and caveats.
No provenance found
None of the files in this release were uploaded with provenance metadata.
A note on package security
PyPI is a repository for distributing packages, not a service for auditing them. While third-party security researchers and our staff do their best to detect and remove malicious packages, PyPI cannot guarantee the quality, security or suitability of any given package.
