## 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.


# Components

Vara includes a deliberately small set of components for documentation content and landing pages. They cover the common foundations without preventing your project from adding its own.

## How to use components

Use components as custom HTML tags in your Markdown. Vara's generators render Markdown first and then resolve component tags, so components can appear anywhere in a page:

```html
<vara-alert
  title="Heads up"
  description="Something worth knowing."
  color="info"
/>
```

Paired components receive their already-rendered inner content:

```html
<vara-container size="sm">
  Any Markdown or component output can live here.
</vara-container>
```

### Props

Component attributes are strings:

- Quote every value.
- Booleans use `"true"` and `"false"`.
- Repeated records use predictable families such as `item_1_title`, `item_2_title`, and so on.

Every component accepts a `class` prop for targeted styling with your own utilities.

## Available components

### Content foundations

Small components for use inside documentation and rich text:

- [Alert](./alert/) - contextual callouts.
- [Badge](./badge/) - compact labels and statuses.
- [Button](./button/) - links and native buttons.
- [Container](./container/) - constrained content layout.
- [Icon](./icon/) - bundled Lucide and Simple Icons.
- [Keyboard key](./kbd/) - keyboard shortcuts and key names.

### Landing-page sections

Larger sections for composing landing pages:

- [Header](./header/) - responsive site navigation.
- [Hero](./hero/) - centered or split page introduction.
- [Content split](./content-split/) - explanatory copy with supporting media.
- [Features](./features/) - reusable feature cards.
- [Stats](./stats/) - semantic metrics in cards or a strip.
- [FAQ](./faq/) - single-open accordion with composable items.
- [Testimonial](./testimonial/) - a focused customer quote.
- [Carousel](./carousel/) - a generic slider for any collection of slides.
- [Call to action](./cta/) - centered or inline conversion panel.
- [Footer](./footer/) - site metadata and secondary navigation.

These components intentionally omit product-specific recipes such as pricing, forms, and team grids. Add those in your own `components/` directory when your content model is known.

## Customization

Components use Vara's design tokens, so they inherit the site's colors and dark mode automatically. Internal links and assets are resolved with Veta's deployment-aware `url()` helper, which keeps them portable across root domains and deployment subdirectories.