> 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/getting-started/product-tour.md).

# Product Tour

What the LWC Components library is, who it's for, and how to get it.

## What is the LWC Components library?

**LWC Components** is a library of ready-to-use Lightning Web Components for Salesforce. It ships **50+ components** across two families:

* **Core Components** — base UI building blocks (avatars, badges, cards, pickers, menus, sliders, media players, and more) that you drop into any LWC.
* **Data Driven Components** — higher-level, data-aware components (data table, kanban, scheduler, pivot table, timeline, tree, map, list, image list, chat, and more) that render a dataset automatically. Point them at a query or hand them static data and they take care of the rest — filtering, sorting, search, pagination, and drag-and-drop included.

Every component is documented with a live example, its attributes, events, and slots. Browse them under **Core Components** and **Data Driven Components**.

***

## Who is it for?

The library is built for **developers and admins alike**:

* **Developers** compose the `avonni-*` components directly in their own LWCs and Aura components for pixel-perfect, reusable UI.
* **Admins** assemble data-driven experiences declaratively — configuring a query, a field mapping, and a few attributes — without writing custom Apex or JavaScript.

***

## Your code stays thin

Every component keeps the complexity (rendering, sorting, drag and drop, accessibility, edge cases) inside the managed package, where Avonni tests and updates it with every release. What lands in your codebase is a thin layer of markup and configuration: a full data table is about 30 lines, not thousands.

<a href="/lwc-components/getting-started/the-maintenance-advantage.md" class="button secondary" data-icon="shield-check">See the maintenance advantage</a>

***

## Built for AI-assisted development

The library ships its own **MCP server** (`https://mcp.avonnicomponents.com`) and an **agent skill**, so assistants like Claude Code, Cursor, and GitHub Copilot write `avonni-*` markup from the real component catalog (attributes, events, slots, styling hooks, and type definitions) instead of guessing.

The full guide, setup included, lives in the **Build with AI** section:

<a href="/lwc-components/build-with-ai/overview.md" class="button primary" data-icon="wand-magic-sparkles">Discover Build with AI</a>

***

## Installation

Install the Avonni LWC Components from the Salesforce AppExchange. See the Installation & Licenses Management guide for the full step-by-step instructions and requirements.

{% embed url="<https://appexchange.salesforce.com/appxListingDetail?listingId=a0N4V00000FiERkUAN>" %}
View the Avonni LWC Components listing on AppExchange
{% endembed %}

***

## Next steps

* [The Maintenance Advantage](/lwc-components/getting-started/the-maintenance-advantage.md) — why 30 lines on packaged components beat thousands from scratch.
* Installation & Licenses Management — install the package and set up licenses.
* Build with AI — connect your coding assistant to the MCP server and skills.
* Core Components — browse the base UI components.
* Data Driven Components — browse the data-aware components.


---

# 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/getting-started/product-tour.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.