Django Cotton

https://github.com/wrabit/django-cotton
Admin
Django Cotton brings component-based design to Django templates, enabling modular and reusable UI...
Tokens:45,186
Snippets:626
Trust Score:8.2
License:MIT
Update:2 weeks ago
Show doc for...
Tokens:
Raw
### Install django-cotton with pip

Source: https://github.com/wrabit/django-cotton/blob/main/docs/docs_project/docs_project/templates/quickstart.html

Install the django-cotton package using pip.

```bash
pip install django-cotton
```

--------------------------------

### Install django-cotton-ui with pip

Source: https://github.com/wrabit/django-cotton/blob/main/docs/docs_project/docs_project/templates/ui_docs/installation.html

Install the django-cotton-ui package via pip. This also installs django-cotton as a dependency.

```bash
pip install django-cotton-ui
```

--------------------------------

### Final working tabs example

Source: https://github.com/wrabit/django-cotton/blob/main/docs/docs_project/docs_project/templates/alpine_js.html

The final working example of the tabs component with three tabs. It shows the rendered output with tab buttons and content panels, demonstrating the completed re-usable component.

```html
<tabs>
  <tab label="Tab 1">Tab 1 content</tab>
  <tab label="Tab 2">Tab 2 content</tab>
  <tab label="Tab 3">Tab 3 content</tab>
</tabs>
```

--------------------------------

### Usage example of tabs component

Source: https://github.com/wrabit/django-cotton/blob/main/docs/docs_project/docs_project/templates/alpine_js.html

An example of how to use the tabs component with three tabs. It shows the markup required to create a set of tabs with content for each tab.

```html
<tabs>
  <tab label="Tab 1">Content for tab 1</tab>
  <tab label="Tab 2">Content for tab 2</tab>
  <tab label="Tab 3">Content for tab 3</tab>
</tabs>
```

--------------------------------

### Custom configuration: SimpleAppConfig with manual loader setup

Source: https://github.com/wrabit/django-cotton/blob/main/docs/docs_project/docs_project/templates/quickstart.html

Custom configuration for projects with non-default loaders or when you don't want Cotton to manage settings. Use SimpleAppConfig and manually specify the loader and builtins.

```python
INSTALLED_APPS = [
    'django_cotton.apps.SimpleAppConfig',
]

TEMPLATES = [
    {
        "BACKEND": "django.template.backends.django.DjangoTemplates",
        ...
        "OPTIONS": {
            "loaders": [(
                "django.template.loaders.cached.Loader",
                [
                    "django_cotton.cotton_loader.Loader",
                    "django.template.loaders.filesystem.Loader",
                    "django.template.loaders.app_directories.Loader",
                ],
            )],
            "builtins": [
                "django_cotton.templatetags.cotton"
            ],
        }
    }
]
```

--------------------------------

### Verify components render with accent colour

Source: https://github.com/wrabit/django-cotton/blob/main/docs/docs_project/docs_project/templates/ui_docs/installation.html

Example template with two components: a primary button and a default button. They should render styled, with the primary button in your accent colour.

```html
Primary Button
Default Button
```

--------------------------------

### Emit toast tabs (Vanilla JS and Alpine)

Source: https://github.com/wrabit/django-cotton/blob/main/docs/docs_project/docs_project/templates/ui_docs/toast.html

Tabbed code panel showing the Vanilla JS and Alpine $dispatch examples side by side.

```django
{% cotton:verbatim %}{% verbatim %} Vanilla JS

Alpine $dispatch

{% endverbatim %}{% endcotton:verbatim %}
```

--------------------------------

### Toast variants demo

Source: https://github.com/wrabit/django-cotton/blob/main/docs/docs_project/docs_project/templates/ui_docs/toast.html

Interactive demo of the four variants (info, success, warning, error) and an example with a title.

```django
{% cotton:verbatim %}{% verbatim %} Info Success Warning Error With title {% endverbatim %}{% endcotton:verbatim %}
```

--------------------------------

### Django view rendering dashboard.html

Source: https://github.com/wrabit/django-cotton/blob/main/docs/docs_project/docs_project/templates/quickstart.html

Example Django view that renders a template containing cotton components.

```python
def dashboard_view(request):
    return render(request, "dashboard.html")
```

--------------------------------

### Custom Tailwind build with cotton-ui.sources.css

Source: https://github.com/wrabit/django-cotton/blob/main/docs/docs_project/docs_project/templates/ui_docs/installation.html

