Top 10 Lightning Web Components Every Developer Should Build (with Examples)
Salesforce’s Lightning Web Components (LWC) are the building blocks of modern, fast, and scalable apps on the platform. Whether you’re a beginner looking to practice or an experienced dev building reusable utilities, these 10 must-have components will sharpen your skills and add real power to your org.
Let’s explore each one with use cases and examples.
Dynamic Data Table with Row Actions
Purpose: Display records in a table with edit/delete/view functionality.
Use Case: View a list of contacts with buttons to edit or delete each row.
Example:
html
CopyEdit
<lightning-datatable
data={data}
columns={columns}
key-field=”Id”
onrowaction={handleRowAction}>
</lightning-datatable>
What You Learn:
- lightning-datatable
- Handling row-level actions
- Apex data integration
Reusable Modal (Popup) Component
Purpose: Create modals for confirmations, forms, or messages.
Use Case: Show a modal when the user clicks “New Contact”.
Example:
html
CopyEdit
<template if:true={isOpen}>
<section role=”dialog” class=”slds-modal slds-fade-in-open”>
<div class=”slds-modal__content”>{modalContent}</div>
<footer class=”slds-modal__footer”>
<lightning-button label=”Close” onclick={closeModal}></lightning-button>
</footer>
</section>
</template>
What You Learn:
- Slotting and composition
- Show/hide logic
- Styling modals with SLDS
Custom Lookup Component
Purpose: Create a search-and-select field for any object.
Use Case: Select an account in a custom form.
Example:
js
CopyEdit
@wire(searchAccounts, { searchTerm: ‘$searchKey’ }) accounts;
What You Learn:
- Dynamic Apex search
- Debounced input
- Emitting selected record to parent
Multi-Step Form Wizard
Purpose: Guide users through multiple input steps.
Use Case: Onboarding a new employee in steps: Personal Info → Job Details → Review.
Example:
html
CopyEdit
<template if:true={step1}>
<c-step-one onnext={goToStepTwo}></c-step-one>
</template>
<template if:true={step2}>
<c-step-two onback={goToStepOne}></c-step-two>
</template>
What You Learn:
- State management across components
- Step transitions
- Validation before proceeding
Toast Notification Utility
Purpose: Standardize how you show success/error/info messages.
Use Case: After saving a record, show a success message.
Example:
js
CopyEdit
import { ShowToastEvent } from ‘lightning/platformShowToastEvent’;
this.dispatchEvent(new ShowToastEvent({ title: ‘Success’, message: ‘Contact created.’, variant: ‘success’ }));
What You Learn:
- Event handling
- Reusability via utility JS
File Upload with Preview
Purpose: Upload files and display preview before saving.
Use Case: Upload a profile picture and preview it.
Example:
html
CopyEdit
<lightning-input type=”file” onchange={handleFileChange}></lightning-input>
<img src={previewUrl} if:true={previewUrl} />
What You Learn:
- FileReader API
- Working with Base64
- Handling files in Apex
Record Auto-Refresh Viewer
Purpose: Show updated record data without page reload.
Use Case: Real-time status updates for cases or approvals.
Example:
js
CopyEdit
refreshApex(this.wiredRecord);
What You Learn:
- getRecordNotifyChange
- Wire adapters
- Real-time UX
Progress Bar Component
Purpose: Visually show progress across a process.
Use Case: Display lead conversion progress: 25% → 50% → 100%.
Example:
html
CopyEdit
<div class=”progress-bar” style=”width:{progress}%”></div>
What You Learn:
- Dynamic styling
- Status indicators
- Conditional rendering
Kanban Board with Drag & Drop
Purpose: View records as cards by stage/status and move them around.
Use Case: Display opportunities in Kanban and move between stages.
Example:
html
CopyEdit
<div class=”kanban-column” ondrop={handleDrop} ondragover={allowDrop}>
<template for:each={oppsByStage} for:item=”opp”>
<div key={opp.Id} draggable=”true” ondragstart={handleDrag}>{opp.Name}</div>
</template>
</div>
What You Learn:
- HTML5 drag-and-drop
- Stage-based filtering
- Updating data post-drop
Calendar or Event Timeline
Purpose: Visualize events or tasks in a calendar view.
Use Case: Display candidate interviews or job application deadlines.
Example:
Use FullCalendar.js in LWC and map records to the calendar:
js
CopyEdit
events = [{ title: ‘Interview’, start: ‘2025-08-10’ }];
What You Learn:
- External libraries in LWC
- Event handling
- UI customization
Final Thoughts
Building these 10 components will:
- Improve your UI/UX skills
- Enhance reusability
- Teach you real-world patterns for enterprise Salesforce apps
Whether you’re building for internal users or customers, these LWCs will add serious value.