# Product Tour

## Build Custom Salesforce UIs Without Code

The Avonni Dynamic Components App provides a robust, *no-code* alternative for creating custom, interactive experiences *directly on your Salesforce Lightning Pages*.

{% @arcade/embed flowId="5r5BhZIizg1rn1m6Dqh5" url="<https://app.arcade.software/share/5r5BhZIizg1rn1m6Dqh5>" %}

{% hint style="success" %}

#### Avonni Dynamic Components vs. Avonni Flow Components

Dynamic Components **are built&#x20;*****directly*****&#x20;for Lightning Pages**, offering superior layout control and faster page performance. They excel at UI customizations like enhanced related lists or reports where direct manipulation and speed are prioritized over Flow's process logic.&#x20;

<a href="understanding-the-essentials/dynamic-vs.-flow-components" class="button secondary" data-icon="square-question">Learn about the differences between Dynamic & Flow Components</a>
{% endhint %}

## Getting Started (Quick Links)

{% content-ref url="installation-and-licenses-management" %}
[installation-and-licenses-management](https://docs.avonnicomponents.com/dynamic-components/getting-started/installation-and-licenses-management)
{% endcontent-ref %}

{% content-ref url="quickstart-guide" %}
[quickstart-guide](https://docs.avonnicomponents.com/dynamic-components/getting-started/quickstart-guide)
{% endcontent-ref %}

{% content-ref url="understanding-the-essentials" %}
[understanding-the-essentials](https://docs.avonnicomponents.com/dynamic-components/getting-started/understanding-the-essentials)
{% endcontent-ref %}

{% content-ref url="../components/explore-all-components" %}
[explore-all-components](https://docs.avonnicomponents.com/dynamic-components/components/explore-all-components)
{% endcontent-ref %}

{% content-ref url="<https://app.gitbook.com/s/dHOej9Pd5IxJNGEJMZKW/dynamic-components/view-all-tutorial-projects>" %}
[View All Tutorial Projects](https://app.gitbook.com/s/dHOej9Pd5IxJNGEJMZKW/dynamic-components/view-all-tutorial-projects)
{% endcontent-ref %}

### Deeper Exploration

{% content-ref url="understanding-the-essentials/dynamic-vs.-flow-components" %}
[dynamic-vs.-flow-components](https://docs.avonnicomponents.com/dynamic-components/getting-started/understanding-the-essentials/dynamic-vs.-flow-components)
{% endcontent-ref %}

***

## Key Advantages: Speed, Simplicity, and Power

* **Native Reactivity**: Components update automatically based on user interactions and data changes – *no complex formulas required*.
* **Top-Notch Performance:** Experience near-instant loading times and a responsive user experience thanks to optimized component design.
* **Faster Development:** Dramatically reduce development time and costs compared to custom coding.
* **Empower Admins and Business Users:** Enable non-developers to create and customize Salesforce UIs.
* **Customize Styles:** Tailor the appearance to match your branding.

***

## Accessing the Avonni Dynamic Components App

Once you've installed the Avonni Components Package, finding it is simple:

1. Open the **App Launcher** in Salesforce (the nine-dot grid icon)
2. Type "Avonni" in the search bar
3. Click on **"Avonni Experiences"**

That's it—you're in!

{% embed url="<https://avonni.share.arcade.software/share/8Jn7NsPFt4GO05sl63LH>" %}

{% hint style="warning" %}
Make sure the [**Avonni Dynamic Components package is installed**](https://appexchange.salesforce.com/appxListingDetail?listingId=2e584bb3-b5e0-415d-9347-d6567158d840\&channel=recommended) and you have the required permission sets assigned. See the [**Installation Page for details**](https://docs.avonnicomponents.com/dynamic-components/getting-started/installation-and-licenses-management).
{% endhint %}

*<mark style="color:blue;">**That’s it—you’re in!**</mark>*

***

## The Dynamic Components Home Page

The home page is your central hub for managing your Dynamic Components:

* **Create New Components:** Start building from scratch.
* **Manage Existing Components:** View, edit, and organize your components.

***

## The Component Builder: A Quick Look

The Component Builder is your visual design environment.&#x20;

<figure><img src="https://2532358799-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FODPvvv7Cx9Z9RECLn3oV%2Fuploads%2F53gwPYP5UIqOU1v8fBWo%2F2025-03-13_13-41-05.png?alt=media&#x26;token=282f99a9-8277-41f3-b466-0475c09fe34c" alt=""><figcaption><p>Avonni Dynamic Component Builder Overview</p></figcaption></figure>

It features:

* **Canvas:** Drag and drop components.
* **Component Library:** Find all available components and fields.
* **Properties Panel:** Customize the selected component's settings.
* **Resources Panel:** Manage variables, constants, formulas, and queries.
* **Top Bar:** Undo/redo, access settings, preview, and save.

## Ready to dive in?

{% content-ref url="understanding-the-essentials" %}
[understanding-the-essentials](https://docs.avonnicomponents.com/dynamic-components/getting-started/understanding-the-essentials)
{% endcontent-ref %}

## **Learn from the Community**

Join our [**Trailblazer Community Group**](https://trailhead.salesforce.com/trailblazer-community/groups/0F9KX000000iFxO0AU?tab=discussion\&sort=LAST_MODIFIED_DATE_DESC) to see what others are building with Dynamic Components. You'll find:

* Real-world examples and use cases
* Tips for optimizing component performance
* Solutions to common configuration challenges
* Inspiration for your next project

Whether you're just getting started or looking to push Dynamic Components to their limits, the community is full of builders eager to share what they've learned.