# Docs for LLMs

> Source: https://design.nanatec.co.ke/guides/llms/
> Every page of these docs is available as clean Markdown — one file per component, an llms.txt index, or the whole site in a single download.

Coding assistants read these docs badly when they scrape HTML: the live examples
are rendered custom elements, the source sits behind a "Show code" toggle, and
the navigation chrome comes along for the ride.

So every page also exists as plain Markdown, generated from the same source the
page itself renders. Examples become fenced code blocks; nothing else is lost.

## One page

Append `.md` to any docs URL:

```
https://design.nanatec.co.ke/components/button.md
https://design.nanatec.co.ke/guides/theming.md
```

Every page carries a **Copy as Markdown** button under its title, alongside
**View .md** and **Download** — pick whichever fits how you work.

## The whole library

| File | What it is | Use it when |
| --- | --- | --- |
| [`/llms.txt`](/llms.txt) | An [llmstxt.org](https://llmstxt.org) index: the install snippet plus a titled, described link to every page's Markdown. | The assistant can fetch URLs and should pull only the pages it needs. |
| [`/llms-full.txt`](/llms-full.txt) | Every page concatenated into one Markdown document. | You want the whole design system in context, or you're seeding a retrieval index in a single request. |

> **Which one?**
>
> Start with `llms.txt`. It costs a few hundred tokens and lets the model choose
> what to read, whereas `llms-full.txt` spends the budget up front — worth it
> only when the assistant can't fetch URLs on its own.

## Recipes

**Point an assistant at one component**

```
Read https://design.nanatec.co.ke/components/combobox.md
and build me a country picker with async filtering.
```

**Give a CLI agent the whole library**

```bash
curl -sL https://design.nanatec.co.ke/llms-full.txt -o nana-ui.md
```

Then reference `nana-ui.md` in your prompt, or drop it where your agent picks up
project context.

**Vendor only the components you use**

```bash
for c in button input dialog table; do
  curl -sL "https://design.nanatec.co.ke/components/$c.md" -o "docs/nana-$c.md"
done
```

- docs
  - nana-button.md
  - nana-input.md
  - nana-dialog.md
  - nana-table.md
- src/
- package.json

Checking these into the repo keeps the guidance versioned alongside your code.

> **Pin your version**
>
> The Markdown always reflects the latest release. If you pin an older
> `@nana-tec/ui-components`, vendor the files rather than fetching at runtime —
> otherwise an assistant will happily suggest APIs your version doesn't have.

## What the Markdown contains

For each page: the title, a source link, the description, and — where the
frontmatter declares them — lifecycle status and the version the component
landed in. Then the body, with every example inlined as an `html` code block, so
an assistant sees the exact markup the page demonstrates.

## Finding things quickly

The sidebar filter (press <kbd>/</kbd>) narrows the navigation as you type;
matching a group name like "forms" reveals that whole section. For full-text
search across page bodies, press <kbd>Ctrl</kbd> / <kbd>⌘</kbd> + <kbd>K</kbd> —
and the filter's empty state links straight to it.