> 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

Sixty one components you reference as avonni-\* tags in your own Lightning Web Components, fifteen of them driven straight from a SOQL query.

<button type="button" class="button primary" data-action="ask" data-icon="gitbook-assistant">What are you trying to build?</button>

<a href="/lwc-components/getting-started/installation-and-licenses-management.md" class="button primary" data-icon="arrow-down-to-bracket">Install the package</a> <a href="/lwc-components/getting-started/product-tour.md" class="button secondary" data-icon="stars">Product Tour</a> <a href="/lwc-components/build-with-ai/overview.md" class="button secondary" data-icon="wand-magic-sparkles">Build with AI</a>

<figure><img src="https://2403786217-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FPjQbBtFNxVSSOtnsjuwx%2Fuploads%2FUPsDSVuYocySXWxuYkhF%2Flwc-hero-template.png?alt=media" alt="An HTML template file named accountTable.html holding a single avonni-dd-datatable tag with its attributes and four event handlers, nineteen lines in all."><figcaption><p>A searchable, sortable, paginated table of accounts, in nineteen lines of template.</p></figcaption></figure>

***

<h3 align="center">Start here</h3>

<p align="center">Three pages, and the library is installed, licensed and wired into your project.</p>

<table data-view="cards"><thead><tr><th></th><th></th><th></th><th data-hidden data-card-target data-type="content-ref"></th></tr></thead><tbody><tr><td><h4><i class="fa-rocket">:rocket:</i></h4></td><td><h4>Product Tour</h4></td><td>What the library is, who it is for, and how it fits AI assisted development.</td><td><a href="/lwc-components/getting-started/product-tour.md">Product Tour</a></td></tr><tr><td><h4><i class="fa-arrow-down-to-bracket">:arrow-down-to-bracket:</i></h4></td><td><h4>Installation &#x26; Licenses</h4></td><td>Install the package from AppExchange and assign the licenses.</td><td><a href="/lwc-components/getting-started/installation-and-licenses-management.md">Installation &amp; Licenses Management</a></td></tr><tr><td><h4><i class="fa-code-compare">:code-compare:</i></h4></td><td><h4>Enable Map Routing</h4></td><td>What to wire up before a component can navigate inside your app.</td><td><a href="/lwc-components/data-driven-components/leaflet-map/enable-map-routing.md">Enable Map Routing</a></td></tr></tbody></table>

***

<h3 align="center">What you write</h3>

<p align="center">Two families, sixty one components. Core Components are the base UI building blocks, forty six of them. The fifteen Data Driven Components take a SOQL query and render, filter, sort, search and paginate on their own. Six of those below, each one the example from its own reference page.</p>

<table data-view="cards"><thead><tr><th></th><th></th><th data-hidden data-card-cover data-type="image">Cover image</th><th data-hidden data-card-target data-type="content-ref"></th></tr></thead><tbody><tr><td><h4>Data Table</h4></td><td>Columns, filters, search, pagination and inline edit, from a single query or a static array.</td><td><a href="https://2403786217-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FPjQbBtFNxVSSOtnsjuwx%2Fuploads%2Ftz2twhHm0Dx3A69U6dM3%2Flwc-code-datatable.png?alt=media">https://2403786217-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FPjQbBtFNxVSSOtnsjuwx%2Fuploads%2Ftz2twhHm0Dx3A69U6dM3%2Flwc-code-datatable.png?alt=media</a></td><td><a href="/lwc-components/data-driven-components/datatable.md">Data Table</a></td></tr><tr><td><h4>Kanban</h4></td><td>Group and subgroup your records into columns, with a drop event you handle yourself.</td><td><a href="https://2403786217-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FPjQbBtFNxVSSOtnsjuwx%2Fuploads%2FYfinXUc5clEygxcxufzK%2Flwc-code-kanban.png?alt=media">https://2403786217-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FPjQbBtFNxVSSOtnsjuwx%2Fuploads%2FYfinXUc5clEygxcxufzK%2Flwc-code-kanban.png?alt=media</a></td><td><a href="/lwc-components/data-driven-components/kanban.md">Kanban</a></td></tr><tr><td><h4>Scheduler</h4></td><td>A timeline or a calendar of records that carry a start and an end, with per-item actions.</td><td><a href="https://2403786217-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FPjQbBtFNxVSSOtnsjuwx%2Fuploads%2Fjdwu4OLpSkR6oPoPGLUw%2Flwc-code-scheduler-v2.png?alt=media">https://2403786217-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FPjQbBtFNxVSSOtnsjuwx%2Fuploads%2Fjdwu4OLpSkR6oPoPGLUw%2Flwc-code-scheduler-v2.png?alt=media</a></td><td><a href="/lwc-components/data-driven-components/scheduler.md">Scheduler</a></td></tr><tr><td><h4>Pivot Table</h4></td><td>Cross-tabulate records into grouped rows and columns, with subtotals and a grand total.</td><td><a href="https://2403786217-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FPjQbBtFNxVSSOtnsjuwx%2Fuploads%2FblI0u9r6Vt35fq8v8pB7%2Flwc-code-pivot-table.png?alt=media">https://2403786217-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FPjQbBtFNxVSSOtnsjuwx%2Fuploads%2FblI0u9r6Vt35fq8v8pB7%2Flwc-code-pivot-table.png?alt=media</a></td><td><a href="/lwc-components/data-driven-components/pivot-table.md">Pivot Table</a></td></tr><tr><td><h4>Map</h4></td><td>Markers from your records or from a static array, with a select event carrying the one clicked.</td><td><a href="https://2403786217-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FPjQbBtFNxVSSOtnsjuwx%2Fuploads%2FHt3URmTpaZ8N2PiNCNoB%2Flwc-code-map.png?alt=media">https://2403786217-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FPjQbBtFNxVSSOtnsjuwx%2Fuploads%2FHt3URmTpaZ8N2PiNCNoB%2Flwc-code-map.png?alt=media</a></td><td><a href="/lwc-components/data-driven-components/map.md">Map</a></td></tr><tr><td><h4>Chat</h4></td><td>A message thread on a record, with a publisher and a refresh channel you point at.</td><td><a href="https://2403786217-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FPjQbBtFNxVSSOtnsjuwx%2Fuploads%2FqEI9vmUKgvMshMaYyu1k%2Flwc-code-chat.png?alt=media">https://2403786217-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FPjQbBtFNxVSSOtnsjuwx%2Fuploads%2FqEI9vmUKgvMshMaYyu1k%2Flwc-code-chat.png?alt=media</a></td><td><a href="/lwc-components/data-driven-components/chat.md">Chat</a></td></tr></tbody></table>

