# Tutorial

URL: https://lbliii.github.io/chirp-ui/tutorial/
Section: tutorial
Description: Build your first chirp-ui screen, one step at a time.

---

> For a complete page index, fetch https://lbliii.github.io/chirp-ui/llms.txt.

Tutorial

# Tutorial

Build your first chirp-ui screen, one step at a time.

2 steps

A short, hands-on walkthrough: install chirp-ui, render a component from Python,
and wire a single htmx interaction. Each step builds on the last — follow them
in order and you will have a working screen by the end.

Step 1 — Render your first component

Install chirp-ui and render a card from a Kida template.

tutorial

(https://lbliii.github.io/chirp-ui/tutorial/01-render-your-first-component/)

Step 2 — Add an htmx interaction

Wire a button to swap a fragment without reloading the page.

tutorial

(https://lbliii.github.io/chirp-ui/tutorial/02-add-an-htmx-interaction/)