Custom Tailwind build example: import the generated cotton-ui.sources.css, add your own @source rules, and override accent tokens with :root and .dark blocks. Do not use @theme for overriding kit tokens.

```css
@import "tailwindcss";

/* kit tokens + dark variant + class list, from `manage.py cotton_ui_sources`. Your build emits the kit's utilities (it resolves through .gitignore). */
@import "./cotton-ui.sources.css";

/* your own @source rules for your own templates (standard Tailwind, nothing kit-specific) */
@source "./your_app/templates/**/*.html";

/* brand it: override kit tokens with :root / .dark, NOT @theme (@theme loses to the kit's baked-in value; use @theme only for your own new tokens) */
:root {
  --color-accent: var(--color-teal-500);
  --color-accent-content: var(--color-teal-600);
}
.dark {
  --color-accent: var(--color-teal-400);
  --color-accent-content: var(--color-teal-300);
}
```

--------------------------------

### Add django_cotton to INSTALLED_APPS in settings.py

Source: https://github.com/wrabit/django-cotton/blob/main/README.md

Add 'django_cotton' to the INSTALLED_APPS list in your Django settings.py file. If you have previously specified a custom loader, you should perform manual setup.

```python
INSTALLED_APPS = [
    'django_cotton'
]
```

--------------------------------

### Dynamically include components with :is

Source: https://github.com/wrabit/django-cotton/blob/main/README.md

Dynamically includes a component based on a variable using the :is attribute. The example loops over form_fields and renders a component whose type is defined in the data.

```html
<!--
form_fields = [
  {'type': 'text'},
  {'type': 'textarea'},
  {'type': 'checkbox'}  
]
-->

{% for field in form_fields %}
    <c-component :is="field.type" />
{% endfor %}
```

--------------------------------

### Template expressions in attributes: Django native vs Cotton

Source: https://github.com/wrabit/django-cotton/blob/main/README.md

Shows how Cotton allows template expressions directly in attributes, while Django native requires nested quotes. Note the Cotton example has a missing closing quote in the source.

```html
{% bio name="{{ first_name }} {{ last_name }}" extra="{% get_extra %}" %}
```

```html
<c-bio name="{{ first_name }} {{ last_name }}" extra="{% get_extra %} />
```

--------------------------------

### Build and run documentation site

Source: https://github.com/wrabit/django-cotton/blob/main/CONTRIBUTING.md

Builds and runs the documentation site locally using Docker. Add 'mac' to the build command if you're on an ARM chip.

```bash
./docs/docker/bin/build.sh # add 'mac' if you're on ARM chip
./docs/docker/bin/run-dev.sh
```

--------------------------------

### Build the project with Docker

Source: https://github.com/wrabit/django-cotton/blob/main/CONTRIBUTING.md

Builds the project using Docker from the project root. Add 'mac' to the build command if you're on an ARM chip.

```bash
./dev/docker/bin/build.sh # add 'mac' if you're on ARM chip
./dev/docker/bin/run-dev.sh
```

--------------------------------

### Organize components in subfolders with dot notation

Source: https://github.com/wrabit/django-cotton/blob/main/README.md

Shows a folder structure for organizing components in subfolders and the corresponding usage with dot notation in component names. The structure includes index.html for default components, and the usage demonstrates <c-card>, <c-card.header>, <c-form.input>, and <c-ui.alert>.

```text
templates/cotton/
├── card/
│   ├── index.html
│   └── header.html
├── form/
│   ├── input.html
│   └── button.html
└── ui/
    ├── alert.html
    └── card.html
```

```html
<!-- Usage -->
<c-card>
  <c-card.header>...</c-card.header>
</c-card>
<c-form.input placeholder="Name" />
<c-ui.alert>Success!</c-ui.alert>
```

--------------------------------

### Add django_cotton and django_cotton_ui to INSTALLED_APPS

Source: https://github.com/wrabit/django-cotton/blob/main/docs/docs_project/docs_project/templates/ui_docs/installation.html

Add both django_cotton and django_cotton_ui to INSTALLED_APPS. Order matters: django_cotton must come before django_cotton_ui.

```python
INSTALLED_APPS = [
    # ...
    "django_cotton",
    "django_cotton_ui",
    # ...
]
```

--------------------------------

### package.json prebuild script for cotton_ui_sources

Source: https://github.com/wrabit/django-cotton/blob/main/docs/docs_project/docs_project/templates/ui_docs/installation.html

Wire the cotton_ui_sources command into your build as a pre-step to keep the class list in sync automatically. The command is fast and deterministic, so running it every build is safe.

