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:
- 🧩 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
<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>
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 --helpor, if you use pipx:
pipx run shadcn_django@latest --helpshadcn_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.
uvx shadcn_django initThis will:
- Create a
templates/cottondirectory for your components - Add the necessary Tailwind configuration files
- Set up the CSS variables for shadcn's design system
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-cssor, 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/[email protected]/dist/cdn.min.js"></script>Run Tailwind to generate your CSS:
npx @tailwindcss/cli -i input.css -o static/css/output.css --watchList available components:
uvx shadcn_django listAdd a component:
uvx shadcn_django add buttonThis will add the button component and any of its dependencies to your templates/cotton directory.
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>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" />Contributions are welcome! Feel free to open issues or submit pull requests.
- 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/
MIT