> 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/choosing-the-right-components/selection-guide.md).

# Selection Guide

Five component lines, one question: where are you building today? Follow the path to your answer, then install the package that carries it.

## Start with one question

Avonni gives you **five component lines** across four Salesforce surfaces, delivered in **three managed packages**. Three lines are no-code and built for admins. One is a code library for developers. Same component family everywhere: pages, flows, sites, and your own code.

These are not either/or solutions. Many Avonni users install more than one package, because a real project rarely lives on a single surface. So the question is not "which one do I commit to", it is:

**Where am I building today?**

{% embed url="<https://www.youtube.com/watch?v=rfw3rIww2LQ>" %}

***

## The one-minute answer

Find the line that matches where you are working right now. Two of them share the Lightning page, and you pick between them based on how much the page has to think.

<table data-view="cards"><thead><tr><th><select><option value="sgLightning" label="LIGHTNING PAGES" color="blue"></option><option value="sgFlow" label="FLOW SCREENS" color="blue"></option><option value="sgXP" label="EXPERIENCE SITES" color="blue"></option><option value="sgCode" label="YOUR CODE" color="blue"></option></select></th><th></th><th></th><th></th><th data-hidden data-card-cover data-type="image">Cover image</th></tr></thead><tbody><tr><td><span data-option="sgLightning">LIGHTNING PAGES</span></td><td><h4>App Builder Components</h4></td><td>When the page has to <strong>show</strong> things, fast. Drag a component on, point it at your data, done, with the conditional visibility App Builder already gives you.</td><td><a href="https://docs.avonnicomponents.com/app-builder-components">App Builder Components</a></td><td><a href="https://4064884509-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FtAjHpTxL9rEknLdE4DOb%2Fuploads%2FBcrppmzFXxWvqYT1WnXM%2Fline-app-builder-kanban.png?alt=media">https://4064884509-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FtAjHpTxL9rEknLdE4DOb%2Fuploads%2FBcrppmzFXxWvqYT1WnXM%2Fline-app-builder-kanban.png?alt=media</a></td></tr><tr><td><span data-option="sgLightning">LIGHTNING PAGES</span></td><td><h4>Dynamic Components</h4></td><td>When the page has to <strong>think</strong>: formulas, components that react to each other and to record changes, branding of your own. The closest thing to custom development without code.</td><td><a href="https://docs.avonnicomponents.com/dynamic-components">Dynamic Components</a></td><td><a href="https://4064884509-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FtAjHpTxL9rEknLdE4DOb%2Fuploads%2F7ciirtiBZSZoZxj1WEKn%2Fline-dynamic-component-builder.png?alt=media">https://4064884509-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FtAjHpTxL9rEknLdE4DOb%2Fuploads%2F7ciirtiBZSZoZxj1WEKn%2Fline-dynamic-component-builder.png?alt=media</a></td></tr><tr><td><span data-option="sgFlow">FLOW SCREENS</span></td><td><h4>Flow Screen Components</h4></td><td>When you are building a guided process: step 1, step 2, step 3. More than 70 components that live inside your Flow variables, so they follow your logic and your formulas.</td><td><a href="https://docs.avonnicomponents.com/flow">Flow Screen Components</a></td><td><a href="https://4064884509-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FtAjHpTxL9rEknLdE4DOb%2Fuploads%2FKk4YIbOQXrGIIabiKHaq%2Fline-flow-pivot-table.png?alt=media">https://4064884509-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FtAjHpTxL9rEknLdE4DOb%2Fuploads%2FKk4YIbOQXrGIIabiKHaq%2Fline-flow-pivot-table.png?alt=media</a></td></tr><tr><td><span data-option="sgXP">EXPERIENCE SITES</span></td><td><h4>Experience Sites Components</h4></td><td>When you are building for people outside your org: a customer portal, a partner site, a public page. Fully branded, designed for guest access, well past the Salesforce look.</td><td><a href="https://docs.avonnicomponents.com/experience-cloud">Experience Sites Components</a></td><td><a href="https://4064884509-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FtAjHpTxL9rEknLdE4DOb%2Fuploads%2FqbLestvfe1GEEvAfkHpj%2Fline-experience-sites-map.png?alt=media">https://4064884509-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FtAjHpTxL9rEknLdE4DOb%2Fuploads%2FqbLestvfe1GEEvAfkHpj%2Fline-experience-sites-map.png?alt=media</a></td></tr><tr><td><span data-option="sgCode">YOUR CODE</span></td><td><h4>LWC Components</h4></td><td>When you write your own Lightning Web Components. 55+ blocks referenced as <code>avonni-*</code> tags, and Data Driven ones that query records themselves, so a full data table is about 30 lines with no Apex.</td><td><a href="https://docs.avonnicomponents.com/lwc-components">LWC Components</a></td><td><a href="https://4064884509-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FtAjHpTxL9rEknLdE4DOb%2Fuploads%2FXssXQlk4q2O7Q34eGtkY%2Fline-lwc-template.png?alt=media">https://4064884509-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FtAjHpTxL9rEknLdE4DOb%2Fuploads%2FXssXQlk4q2O7Q34eGtkY%2Fline-lwc-template.png?alt=media</a></td></tr></tbody></table>