```json
{
  "scripts": {
    "prebuild": "python manage.py cotton_ui_sources",
    "build": "tailwindcss -i app.css -o static/app.css --minify"
  }
}
```

--------------------------------

### Generate cotton-ui.sources.css

Source: https://github.com/wrabit/django-cotton/blob/main/docs/docs_project/docs_project/templates/ui_docs/installation.html

Run the bundled command to generate cotton-ui.sources.css next to your project. This file contains the kit's design tokens, dark variant, and full class list as @source inline(...).

```bash
python manage.py cotton_ui_sources
```

--------------------------------

### Add integrity attribute to Highlight.js CDN scripts

Source: https://github.com/wrabit/django-cotton/blob/main/docs/docs_project/docs_project/static/highlight/DIGESTS.md

Add the `integrity` attribute to each Highlight.js script tag loaded via CDN to enable Subresource Integrity. The example shows the main library and a grammar file (go.min.js) with their digests.

```html
<script
  src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.11.1/highlight.min.js"
  integrity="sha384-5xdYoZ0Lt6Jw8GFfRP91J0jaOVUq7DGI1J5wIyNi0D+eHVdfUwHR4gW6kPsw489E"></script>
<!-- including any other grammars you might need to load -->
<script
  src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.11.1/languages/go.min.js"
  integrity="sha384-HdearVH8cyfzwBIQOjL/6dSEmZxQ5rJRezN7spps8E7iu+R6utS8c2ab0AgBNFfH"></script>
```

--------------------------------

### Dynamic components: Django native vs Cotton

Source: https://github.com/wrabit/django-cotton/blob/main/README.md

Demonstrates dynamic component selection. Cotton supports dynamic component names via the `is` attribute, including nested subfolder paths.

```html
{% {{ templatetag_name }} arg=1 %}
```

```html
<c-component :is="component_name" />
<c-component is="{{ component_name }}" />
<c-component is="subfolder1.subfolder2.{{ component_name }}" />
```

--------------------------------

### Toast container placement

Source: https://github.com/wrabit/django-cotton/blob/main/docs/docs_project/docs_project/templates/ui_docs/toast.html

Place this container once in your base layout. It registers a global Alpine store, listens for the 'toast' event on the window, and renders a stack in each corner.

```django
{% cotton:verbatim %}{% verbatim %} {% endverbatim %}{% endcotton:verbatim %}
```

--------------------------------

### Run tests with Docker

Source: https://github.com/wrabit/django-cotton/blob/main/CONTRIBUTING.md

Runs the test suite. Append the test module path to test a specific module or test method.

```bash
./dev/docker/bin/test.sh # append the test module path to test one module or test method
```

--------------------------------

### Cotton: Composable & Re-usable

Source: https://github.com/wrabit/django-cotton/blob/main/docs/docs_project/docs_project/templates/home.html

Shows the Cotton approach for reusable components, allowing rich HTML content, unlimited reuse, and requiring only an HTML file without Python.

```django
{% verbatim %} {# ✅ pass rich HTML content #} **Bold**, [links](#), anything {# ✅ reuse unlimited times #} ... ... {# ✅ just an alert.html file, no Python #} No Python needed {% endverbatim %}
```

--------------------------------

### First component with slot

Source: https://github.com/wrabit/django-cotton/blob/main/README.md

Shows the basic usage of a component: the component template defines a slot, the view uses the component tag with content, and the output renders the content inside the slot.

```html
<!-- cotton/button.html -->
<a href="/" class="...">{{ slot }}</a>
```

```html
<!-- in view -->
<c-button>Contact</c-button>
```

```html
<!-- html output -->
<a href="/" class="...">Contact</a>
```

--------------------------------

### Automatic configuration: add django_cotton to INSTALLED_APPS

Source: https://github.com/wrabit/django-cotton/blob/main/docs/docs_project/docs_project/templates/quickstart.html

Add django_cotton to INSTALLED_APPS for automatic configuration. Cotton will attempt to modify settings.py to add the required loader and templatetags.

```python
INSTALLED_APPS = [
    'django_cotton',
]
```

--------------------------------

### List of SRI digests for Highlight.js files

Source: https://github.com/wrabit/django-cotton/blob/main/docs/docs_project/docs_project/static/highlight/DIGESTS.md

Full list of SRI digests for every Highlight.js file, including the main library and language grammars (css, django, python, xml) in both minified and non-minified forms. Use these values in the `integrity` attribute of your script tags.

