# Scoped Slots
URL: /kida/docs/advanced/scoped-slots/
Section: advanced
Description: Pass data from components back to their callers with let bindings
---
> For a complete page index, fetch /kida/llms.txt.
Scoped slots let a component expose data **up** to the caller. The component
defines what data is available; the caller decides how to render it.
This is the same pattern as Svelte's `let:` directive or Vue's scoped slots.
## Basic usage
A component provides data with `let:name=expr` on `{% slot %}`:
```kida
{# components/user-list.html #}
{% def user_list(users) %}
{% for user in users %}
- {% slot let:item=user %}{{ item }}{% end %}
{% end %}
{% end %}
```
The caller receives that data with `let:name` on `{% call %}`:
```kida
{% from "components/user-list.html" import user_list %}
{% call(let:item) user_list(users=people) %}
{{ item.name }} — {{ item.email }}
{% end %}
```
The component iterates the data. The caller controls the markup. Neither is
coupled to the other.
## How it works
| Side | Syntax | Purpose |
|------|--------|---------|
| Component (def) | `{% slot let:name=expr %}` | Push data to the caller |
| Caller (call) | `{% call(let:name) fn() %}` | Receive the data |
The `let:` bindings flow **up** from the slot to the caller's block. Inside the
`{% call %}...{% end %}` body, the bound names are available as local variables.
## Multiple bindings
A slot can expose more than one value:
```kida
{% def data_table(rows) %}
{% for row in rows %}
{% slot let:item=row, let:index=loop.index0 %}{% end %}
{% end %}
{% end %}
```
```kida
{% call(let:item, let:index) data_table(rows=data) %}
{{ index }} |
{{ item.name }} |
{{ item.value }} |
{% end %}
```
## Expressions in bindings
The `let:` value can be any expression -- attribute access, filters, function
calls:
```kida
{% slot let:label=item.name | upper, let:active=item.is_active %}
{{ label }}
{% end %}
```
## Default content
When the slot has `let:` bindings and a body, that body is the **default
content** -- rendered when no caller provides a block:
```kida
{% def card(user) %}
{% slot let:item=user %}
{# Default: simple name display #}
{{ item.name }}
{% end %}
{% end %}
```
Called without a block, the default renders:
```kida
{{ card(user=alice) }}
{# Alice
#}
```
Called with a block, the caller takes over:
```kida
{% call(let:item) card(user=alice) %}
{{ item.name }}
{% end %}
```
## Named slots
Scoped slots work with named slots too:
```kida
{% def layout(page) %}
{% slot header %}{{ page.title }}
{% end %}
{% slot body let:data=page.content %}{{ data }}{% end %}
{% end %}
```
```kida
{% call(let:data) layout(page=p) %}
{% slot header %}{{ p.title }}
{% end %}
{{ data | markdown }}
{% end %}
```
## With provide / consume
Scoped slots and `provide`/`consume` solve different problems and coexist
cleanly:
| Pattern | Direction | Use case |
|---------|-----------|----------|
| Scoped slots (`let:`) | Child to parent (up) | Expose iteration data, computed values |
| `provide`/`consume` | Parent to child (down) | Theme, config, implicit context |
They can be used together:
```kida
{% def themed_list(items) %}
{% provide theme = "dark" %}
{% for item in items %}
- {% slot let:item=item %}{{ item }}{% end %}
{% end %}
{% endprovide %}
{% end %}
{% call(let:item) themed_list(items=data) %}
{{ item.name }}
{% end %}
```
## Real-world example: sortable table
```kida
{# components/sortable-table.html #}
{% def sortable_table(rows, columns) %}
{% for col in columns %}
| {{ col.label }} |
{% end %}
{% for row in rows %}
{% slot let:row=row, let:cols=columns %}
{% for col in cols %}
| {{ row[col.key] }} |
{% end %}
{% end %}
{% end %}
{% end %}
```
Default rendering works out of the box. Callers override when they need custom
cell rendering:
```kida
{% call(let:row, let:cols) sortable_table(rows=users, columns=cols) %}
{{ row.name }} |
{{ row.email }} |
{% if row.active %}
Active
{% else %}
Inactive
{% end %}
|
{% end %}
```