LWC COMPONENT
Accordion
This starter keeps state local and uses native buttons so keyboard interaction can be layered in cleanly.
View component + code →WEBCRAFTSTUDIO COMPONENT LIBRARY
Free Salesforce LWC Components for developers.
Free Salesforce Lightning Web Components with starter templates, JavaScript, CSS and Meta XML for common UI patterns.
SALESFORCE LWC COMPONENTS
14 free components to start from.
Preview each pattern, copy the starter code, and adapt it to your project. Components are intentionally small and dependency-light.
LWC COMPONENT
Data Table
Use lightning-datatable for standard behavior, then wrap or extend it only when the UX requires custom rendering.
View component + code →LWC COMPONENT
KPI Card
Keep the primary number visually dominant and include a useful label and optional trend context.
View component + code →LWC COMPONENT
Search & Filter
Keep filtering explicit and debounce server-side search when it triggers expensive Apex queries.
View component + code →LWC COMPONENT
Modal
For production, trap focus, restore focus to the triggering element, and close on Escape where appropriate.
View component + code →LWC COMPONENT
Progress Bar
Expose progress with aria-valuenow and keep the percentage meaningful rather than decorative.
View component + code →LWC COMPONENT
Empty State
An empty state should explain what happened and give the user a useful next action when one exists.
View component + code →LWC COMPONENT
Stepper
Keep the current step clear and make completed versus upcoming states understandable without color alone.
View component + code →LWC COMPONENT
Record Card
Keep record cards focused on the fields users need to scan and act on quickly.
View component + code →LWC COMPONENT
Toast
Use toasts for brief feedback that does not require user action to resolve.
View component + code →LWC COMPONENT
Timeline
Keep each event concise and order the timeline consistently so users can scan it quickly.
View component + code →LWC COMPONENT
File Upload
Use Salesforce file permissions and record context deliberately; the UI alone does not determine access.
View component + code →LWC COMPONENT
Lookup Input
Use lightning-record-picker when its supported behavior fits the project; custom lookup UX should have a clear accessibility plan.
View component + code →LWC COMPONENT
Responsive Navigation
Keep navigation data-driven and make the mobile menu state explicit.
View component + code →These examples are provided as reusable starting points. Test accessibility, browser support, Salesforce permissions, data handling and production behavior for your specific project.