Now on AppExchange

Ship Salesforce UIs. Skip the scaffolding.

55+ production-ready Lightning Web Components with a zero-Apex query engine. Drop in a tag, point it at an object, ship the feature.

Start freeRequest a Demo
55+
Components
0
Lines of Apex required
10
Free production licenses
Query mode · Account
Key Accounts
Search accounts
Filters
Export
Account Name
Owner
Annual Revenue
Rating
Onboarding
Northwind Traders
AL
Amira Lang
$4,200,000
Hot
80%
Bluepeak Logistics
DM
Dan Mercer
$2,850,000
Warm
45%
Halcyon Health
SR
Sofia Reyes
$1,940,000
Hot
100%
Copperline Energy
TN
Tomas Nunes
$1,275,000
Cold
20%
Vantage Retail Group
KO
Kara Osei
$980,000
Warm
60%
1–5 of 128
‹
1
2
3
›
The catalog

Two families. One managed package.

Data Driven
Full UIs in one tag.
12 record-driven components with query, search, and inline edits built in.
Opportunities
5 items
New
Export CSV
AccountvStageAmountvProbability
UO
United Oil & Gas
Negotiation$235,000
80%
GH
Grand Hotels & Resorts
Proposal$92,500
60%
EL
Express Logistics
Closed Won$178,000
100%
BT
Burlington Textiles
Qualification$54,000
35%
55+
production LWC components
43 Core + 12 Data Driven, one managed package.
Core
Building blocks.
43 components that extend the base Lightning library, each documented.
Rating
*****
Progress Indicator
Avatar Group
AK
RL
MG
+2
The full library
Kanban
$1.2M
▲12.4%
Pipeline
Metric
Created
Qualified
Won
Timeline
★★★★★
Rating
Need the Q3 figures?
Sending them now
Chat
72%
Progress Circle
 Q1Total
West4288
East3167
Total73155
Pivot Table
Account type▼
Customer
Partner
Prospect
Combobox
▼Americas
▼Canada
▶Quebec
Tree
Color Picker
Scheduler
Barcode
Explore the full component library
→
Why Avonni

Everything you need to ship custom UIs faster

The headline feature
0

Lines of Apex. That's Query Mode.

Point a component at an object with a declarative query. It fetches, paginates, searches, filters, and saves inline edits, with no controller, no wire adapters, no test classes of yours behind it.

55+

Production-ready components

43 Core building blocks + 12 Data Driven full UIs.

AI

AI-tooling ready

Claude Code, Agentforce Vibes, and Codex generate correct Avonni markup from a documented API plus MCP server.

100%

Salesforce native

Managed package, SLDS-compliant, security reviewed.

Query mode

One tag. The whole feature.

A searchable, filterable, paginated Account table with inline editing. This is the entire markup.

accountTable.html
<template>
<avonni-dd-datatable
header-title="Key Accounts"
query={query}
columns={columns}
search-fields={searchFields}
filters={filters}
show-pagination>
</avonni-dd-datatable>
</template>

This tag replaces ~800 lines of hand-written LWC, Apex, and CSS.

✓
SOQL query, built in
✓
Search & user filters
✓
Pagination & caching
✓
Inline editing & saves
✓
Real-time refresh via platform events
✓
FLS & sharing rules respected
Built for

Every surface you ship on

Lightning Pages

Wrap a component in a thin LWC and drop it on App, Home, and Record pages.

Experience Sites

Customer and partner portals that respect your branding and the user's sharing rules.

Custom LWC Development

Compose Avonni tags in your own components. Full control where you need it.

Use cases

LWC, in a real org.

Avonni Scheduler in a Lightning Web Component: seven field technicians on a one day timeline with colored jobs and a popover offering Reschedule and Reassign
top
LWC

Live crew board

Seven technicians on one day, 7 AM to 6 PM, with reschedule and reassign one click from any job. One tag in your LWC, no scheduling code.

See the configuration
All use cases
The AI angle

Built for AI-assisted development

Generated code is owned code. Claude Code can write you a custom data table in twenty minutes. The demo works. Here is what the demo does not show.

Day 1

Feels like the finish line

A working data table shows up in twenty minutes. It compiles, renders rows, and the demo works.

Month 3

The hard part starts

The remaining 80% of the work starts here: accessibility, error states, rollback, large-volume performance, and surviving three Salesforce releases a year. None of it shows in a happy-path demo.

Year 5

Someone inherits it

The prompt author moves on. The next dev owns thousands of undocumented lines with no maintainer behind them. Archaeology, not shipping.

The way out is a split, not a bet.

1 tag
An Avonni Data Table
Documented, stable, maintained by us
vs
800–1,200
Lines of AI-generated code to maintain
Ten components later: 10,000+ lines you own

The winning split: Avonni for the heavy UI foundations, AI for the code that is genuinely custom. And your AI assistant already speaks Avonni: a documented public API and an MCP server make the library legible to Claude Code, Agentforce Vibes, and Codex.

Claude Code
❯
Add a table of key accounts to the LWC I'm building.
avonni · list_components (lwc)
Reading the component list
avonni · get_component_docs ("avonni-dd-datatable")
Properties, events, query mode
Edit accountTable.html
<avonni-dd-datatable header-title="Key Accounts" query={query} …>
The attributes come from the docs, not from a guess.
Compare LWC Components vs building from scratch →
Build vs buy
Do the math on building it yourself

AI writes the first version fast. Owning it across Salesforce releases is the real cost. Put in your own numbers and see the five-year picture.

Open the cost calculator

Stop scaffolding. Start shipping.

Install the package, drop your first component on a page, and see how much of your backlog just became a configuration exercise.

Start freeRequest a Demo
Available on the AppExchange
FAQ

Questions developers actually ask

How does licensing work?

LWC Components is a managed package installed from the AppExchange. You get 10 free production licenses, and sandbox use is unlimited, so your whole team can build and evaluate before adding seats.

Will it work with my existing custom LWCs?

Yes. Avonni components are standard Lightning Web Components. Compose them inside your own markup exactly like base lightning-* components, and wire them to your logic through documented events and methods.

What's the difference between query mode and static mode?

Query mode: pass a declarative query definition and the component fetches records, handles search, filters, pagination, and inline edits, with zero Apex. Static mode: pass your own items array and own the data layer when you need full control.

Does this affect my Apex test coverage?

No. The package is managed, so its code doesn't count toward your org's coverage requirement. Query mode also removes the need for Apex controllers on many features, so there's less of your Apex to write and less to test.

Where can I deploy these components?

Lightning App, Home, and Record pages, Experience Cloud sites, and inside your own custom LWC development. SLDS-compliant with styling hooks, so they blend into every surface.