> 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/installation-and-licenses-management.md).

# Installation & Licenses Management

Install the Avonni LWC Components package from AppExchange, assign licenses, and write your first avonni tag.

The LWC Components library ships as a managed package on the Salesforce AppExchange. Installing it takes about ten minutes: get the package, assign the licenses, then write your first `avonni-*` tag.

<a href="https://appexchange.salesforce.com/appxListingDetail?listingId=a0N4V00000FiERkUAN" class="button primary" data-icon="up-right-from-square">Install from AppExchange</a>

{% hint style="info" %}
**Use the button, not AppExchange search.** The Avonni listing opens from its direct link, and searching or browsing the marketplace will not return it. Keep this page at hand, or bookmark the listing.
{% endhint %}

## What you are installing

|                           |                                                                                                                                                                     |
| ------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **AppExchange listing**   | LWC Library: Datatable, Map, Charts, Kanban and 50+ Components                                                                                                      |
| **Package name in Setup** | Avonni Components                                                                                                                                                   |
| **Namespace prefix**      | `avonni`                                                                                                                                                            |
| **What it contains**      | 61 components: 46 [Core](/lwc-components/core-components/core-components.md) and 15 [Data Driven](/lwc-components/data-driven-components/data-driven-components.md) |
| **Product page**          | [Avonni LWC Components](https://www.avonni.app/product/lwc-components)                                                                                              |

***

## Install the package

{% stepper %}
{% step %}

#### Open the listing

Click **Install from AppExchange** above. You land on the Avonni listing, with its overview, specs and security review.

You need a Salesforce user allowed to install managed packages in the target org, which usually means a System Administrator profile.
{% endstep %}

{% step %}

#### Click Get It Now

**Get It Now** starts the installation. AppExchange asks you to log in, then where to install: your production org, or a sandbox if you want to try it there first.

<figure><img src="https://2403786217-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FPjQbBtFNxVSSOtnsjuwx%2Fuploads%2F5HZISIUThjhZXosPZmR5%2Flwc-install-get-it-now.png?alt=media" alt="The install panel of the Avonni listing on AppExchange: a blue Get It Now button above an outlined Try It button" width="320"><figcaption><p>On the listing, <strong>Get It Now</strong> is the button that installs the package.</p></figcaption></figure>
{% endstep %}

{% step %}

#### Choose who gets the components

* **Install for Admins Only** is the safe first move: you configure and test before anyone else sees the package.
* **Install for All Users** once you are ready to roll it out.

Day-to-day access is driven by licenses, so you can widen it later without reinstalling.
{% endstep %}

{% step %}

#### Approve and install

Review the package permissions, then click **Install**. Salesforce confirms once the package is in place. A long install carries on in the background, and Salesforce emails you when it finishes.
{% endstep %}
{% endstepper %}

***

## Assign licenses

A user needs a license to render Avonni components, developers building with the library included.

{% stepper %}
{% step %}

#### Open Manage Licenses

In **Setup**, use Quick Find to open **Installed Packages**, find **Avonni Components**, and click **Manage Licenses**.

<figure><img src="https://2403786217-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FPjQbBtFNxVSSOtnsjuwx%2Fuploads%2FNS6EW3cCYudUrxdEPIJ3%2Finstallation-installed-packages.png?alt=media" alt="Setup, Installed Packages found through Quick Find, with the Manage Licenses link of the Avonni Components package outlined among the Avonni packages"><figcaption><p>Installed Packages, with Manage Licenses beside Avonni Components.</p></figcaption></figure>
{% endstep %}

{% step %}

#### Add your users

Click **Add Users**, pick the users who need the components, and assign. The page keeps count of the licenses you have used out of those you own.

<figure><img src="https://2403786217-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FPjQbBtFNxVSSOtnsjuwx%2Fuploads%2FbC4fXiOeHH8Xuq4iJUri%2Finstallation-manage-licenses.png?alt=media" alt="The Avonni Components license page in Setup, showing Allowed Licenses and Used Licenses, with the Add Users button outlined above the Licensed Users list"><figcaption><p>Allowed and used licenses, and the Add Users button.</p></figcaption></figure>
{% endstep %}
{% endstepper %}

***

## Check that it worked

{% hint style="success" %}
**Installed.** In **Setup > Installed Packages**, **Avonni Components** appears with its version number, and **Manage Licenses** lists at least one user. You can now reference any `avonni-*` tag in your own code.
{% endhint %}

***

## Your first component

The components come from the package, so there is nothing to import: use the `avonni` namespace prefix in your template, and pass data and handle events from your JavaScript as usual.

{% tabs %}
{% tab title="myComponent.html" %}

```html
<template>
    <avonni-avatar
        primary-text="Jane Cooper"
        secondary-text="Product Designer"
        fallback-icon-name="standard:user"
        size="x-large"
        variant="circle"
    ></avonni-avatar>
</template>
```

{% endtab %}

{% tab title="myComponent.js" %}

```js
import { LightningElement } from 'lwc';

export default class MyComponent extends LightningElement {
    handleActionClick(event) {
        // react to component events
    }
}
```

{% endtab %}
{% endtabs %}

Each component page documents its tag, attributes, events and slots, with a copy-paste example: [Core Components](/lwc-components/core-components/core-components.md) and [Data Driven Components](/lwc-components/data-driven-components/data-driven-components.md).

<a href="/lwc-components/getting-started/quickstart-guide.md" class="button primary" data-icon="graduation-cap">Build the Quickstart: a case board in 15 minutes</a>

***

## Optional: routing for map routes

The Map component can plan a multi-stop driving route. The feature stays off until an administrator enables it, and its setup is separate from licenses and permission sets.

* Routing is **bring your own key**: you supply an API key from OpenRouteService or Mapbox. Avonni hosts no routing backend.
* Enable it from the **Settings** tab of the **Avonni LWC** app in the App Launcher.
* No permission set is needed. Once routing is enabled, every user who can open a map with the route panel turned on can calculate routes, including guest users of Experience Cloud sites.

<a href="/lwc-components/data-driven-components/leaflet-map/enable-map-routing.md" class="button secondary" data-icon="route">Enable Map Routing</a>

***

## Need help with the installation?

* **Ask the community.** The [Avonni Trailblazer Community group](https://trailhead.salesforce.com/trailblazer-community/groups/0F9KX000000iFxO0AU) is where admins and developers compare notes on installs, licenses and permission sets. Most questions have an answer there already.
* **Contact support.** Write to <support@avonni.app> with your org edition and the exact error message, and the team takes it from there.


---

# 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/getting-started/installation-and-licenses-management.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.