None of those choices closes another one, and a single package covers three of the five lines. App Builder and Dynamic Components are both always on: they live on the page layout, so nobody has to launch a flow to see the information. Dynamic Components also run on Experience Cloud, so a portal can mix both.

***

## Follow the path

```mermaid
%%{init: {'theme':'base','themeVariables':{'primaryColor':'#eaf5fe','primaryTextColor':'#032d60','primaryBorderColor':'#0176d3','secondaryColor':'#ffffff','tertiaryColor':'#f4f8fc','lineColor':'#0b5cab','edgeLabelBackground':'#ffffff'}}}%%
flowchart TD
    Q["Where are you building today?"] --> CODE{"Are you writing your own code?"}
    CODE -->|"Yes, my own LWC"| LWC["LWC Components"]
    CODE -->|"No, I use a Salesforce builder"| B{"Which builder?"}
    B -->|"Flow Builder"| FLOW["Flow Screen Components"]
    B -->|"Experience Builder"| XP["Experience Sites Components"]
    B -->|"Lightning App Builder"| L{"How much logic on the page?"}
    L -->|"Show it, fast"| AB["App Builder Components"]
    L -->|"Formulas, reactivity, custom branding"| DYN["Dynamic Components"]
```

Every endpoint on that path is a component line, and no path closes another one. You can walk it again next month for a different project.

***

## Which package carries which line

Five lines, three packages. This is the whole mapping:

| Where you build                             | Component line                                                                     | Package to install                |
| ------------------------------------------- | ---------------------------------------------------------------------------------- | --------------------------------- |
| Lightning App Builder, quick layouts        | [App Builder Components](https://docs.avonnicomponents.com/app-builder-components) | **Avonni Experience Components**  |
| Lightning App Builder, logic and reactivity | [Dynamic Components](https://docs.avonnicomponents.com/dynamic-components)         | **Avonni Experience Components**  |
| Experience Builder                          | [Experience Sites Components](https://docs.avonnicomponents.com/experience-cloud)  | **Avonni Experience Components**  |
| Flow Builder                                | [Flow Screen Components](https://docs.avonnicomponents.com/flow)                   | **Avonni Flow Screen Components** |
| Your own LWC code                           | [LWC Components](https://docs.avonnicomponents.com/lwc-components)                 | **Avonni LWC Components**         |

One install of **Avonni Experience Components** therefore covers three of the five lines.

***

## Working with more than one line

{% hint style="success" %}

#### Most Avonni users do not pick just one

The common pattern: build a reactive dashboard with [Dynamic Components](https://docs.avonnicomponents.com/dynamic-components) directly on a record page, then put a button or an interaction inside it that launches an [Avonni Screen Flow](https://docs.avonnicomponents.com/flow) for the data entry. Clicking "Schedule Meeting" on an Avonni Timeline launches the flow that handles the calendar logic. Developers join the same story through [LWC Components](https://docs.avonnicomponents.com/lwc-components), so their custom code shares the component family your admins already use.

Pages, processes, sites and code, all in one org, all looking like the same product.
{% endhint %}

## Frequently asked questions

<details>

<summary>I already use Flow Screen Components. What is my path forward?</summary>

Keep using them for everything that happens inside a flow. If you also want components sitting directly on a Lightning record page, outside any flow, add **Avonni Experience Components** alongside. Nothing changes in your existing flows.

</details>

<details>

<summary>I am a developer. Do I need the no-code packages to use LWC Components?</summary>

No. LWC Components is standalone: install it and reference any `avonni-*` component in your own code. If admins in your org also use the no-code builders, the packages coexist without conflict, and your custom code shares the same component family as their pages, flows, and sites.

</details>

***

<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-code-compare">:code-compare:</i></h4></td><td><h4>Feature Comparison</h4></td><td>The five lines side by side: who each one is for, where it runs, and what it can do.</td><td><a href="/choosing-the-right-components/feature-comparison.md">Feature Comparison</a></td></tr><tr><td><h4><i class="fa-arrow-down-to-bracket">:arrow-down-to-bracket:</i></h4></td><td><h4>Installation and Package</h4></td><td>The three packages, their install links, and the four steps that follow an install.</td><td><a href="/choosing-the-right-components/installation-and-package.md">Installation &amp; Package</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/choosing-the-right-components/selection-guide.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.