---
title: Blocks
description: "Add reusable page sections and full Django features from labb blocks. Create a collection, install a block, and connect it to your app."
keywords: "labb blocks, django ui blocks, labb block add, django feature blocks, labb block cli"
---
A block is a page section or feature that the CLI copies into your project. You own the resulting code and can change it to fit the application.
Choose between frontend and fullstack blocks.
Frontend
Templates and the components they use. A pricing section, a settings form.
Fullstack
Models, fixtures, views, urls and templates. Fully interactive end to end, on real data.
Frontend blocks provide templates and components. Fullstack blocks also include models, views, URLs, and seed data. Use a fullstack block when you want a working feature as a starting point.
## Add a block
Blocks require a `labb.yaml` in the project root. If your project does not have one, start with [Installation](/docs/guide/getting-started/installation/).
```bash
labb init --defaults # only if labb.yaml does not exist
```
`--defaults` creates `labb.yaml` and the CSS starter files without asking configuration questions.
Browse the [block gallery](/blocks/) or search from the command line. Block references follow `vendor/category/slug`; the official collection uses `lb`.
```bash
labb block list
labb block search "table"
```
Each result includes its reference and type.
A collection is a Django app that holds the blocks you install. `labb block add` creates the default collection automatically when one does not exist, so run this step only when you want to choose its name or path.
```bash
labb block init --name blocks
```
This command adds the collection and the official source to `labb.yaml`.
```yaml
blocks:
collections:
- default: true
name: blocks
path: blocks
sources:
- name: labbhq
url: https://github.com/labbhq/labb
subdir: extras/blocks
```
A source is a git repository containing `blocks.yaml` and `index.yaml`. When the collection lives inside a larger repository, `subdir` points at it. The official collection ships from `extras/blocks` in the labb monorepo.
```bash
labb block add lb/data-table/customers
```
`labb block add` creates the default `blocks` collection and adds the official source when they are missing. Otherwise it copies the block files into the existing collection.
After installation, the collection contains the copied block files.
```
myproject/ myproject/
manage.py manage.py
labb.yaml labb.yaml
myapp/ myapp/
templates/ templates/
blocks/ <- the collection
apps.py
migrations/
fixtures/lb.json <- seed data
models/__init__.py <- imports the vendor models
lb/
models/ <- shared vendor models
data-table/customers/
block.yaml
views.py
urls.py
tour.yaml
templates/
cotton/customers/ <- components, resolve everywhere
lb/data-table/customers/pages/index.html
```
For a fullstack block, `models/__init__.py` imports the vendor models so Django discovers them. `fixtures/lb.json` uses your collection’s app label.
Add the collection to `INSTALLED_APPS`:
```python
INSTALLED_APPS = [
# ... other apps
'labb',
'blocks',
]
```
Use `include_blocks` to include the block routes.
```python
from labb.contrib.blocks import include_blocks
import blocks
urlpatterns = [
path("", include_blocks(blocks)),
]
```
For a fullstack block, create the tables and load the seed data:
```bash
python manage.py makemigrations blocks
python manage.py migrate
python manage.py loaddata lb
```
```bash
labb dev # CSS watcher
python manage.py runserver
```
Open the block’s page. A fullstack block now runs against your database, including its search, sorting, and pagination.
## Explore the interactive tour
Open a fullstack block in the [block gallery](/blocks/), switch the previewer to **Code**, and use the panel beside the source. Each short step starts with one labb feature, jumps to the line that uses it, and links to the guide when you want the full API or pattern. Start with the tour, then follow the code path that matters to the part you are adapting.
## Related