> For the complete documentation index, see [llms.txt](https://docs.avonnicomponents.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.avonnicomponents.com/lwc-components/readme.md).

# Introduction

Drop finished components into your own LWCs and build rich Salesforce interfaces faster. Reference any component as an `avonni-*` tag in your HTML template, configure it through its attributes, done.

Two families, 55+ components:

<table data-card-size="large" data-view="cards"><thead><tr><th></th><th></th><th data-hidden data-card-target data-type="content-ref"></th></tr></thead><tbody><tr><td>🧱 <strong>Core Components</strong> · 43</td><td>The base UI building blocks: avatars, badges, cards, carousels, pickers, combobox, sliders, progress indicators, media players, layout, and more.</td><td></td></tr><tr><td>📊 <strong>Data Driven Components</strong> · 12</td><td>Point them at a SOQL query (or static data) and they render, filter, sort, search, and paginate automatically: data table, kanban, scheduler, pivot table, timeline, tree, map, chat, and more.</td><td></td></tr></tbody></table>

Every component page documents what it does, its attributes and events, and includes copy-paste code examples.

{% hint style="info" %}

#### **A data table in 30 lines, not 3,000** 🛡️

The complexity lives in the managed package, maintained by Avonni with every release. What lands in your codebase stays a thin layer of markup: easy to review, easy to evolve, nothing to re-test when Salesforce updates.

<a href="/pages/ISdh2SJUWAvrRQ1ykXmV" class="button secondary" data-icon="shield-check">See the maintenance advantage</a>
{% endhint %}

{% hint style="success" %}

#### **Write your Avonni components with an AI assistant** 🪄

Avonni ships a hosted **MCP server** and an **agent skill** that let Claude Code, Cursor, and GitHub Copilot write working `avonni-*` markup and code in your LWCs from plain-language prompts.

<a href="/pages/eUB5wX2QP9lYKejYGEeu" class="button secondary" data-icon="wand-magic-sparkles">Discover Build with AI</a>
{% endhint %}

***

## Getting started

* [Product Tour](/lwc-components/getting-started/product-tour.md) — what the library is, who it's for, and how it fits AI-assisted development.
* [The Maintenance Advantage](/lwc-components/getting-started/the-maintenance-advantage.md) — why 30 lines on packaged components beat thousands from scratch.
* [Installation & Licenses Management](/lwc-components/getting-started/installation-and-licenses-management.md) — install the package from AppExchange and assign licenses.
* [Build with AI](/lwc-components/build-with-ai/overview.md) — connect your coding assistant to the Avonni MCP server and skills.

Then browse the Core Components and Data-Driven Components references.


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://docs.avonnicomponents.com/lwc-components/readme.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.