```text
sha384-Gmvct15f4Mo9AXQG5bk5w78N1YjBLXXU3KIV7no+mOVnApXlwfw1dwjfueAwljIV /es/languages/css.js
sha384-1D7DbOic0Z5nM2ldSO9O/EsBfsg/5x7X7So1qnMgscI2ucDevptcg7cTvrD9rL0D /es/languages/css.min.js
sha384-IZPwfVGChjxiFn/yRHid99p+81wHZKppqSWzWv3/VpfILbOfX+FBbsAEjyYEz+08 /es/languages/django.js
sha384-c6VNDV3sM+ivvQX1L4LuDW3MjiYsC6u70/NKATWDBfdRODoECdSJ7oUhpcU/WBUi /es/languages/django.min.js
sha384-Cmq5lORXzyHraasLNqmfchH07JRXyEmjDF+j6tSggoXjYHwtgX/ySW6kkRytM5uu /es/languages/python.js
sha384-ZV5sgX70bBgLkDR5Mtox5UsbJedBc39hRKPdvTw6miK4lSkE/wv94cLY2iyZb/sB /es/languages/python.min.js
sha384-9ECFzM+oWDye4s/MFx3QUXGo4mW43+SyLpWUDeQtWup6GZJ+KHFxVS89PmZt/fzl /es/languages/xml.js
sha384-PQrsaWeWrBiE1CFRw8K335CaJuQRTjDGm73vn8bXvlwaw6RyqWObdvMTBS8B75NN /es/languages/xml.min.js
sha384-bsb3QmLtUiyaiHwtrL4YoAVI9yLsjyqxgoAsk4Zd+ass9rSK1WWRiCDSu/hm8QRp /languages/css.js
sha384-0XGvxIU7Oq1DQMMBr1ORiozzBq3KpZPE/74mJysWRBAop1dZ9Ioq/qRWe8u30Ded /languages/css.min.js
sha384-JAYZMDzuElX+Ic47jwB+qzCzyKkmmEffC3mBnYYrJp2BlRjSorjliOzKSAG8KKTt /languages/django.js
sha384-krxOUFgiyevtYl4SsL416jqrUPU3K9W6fDe/TRvWeXwLYKWKq/f+XHL2AHwGYswO /languages/django.min.js
sha384-ueSSFZFqg7cVD0dpEqIk9EefJiJUYan0PH6I8u/p+bNLLx7dMs4J2keMaFXqCN8P /languages/python.js
sha384-eXRt+aAa2ig1yFVDQCLis8k9s/1dikTcigj+/R07yNdIxc8BAG/b1uHDyEW3of17 /languages/python.min.js
sha384-Pgzg6a405W6U1xFjjSs5i8d7V81Tmt/TYn8HFOa+u1psDc8cbs8nC7BuyNXbWWRK /languages/xml.js
sha384-FQjSArDMJE4WMAJGcCNAV+IXIOljcIxM3UFAD2vxjedWmBnnDaAyqRG7AQHf/uM/ /languages/xml.min.js
sha384-bqHalAvvvIeqrat+eQRoeACWPWeWt5ZgroEg52FwkWc9IQdtC2W2uREgMS45pq6E /highlight.js
sha384-peJu78fxSoVFK/7Y7GKg0zxMlc+ziIAmjDz5hQFKMLW1ujACCH0wubmBqkRlUsSv /highlight.min.js
```

--------------------------------

### Dynamic components with template expressions

Source: https://github.com/wrabit/django-cotton/blob/main/README.md

Provides template expressions for dynamic components in subdirectories or with prefixes. Uses the is attribute with dot notation for subfolders and underscores for prefixes.

```html
{% for field in form_fields %}
    <!-- subfolder -->
    <c-component is="form-fields.{{ field.type }}" />

    <!-- component prefix -->
    <c-component is="field_{{ field.type }}" />
{% endfor %}
```

--------------------------------

### Create card.html cotton component

Source: https://github.com/wrabit/django-cotton/blob/main/docs/docs_project/docs_project/templates/quickstart.html

Create a cotton component file card.html in the cotton directory. This component uses {{ title }} and {{ slot }} placeholders.

```html
<div class="card">
    <h2>{{ title }}</h2>
    <div>{{ slot }}</div>
    <a href="#">Read more</a>
</div>
```

--------------------------------

### Render components from views with render_component()

Source: https://github.com/wrabit/django-cotton/blob/main/README.md

