awesome-lwc-collection

⚡️ Awesome LWC Collection

About the project

The repository should provide a collection of ready-to-use Lightning Web Components that might help your SFDX project and is intended to grow over time. Additionally, it also includes an initial configuration of Prettier, linting rules, git hooks and unit tests as well as useful VS Code settings. The setup really focuses on LWC development.

Components available

Each component has a dedicated page - with a screenshot, a full attribute reference and usage examples - in the component catalog, built automatically from the component READMEs and grouped into the same categories used below. Every listed component ships with corresponding unit tests and docs.

Data & Tables

	Component	Description
	Custom Datatable	A basic custom datatable with different configuration options.
	GraphQL Datatable	A custom datatable powered by the GraphQL wire adapter instead of Apex.
	CSV Importer	Imports CSV files into Salesforce in steps: the file is read and previewed, then its columns are mapped to the fields of an object.
	Multi Select Combobox	Combobox with different configuration options that also supports multi select.

Files & Documents

	Component	Description
	Base64 To PDF	A simple utility for Base64 encoded strings to decode and download them as PDF file.
	Content Document Table	A generic table to show shared documents from a Salesforce Files library.
	Visualforce To PDF	A simple utility for displaying Visualforce based PDF documents.

Maps & Charts

	Component	Description
	Custom Map View	Configurable map component for displaying locations via Google Maps API.
	GraphQL Map View	Configurable map component for displaying locations via the GraphQL wire adapter.
	Org Chart Viewer	An interactive organization chart with search, expand/collapse and PNG export, powered by d3-org-chart.
	Render 3D Elements	A simple demo component for rendering 3D elements using Three.js.

Media & Input

	Component	Description
	Signature Pad	A canvas-based signature capture component with mouse and touch support.
	Take User Profile Picture	Lets Salesforce users take a new profile photo with their device's camera.
	Camera Capture	A live camera view that takes photos, to build into your own components.
	QR Code Generator	A basic QR Code Generator with optional logo overlay using the external QRCode.js library.
	Custom Carousel	A simple custom carousel with different configuration options.
	Drag & Drop	A drag and drop building block based on the HTML Drag and Drop API.

Fundamentals & Integration

	Component	Description
	iFrame	A custom iFrame component with different configuration options.
	Open Record Page Flow Action	Component to forward to a record page from flow.

You can also find many more useful and reusable Lightning Web Components in the official lwc-recipes.

Prerequisites

To use this library and try out the components in one of your orgs or locally, the Node version specified in the package.json and the latest version of the Salesforce CLI should already be installed.

Getting started

Install all dependencies

To get everything up and runnning, you need to open the repository with VS Code, install all the recommended extensions and run the following command to install all required dependencies:

npm install

Authorize an org

You need to authorize an org before you can push the components or use the local development server. Even for trying the components locally this is necessary because all data requests using Lightning Data Service or Apex will get proxied to the Salesforce org and returned in the local components. In VS Code the authorization can be done by pressing Command + Shift + P, enter “sfdx”, and select SFDX: Authorize an Org.

Alternatively you can also run the following command from the command line:

sf org login web

Deploy components to an org

To deploy all components of this project to the currently connected org execute:

sf project deploy start

Local development

Local Dev for Lightning Web Components lets you create and modify components leveraging a real-time browser preview: Preview Components with Local Dev

To preview a single component in isolation against the connected org run:

npm run server:lwc

Quality measures

Git hooks

The project includes client-side pre-commit git hooks using husky and lint-staged. After installing all project dependencies, Prettier, Linter and unit tests are automatically executed before each commit.

Prettier for code formatting

Run Prettier to check all files for formatting issues:

npm run prettier

Code linting with ESLint

Run ESLint to check for linting issues:

npm run lint

Unit tests with Jest

To execute all unit tests only once run:

npm run test:unit

To execute all unit tests in watch mode for development run:

npm run test:unit:watch

To execute all unit tests with generated code coverage run:

npm run test:unit:coverage

Documentation with VitePress

The component documentation site is built with VitePress directly from the individual component READMEs, so it stays in sync automatically and is redeployed to GitHub Pages on every change to main.

The site is also AI-friendly, for agents that read the docs while they work: llms.txt as an index of all components, llms-full.txt with every component page in one file, and a Markdown copy of each page next to its HTML (append .md to the page URL).

For AI coding agents, svierk/salesforce-skills packages Salesforce know-how as agent skills that support everyday development work on Salesforce projects.

To preview the docs site locally with hot reload run:

npm run docs:dev

To build the static site (as it is published) run:

npm run docs:build

Contributing

Contributions are welcome - whether it’s a bug fix, an improvement or a brand-new component. Please read the contributing guide to get started and note the code of conduct. Security issues should be reported privately as described in the security policy.