<p align="center"><a href="/lwc-components/core-components/core-components.md" class="button secondary" data-icon="grid-round-2-plus">Core components</a> <a href="/lwc-components/data-driven-components/data-driven-components.md" class="button secondary" data-icon="database">Data driven components</a></p>

{% 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="/lwc-components/getting-started/the-maintenance-advantage.md" class="button secondary" data-icon="shield-check">See the maintenance advantage</a>
{% endhint %}

{% hint style="info" %}

#### Avonni LWC Components library

See the [Avonni LWC Components library](https://www.avonni.app/product/lwc-components) and how it compares with [building LWCs from scratch](https://www.avonni.app/product/lwc-components-vs-building-from-scratch).
{% endhint %}

***

<h3 align="center">Build it with an AI assistant</h3>

<p align="center">Describe the component you want in plain language. Your assistant looks up the real attributes and events through the Avonni MCP server, then writes the markup.</p>

<table data-view="cards"><thead><tr><th></th><th></th><th></th><th data-hidden data-card-target data-type="content-ref"></th></tr></thead><tbody><tr><td><h4><i class="fa-wand-magic-sparkles">:wand-magic-sparkles:</i></h4></td><td><h4>Overview</h4></td><td>What the MCP server and the agent skill give your coding assistant.</td><td><a href="/lwc-components/build-with-ai/overview.md">Overview</a></td></tr><tr><td><h4><i class="fa-pager">:pager:</i></h4></td><td><h4>Setup</h4></td><td>Connect the server and install the skill in Claude Code, Cursor or Copilot, once.</td><td><a href="/lwc-components/build-with-ai/setup.md">Setup</a></td></tr><tr><td><h4><i class="fa-list-check">:list-check:</i></h4></td><td><h4>Prompt Library</h4></td><td>Copy-paste prompts for the components you reach for most.</td><td><a href="/lwc-components/build-with-ai/prompt-library.md">Prompt Library</a></td></tr></tbody></table>

***

<h3 align="center">Keep going</h3>

<table data-view="cards"><thead><tr><th></th><th></th><th></th><th data-hidden data-card-target data-type="content-ref"></th></tr></thead><tbody><tr><td><h4><i class="fa-compass">:compass:</i></h4></td><td><h4>Using the AI Assistant</h4></td><td>How to phrase what you want, and what to check in what comes back.</td><td><a href="/lwc-components/build-with-ai/using-the-ai-assistant.md">Using the AI Assistant</a></td></tr><tr><td><h4><i class="fa-circle-question">:circle-question:</i></h4></td><td><h4>Limitations &#x26; FAQ</h4></td><td>What the server and the skill do not cover, and fixes for common setup problems.</td><td><a href="/lwc-components/build-with-ai/limitations-and-faq.md">Limitations &amp; FAQ</a></td></tr><tr><td><h4><i class="fa-robot">:robot:</i></h4></td><td><h4>For AI Agents</h4></td><td>The machine readable entry points: Markdown URLs, the full index, and the docs endpoint.</td><td><a href="/lwc-components/build-with-ai/for-ai-agents.md">For AI Agents</a></td></tr></tbody></table>


---

# 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 by asking a question.

Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters:

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

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case.

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.