Requirements

Python ≥ 3.8
Django ≥ 5.2

No Node.js required! All CSS and JavaScript assets are pre-built and included in the package.

Step 1: Install Package

Install Tungsten UI

This will automatically install Django Cotton as a dependency.

pip install tungsten-ui

Step 2: Configure Django Settings

Add to INSTALLED_APPS

Add both apps to your Django settings, with the correct order:

# settings.py
INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    
    # Third-party apps
    'django_cotton',           # Required: Django Cotton
    'tungsten_ui',    # Tungsten UI
    
    # Your apps
    'your_app',
]

Step 3: Include Required Assets

Simple Method: Use Pre-built Assets

The easiest way is to include the pre-built components and assets:

<!-- In your base.html head section -->
{% include "init-components.html" %}

This includes all CSS, JavaScript, and required CDN resources automatically.

Manual Method (Optional)

If you prefer manual control, you can include assets individually:

<!-- In your base.html -->
<head>
    {% load static %}
    
    <!-- Tungsten UI CSS (pre-built) -->
    <link rel="stylesheet" href="{% static 'tungsten_ui/css/components.css' %}">
    
    <!-- HTMX -->
    <script src="https://cdn.jsdelivr.net/npm/htmx.org@2.0.6/dist/htmx.min.js"></script>
    
    <!-- Alpine.js (for reactive components) -->
    <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.14.8/dist/cdn.min.js"></script>
    
    <!-- Tungsten UI JavaScript -->
    <script src="{% static 'tungsten_ui/js/components.js' %}"></script>
</head>

Step 4: Start Using Components

In Your Templates

Now you can use Tungsten UI in your templates:

<!-- your_template.html -->

<!-- Button component -->
<c-button variant="primary" size="lg">
    Click me!
</c-button>

<!-- Card component -->
<c-card class="max-w-sm">
    <c-slot name="title">Card Title</c-slot>
    <c-slot name="content">
        <p>This is a card content.</p>
    </c-slot>
</c-card>

Troubleshooting

Components not rendering?

Make sure django_cotton is installed and added to INSTALLED_APPS before tungsten_ui.

Styles not loading?

Make sure you've included the init-components.html template or manually included the CSS files.

JavaScript not working?

Make sure HTMX and Alpine.js are loaded before the page content.

Next Steps

Explore Components

Browse our comprehensive component library.

View Components

Check Examples

See real-world usage examples and layouts.

View Examples

Tungsten UI 💡