Updated READMEs

made-vue-accordion/README.md

@@ -9,6 +9,8 @@
 
 A Vue 3 accordion component, a UI component for containers of expandable content.
 
+<img src="https://raw.githubusercontent.com/MADE-Apps/MADE-Vue/main/assets/components/accordion.png" alt="MADE Vue Accordion Component" />
+
 ## Usage
 
 To customise the accordion layout, you'll want to import the scss styling:

made-vue-blades/README.md

@@ -9,6 +9,8 @@
 
 A Vue 3 blade layout component, a UI pattern most commonly seen in the Microsoft Azure portal.
 
+<img src="https://raw.githubusercontent.com/MADE-Apps/MADE-Vue/main/assets/components/blade.png" alt="MADE Vue Blade Component" />
+
 ## Usage
 
 To customise the blade layout, you'll want to import the scss styling:

made-vue-chipbox/README.md

@@ -9,6 +9,8 @@
 
 A Vue 3 chip/tag input component, a UI component for allowing multiple value input.
 
+<img src="https://raw.githubusercontent.com/MADE-Apps/MADE-Vue/main/assets/components/chipbox.png" alt="MADE Vue Chip Box Component" />
+
 ## Usage
 
 To customise the chip box layout, you'll want to import the scss styling:

made-vue-image/README.md

@@ -9,6 +9,8 @@
 
 A Vue 3 image and background image component, allowing an image to be downloaded while showing a loading indicator, showing a placeholder image if the source image fails to load.
 
+<img src="https://raw.githubusercontent.com/MADE-Apps/MADE-Vue/main/assets/components/image.png" alt="MADE Vue Image Component" />
+
 ## Usage
 
 To customize the image or background image component, you'll want to import the scss styling:

made-vue-range-selector/README.md

@@ -9,6 +9,8 @@
 
 A Vue 3 range selector component, a double slider that allows the user to select a value range between a minimum and maximum value.
 
+<img src="https://raw.githubusercontent.com/MADE-Apps/MADE-Vue/main/assets/components/rangeselector.png" alt="MADE Vue Range Selector Component" />
+
 ## Usage
 
 To customise the range selector, you'll want to import the scss styling: