shadcn/ui for Django
Project description
shadcn_django
Beautifully designed components that you can copy and paste into your apps, based on shadcn/ui.
This is a Django specific port of shadcn/ui. The components are built with Tailwind CSS and Alpine.js, making them highly customizable and interactive without the need for a full React setup.
shadcn_django provides a CLI tool that allows you to initialize and add shadcn-style components to your Django templates.
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 tailwindcss-animate
or, you can also use django-tailwind-cli if you don't want to use node.
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
Release history Release notifications | RSS feed
Download files
Download the file for your platform. If you're not sure which to choose, learn more about installing packages.
Source Distribution
Built Distribution
Filter files by name, interpreter, ABI, and platform.
If you're not sure about the file name format, learn more about wheel file names.
Copy a direct link to the current filters
File details
Details for the file shadcn_django-0.12.0.tar.gz.
File metadata
- Download URL: shadcn_django-0.12.0.tar.gz
- Upload date:
- Size: 51.4 kB
- Tags: Source
- Uploaded using Trusted Publishing? No
- Uploaded via: uv/0.6.3
File hashes
| Algorithm | Hash digest | |
|---|---|---|
| SHA256 |
614d1fa5da26ec22ec629c0567e17220ce967b8952ae534539357a42884b7188
|
|
| MD5 |
e42f10aaf7b1423f4eadb43bea040781
|
|
| BLAKE2b-256 |
eb526edfc96b8449145af98dad25cdc4b4b2484e3890da3f547e047076da0533
|
File details
Details for the file shadcn_django-0.12.0-py3-none-any.whl.
File metadata
- Download URL: shadcn_django-0.12.0-py3-none-any.whl
- Upload date:
- Size: 7.9 kB
- Tags: Python 3
- Uploaded using Trusted Publishing? No
- Uploaded via: uv/0.6.3
File hashes
| Algorithm | Hash digest | |
|---|---|---|
| SHA256 |
e89acd6ee441d7547923ac894a4c1740e805e80d6b942067ca59c589e65f40ad
|
|
| MD5 |
85468772699ff9de64abd64368d9636f
|
|
| BLAKE2b-256 |
0b0afe5286a106bc2d101cb7624be26ad7fc3d488846c8a17bd99181430429a7
|
