Introduction

A library of Lightning Web Components for building rich Salesforce UI in your own code.

Drop finished components into your own LWCs and build rich Salesforce interfaces faster. Reference any component as an avonni-* tag in your HTML template, configure it through its attributes, done.

Two families, 55+ components:

🧱 Core Components · 43

The base UI building blocks: avatars, badges, cards, carousels, pickers, combobox, sliders, progress indicators, media players, layout, and more.

📊 Data Driven Components · 12

Point them at a SOQL query (or static data) and they render, filter, sort, search, and paginate automatically: data table, kanban, scheduler, pivot table, timeline, tree, map, chat, and more.

Every component page documents what it does, its attributes and events, and includes copy-paste code examples.

A data table in 30 lines, not 3,000 🛡️

The complexity lives in the managed package, maintained by Avonni with every release. What lands in your codebase stays a thin layer of markup: easy to review, easy to evolve, nothing to re-test when Salesforce updates.

See the maintenance advantage

Write your Avonni components with an AI assistant 🪄

Avonni ships a hosted MCP server and an agent skill that let Claude Code, Cursor, and GitHub Copilot write working avonni-* markup and code in your LWCs from plain-language prompts.

Discover Build with AI

---

Getting started

• Product Tour — what the library is, who it's for, and how it fits AI-assisted development.
• The Maintenance Advantage — why 30 lines on packaged components beat thousands from scratch.
• Installation & Licenses Management — install the package from AppExchange and assign licenses.
• Build with AI — connect your coding assistant to the Avonni MCP server and skills.

Then browse the Core Components and Data-Driven Components references.