Shows how to render a Cotton component from a Django view using render_component(). The component template uses {{ type }} and {{ message }} variables, and the view passes them as keyword arguments.

```html
<!-- cotton/notification.html -->
<div class="alert alert-{{ type }}">{{ message }}</div>
```

```python
# views.py
from django.http import HttpResponse
from django_cotton import render_component

def user_deleted(request, id):
    user = User.objects.get(id=id)
    user.delete()
    return HttpResponse(
        render_component(request, "notification",
            message=f"{user.name} deleted",
            type="success"
        )
    )
```

--------------------------------

### Include card component with title and slot

Source: https://github.com/wrabit/django-cotton/blob/main/docs/docs_project/docs_project/templates/quickstart.html

Include the card component twice with different titles and slot content. The output shows two cards with headings and text.

```html
<c-card title="Trees">
    We have the best trees
</c-card>

<c-card title="Spades">
    The best spades in the land
</c-card>
```

--------------------------------

### User List Template (user-list.html)

Source: https://github.com/wrabit/django-cotton/blob/main/docs/docs_project/docs_project/templates/htmx_examples.html

Template that iterates over users and displays a 'View Details' button that triggers an HTMX request to load user details.

```html
{% for user in users %}

{{ user.name }} View Details

{% endfor %}
```

--------------------------------

### Toast appearance: solid per toast

Source: https://github.com/wrabit/django-cotton/blob/main/docs/docs_project/docs_project/templates/ui_docs/toast.html

Set the 'appearance' per toast or as the container default. Options: soft (default), solid, outline.

```javascript
{# Per toast #}
window.dispatchEvent(new CustomEvent('toast', { detail: { message: 'Saved', variant: 'success', appearance: 'solid' } }))
{# Or as the container default for every toast #}
```

--------------------------------

### Emit toast: Vanilla JS, Alpine $dispatch, HTMX HX-Trigger

Source: https://github.com/wrabit/django-cotton/blob/main/docs/docs_project/docs_project/templates/ui_docs/toast.html

Three ways to emit a toast: dispatch a window CustomEvent directly, use Alpine's $dispatch (events bubble to the window), or return an HX-Trigger response header (HTMX re-dispatches it as a window event).

```javascript
window.dispatchEvent(new CustomEvent('toast', { detail: { message: 'Saved', variant: 'success' } }))
```

```javascript
$dispatch('toast', { message: 'Saved', variant: 'success' })
```

```http
HX-Trigger: {"toast": {"message": "Saved", "variant": "success"}}
```

--------------------------------

### Set default attribute with <c-vars>

Source: https://github.com/wrabit/django-cotton/blob/main/README.md

Shows how to define a default attribute value with `<c-vars>` in a component. The default `theme` is used when no value is passed, as shown in the output.

```html
<!-- cotton/button.html -->
<c-vars theme="bg-purple-500" />

<a href="..." class="{{ theme }}">
    {{ slot }}
</a>
```

```html
<!-- in view -->
<c-button>I'm a purple button</c-button>
```

```html
<!-- html output -->
<a href="..." class="bg-purple-500">
    I'm a purple button
</a>
```

--------------------------------

### Base template with design token overrides

Source: https://github.com/wrabit/django-cotton/blob/main/docs/docs_project/docs_project/templates/ui_docs/installation.html

Base template snippet that loads the static files, links the kit's precompiled stylesheet and Alpine bundle, and overrides design tokens in the <head>. The {{ slot }} is where your content goes.

```html
{% load static %}

/* default / light mode */
:root {
  --color-accent: var(--color-teal-500);
  --color-accent-content: var(--color-teal-600);
}

/* dark mode */
.dark {
  --color-accent: var(--color-teal-400);
  --color-accent-content: var(--color-teal-300);
}

{{ slot }}
```

--------------------------------

### Multi-line definitions: Django native vs Cotton

Source: https://github.com/wrabit/django-cotton/blob/main/README.md

Shows multi-line component definitions. Cotton supports multi-line attributes with complex values like Alpine.js x-data objects.

```html
{% my_component
    arg=1 %}
```

```html
<c-my-component
    class="blue"
    x-data="{
        something: 1
    }" />
```

--------------------------------

### User Details View (user_details)

Source: https://github.com/wrabit/django-cotton/blob/main/docs/docs_project/docs_project/templates/htmx_examples.html

Django view that fetches a user by ID and returns the user-details component with the user's name and email.

