---
title: Writing components
description: "Build components for a labb project with c-vars, props, bindings, slots, and forwarded attributes."
keywords: "django cotton c-vars, django cotton slots, write django component, labb custom component, cotton attrs"
---
Your components use the same conventions as labb’s. Put a template under `templates/cotton/`, then call it as a tag from another template. It can receive props and nested markup. [django-cotton](https://django-cotton.com/) documents the wider API.
## Create the template
Create a file in `templates/cotton/`. Its path determines the tag name.
```html
{{ title }}
{{ price }}
```
```html
```
Hyphens become underscores in the filename and dots become directories. `` maps to `cotton/product_card.html`. `` maps to `cotton/shop/product/card.html`. Check this mapping first when Django cannot find a component.
## Declare props with `c-vars`
List each prop in `` and provide a default. Undeclared attributes pass through to `attrs`.
```html
```
A bare declaration creates a boolean prop. Include the attribute to enable it.
```html
```
Omit the attribute to leave it off. You do not need `border="true"` or `:border="False"`.
## Bind values with a leading colon
A plain attribute passes text. A leading `:` passes the evaluated Python value. Use it for objects, numbers, lists, and context variables.
```html
```
Do not wrap a context variable in `{{ }}` inside a component attribute. Django turns it into text before the component receives it. Write `:product=product`.
Give a bound prop a typed default, such as ``.
## Accept markup with slots
`{{ slot }}` holds the content between the opening and closing tags.
```html
{{ title }}
{{ slot }}
```
```html
Anything here lands in the slot.
```
Name a slot when the component needs more than one content area. `` fills `{{ header }}`.
```html
Shipping
Body content goes in the default slot.
```
Use a named slot for markup. Use a prop for a short text value.
## Forward the rest with `attrs`
`{{ attrs }}` outputs attributes that the component did not declare. Add it to the root element so callers can pass `id`, `data-*`, and `aria-*`. Declare and merge `class` so callers can extend the component’s styling.
```html
{{ slot }}
```
```html
…
```
Reactive attributes also pass through `attrs`. In `data-on:click` and `data-bind:*`, the colon is part of the attribute name. Only a leading colon binds a Python value.
## Compound components
A directory with `index.html` and sibling templates creates a component family. labb’s `card` uses this structure.
```
templates/cotton/shop/product/index.html ->
templates/cotton/shop/product/price.html ->
```
Use this structure when a component has distinct pieces instead of adding a long list of props.
## Related