---
name: build-docs-page
description: Assemble a product documentation page from the UI Lab documentation package. Use when adding docs, a guide, a reference page, or a docs section to an app that uses ui-lab-components.
---
 
# Build a docs page
 
Build documentation pages from the UI Lab documentation package rather than from scratch. Each element exists for one job; pick by the job, then fetch its source.
 
## 1. Fetch before writing
 
- Load the foundation guide once: `search_guides { query: "foundation", detail: "full" }`.
- Fetch every element you use: `search_workshop { query: "element:documentation/<id>", detail: "full" }`.
- Fetch the API of every component the element uses: `get_component { query: "component:<id>", detail: "api" }`. Never write a prop from memory.
 
## 2. Choose elements by job
 
| The page needs to… | Use | Id |
| --- | --- | --- |
| Hold the content | Article | `article`, `article-with-toc` |
| Show where the reader is on a long page | Table of Contents | `toc`, `toc-expanded` |
| Send the reader onward | Pager | `pager`, `pager-suggested`, `pager-series` |
| Let the reader find a page | Search | `search`, `search-inline` |
| Walk through a task | Steps | `steps`, `steps-checkable` |
| List what must be in place first | Prerequisites | `prerequisites` |
| Show the right and wrong way | Do and Don't | `dodont`, `dodont-code` |
| Define a term in place | Glossary Term | `glossaryterm` |
| Copy, share, or open the page source | Page Actions | `pageactions`, `pageactions-menu` |