Executive KPI dashboard
Components: Metric · Progress Circle · Datatable
Lightning Web Component examples
Custom Lightning Web Components that combine Avonni components in code, with the HTML and JavaScript ready to copy into your project. 62 examples to open live and copy, built with Avonni components such as Metric, Datatable and Badge.
Built with Avonni LWC Components
LWC
62 examples
Store inventory monitor
Components: Page Header · Metric · Datatable · List
Production line monitor
Components: Status · Progress Bar · Activity Timeline · Tree
Weekly pipeline review
Components: Filter Menu Group · Metric · Datatable · Avatar Group
Advisor appointment booking
Components: Page Header · Visual Picker · Date Time Picker · Avatar Group · Chip Container
Course enrollment picker
Components: Vertical Visual Picker · Progress Circle · Pill Container · Calendar
Care team directory
Components: Filter Menu Group · List · Avatar Group · Leaflet Map
Trading risk monitor
Components: Page Header · Badge · Layout · Layout Item · Filter Menu · Combobox · Alert · Metric · Card · Datatable · Progress Bar · List
Branch operations console
Components: Page Header · Badge · Metric · List · Activity Timeline · Card · Filter Menu · Datatable · Layout · Layout Item · Progress Bar · Rating
Emergency department triage board
Components: Page Header · Dynamic Menu · Alert · Filter Menu Group · Metric · Layout · Layout Item · List · Datatable · Avatar Group
Pharmacy inventory control
Components: Alert · Page Header · Badge · Filter Menu Group · Layout · Layout Item · Metric · Expandable Section · Progress Bar · Status · Blockquote · Card · Date Range · Datatable · List
OEE dashboard
Components: Page Header · Input Choice Set · Layout · Layout Item · Metric · Progress Circle · Datatable · Leaflet Map · Expandable Section · Progress Bar · List · Visual Picker Link
Shipment control tower
Components: Page Header · Badge · List · Leaflet Map · Layout · Layout Item · Metric · Combobox · Pill Container · Datatable
Omnichannel order desk
Components: Page Header · Badge · Filter Menu Group · Metric · Datatable · Expandable Section · Layout · Layout Item · Activity Timeline · Barcode · Avatar · Blockquote · Chip Container · List · Icon Picker · Color Picker · Input Choice Set
Promotion performance
Components: Page Header · Filter Menu Group · Metric · Datatable · Card · Layout · Layout Item · Progress Circle · Calendar · Barcode · Color Picker · Date Range · Blockquote · Illustration · Color Palette · Color Gradient
Giving day war room
Components: Page Header · Badge · Progress Indicator · Layout · Layout Item · Metric · Data Carousel · Card · Datatable · Progress Bar · Avatar Group · List · Progress Circle
Food bank distribution planner
Components: Page Header · Input Choice Set · Metric · Leaflet Map · Layout · Layout Item · Progress Bar · Datatable · Dual Listbox · Card · List · Carousel
Faculty gradebook
Components: Page Header · Dynamic Menu · Alert · Filter Menu Group · Metric · Datatable · Card · Layout · Layout Item · Progress Bar · Status · List · Chat
Campus facilities booking
Components: Page Header · Dynamic Menu · Alert · Filter Menu Group · Map · Vertical Visual Picker · Date Time Picker · Card · Layout · Layout Item · Slider · Color Picker · Input Choice Set · Progress Bar · Avatar · Datatable
Robo-advisor rebalancing console
Components: Page Header · Badge · Layout · Layout Item · Metric · Data Carousel · Card · Datatable · Slider · Color Palette · Progress Bar
Loan servicing desk
Components: Page Header · Badge · Layout · Layout Item · Metric · Card · Calendar · Tree · Input Choice Set · Counter · Datatable · List
Claims photo review
Components: Page Header · Badge · Layout · Layout Item · Metric · Card · Progress Indicator · Alert · Image List · Rating · Datatable · Signature Pad
Banking contact center
Components: Page Header · Badge · Layout · Layout Item · Metric · Card · Avatar · Chip Container · List · Chat · Datatable · Audio Player · Input Choice Set
Branch self-service kiosk
Components: Page Header · Chip Container · Badge · Metric · Card · Layout · Layout Item · Visual Picker · Avatar · Barcode · Microphone · List
Portfolio heat map
Components: Page Header · Badge · Metric · Map · Card · Layout · Layout Item · Progress Bar · Datatable · Color Gradient · Chip Container · List
KYC refresh queue
Components: Page Header · Badge · Metric · Datatable · Card · Progress Indicator · Dual Listbox · Date Time Picker · List · Activity Timeline
Radiology reading worklist
Components: Page Header · Badge · Metric · Datatable · Card · Tree · Image List · Layout · Layout Item · Microphone · List
Nurse shift handoff
Components: Page Header · Badge · Layout · Layout Item · Metric · Card · Avatar · Audio Player · Chip Container · Counter · Progress Indicator · Datatable · Activity Timeline · Avatar Group
Patient education library
Components: Page Header · Badge · Layout · Layout Item · Metric · Video Player · Card · Progress Bar · List · Data Carousel · Rating · Input Choice Set · Blockquote · Avatar · Chat
Lab results viewer
Components: Page Header · Dynamic Menu · Layout · Layout Item · Metric · Alert · Card · Chip Container · Datatable · Slider · Color Gradient · Activity Timeline · Blockquote · Avatar Group
Bed assignment board
Components: Page Header · Dynamic Menu · Layout · Layout Item · Metric · Card · Vertical Visual Picker · Pill Container · Datatable · Calendar · List · Progress Circle
Consent capture station
Components: Page Header · Badge · Layout · Layout Item · Metric · Card · Progress Indicator · Barcode · Blockquote · Chip Container · Datatable · Input Choice Set · Signature Pad · Avatar · Combobox · Activity Timeline
Physical therapy exercise plan
Components: Page Header · Badge · Layout · Layout Item · Metric · Video Player · Card · Chip Container · Counter · Slider · Datatable · Illustration · Progress Bar · Visual Picker
Andon board
Components: Page Header · Badge · Layout · Layout Item · Metric · Alert · Card · Status · Chip Container · Progress Bar · Color Palette · Combobox · Audio Player · Datatable · Avatar Group
Preventive maintenance planner
Components: Page Header · Badge · Layout · Layout Item · Metric · Card · Tree · Datatable · Calendar · Progress Bar · Counter · Combobox · Chip Container · Blockquote · Dual Listbox
Visual inspection station
Components: Page Header · Badge · Layout · Layout Item · Metric · Card · Progress Indicator · Alert · Image List · Input Choice Set · Datatable · Rating · Combobox · Signature Pad
Fleet and yard tracker
Components: Page Header · Badge · Layout · Layout Item · Metric · Alert · Map · Card · Progress Bar · Pill Container · Combobox · Data Carousel · Datatable · Avatar Group
Plant energy monitor
Components: Page Header · Badge · Layout · Layout Item · Metric · Alert · Card · Progress Bar · Color Gradient · Chip Container · Slider · Illustration · Visual Picker · Datatable · Progress Circle
Operator training station
Components: Page Header · Badge · Layout · Layout Item · Metric · Card · Progress Indicator · Video Player · Input Choice Set · Chip Container · Progress Bar · Microphone · Avatar Group · Datatable · Rating
Bill of materials explorer
Components: Page Header · Badge · Layout · Layout Item · Metric · Alert · Card · Tree · Barcode · Chip Container · Progress Bar · Icon Picker · List · Datatable · Activity Timeline · Status
Point of sale checkout
Components: Page Header · Badge · Layout · Layout Item · Metric · Alert · Card · Barcode · Counter · Chip Container · Avatar · Progress Bar · Datatable · Visual Picker · Input Choice Set
Product configurator
Components: Page Header · Badge · Layout · Layout Item · Metric · Card · Carousel · Color Palette · Chip Container · Vertical Visual Picker · Slider · Input Choice Set · Blockquote · Rating · Datatable · List
Planogram compliance
Components: Page Header · Badge · Layout · Layout Item · Metric · Alert · Image List · Datatable · Card · Progress Bar · Color Gradient · Date Time Picker
Live shopping studio
Components: Page Header · Badge · Layout · Layout Item · Metric · Video Player · Card · Chat · Data Carousel · Blockquote · Rating · Progress Bar · List · Datatable
Same-day delivery dispatch
Components: Page Header · Badge · Layout · Layout Item · Metric · Map · Card · Avatar · Avatar Group · Datatable · Progress Bar · Combobox · Input Choice Set · Calendar · Activity Timeline
Customer feedback wall
Components: Page Header · Badge · Layout · Layout Item · Metric · Card · Chip Container · Data Carousel · Audio Player · List · Combobox · Microphone · Rating · Progress Bar · Datatable · Blockquote
Markdown optimizer
Components: Page Header · Badge · Layout · Layout Item · Metric · Alert · Card · Slider · Date Range · Progress Circle · Dual Listbox · Illustration · Datatable
Crisis hotline console
Components: Page Header · Badge · Layout · Layout Item · Metric · Chat · Card · Avatar · Input Choice Set · Chip Container · Avatar Group · Audio Player · List · Combobox · Slider · Datatable · Activity Timeline
Food rescue routing
Components: Page Header · Badge · Layout · Layout Item · Metric · Map · Card · Combobox · Counter · Input Choice Set · Pill Container · Progress Bar · Datatable · Activity Timeline
Volunteer check-in kiosk
Components: Page Header · Badge · Layout · Layout Item · Metric · Card · Chip Container · Avatar · Barcode · List · Visual Picker · Input Choice Set · Signature Pad · Avatar Group · Progress Bar
Digital donor wall
Components: Page Header · Badge · Layout · Layout Item · Metric · Data Carousel · Card · Color Palette · Datatable · Rating · Progress Bar · Chip Container · Blockquote · Avatar · Progress Circle · Avatar Group · List
Case notes and voice memos
Components: Page Header · Badge · Layout · Layout Item · Metric · Tree · Card · Microphone · Combobox · Counter · Input Choice Set · Chip Container · Date Time Picker · Activity Timeline · Datatable · Avatar Group
Campaign video studio
Components: Page Header · Badge · Layout · Layout Item · Metric · Card · Progress Indicator · Video Player · Avatar Group · Input Choice Set · Image List · Progress Bar · Combobox · Rating · Chip Container · Datatable · Activity Timeline
Lecture capture and notes
Components: Page Header · Badge · Layout · Layout Item · Metric · Video Player · Card · Chip Container · Progress Bar · Input Choice Set · Blockquote · Microphone · Combobox · Audio Player · List · Datatable · Avatar Group · Rating
Exam proctoring console
Components: Page Header · Badge · Layout · Layout Item · Metric · Avatar · Card · Progress Bar · Counter · Combobox · Input Choice Set · Calendar · List · Chip Container · Datatable · Activity Timeline
Language lab
Components: Page Header · Dynamic Menu · Layout · Layout Item · Metric · Card · Progress Indicator · Audio Player · Slider · Microphone · Rating · Chip Container · Datatable · Activity Timeline
Art portfolio review
Components: Page Header · Dynamic Menu · Layout · Layout Item · Metric · Image List · Card · Color Palette · Chip Container · Progress Bar · Rating · Datatable · Input Choice Set · Combobox · Avatar Group · Signature Pad
Campus shuttle tracker
Components: Page Header · Dynamic Menu · Layout · Layout Item · Metric · Alert · Map · Card · List · Data Carousel · Progress Bar · Rating · Illustration
Curriculum map
Components: Page Header · Dynamic Menu · Layout · Layout Item · Metric · Alert · Card · Tree · Dual Listbox · Datatable · Color Gradient · Progress Indicator
Manufacturing quality dashboard
Components: Page Header · Badge · Layout · Layout Item · Metric · Card · Progress Circle · List · Progress Bar · Datatable
Investment portfolio overview
Components: Page Header · Layout · Layout Item · Metric · Card · List · Datatable · Alert
Care plan viewer
Components: Page Header · Layout · Layout Item · Metric · Alert · Progress Bar · Card · Datatable · List