List Component

One list. Every surface you build on.

Show Salesforce records as a list people can scan, sort, filter and act on. Configure it once, then drop the same component into a Screen Flow, a Lightning page, an Experience site, or your own code.

Start freeExplore Flow Screen Components
3
list layouts
Any
Salesforce object
0
lines of Apex
Avonni List in Salesforce: open deals largest first, each row carrying an avatar, the account, the stage, the amount, the close date and a Log a call action
The list itself

Records people can actually read

A table gives you cells. A list gives you a record with a face, a status and the two fields that matter. Same data, half the reading.

Three layouts
Standard, check list, or a condensed single line. Same data, three densities.
Sort, search, filter
Users sort by the fields you allow, search across the fields you pick and filter without leaving the page.
Actions where they belong
Item actions, header actions and media actions, each wired to a real Salesforce action.
Same component, every surface

Configure the list once, use it everywhere

The list is not four products that look alike. It is one component shipped across the four places your team builds, with the same fields, the same actions and the same behaviour.

Screen Flows
Inside a guided flow
Drop the list on a flow screen and let users pick records before the next step. The check list layout returns the selection straight to your flow variables.
Lightning pages
On a record or app page
Build it in the Component Builder, point it at a query and place it anywhere the App Builder lets you drop a component.
Experience sites
In a portal your customers see
The same list, themed to your site, respecting the sharing rules that already govern who sees which record.
Your own code
As a Lightning Web Component
Import the data driven list, pass it a query and skip the pagination, sorting and empty state code you would otherwise write by hand.
What teams build with it

Three lists you have probably been asked for

A portal that shows what the customer owns
Assets, contracts, open cases. Each item carries an avatar, a status and one action, so a customer can see the state of things without calling anyone.
A pick step inside a guided flow
The check list layout turns a screen into a selection step. Users tick the records they mean, the flow receives them, and nobody types an Id.
Related records that are actually readable
Replace a dense related list with items that show the two fields people need, sorted the way the team works.
Live in the Playground

The List, in 130+ live examples.

Real screens built with Avonni, one industry job each. Open one to see it run and copy its code, or try the List on its own and change any property live.

Try the List live →
Care team directory, built with Avonni components
LWC · Healthcare
Care team directory
Open it live →
Campus events, built with Avonni components
Experience Sites · Education
Campus events
Open it live →
Account 360, built with Avonni components
Lightning Pages · Retail
Account 360
Open it live →

The layout is a configuration, not a rendering

Salesforce ships list views and related lists, and they do their job on a record page. What changes with Avonni is that the density, the fields, the avatar, the image and the actions are all yours to set, and the result goes on a flow screen or a portal page, not only on a record.

Browse the component library
6
image positions, from inline to full background
8
avatar positions around the item
4
responsive breakpoints for the column count
Video tutorials

See the List built, step by step

How to Build Reorderable Lists in Salesforce (Avonni List + Flow)
11:00
Screen Flows

How to Build Reorderable Lists in Salesforce (Avonni List + Flow)

A drag-and-drop list in a screen flow that saves the new order back to Salesforce, shown on a backlog.

Intermediate
Tutorial
Create an Interactive YouTube Playlist in Salesforce Screen Flows: No Code with Avonni Components
9:13
Screen Flows

Create an Interactive YouTube Playlist in Salesforce Screen Flows: No Code with Avonni Components

A screen flow that lists videos stored in Salesforce and plays the selected one in a video player.

Beginner
Tutorial
All video tutorials
Questions

Before you install it

Where do I get the list?
It ships in all four Avonni component sets: Flow Screen Components for screen flows, Dynamic Components for Lightning pages, Experience Cloud Components for portals, and LWC Components for your own code. Every plan includes the packages.
Which objects does it work with?
Any Salesforce object you can query. You map record fields onto the item title, description, avatar, image and the fields shown underneath, so a list of assets and a list of cases are the same component configured twice.
Can users reorder the items themselves?
Yes. When you turn on sorting, items can be reordered by drag and drop, and the reorder fires an interaction you can wire to an update. You also choose which fields users are allowed to sort by.
Does any of this need Apex?
No. The query, the field mapping, the filters, the search fields and the actions are all configured in the builder. No SOQL and no Apex class to maintain across releases.
Can I try it before paying?
Yes. Every Avonni plan starts with 10 free licenses, which is enough to build the list, put it in front of a real team and decide from there.

Other components

See where another component runs, and how it is configured.

Data TableKanbanCalendarTimelineMapPivot TableChatBrowse all components

Build your first list this afternoon

Install the package, point the list at an object and see it running in your own org before the day is out.

Start freeTalk to sales