```python
from django.http import HttpResponse
from django_cotton import render_component

def user_details(request, id):
    user = get_object_or_404(User, id=id)
    return HttpResponse(
        render_component(request, "user-details", name=user.get_full_name(), email=user.email, )
    )
```

--------------------------------

### User Details Template (user-details.html)

Source: https://github.com/wrabit/django-cotton/blob/main/docs/docs_project/docs_project/templates/htmx_examples.html

Template for displaying user details inside the modal, including name, email, and a close button.

```html
## {{ name }}

Email: {{ email }}

Close
```

--------------------------------

### Use button component with variants

Source: https://github.com/wrabit/django-cotton/blob/main/docs/docs_project/docs_project/templates/home.html

Uses the button component with different variants (Save, Cancel, Delete) to show how one prop can create multiple looks.

```django
{% verbatim %} Save Cancel Delete {% endverbatim %}
```

--------------------------------

### Native DTL: Verbose & Limited

Source: https://github.com/wrabit/django-cotton/blob/main/docs/docs_project/docs_project/templates/home.html

Shows the verbose and limited native Django template language (DTL) approach for reusing components, highlighting issues like HTML escaping, single inheritance, and the need for Python files.

```django
{% verbatim %} {# ❌ include: HTML is escaped #} {% include "card.html" with content="**Bold**..." %} {# ❌ extends: only one per template #} {% extends "card.html" %} {% block content %}Card 1{% endblock %} {% extends "card.html" %} {% block content %}Card 2{% endblock %} {# ❌ templatetags: needs a .py file #} {% load card %} {% card %} {% endverbatim %}
```

--------------------------------

### Merge attributes with :attrs

Source: https://github.com/wrabit/django-cotton/blob/main/README.md

Shows how to merge a dictionary of attributes into a component using the `:attrs` syntax. The dictionary is passed from the view context, merged with directly passed attributes like `required`, and output via `{{ attrs }}`.

```html
<!-- cotton/input.html -->
<input type="text" {{ attrs }} />
```

```python
# In your view context
context = {
    'widget_attrs': {
        'placeholder': 'Enter your name',
        'data-validate': 'true',
        'size': '40'
    }
}
```

```html
<!-- In your template (e.g., form_view.html) -->
<c-input :attrs="widget_attrs" required />
```

```html
<!-- HTML output -->
<input type="text" placeholder="Enter your name" data-validate="true" size="40" required />
```

--------------------------------

### Initial HTML/Tailwind design for tabs

Source: https://github.com/wrabit/django-cotton/blob/main/docs/docs_project/docs_project/templates/alpine_js.html

The initial static design of the tabs component using HTML and Tailwind CSS. It shows two tabs with content, used as a visual reference before adding interactivity.

```html
<div class="max-w-md mx-auto mt-10 p-6 bg-white rounded-lg shadow-lg">
  <div class="flex border-b">
    <button class="px-4 py-2 text-sm font-medium text-blue-600 border-b-2 border-blue-600">Tab 1</button>
    <button class="px-4 py-2 text-sm font-medium text-gray-500 hover:text-gray-700">Tab 2</button>
  </div>
  <div class="mt-4">
    <p>Lorem ipsum ...</p>
  </div>
</div>
```

--------------------------------

### tab.html with Alpine.js registration

Source: https://github.com/wrabit/django-cotton/blob/main/docs/docs_project/docs_project/templates/alpine_js.html

The tab.html component updated to register itself with the Alpine.js tabs data when it is imported into the DOM. It uses x-init to register the tab and x-show to display the content only when the tab is active.

```html
<button x-on:click="currentTab = '{{ label }}'" class="px-4 py-2 text-sm font-medium text-blue-600 border-b-2 border-blue-600">
  {{ slot }}
</button>
<div x-show="isCurrent('{{ label }}')" class="mt-4">
  {{ slot }}
</div>
```

--------------------------------

### Passing Python data types

Source: https://github.com/wrabit/django-cotton/blob/main/README.md

Two syntaxes for passing dynamic values: quoteless `attr=value` for simple literals and variables, and colon prefix `:attr="value"` for complex expressions with spaces or quotes. Both support integers, floats, None, True, False, lists, dictionaries (colon prefix required), and context variables.

```html
<!-- Quoteless: for simple literals and variables -->
<c-button enabled=True />
<c-button enabled=False />
<c-input value=my_variable />
<c-counter start=42 />

<!-- Colon prefix: required for complex expressions with spaces/quotes -->
<c-select :options="['yes', 'no', 'maybe']" />
<c-card :config="{'open': True}" />
```
Tokens:
Raw