## Documentation index

This index lists every available documentation page and its Markdown source.

- [Documentation](https://vara.varavel.com/docs/index.md)
  - [Introduction](https://vara.varavel.com/docs/introduction/index.md)
  - [Getting Started](https://vara.varavel.com/docs/getting-started/index.md)
    - [Installation](https://vara.varavel.com/docs/getting-started/installation/index.md)
    - [Quick Start](https://vara.varavel.com/docs/getting-started/quick-start/index.md)
    - [Composing a Landing Page](https://vara.varavel.com/docs/getting-started/composing-landing-page/index.md)
  - [Fundamentals](https://vara.varavel.com/docs/fundamentals/index.md)
    - [Project Structure](https://vara.varavel.com/docs/fundamentals/project-structure/index.md)
    - [Page Generators](https://vara.varavel.com/docs/fundamentals/page-generators/index.md)
    - [Site Settings](https://vara.varavel.com/docs/fundamentals/site-settings/index.md)
    - [Search and LLM Output](https://vara.varavel.com/docs/fundamentals/search-and-llms/index.md)
    - [Customization](https://vara.varavel.com/docs/fundamentals/customization/index.md)
    - [Functions and Filters](https://vara.varavel.com/docs/fundamentals/functions-and-filters/index.md)
  - [Templates](https://vara.varavel.com/docs/templates/index.md)
    - [vara-landing](https://vara.varavel.com/docs/templates/landing/index.md)
    - [vara-docs](https://vara.varavel.com/docs/templates/docs/index.md)
    - [vara-docs-raw](https://vara.varavel.com/docs/templates/docs-raw/index.md)
    - [vara-docs-search-index](https://vara.varavel.com/docs/templates/docs-search-index/index.md)
    - [vara-docs-llms-txt](https://vara.varavel.com/docs/templates/docs-llms-txt/index.md)
    - [vara-docs-llms-full-txt](https://vara.varavel.com/docs/templates/docs-llms-full-txt/index.md)
    - [vara-sitemap-xml](https://vara.varavel.com/docs/templates/sitemap-xml/index.md)
    - [vara-404](https://vara.varavel.com/docs/templates/404/index.md)
  - [Components](https://vara.varavel.com/docs/components/index.md)
    - [Alert](https://vara.varavel.com/docs/components/alert/index.md)
    - [Badge](https://vara.varavel.com/docs/components/badge/index.md)
    - [Button](https://vara.varavel.com/docs/components/button/index.md)
    - [Container](https://vara.varavel.com/docs/components/container/index.md)
    - [Icon](https://vara.varavel.com/docs/components/icon/index.md)
    - [Keyboard Key](https://vara.varavel.com/docs/components/kbd/index.md)
    - [Header](https://vara.varavel.com/docs/components/header/index.md)
    - [Hero](https://vara.varavel.com/docs/components/hero/index.md)
    - [Content Split](https://vara.varavel.com/docs/components/content-split/index.md)
    - [Features](https://vara.varavel.com/docs/components/features/index.md)
    - [Stats](https://vara.varavel.com/docs/components/stats/index.md)
    - [FAQ](https://vara.varavel.com/docs/components/faq/index.md)
    - [Testimonial](https://vara.varavel.com/docs/components/testimonial/index.md)
    - [Carousel](https://vara.varavel.com/docs/components/carousel/index.md)
    - [Call to Action](https://vara.varavel.com/docs/components/cta/index.md)
    - [Footer](https://vara.varavel.com/docs/components/footer/index.md)
  - [Troubleshooting](https://vara.varavel.com/docs/troubleshooting/index.md)


## Documentation content

The documentation for the current page follows, reproduced verbatim.


# Introduction

Vara is a theme for **Veta**, the static site generator by Varavel. It provides the page templates, components, and assets you need to build a documentation site and a landing page, so you can focus on the content instead of the frontend.

## How Veta and Vara work together

Veta turns project files into a static site. Your project declares which pages to generate, and Vara provides the presentation layer for them.

A typical Veta project built with Vara has three parts:

1. **Page generators** (`pages/*.js`) - declare each route and the template it uses.
2. **Markdown content** (`content/`) - written by you, optionally composed with Vara components.
3. **Site settings** (`data/site.yaml`) - branding and behavior that the theme reads.

The theme stays out of your content. You decide what the site contains; Vara decides how it looks.

## What Vara provides

- **Page templates** for landing pages, documentation pages, the not-found page, an XML sitemap, a search index, and LLM-friendly Markdown output.
- **A focused component collection** for documentation content and landing-page sections.
- **A visual system** with light and dark mode, a theme picker, self-hosted fonts, and bundled icons.
- **Client-side features** such as full-text documentation search and on-demand syntax highlighting.

## What Vara does not provide

- **Page generators.** Veta themes can only distribute `templates/`, `components/`, `filters/`, `functions/`, `data/`, and `public/`. Your project owns `pages/*.js` and therefore decides what gets built.
- **Configuration.** Your project's `veta.yaml` controls the build, Tailwind CSS entrypoints, and output settings.

This separation keeps the site structure explicit and prevents a theme from creating unexpected routes.

## Design principles

Vara follows three principles:

1. **Simple** - few moving parts, easy to understand and to extend.
2. **Fast** - static output with minimal JavaScript, loaded only when a page needs it.
3. **Idiomatic** - built around Veta's own concepts: templates, components, filters, and functions.

## Next steps

- [Install the theme](./getting-started/installation/).
- [Create your first pages](./getting-started/quick-start/).
- Browse the [templates](./templates/) and [components](./components/) when you are ready to compose.