shadcn-django - Components for Django apps!
- Django Shad CN은 Django 애플리케이션을 위한 Shad CN의 비공식 포트이며, 커스터마이징이 용이하고 기본 설정이 잘 되어 있는 컴포넌트 기반의 애플리케이션을 구축할 수 있도록 돕습니다. 🛠️
- Shad CN은 원래 React용으로 개발된 디자인 시스템으로, 아름다운 디자인의 컴포넌트를 제공하며 확장 및 커스터마이징이 가능합니다. 🎨
- Django Shad CN은 Tailwind CSS와 AlpineJS로 빌드되었으며, HTMX와 호환되어 높은 수준의 커스터마이징과 인터랙티브한 기능을 제공합니다. 🚀
- uvx 또는 pipx를 사용하여 Django Shad CN을 설치하고, Django Cotton을 프로젝트에 설치해야 합니다. 📦
- init 명령어를 통해 input.css 파일과 templates/cotin 디렉토리를 생성하고, 필요한 Tailwind CSS 설정을 추가합니다. ⚙️
- npm 또는 yarn을 사용하여 Tailwind CSS를 설치하고, Tailwind CLI를 사용하여 output.css 파일을 생성합니다. 💻
- Django settings.py에서 STATICFILES_DIRS 설정을 통해 static 디렉토리를 지정해야 합니다. 📁
- uvx shadcn-django list 명령어를 통해 사용 가능한 컴포넌트 목록을 확인할 수 있습니다. 📜
- uvx shadcn-django add [component_name] 명령어를 통해 컴포넌트를 추가할 수 있으며, 컴포넌트 코드는 templates/cotin 디렉토리에 생성됩니다. ✨
- 추가된 컴포넌트는 Django Cotton의 C-태그를 사용하여 템플릿에서 참조할 수 있으며, variant, size 등의 속성을 전달하여 커스터마이징할 수 있습니다. 🏷️
- 컴포넌트의 스타일은 Tailwind CSS 클래스를 추가하거나 제거하여 쉽게 변경할 수 있으며, 새로운 variant를 추가하여 확장할 수도 있습니다. ➕
- select 컴포넌트와 같이 여러 파일로 구성된 컴포넌트도 제공되며, AlpineJS를 사용하여 상태 관리 및 인터랙션을 구현할 수 있습니다. 🎛️