Product Tour
What the LWC Components library is, who it's for, and how to get it.
What is the LWC Components library?
LWC Components is a library of ready-to-use Lightning Web Components for Salesforce. It ships 50+ components across two families:
Core Components — base UI building blocks (avatars, badges, cards, pickers, menus, sliders, media players, and more) that you drop into any LWC.
Data Driven Components — higher-level, data-aware components (data table, kanban, scheduler, pivot table, timeline, tree, map, list, image list, chat, and more) that render a dataset automatically. Point them at a query or hand them static data and they take care of the rest — filtering, sorting, search, pagination, and drag-and-drop included.
Every component is documented with a live example, its attributes, events, and slots. Browse them under Core Components and Data Driven Components.
Who is it for?
The library is built for developers and admins alike:
Developers compose the
avonni-*components directly in their own LWCs and Aura components for pixel-perfect, reusable UI.Admins assemble data-driven experiences declaratively — configuring a query, a field mapping, and a few attributes — without writing custom Apex or JavaScript.
Your code stays thin
Every component keeps the complexity (rendering, sorting, drag and drop, accessibility, edge cases) inside the managed package, where Avonni tests and updates it with every release. What lands in your codebase is a thin layer of markup and configuration: a full data table is about 30 lines, not thousands.
Built for AI-assisted development
The library ships its own MCP server (https://mcp.avonnicomponents.com) and an agent skill, so assistants like Claude Code, Cursor, and GitHub Copilot write avonni-* markup from the real component catalog (attributes, events, slots, styling hooks, and type definitions) instead of guessing.
The full guide, setup included, lives in the Build with AI section:
Installation
Install the Avonni LWC Components from the Salesforce AppExchange. See the Installation & Licenses Management guide for the full step-by-step instructions and requirements.
Next steps
The Maintenance Advantage — why 30 lines on packaged components beat thousands from scratch.
Installation & Licenses Management — install the package and set up licenses.
Build with AI — connect your coding assistant to the MCP server and skills.
Core Components — browse the base UI components.
Data Driven Components — browse the data-aware components.
Last updated
Was this helpful?