diff --git a/core/package.json b/core/package.json
index dbf9710e51..4a630c0e71 100644
--- a/core/package.json
+++ b/core/package.json
@@ -65,6 +65,7 @@
     "build.vendor": "rollup --config ./scripts/swiper.rollup.config.js",
     "build.css": "npm run css.sass && npm run css.minify",
     "build.debug": "npm run clean && stencil build --debug",
+    "build.docs": "stencil build --docs",
     "build.docs.json": "stencil build --docs-json dist/docs.json",
     "clean": "node scripts/clean.js",
     "cdnloader": "node scripts/copy-cdn-loader.js",
diff --git a/core/src/components/action-sheet/readme.md b/core/src/components/action-sheet/readme.md
index 446f280aa6..b12332e9e2 100644
--- a/core/src/components/action-sheet/readme.md
+++ b/core/src/components/action-sheet/readme.md
@@ -45,7 +45,7 @@ export class ActionSheetExample {
         }
       }, {
         text: 'Play (open modal)',
-        icon: 'arrow-dropright-circle',
+        icon: 'caret-forward-circle',
         handler: () => {
           console.log('Play clicked');
         }
@@ -94,7 +94,7 @@ async function presentActionSheet() {
     }
   }, {
     text: 'Play (open modal)',
-    icon: 'arrow-dropright-circle',
+    icon: 'caret-forward-circle',
     handler: () => {
       console.log('Play clicked');
     }
@@ -121,9 +121,9 @@ async function presentActionSheet() {
 ### React
 
 ```typescript
-import React, { useState } from 'react'
+import React, { useState } from 'react';
 import { IonActionSheet, IonContent, IonButton } from '@ionic/react';
-import { trash, share, playCircleOutline, heart, close } from 'ionicons/icons';
+import { trash, share, caretForwardCircle, heart, close } from 'ionicons/icons';
 
 export const ActionSheetExample: React.FC = () => {
 
@@ -150,7 +150,7 @@ export const ActionSheetExample: React.FC = () => {
           }
         }, {
           text: 'Play (open modal)',
-          icon: playCircleOutline,
+          icon: caretForwardCircle,
           handler: () => {
             console.log('Play clicked');
           }
@@ -179,6 +179,69 @@ export const ActionSheetExample: React.FC = () => {
 ```
 
 
+### Stencil
+
+```tsx
+import { Component, h } from '@stencil/core';
+
+import { actionSheetController } from '@ionic/core';
+
+@Component({
+  tag: 'action-sheet-example',
+  styleUrl: 'action-sheet-example.css'
+})
+export class ActionSheetExample {
+  async presentActionSheet() {
+    const actionSheet = await actionSheetController.create({
+      header: 'Albums',
+      buttons: [{
+        text: 'Delete',
+        role: 'destructive',
+        icon: 'trash',
+        handler: () => {
+          console.log('Delete clicked');
+        }
+      }, {
+        text: 'Share',
+        icon: 'share',
+        handler: () => {
+          console.log('Share clicked');
+        }
+      }, {
+        text: 'Play (open modal)',
+        icon: 'caret-forward-circle',
+        handler: () => {
+          console.log('Play clicked');
+        }
+      }, {
+        text: 'Favorite',
+        icon: 'heart',
+        handler: () => {
+          console.log('Favorite clicked');
+        }
+      }, {
+        text: 'Cancel',
+        icon: 'close',
+        role: 'cancel',
+        handler: () => {
+          console.log('Cancel clicked');
+        }
+      }]
+    });
+    await actionSheet.present();
+  }
+
+  render() {
+    return [
+      <ion-content>
+        <ion-button onClick={() => this.presentActionSheet()}>Present Action Sheet</ion-button>
+      </ion-content>
+    ];
+  }
+}
+```
+
+
 ### Vue
 
 ```html
@@ -213,7 +276,7 @@ export default {
             },
             {
               text: 'Play (open modal)',
-              icon: 'arrow-dropright-circle',
+              icon: 'caret-forward-circle',
               handler: () => {
                 console.log('Play clicked')
               },
diff --git a/core/src/components/action-sheet/usage/angular.md b/core/src/components/action-sheet/usage/angular.md
index 8b4bebada8..926e54fa15 100644
--- a/core/src/components/action-sheet/usage/angular.md
+++ b/core/src/components/action-sheet/usage/angular.md
@@ -29,7 +29,7 @@ export class ActionSheetExample {
         }
       }, {
         text: 'Play (open modal)',
-        icon: 'arrow-dropright-circle',
+        icon: 'caret-forward-circle',
         handler: () => {
           console.log('Play clicked');
         }
diff --git a/core/src/components/action-sheet/usage/javascript.md b/core/src/components/action-sheet/usage/javascript.md
index 75770b7a41..6db3aaf3f3 100644
--- a/core/src/components/action-sheet/usage/javascript.md
+++ b/core/src/components/action-sheet/usage/javascript.md
@@ -19,7 +19,7 @@ async function presentActionSheet() {
     }
   }, {
     text: 'Play (open modal)',
-    icon: 'arrow-dropright-circle',
+    icon: 'caret-forward-circle',
     handler: () => {
       console.log('Play clicked');
     }
diff --git a/core/src/components/action-sheet/usage/react.md b/core/src/components/action-sheet/usage/react.md
index 37424541a0..4f8323e149 100644
--- a/core/src/components/action-sheet/usage/react.md
+++ b/core/src/components/action-sheet/usage/react.md
@@ -1,7 +1,7 @@
 ```typescript
-import React, { useState } from 'react'
+import React, { useState } from 'react';
 import { IonActionSheet, IonContent, IonButton } from '@ionic/react';
-import { trash, share, playCircleOutline, heart, close } from 'ionicons/icons';
+import { trash, share, caretForwardCircle, heart, close } from 'ionicons/icons';
 
 export const ActionSheetExample: React.FC = () => {
 
@@ -28,7 +28,7 @@ export const ActionSheetExample: React.FC = () => {
           }
         }, {
           text: 'Play (open modal)',
-          icon: playCircleOutline,
+          icon: caretForwardCircle,
           handler: () => {
             console.log('Play clicked');
           }
diff --git a/core/src/components/action-sheet/usage/stencil.md b/core/src/components/action-sheet/usage/stencil.md
new file mode 100644
index 0000000000..e71cd10886
--- /dev/null
+++ b/core/src/components/action-sheet/usage/stencil.md
@@ -0,0 +1,59 @@
+```tsx
+import { Component, h } from '@stencil/core';
+
+import { actionSheetController } from '@ionic/core';
+
+@Component({
+  tag: 'action-sheet-example',
+  styleUrl: 'action-sheet-example.css'
+})
+export class ActionSheetExample {
+  async presentActionSheet() {
+    const actionSheet = await actionSheetController.create({
+      header: 'Albums',
+      buttons: [{
+        text: 'Delete',
+        role: 'destructive',
+        icon: 'trash',
+        handler: () => {
+          console.log('Delete clicked');
+        }
+      }, {
+        text: 'Share',
+        icon: 'share',
+        handler: () => {
+          console.log('Share clicked');
+        }
+      }, {
+        text: 'Play (open modal)',
+        icon: 'caret-forward-circle',
+        handler: () => {
+          console.log('Play clicked');
+        }
+      }, {
+        text: 'Favorite',
+        icon: 'heart',
+        handler: () => {
+          console.log('Favorite clicked');
+        }
+      }, {
+        text: 'Cancel',
+        icon: 'close',
+        role: 'cancel',
+        handler: () => {
+          console.log('Cancel clicked');
+        }
+      }]
+    });
+    await actionSheet.present();
+  }
+
+  render() {
+    return [
+      <ion-content>
+        <ion-button onClick={() => this.presentActionSheet()}>Present Action Sheet</ion-button>
+      </ion-content>
+    ];
+  }
+}
+```
\ No newline at end of file
diff --git a/core/src/components/action-sheet/usage/vue.md b/core/src/components/action-sheet/usage/vue.md
index b7adb2f09b..af30358dcd 100644
--- a/core/src/components/action-sheet/usage/vue.md
+++ b/core/src/components/action-sheet/usage/vue.md
@@ -30,7 +30,7 @@ export default {
             },
             {
               text: 'Play (open modal)',
-              icon: 'arrow-dropright-circle',
+              icon: 'caret-forward-circle',
               handler: () => {
                 console.log('Play clicked')
               },
diff --git a/core/src/components/alert/readme.md b/core/src/components/alert/readme.md
index b86b6fe5ab..317cd55520 100644
--- a/core/src/components/alert/readme.md
+++ b/core/src/components/alert/readme.md
@@ -779,6 +779,282 @@ export default AlertExample;
 ```
 
 
+### Stencil
+
+```tsx
+import { Component, h } from '@stencil/core';
+
+import { alertController } from '@ionic/core';
+
+@Component({
+  tag: 'alert-example',
+  styleUrl: 'alert-example.css'
+})
+export class AlertExample {
+  async presentAlert() {
+    const alert = await alertController.create({
+      header: 'Alert',
+      subHeader: 'Subtitle',
+      message: 'This is an alert message.',
+      buttons: ['OK']
+    });
+
+    await alert.present();
+  }
+
+  async presentAlertMultipleButtons() {
+    const alert = await alertController.create({
+      header: 'Alert',
+      subHeader: 'Subtitle',
+      message: 'This is an alert message.',
+      buttons: ['Cancel', 'Open Modal', 'Delete']
+    });
+
+    await alert.present();
+  }
+
+  async presentAlertConfirm() {
+    const alert = await alertController.create({
+      header: 'Confirm!',
+      message: 'Message <strong>text</strong>!!!',
+      buttons: [
+        {
+          text: 'Cancel',
+          role: 'cancel',
+          cssClass: 'secondary',
+          handler: (blah) => {
+            console.log('Confirm Cancel: blah');
+          }
+        }, {
+          text: 'Okay',
+          handler: () => {
+            console.log('Confirm Okay');
+          }
+        }
+      ]
+    });
+
+    await alert.present();
+  }
+
+  async presentAlertPrompt() {
+    const alert = await alertController.create({
+      header: 'Prompt!',
+      inputs: [
+        {
+          name: 'name1',
+          type: 'text',
+          placeholder: 'Placeholder 1'
+        },
+        {
+          name: 'name2',
+          type: 'text',
+          id: 'name2-id',
+          value: 'hello',
+          placeholder: 'Placeholder 2'
+        },
+        // multiline input.
+        {
+          name: 'paragraph',
+          id: 'paragraph',
+          type: 'textarea',
+          placeholder: 'Placeholder 3'
+        },
+        {
+          name: 'name3',
+          value: 'http://ionicframework.com',
+          type: 'url',
+          placeholder: 'Favorite site ever'
+        },
+        // input date with min & max
+        {
+          name: 'name4',
+          type: 'date',
+          min: '2017-03-01',
+          max: '2018-01-12'
+        },
+        // input date without min nor max
+        {
+          name: 'name5',
+          type: 'date'
+        },
+        {
+          name: 'name6',
+          type: 'number',
+          min: -5,
+          max: 10
+        },
+        {
+          name: 'name7',
+          type: 'number'
+        }
+      ],
+      buttons: [
+        {
+          text: 'Cancel',
+          role: 'cancel',
+          cssClass: 'secondary',
+          handler: () => {
+            console.log('Confirm Cancel');
+          }
+        }, {
+          text: 'Ok',
+          handler: () => {
+            console.log('Confirm Ok');
+          }
+        }
+      ]
+    });
+
+    await alert.present();
+  }
+
+  async presentAlertRadio() {
+    const alert = await alertController.create({
+      header: 'Radio',
+      inputs: [
+        {
+          name: 'radio1',
+          type: 'radio',
+          label: 'Radio 1',
+          value: 'value1',
+          checked: true
+        },
+        {
+          name: 'radio2',
+          type: 'radio',
+          label: 'Radio 2',
+          value: 'value2'
+        },
+        {
+          name: 'radio3',
+          type: 'radio',
+          label: 'Radio 3',
+          value: 'value3'
+        },
+        {
+          name: 'radio4',
+          type: 'radio',
+          label: 'Radio 4',
+          value: 'value4'
+        },
+        {
+          name: 'radio5',
+          type: 'radio',
+          label: 'Radio 5',
+          value: 'value5'
+        },
+        {
+          name: 'radio6',
+          type: 'radio',
+          label: 'Radio 6 Radio 6 Radio 6 Radio 6 Radio 6 Radio 6 Radio 6 Radio 6 Radio 6 Radio 6 ',
+          value: 'value6'
+        }
+      ],
+      buttons: [
+        {
+          text: 'Cancel',
+          role: 'cancel',
+          cssClass: 'secondary',
+          handler: () => {
+            console.log('Confirm Cancel');
+          }
+        }, {
+          text: 'Ok',
+          handler: () => {
+            console.log('Confirm Ok');
+          }
+        }
+      ]
+    });
+
+    await alert.present();
+  }
+
+  async presentAlertCheckbox() {
+    const alert = await alertController.create({
+      header: 'Checkbox',
+      inputs: [
+        {
+          name: 'checkbox1',
+          type: 'checkbox',
+          label: 'Checkbox 1',
+          value: 'value1',
+          checked: true
+        },
+
+        {
+          name: 'checkbox2',
+          type: 'checkbox',
+          label: 'Checkbox 2',
+          value: 'value2'
+        },
+
+        {
+          name: 'checkbox3',
+          type: 'checkbox',
+          label: 'Checkbox 3',
+          value: 'value3'
+        },
+
+        {
+          name: 'checkbox4',
+          type: 'checkbox',
+          label: 'Checkbox 4',
+          value: 'value4'
+        },
+
+        {
+          name: 'checkbox5',
+          type: 'checkbox',
+          label: 'Checkbox 5',
+          value: 'value5'
+        },
+
+        {
+          name: 'checkbox6',
+          type: 'checkbox',
+          label: 'Checkbox 6 Checkbox 6 Checkbox 6 Checkbox 6 Checkbox 6 Checkbox 6 Checkbox 6 Checkbox 6 Checkbox 6 Checkbox 6',
+          value: 'value6'
+        }
+      ],
+      buttons: [
+        {
+          text: 'Cancel',
+          role: 'cancel',
+          cssClass: 'secondary',
+          handler: () => {
+            console.log('Confirm Cancel');
+          }
+        }, {
+          text: 'Ok',
+          handler: () => {
+            console.log('Confirm Ok');
+          }
+        }
+      ]
+    });
+
+    await alert.present();
+  }
+
+
+  render() {
+    return [
+      <ion-content>
+        <ion-button onClick={() => this.presentAlert()}>Present Alert</ion-button>
+        <ion-button onClick={() => this.presentAlertMultipleButtons()}>Present Alert: Multiple Buttons</ion-button>
+        <ion-button onClick={() => this.presentAlertConfirm()}>Present Alert: Confirm</ion-button>
+        <ion-button onClick={() => this.presentAlertPrompt()}>Present Alert: Prompt</ion-button>
+        <ion-button onClick={() => this.presentAlertRadio()}>Present Alert: Radio</ion-button>
+        <ion-button onClick={() => this.presentAlertCheckbox()}>Present Alert: Checkbox</ion-button>
+      </ion-content>
+    ];
+  }
+}
+```
+
+
 ### Vue
 
 ```html
diff --git a/core/src/components/alert/usage/stencil.md b/core/src/components/alert/usage/stencil.md
new file mode 100644
index 0000000000..371411496c
--- /dev/null
+++ b/core/src/components/alert/usage/stencil.md
@@ -0,0 +1,272 @@
+```tsx
+import { Component, h } from '@stencil/core';
+
+import { alertController } from '@ionic/core';
+
+@Component({
+  tag: 'alert-example',
+  styleUrl: 'alert-example.css'
+})
+export class AlertExample {
+  async presentAlert() {
+    const alert = await alertController.create({
+      header: 'Alert',
+      subHeader: 'Subtitle',
+      message: 'This is an alert message.',
+      buttons: ['OK']
+    });
+
+    await alert.present();
+  }
+
+  async presentAlertMultipleButtons() {
+    const alert = await alertController.create({
+      header: 'Alert',
+      subHeader: 'Subtitle',
+      message: 'This is an alert message.',
+      buttons: ['Cancel', 'Open Modal', 'Delete']
+    });
+
+    await alert.present();
+  }
+
+  async presentAlertConfirm() {
+    const alert = await alertController.create({
+      header: 'Confirm!',
+      message: 'Message <strong>text</strong>!!!',
+      buttons: [
+        {
+          text: 'Cancel',
+          role: 'cancel',
+          cssClass: 'secondary',
+          handler: (blah) => {
+            console.log('Confirm Cancel: blah');
+          }
+        }, {
+          text: 'Okay',
+          handler: () => {
+            console.log('Confirm Okay');
+          }
+        }
+      ]
+    });
+
+    await alert.present();
+  }
+
+  async presentAlertPrompt() {
+    const alert = await alertController.create({
+      header: 'Prompt!',
+      inputs: [
+        {
+          name: 'name1',
+          type: 'text',
+          placeholder: 'Placeholder 1'
+        },
+        {
+          name: 'name2',
+          type: 'text',
+          id: 'name2-id',
+          value: 'hello',
+          placeholder: 'Placeholder 2'
+        },
+        // multiline input.
+        {
+          name: 'paragraph',
+          id: 'paragraph',
+          type: 'textarea',
+          placeholder: 'Placeholder 3'
+        },
+        {
+          name: 'name3',
+          value: 'http://ionicframework.com',
+          type: 'url',
+          placeholder: 'Favorite site ever'
+        },
+        // input date with min & max
+        {
+          name: 'name4',
+          type: 'date',
+          min: '2017-03-01',
+          max: '2018-01-12'
+        },
+        // input date without min nor max
+        {
+          name: 'name5',
+          type: 'date'
+        },
+        {
+          name: 'name6',
+          type: 'number',
+          min: -5,
+          max: 10
+        },
+        {
+          name: 'name7',
+          type: 'number'
+        }
+      ],
+      buttons: [
+        {
+          text: 'Cancel',
+          role: 'cancel',
+          cssClass: 'secondary',
+          handler: () => {
+            console.log('Confirm Cancel');
+          }
+        }, {
+          text: 'Ok',
+          handler: () => {
+            console.log('Confirm Ok');
+          }
+        }
+      ]
+    });
+
+    await alert.present();
+  }
+
+  async presentAlertRadio() {
+    const alert = await alertController.create({
+      header: 'Radio',
+      inputs: [
+        {
+          name: 'radio1',
+          type: 'radio',
+          label: 'Radio 1',
+          value: 'value1',
+          checked: true
+        },
+        {
+          name: 'radio2',
+          type: 'radio',
+          label: 'Radio 2',
+          value: 'value2'
+        },
+        {
+          name: 'radio3',
+          type: 'radio',
+          label: 'Radio 3',
+          value: 'value3'
+        },
+        {
+          name: 'radio4',
+          type: 'radio',
+          label: 'Radio 4',
+          value: 'value4'
+        },
+        {
+          name: 'radio5',
+          type: 'radio',
+          label: 'Radio 5',
+          value: 'value5'
+        },
+        {
+          name: 'radio6',
+          type: 'radio',
+          label: 'Radio 6 Radio 6 Radio 6 Radio 6 Radio 6 Radio 6 Radio 6 Radio 6 Radio 6 Radio 6 ',
+          value: 'value6'
+        }
+      ],
+      buttons: [
+        {
+          text: 'Cancel',
+          role: 'cancel',
+          cssClass: 'secondary',
+          handler: () => {
+            console.log('Confirm Cancel');
+          }
+        }, {
+          text: 'Ok',
+          handler: () => {
+            console.log('Confirm Ok');
+          }
+        }
+      ]
+    });
+
+    await alert.present();
+  }
+
+  async presentAlertCheckbox() {
+    const alert = await alertController.create({
+      header: 'Checkbox',
+      inputs: [
+        {
+          name: 'checkbox1',
+          type: 'checkbox',
+          label: 'Checkbox 1',
+          value: 'value1',
+          checked: true
+        },
+
+        {
+          name: 'checkbox2',
+          type: 'checkbox',
+          label: 'Checkbox 2',
+          value: 'value2'
+        },
+
+        {
+          name: 'checkbox3',
+          type: 'checkbox',
+          label: 'Checkbox 3',
+          value: 'value3'
+        },
+
+        {
+          name: 'checkbox4',
+          type: 'checkbox',
+          label: 'Checkbox 4',
+          value: 'value4'
+        },
+
+        {
+          name: 'checkbox5',
+          type: 'checkbox',
+          label: 'Checkbox 5',
+          value: 'value5'
+        },
+
+        {
+          name: 'checkbox6',
+          type: 'checkbox',
+          label: 'Checkbox 6 Checkbox 6 Checkbox 6 Checkbox 6 Checkbox 6 Checkbox 6 Checkbox 6 Checkbox 6 Checkbox 6 Checkbox 6',
+          value: 'value6'
+        }
+      ],
+      buttons: [
+        {
+          text: 'Cancel',
+          role: 'cancel',
+          cssClass: 'secondary',
+          handler: () => {
+            console.log('Confirm Cancel');
+          }
+        }, {
+          text: 'Ok',
+          handler: () => {
+            console.log('Confirm Ok');
+          }
+        }
+      ]
+    });
+
+    await alert.present();
+  }
+
+
+  render() {
+    return [
+      <ion-content>
+        <ion-button onClick={() => this.presentAlert()}>Present Alert</ion-button>
+        <ion-button onClick={() => this.presentAlertMultipleButtons()}>Present Alert: Multiple Buttons</ion-button>
+        <ion-button onClick={() => this.presentAlertConfirm()}>Present Alert: Confirm</ion-button>
+        <ion-button onClick={() => this.presentAlertPrompt()}>Present Alert: Prompt</ion-button>
+        <ion-button onClick={() => this.presentAlertRadio()}>Present Alert: Radio</ion-button>
+        <ion-button onClick={() => this.presentAlertCheckbox()}>Present Alert: Checkbox</ion-button>
+      </ion-content>
+    ];
+  }
+}
+```
\ No newline at end of file
diff --git a/core/src/components/avatar/readme.md b/core/src/components/avatar/readme.md
index 151dbdc301..67403f0f96 100644
--- a/core/src/components/avatar/readme.md
+++ b/core/src/components/avatar/readme.md
@@ -36,7 +36,7 @@ Avatars can be used by themselves or inside of any element. If placed inside of
 ### React
 
 ```tsx
-import React from 'react'
+import React from 'react';
 import { IonAvatar, IonChip, IonItem, IonLabel, IonContent } from '@ionic/react';
 
 export const AvatarExample: React.FC = () => (
@@ -63,6 +63,41 @@ export const AvatarExample: React.FC = () => (
 ```
 
 
+### Stencil
+
+```tsx
+import { Component, h } from '@stencil/core';
+
+@Component({
+  tag: 'avatar-example',
+  styleUrl: 'avatar-example.css'
+})
+export class AvatarExample {
+  render() {
+    return [
+      <ion-avatar>
+        <img src="https://gravatar.com/avatar/dba6bae8c566f9d4041fb9cd9ada7741?d=identicon&f=y"/>
+      </ion-avatar>,
+
+      <ion-chip>
+        <ion-avatar>
+          <img src="https://gravatar.com/avatar/dba6bae8c566f9d4041fb9cd9ada7741?d=identicon&f=y"/>
+        </ion-avatar>
+        <ion-label>Chip Avatar</ion-label>
+      </ion-chip>,
+
+      <ion-item>
+        <ion-avatar slot="start">
+          <img src="https://gravatar.com/avatar/dba6bae8c566f9d4041fb9cd9ada7741?d=identicon&f=y"/>
+        </ion-avatar>
+        <ion-label>Item Avatar</ion-label>
+      </ion-item>
+    ];
+  }
+}
+```
+
+
 ### Vue
 
 ```html
diff --git a/core/src/components/avatar/usage/react.md b/core/src/components/avatar/usage/react.md
index de4ee1d1ea..db76f35b99 100644
--- a/core/src/components/avatar/usage/react.md
+++ b/core/src/components/avatar/usage/react.md
@@ -1,5 +1,5 @@
 ```tsx
-import React from 'react'
+import React from 'react';
 import { IonAvatar, IonChip, IonItem, IonLabel, IonContent } from '@ionic/react';
 
 export const AvatarExample: React.FC = () => (
diff --git a/core/src/components/avatar/usage/stencil.md b/core/src/components/avatar/usage/stencil.md
new file mode 100644
index 0000000000..137e6c00db
--- /dev/null
+++ b/core/src/components/avatar/usage/stencil.md
@@ -0,0 +1,31 @@
+```tsx
+import { Component, h } from '@stencil/core';
+
+@Component({
+  tag: 'avatar-example',
+  styleUrl: 'avatar-example.css'
+})
+export class AvatarExample {
+  render() {
+    return [
+      <ion-avatar>
+        <img src="https://gravatar.com/avatar/dba6bae8c566f9d4041fb9cd9ada7741?d=identicon&f=y"/>
+      </ion-avatar>,
+
+      <ion-chip>
+        <ion-avatar>
+          <img src="https://gravatar.com/avatar/dba6bae8c566f9d4041fb9cd9ada7741?d=identicon&f=y"/>
+        </ion-avatar>
+        <ion-label>Chip Avatar</ion-label>
+      </ion-chip>,
+
+      <ion-item>
+        <ion-avatar slot="start">
+          <img src="https://gravatar.com/avatar/dba6bae8c566f9d4041fb9cd9ada7741?d=identicon&f=y"/>
+        </ion-avatar>
+        <ion-label>Item Avatar</ion-label>
+      </ion-item>
+    ];
+  }
+}
+```
\ No newline at end of file
diff --git a/core/src/components/back-button/readme.md b/core/src/components/back-button/readme.md
index 5395f63507..173c554321 100644
--- a/core/src/components/back-button/readme.md
+++ b/core/src/components/back-button/readme.md
@@ -173,6 +173,75 @@ export const BackButtonExample: React.FC = () => (
 ```
 
 
+### Stencil
+
+```tsx
+import { Component, h } from '@stencil/core';
+
+@Component({
+  tag: 'back-button-example',
+  styleUrl: 'back-button-example.css'
+})
+export class BackButtonExample {
+  render() {
+    const buttonText = "Custom";
+    const buttonIcon = "add";
+
+    return [
+      // Default back button
+      <ion-header>
+        <ion-toolbar>
+          <ion-buttons slot="start">
+            <ion-back-button></ion-back-button>
+          </ion-buttons>
+        </ion-toolbar>
+      </ion-header>,
+
+      // Back button with a default href
+      <ion-header>
+        <ion-toolbar>
+          <ion-buttons slot="start">
+            <ion-back-button defaultHref="home"></ion-back-button>
+          </ion-buttons>
+        </ion-toolbar>
+      </ion-header>,
+
+      // Back button with custom text and icon
+      <ion-header>
+        <ion-toolbar>
+          <ion-buttons slot="start">
+            <ion-back-button
+              text={buttonText}
+              icon={buttonIcon}>
+            </ion-back-button>
+          </ion-buttons>
+        </ion-toolbar>
+      </ion-header>,
+
+      // Back button with no text and custom icon
+      <ion-header>
+        <ion-toolbar>
+          <ion-buttons slot="start">
+            <ion-back-button text="" icon="add"></ion-back-button>
+          </ion-buttons>
+        </ion-toolbar>
+      </ion-header>,
+
+      // Danger back button next to a menu button
+      <ion-header>
+        <ion-toolbar>
+          <ion-buttons slot="start">
+            <ion-menu-button></ion-menu-button>
+            <ion-back-button color="danger"></ion-back-button>
+          </ion-buttons>
+        </ion-toolbar>
+      </ion-header>
+    ];
+  }
+}
+```
+
+
 ### Vue
 
 ```html
diff --git a/core/src/components/back-button/usage/stencil.md b/core/src/components/back-button/usage/stencil.md
new file mode 100644
index 0000000000..7948c2d7b5
--- /dev/null
+++ b/core/src/components/back-button/usage/stencil.md
@@ -0,0 +1,65 @@
+```tsx
+import { Component, h } from '@stencil/core';
+
+@Component({
+  tag: 'back-button-example',
+  styleUrl: 'back-button-example.css'
+})
+export class BackButtonExample {
+  render() {
+    const buttonText = "Custom";
+    const buttonIcon = "add";
+
+    return [
+      // Default back button
+      <ion-header>
+        <ion-toolbar>
+          <ion-buttons slot="start">
+            <ion-back-button></ion-back-button>
+          </ion-buttons>
+        </ion-toolbar>
+      </ion-header>,
+
+      // Back button with a default href
+      <ion-header>
+        <ion-toolbar>
+          <ion-buttons slot="start">
+            <ion-back-button defaultHref="home"></ion-back-button>
+          </ion-buttons>
+        </ion-toolbar>
+      </ion-header>,
+
+      // Back button with custom text and icon
+      <ion-header>
+        <ion-toolbar>
+          <ion-buttons slot="start">
+            <ion-back-button
+              text={buttonText}
+              icon={buttonIcon}>
+            </ion-back-button>
+          </ion-buttons>
+        </ion-toolbar>
+      </ion-header>,
+
+      // Back button with no text and custom icon
+      <ion-header>
+        <ion-toolbar>
+          <ion-buttons slot="start">
+            <ion-back-button text="" icon="add"></ion-back-button>
+          </ion-buttons>
+        </ion-toolbar>
+      </ion-header>,
+
+      // Danger back button next to a menu button
+      <ion-header>
+        <ion-toolbar>
+          <ion-buttons slot="start">
+            <ion-menu-button></ion-menu-button>
+            <ion-back-button color="danger"></ion-back-button>
+          </ion-buttons>
+        </ion-toolbar>
+      </ion-header>
+    ];
+  }
+}
+```
\ No newline at end of file
diff --git a/core/src/components/backdrop/readme.md b/core/src/components/backdrop/readme.md
index 8c671e13ff..148119157e 100644
--- a/core/src/components/backdrop/readme.md
+++ b/core/src/components/backdrop/readme.md
@@ -40,7 +40,7 @@ import { Component } from '@angular/core';
   styleUrls: ['./backdrop-example.css'],
 })
 export class BackdropExample {
-  backdropDismiss = false;
+  enableBackdropDismiss = false;
   showBackdrop = false;
   shouldPropagate = false;
 }
@@ -100,6 +100,46 @@ export const BackdropExample: React.FC = () => (
 ```
 
 
+### Stencil
+
+```tsx
+import { Component, h } from '@stencil/core';
+
+@Component({
+  tag: 'backdrop-example',
+  styleUrl: 'backdrop-example.css'
+})
+export class BackdropExample {
+  render() {
+    const enableBackdropDismiss = false;
+    const showBackdrop = false;
+    const shouldPropagate = false;
+
+    return [
+      // Default backdrop
+      <ion-backdrop></ion-backdrop>,
+
+      // Backdrop that is not tappable
+      <ion-backdrop tappable={false}></ion-backdrop>,
+
+      // Backdrop that is not visible
+      <ion-backdrop visible={false}></ion-backdrop>,
+
+      // Backdrop with propagation
+      <ion-backdrop stopPropagation={false}></ion-backdrop>,
+
+      // Backdrop that sets dynamic properties
+      <ion-backdrop
+        tappable={enableBackdropDismiss}
+        visible={showBackdrop}
+        stopPropagation={shouldPropagate}>
+      </ion-backdrop>
+    ];
+  }
+}
+```
+
+
 ### Vue
 
 ```html
@@ -129,7 +169,7 @@ export const BackdropExample: React.FC = () => (
 
   @Component()
   export default class Example extends Vue {
-    backdropDismiss = false;
+    enableBackdropDismiss = false;
     showBackdrop = false;
     shouldPropagate = false;
   }
diff --git a/core/src/components/backdrop/usage/angular.md b/core/src/components/backdrop/usage/angular.md
index b2e9a35825..8e454fe310 100644
--- a/core/src/components/backdrop/usage/angular.md
+++ b/core/src/components/backdrop/usage/angular.md
@@ -28,7 +28,7 @@ import { Component } from '@angular/core';
   styleUrls: ['./backdrop-example.css'],
 })
 export class BackdropExample {
-  backdropDismiss = false;
+  enableBackdropDismiss = false;
   showBackdrop = false;
   shouldPropagate = false;
 }
diff --git a/core/src/components/backdrop/usage/stencil.md b/core/src/components/backdrop/usage/stencil.md
new file mode 100644
index 0000000000..4c74219cbd
--- /dev/null
+++ b/core/src/components/backdrop/usage/stencil.md
@@ -0,0 +1,36 @@
+```tsx
+import { Component, h } from '@stencil/core';
+
+@Component({
+  tag: 'backdrop-example',
+  styleUrl: 'backdrop-example.css'
+})
+export class BackdropExample {
+  render() {
+    const enableBackdropDismiss = false;
+    const showBackdrop = false;
+    const shouldPropagate = false;
+
+    return [
+      // Default backdrop
+      <ion-backdrop></ion-backdrop>,
+
+      // Backdrop that is not tappable
+      <ion-backdrop tappable={false}></ion-backdrop>,
+
+      // Backdrop that is not visible
+      <ion-backdrop visible={false}></ion-backdrop>,
+
+      // Backdrop with propagation
+      <ion-backdrop stopPropagation={false}></ion-backdrop>,
+
+      // Backdrop that sets dynamic properties
+      <ion-backdrop
+        tappable={enableBackdropDismiss}
+        visible={showBackdrop}
+        stopPropagation={shouldPropagate}>
+      </ion-backdrop>
+    ];
+  }
+}
+```
\ No newline at end of file
diff --git a/core/src/components/backdrop/usage/vue.md b/core/src/components/backdrop/usage/vue.md
index c912d31816..6c2488525f 100644
--- a/core/src/components/backdrop/usage/vue.md
+++ b/core/src/components/backdrop/usage/vue.md
@@ -25,7 +25,7 @@
 
   @Component()
   export default class Example extends Vue {
-    backdropDismiss = false;
+    enableBackdropDismiss = false;
     showBackdrop = false;
     shouldPropagate = false;
   }
diff --git a/core/src/components/badge/readme.md b/core/src/components/badge/readme.md
index 3b96582196..e237412343 100644
--- a/core/src/components/badge/readme.md
+++ b/core/src/components/badge/readme.md
@@ -67,6 +67,44 @@ export const BadgeExample: React.FC = () => (
 ```
 
 
+### Stencil
+
+```tsx
+import { Component, h } from '@stencil/core';
+
+@Component({
+  tag: 'badge-example',
+  styleUrl: 'badge-example.css'
+})
+export class BadgeExample {
+  render() {
+    return [
+      // Default
+      <ion-badge>99</ion-badge>,
+
+      // Colors
+      <ion-badge color="primary">11</ion-badge>,
+      <ion-badge color="secondary">22</ion-badge>,
+      <ion-badge color="tertiary">33</ion-badge>,
+      <ion-badge color="success">44</ion-badge>,
+      <ion-badge color="warning">55</ion-badge>,
+      <ion-badge color="danger">66</ion-badge>,
+      <ion-badge color="light">77</ion-badge>,
+      <ion-badge color="medium">88</ion-badge>,
+      <ion-badge color="dark">99</ion-badge>,
+
+      // Item with badge on left and right
+      <ion-item>
+        <ion-badge slot="start">11</ion-badge>
+        <ion-label>My Item</ion-label>
+        <ion-badge slot="end">22</ion-badge>
+      </ion-item>
+    ];
+  }
+}
+```
+
+
 ### Vue
 
 ```html
diff --git a/core/src/components/badge/usage/stencil.md b/core/src/components/badge/usage/stencil.md
new file mode 100644
index 0000000000..862456d3b4
--- /dev/null
+++ b/core/src/components/badge/usage/stencil.md
@@ -0,0 +1,34 @@
+```tsx
+import { Component, h } from '@stencil/core';
+
+@Component({
+  tag: 'badge-example',
+  styleUrl: 'badge-example.css'
+})
+export class BadgeExample {
+  render() {
+    return [
+      // Default
+      <ion-badge>99</ion-badge>,
+
+      // Colors
+      <ion-badge color="primary">11</ion-badge>,
+      <ion-badge color="secondary">22</ion-badge>,
+      <ion-badge color="tertiary">33</ion-badge>,
+      <ion-badge color="success">44</ion-badge>,
+      <ion-badge color="warning">55</ion-badge>,
+      <ion-badge color="danger">66</ion-badge>,
+      <ion-badge color="light">77</ion-badge>,
+      <ion-badge color="medium">88</ion-badge>,
+      <ion-badge color="dark">99</ion-badge>,
+
+      // Item with badge on left and right
+      <ion-item>
+        <ion-badge slot="start">11</ion-badge>
+        <ion-label>My Item</ion-label>
+        <ion-badge slot="end">22</ion-badge>
+      </ion-item>
+    ];
+  }
+}
+```
\ No newline at end of file
diff --git a/core/src/components/button/readme.md b/core/src/components/button/readme.md
index 246b7bbacb..b8fd10007c 100644
--- a/core/src/components/button/readme.md
+++ b/core/src/components/button/readme.md
@@ -155,6 +155,72 @@ export const ButtonExample: React.FC = () => (
 ```
 
 
+### Stencil
+
+```tsx
+import { Component, h } from '@stencil/core';
+
+@Component({
+  tag: 'button-example',
+  styleUrl: 'button-example.css'
+})
+export class ButtonExample {
+  render() {
+    return [
+      // Default
+      <ion-button>Default</ion-button>,
+
+      // Anchor
+      <ion-button href="#">Anchor</ion-button>,
+
+      // Colors
+      <ion-button color="primary">Primary</ion-button>,
+      <ion-button color="secondary">Secondary</ion-button>,
+      <ion-button color="tertiary">Tertiary</ion-button>,
+      <ion-button color="success">Success</ion-button>,
+      <ion-button color="warning">Warning</ion-button>,
+      <ion-button color="danger">Danger</ion-button>,
+      <ion-button color="light">Light</ion-button>,
+      <ion-button color="medium">Medium</ion-button>,
+      <ion-button color="dark">Dark</ion-button>,
+
+      // Expand
+      <ion-button expand="full">Full Button</ion-button>,
+      <ion-button expand="block">Block Button</ion-button>,
+
+      // Round
+      <ion-button shape="round">Round Button</ion-button>,
+
+      // Fill
+      <ion-button expand="full" fill="outline">Outline + Full</ion-button>,
+      <ion-button expand="block" fill="outline">Outline + Block</ion-button>,
+      <ion-button shape="round" fill="outline">Outline + Round</ion-button>,
+
+      // Icons
+      <ion-button>
+        <ion-icon slot="start" name="star"></ion-icon>
+        Left Icon
+      </ion-button>,
+
+      <ion-button>
+        Right Icon
+        <ion-icon slot="end" name="star"></ion-icon>
+      </ion-button>,
+
+      <ion-button>
+        <ion-icon slot="icon-only" name="star"></ion-icon>
+      </ion-button>,
+
+      // Sizes
+      <ion-button size="large">Large</ion-button>,
+      <ion-button>Default</ion-button>,
+      <ion-button size="small">Small</ion-button>
+    ];
+  }
+}
+```
+
+
 ### Vue
 
 ```html
diff --git a/core/src/components/button/usage/stencil.md b/core/src/components/button/usage/stencil.md
new file mode 100644
index 0000000000..82ced76b17
--- /dev/null
+++ b/core/src/components/button/usage/stencil.md
@@ -0,0 +1,62 @@
+```tsx
+import { Component, h } from '@stencil/core';
+
+@Component({
+  tag: 'button-example',
+  styleUrl: 'button-example.css'
+})
+export class ButtonExample {
+  render() {
+    return [
+      // Default
+      <ion-button>Default</ion-button>,
+
+      // Anchor
+      <ion-button href="#">Anchor</ion-button>,
+
+      // Colors
+      <ion-button color="primary">Primary</ion-button>,
+      <ion-button color="secondary">Secondary</ion-button>,
+      <ion-button color="tertiary">Tertiary</ion-button>,
+      <ion-button color="success">Success</ion-button>,
+      <ion-button color="warning">Warning</ion-button>,
+      <ion-button color="danger">Danger</ion-button>,
+      <ion-button color="light">Light</ion-button>,
+      <ion-button color="medium">Medium</ion-button>,
+      <ion-button color="dark">Dark</ion-button>,
+
+      // Expand
+      <ion-button expand="full">Full Button</ion-button>,
+      <ion-button expand="block">Block Button</ion-button>,
+
+      // Round
+      <ion-button shape="round">Round Button</ion-button>,
+
+      // Fill
+      <ion-button expand="full" fill="outline">Outline + Full</ion-button>,
+      <ion-button expand="block" fill="outline">Outline + Block</ion-button>,
+      <ion-button shape="round" fill="outline">Outline + Round</ion-button>,
+
+      // Icons
+      <ion-button>
+        <ion-icon slot="start" name="star"></ion-icon>
+        Left Icon
+      </ion-button>,
+
+      <ion-button>
+        Right Icon
+        <ion-icon slot="end" name="star"></ion-icon>
+      </ion-button>,
+
+      <ion-button>
+        <ion-icon slot="icon-only" name="star"></ion-icon>
+      </ion-button>,
+
+      // Sizes
+      <ion-button size="large">Large</ion-button>,
+      <ion-button>Default</ion-button>,
+      <ion-button size="small">Small</ion-button>
+    ];
+  }
+}
+```
\ No newline at end of file
diff --git a/core/src/components/buttons/readme.md b/core/src/components/buttons/readme.md
index fb186fbae7..61151e9d2f 100644
--- a/core/src/components/buttons/readme.md
+++ b/core/src/components/buttons/readme.md
@@ -125,16 +125,8 @@ The `<ion-buttons>` element can be positioned inside of the toolbar using a name
 
 ```tsx
 import React from 'react';
-import {
-  IonButtons,
-  IonToolbar,
-  IonBackButton,
-  IonTitle,
-  IonButton,
-  IonIcon,
-  IonMenuButton,
-  IonContent
-} from '@ionic/react';
+import { IonButtons, IonToolbar, IonBackButton, IonTitle, IonButton, IonIcon, IonMenuButton, IonContent } from '@ionic/react';
+import { personCircle, search, star, ellipsisHorizontal, ellipsisVertical } from 'ionicons/icons';
 
 export const ButtonsExample: React.FC = () => (
   <IonContent>
@@ -148,16 +140,16 @@ export const ButtonsExample: React.FC = () => (
     <IonToolbar>
       <IonButtons slot="secondary">
         <IonButton>
-          <IonIcon slot="icon-only" name="person-circle" />
+          <IonIcon slot="icon-only" icon={personCircle} />
         </IonButton>
         <IonButton>
-          <IonIcon slot="icon-only" name="search" />
+          <IonIcon slot="icon-only" icon={search} />
         </IonButton>
       </IonButtons>
       <IonTitle>Default Buttons</IonTitle>
       <IonButtons slot="primary">
         <IonButton color="secondary">
-          <IonIcon slot="icon-only" ios="ellipsis-horizontal" md="ellipsis-vertical" />
+          <IonIcon slot="icon-only" ios={ellipsisHorizontal} md={ellipsisVertical} />
         </IonButton>
       </IonButtons>
     </IonToolbar>
@@ -165,7 +157,7 @@ export const ButtonsExample: React.FC = () => (
     <IonToolbar>
       <IonButtons slot="primary">
         <IonButton onClick={() => {}}>
-          <IonIcon slot="icon-only" name="star" />
+          <IonIcon slot="icon-only" icon={star} />
         </IonButton>
       </IonButtons>
       <IonTitle>Right side menu toggle</IonTitle>
@@ -177,7 +169,7 @@ export const ButtonsExample: React.FC = () => (
     <IonToolbar>
       <IonButtons collapse="true">
         <IonButton>
-          <IonIcon slot="icon-only" name="star" />
+          <IonIcon slot="icon-only" icon={star} />
         </IonButton>
       </IonButtons>
       <IonTitle>Collapsible Buttons</IonTitle>
@@ -187,6 +179,73 @@ export const ButtonsExample: React.FC = () => (
 ```
 
 
+### Stencil
+
+```tsx
+import { Component, h } from '@stencil/core';
+
+@Component({
+  tag: 'buttons-example',
+  styleUrl: 'buttons-example.css'
+})
+export class ButtonsExample {
+
+  clickedStar() {
+    console.log("Clicked star button");
+  }
+
+  render() {
+    return [
+      <ion-toolbar>
+        <ion-buttons slot="start">
+          <ion-back-button></ion-back-button>
+        </ion-buttons>
+        <ion-title>Back Button</ion-title>
+      </ion-toolbar>,
+
+      <ion-toolbar>
+        <ion-buttons slot="secondary">
+          <ion-button>
+            <ion-icon slot="icon-only" name="person-circle"></ion-icon>
+          </ion-button>
+          <ion-button>
+            <ion-icon slot="icon-only" name="search"></ion-icon>
+          </ion-button>
+        </ion-buttons>
+        <ion-title>Default Buttons</ion-title>
+        <ion-buttons slot="primary">
+          <ion-button color="secondary">
+            <ion-icon slot="icon-only" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
+          </ion-button>
+        </ion-buttons>
+      </ion-toolbar>,
+
+      <ion-toolbar>
+        <ion-buttons slot="primary">
+          <ion-button onClick={() => this.clickedStar()}>
+            <ion-icon slot="icon-only" name="star"></ion-icon>
+          </ion-button>
+        </ion-buttons>
+        <ion-title>Right side menu toggle</ion-title>
+        <ion-buttons slot="end">
+          <ion-menu-button autoHide={false}></ion-menu-button>
+        </ion-buttons>
+      </ion-toolbar>,
+
+      <ion-toolbar>
+        <ion-buttons collapse={true}>
+          <ion-button>
+            <ion-icon slot="icon-only" name="star"></ion-icon>
+          </ion-button>
+        </ion-buttons>
+        <ion-title>Collapsible Buttons</ion-title>
+      </ion-toolbar>
+    ];
+  }
+}
+```
+
+
 ### Vue
 
 ```html
diff --git a/core/src/components/buttons/usage/react.md b/core/src/components/buttons/usage/react.md
index dbb51964ce..12e2c1b416 100644
--- a/core/src/components/buttons/usage/react.md
+++ b/core/src/components/buttons/usage/react.md
@@ -1,15 +1,7 @@
 ```tsx
 import React from 'react';
-import {
-  IonButtons,
-  IonToolbar,
-  IonBackButton,
-  IonTitle,
-  IonButton,
-  IonIcon,
-  IonMenuButton,
-  IonContent
-} from '@ionic/react';
+import { IonButtons, IonToolbar, IonBackButton, IonTitle, IonButton, IonIcon, IonMenuButton, IonContent } from '@ionic/react';
+import { personCircle, search, star, ellipsisHorizontal, ellipsisVertical } from 'ionicons/icons';
 
 export const ButtonsExample: React.FC = () => (
   <IonContent>
@@ -23,16 +15,16 @@ export const ButtonsExample: React.FC = () => (
     <IonToolbar>
       <IonButtons slot="secondary">
         <IonButton>
-          <IonIcon slot="icon-only" name="person-circle" />
+          <IonIcon slot="icon-only" icon={personCircle} />
         </IonButton>
         <IonButton>
-          <IonIcon slot="icon-only" name="search" />
+          <IonIcon slot="icon-only" icon={search} />
         </IonButton>
       </IonButtons>
       <IonTitle>Default Buttons</IonTitle>
       <IonButtons slot="primary">
         <IonButton color="secondary">
-          <IonIcon slot="icon-only" ios="ellipsis-horizontal" md="ellipsis-vertical" />
+          <IonIcon slot="icon-only" ios={ellipsisHorizontal} md={ellipsisVertical} />
         </IonButton>
       </IonButtons>
     </IonToolbar>
@@ -40,7 +32,7 @@ export const ButtonsExample: React.FC = () => (
     <IonToolbar>
       <IonButtons slot="primary">
         <IonButton onClick={() => {}}>
-          <IonIcon slot="icon-only" name="star" />
+          <IonIcon slot="icon-only" icon={star} />
         </IonButton>
       </IonButtons>
       <IonTitle>Right side menu toggle</IonTitle>
@@ -52,7 +44,7 @@ export const ButtonsExample: React.FC = () => (
     <IonToolbar>
       <IonButtons collapse="true">
         <IonButton>
-          <IonIcon slot="icon-only" name="star" />
+          <IonIcon slot="icon-only" icon={star} />
         </IonButton>
       </IonButtons>
       <IonTitle>Collapsible Buttons</IonTitle>
diff --git a/core/src/components/buttons/usage/stencil.md b/core/src/components/buttons/usage/stencil.md
new file mode 100644
index 0000000000..e684b0c7c7
--- /dev/null
+++ b/core/src/components/buttons/usage/stencil.md
@@ -0,0 +1,63 @@
+```tsx
+import { Component, h } from '@stencil/core';
+
+@Component({
+  tag: 'buttons-example',
+  styleUrl: 'buttons-example.css'
+})
+export class ButtonsExample {
+
+  clickedStar() {
+    console.log("Clicked star button");
+  }
+
+  render() {
+    return [
+      <ion-toolbar>
+        <ion-buttons slot="start">
+          <ion-back-button></ion-back-button>
+        </ion-buttons>
+        <ion-title>Back Button</ion-title>
+      </ion-toolbar>,
+
+      <ion-toolbar>
+        <ion-buttons slot="secondary">
+          <ion-button>
+            <ion-icon slot="icon-only" name="person-circle"></ion-icon>
+          </ion-button>
+          <ion-button>
+            <ion-icon slot="icon-only" name="search"></ion-icon>
+          </ion-button>
+        </ion-buttons>
+        <ion-title>Default Buttons</ion-title>
+        <ion-buttons slot="primary">
+          <ion-button color="secondary">
+            <ion-icon slot="icon-only" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
+          </ion-button>
+        </ion-buttons>
+      </ion-toolbar>,
+
+      <ion-toolbar>
+        <ion-buttons slot="primary">
+          <ion-button onClick={() => this.clickedStar()}>
+            <ion-icon slot="icon-only" name="star"></ion-icon>
+          </ion-button>
+        </ion-buttons>
+        <ion-title>Right side menu toggle</ion-title>
+        <ion-buttons slot="end">
+          <ion-menu-button autoHide={false}></ion-menu-button>
+        </ion-buttons>
+      </ion-toolbar>,
+
+      <ion-toolbar>
+        <ion-buttons collapse={true}>
+          <ion-button>
+            <ion-icon slot="icon-only" name="star"></ion-icon>
+          </ion-button>
+        </ion-buttons>
+        <ion-title>Collapsible Buttons</ion-title>
+      </ion-toolbar>
+    ];
+  }
+}
+```
\ No newline at end of file
diff --git a/core/src/components/card/readme.md b/core/src/components/card/readme.md
index 8714f05ab0..66ef391017 100644
--- a/core/src/components/card/readme.md
+++ b/core/src/components/card/readme.md
@@ -133,6 +133,70 @@ export const CardExamples: React.FC = () => {
 ```
 
 
+### Stencil
+
+```tsx
+import { Component, h } from '@stencil/core';
+
+@Component({
+  tag: 'card-example',
+  styleUrl: 'card-example.css'
+})
+export class CardExample {
+  render() {
+    return [
+      <ion-card>
+        <ion-card-header>
+          <ion-card-subtitle>Card Subtitle</ion-card-subtitle>
+          <ion-card-title>Card Title</ion-card-title>
+        </ion-card-header>
+
+        <ion-card-content>
+          Keep close to Nature's heart... and break clear away, once in awhile,
+          and climb a mountain or spend a week in the woods. Wash your spirit clean.
+        </ion-card-content>
+      </ion-card>,
+
+      <ion-card>
+        <ion-item>
+          <ion-icon name="pin" slot="start"></ion-icon>
+          <ion-label>ion-item in a card, icon left, button right</ion-label>
+          <ion-button fill="outline" slot="end">View</ion-button>
+        </ion-item>
+
+        <ion-card-content>
+          This is content, without any paragraph or header tags,
+          within an ion-card-content element.
+        </ion-card-content>
+      </ion-card>,
+
+      <ion-card>
+        <ion-item href="#" class="ion-activated">
+          <ion-icon name="wifi" slot="start"></ion-icon>
+          <ion-label>Card Link Item 1 activated</ion-label>
+        </ion-item>
+
+        <ion-item href="#">
+          <ion-icon name="wine" slot="start"></ion-icon>
+          <ion-label>Card Link Item 2</ion-label>
+        </ion-item>
+
+        <ion-item class="ion-activated">
+          <ion-icon name="warning" slot="start"></ion-icon>
+          <ion-label>Card Button Item 1 activated</ion-label>
+        </ion-item>
+
+        <ion-item>
+          <ion-icon name="walk" slot="start"></ion-icon>
+          <ion-label>Card Button Item 2</ion-label>
+        </ion-item>
+      </ion-card>
+    ];
+  }
+}
+```
+
+
 ### Vue
 
 ```html
diff --git a/core/src/components/card/usage/stencil.md b/core/src/components/card/usage/stencil.md
new file mode 100644
index 0000000000..bb2b44e398
--- /dev/null
+++ b/core/src/components/card/usage/stencil.md
@@ -0,0 +1,60 @@
+```tsx
+import { Component, h } from '@stencil/core';
+
+@Component({
+  tag: 'card-example',
+  styleUrl: 'card-example.css'
+})
+export class CardExample {
+  render() {
+    return [
+      <ion-card>
+        <ion-card-header>
+          <ion-card-subtitle>Card Subtitle</ion-card-subtitle>
+          <ion-card-title>Card Title</ion-card-title>
+        </ion-card-header>
+
+        <ion-card-content>
+          Keep close to Nature's heart... and break clear away, once in awhile,
+          and climb a mountain or spend a week in the woods. Wash your spirit clean.
+        </ion-card-content>
+      </ion-card>,
+
+      <ion-card>
+        <ion-item>
+          <ion-icon name="pin" slot="start"></ion-icon>
+          <ion-label>ion-item in a card, icon left, button right</ion-label>
+          <ion-button fill="outline" slot="end">View</ion-button>
+        </ion-item>
+
+        <ion-card-content>
+          This is content, without any paragraph or header tags,
+          within an ion-card-content element.
+        </ion-card-content>
+      </ion-card>,
+
+      <ion-card>
+        <ion-item href="#" class="ion-activated">
+          <ion-icon name="wifi" slot="start"></ion-icon>
+          <ion-label>Card Link Item 1 activated</ion-label>
+        </ion-item>
+
+        <ion-item href="#">
+          <ion-icon name="wine" slot="start"></ion-icon>
+          <ion-label>Card Link Item 2</ion-label>
+        </ion-item>
+
+        <ion-item class="ion-activated">
+          <ion-icon name="warning" slot="start"></ion-icon>
+          <ion-label>Card Button Item 1 activated</ion-label>
+        </ion-item>
+
+        <ion-item>
+          <ion-icon name="walk" slot="start"></ion-icon>
+          <ion-label>Card Button Item 2</ion-label>
+        </ion-item>
+      </ion-card>
+    ];
+  }
+}
+```
\ No newline at end of file
diff --git a/core/src/components/checkbox/readme.md b/core/src/components/checkbox/readme.md
index 5e71d0324b..0f77bde855 100644
--- a/core/src/components/checkbox/readme.md
+++ b/core/src/components/checkbox/readme.md
@@ -153,6 +153,55 @@ export const CheckboxExamples: React.FC = () => {
 ```
 
 
+### Stencil
+
+```tsx
+import { Component, h } from '@stencil/core';
+
+@Component({
+  tag: 'checkbox-example',
+  styleUrl: 'checkbox-example.css'
+})
+export class CheckboxExample {
+  private form = [
+    { val: 'Pepperoni', isChecked: true },
+    { val: 'Sausage', isChecked: false },
+    { val: 'Mushroom', isChecked: false }
+  ];
+
+  render() {
+    return [
+      // Default Checkbox
+      <ion-checkbox></ion-checkbox>,
+
+      // Disabled Checkbox
+      <ion-checkbox disabled={true}></ion-checkbox>,
+
+      // Checked Checkbox
+      <ion-checkbox checked={true}></ion-checkbox>,
+
+      // Checkbox Colors
+      <ion-checkbox color="primary"></ion-checkbox>,
+      <ion-checkbox color="secondary"></ion-checkbox>,
+      <ion-checkbox color="danger"></ion-checkbox>,
+      <ion-checkbox color="light"></ion-checkbox>,
+      <ion-checkbox color="dark"></ion-checkbox>,
+
+      // Checkboxes in a List
+      <ion-list>
+        {this.form.map(entry =>
+          <ion-item>
+            <ion-label>{entry.val}</ion-label>
+            <ion-checkbox slot="end" checked={entry.isChecked}></ion-checkbox>
+          </ion-item>
+        )}
+      </ion-list>
+    ];
+  }
+}
+```
+
+
 ### Vue
 
 ```html
diff --git a/core/src/components/checkbox/usage/stencil.md b/core/src/components/checkbox/usage/stencil.md
new file mode 100644
index 0000000000..42599e313a
--- /dev/null
+++ b/core/src/components/checkbox/usage/stencil.md
@@ -0,0 +1,45 @@
+```tsx
+import { Component, h } from '@stencil/core';
+
+@Component({
+  tag: 'checkbox-example',
+  styleUrl: 'checkbox-example.css'
+})
+export class CheckboxExample {
+  private form = [
+    { val: 'Pepperoni', isChecked: true },
+    { val: 'Sausage', isChecked: false },
+    { val: 'Mushroom', isChecked: false }
+  ];
+
+  render() {
+    return [
+      // Default Checkbox
+      <ion-checkbox></ion-checkbox>,
+
+      // Disabled Checkbox
+      <ion-checkbox disabled={true}></ion-checkbox>,
+
+      // Checked Checkbox
+      <ion-checkbox checked={true}></ion-checkbox>,
+
+      // Checkbox Colors
+      <ion-checkbox color="primary"></ion-checkbox>,
+      <ion-checkbox color="secondary"></ion-checkbox>,
+      <ion-checkbox color="danger"></ion-checkbox>,
+      <ion-checkbox color="light"></ion-checkbox>,
+      <ion-checkbox color="dark"></ion-checkbox>,
+
+      // Checkboxes in a List
+      <ion-list>
+        {this.form.map(entry =>
+          <ion-item>
+            <ion-label>{entry.val}</ion-label>
+            <ion-checkbox slot="end" checked={entry.isChecked}></ion-checkbox>
+          </ion-item>
+        )}
+      </ion-list>
+    ];
+  }
+}
+```
diff --git a/core/src/components/chip/readme.md b/core/src/components/chip/readme.md
index 3414b275d2..dad437e1d1 100644
--- a/core/src/components/chip/readme.md
+++ b/core/src/components/chip/readme.md
@@ -117,6 +117,64 @@ export const ChipExamples: React.FC = () => {
 ```
 
 
+### Stencil
+
+```tsx
+import { Component, h } from '@stencil/core';
+
+@Component({
+  tag: 'chip-example',
+  styleUrl: 'chip-example.css'
+})
+export class ChipExample {
+  render() {
+    return [
+      <ion-chip>
+        <ion-label>Default</ion-label>
+      </ion-chip>,
+
+      <ion-chip>
+        <ion-label color="secondary">Secondary Label</ion-label>
+      </ion-chip>,
+
+      <ion-chip color="secondary">
+        <ion-label color="dark">Secondary w/ Dark label</ion-label>
+      </ion-chip>,
+
+      <ion-chip>
+        <ion-icon name="pin"></ion-icon>
+        <ion-label>Default</ion-label>
+      </ion-chip>,
+
+      <ion-chip>
+        <ion-icon name="heart" color="dark"></ion-icon>
+        <ion-label>Default</ion-label>
+      </ion-chip>,
+
+      <ion-chip>
+        <ion-label>Button Chip</ion-label>
+        <ion-icon name="close-circle"></ion-icon>
+      </ion-chip>,
+
+      <ion-chip>
+        <ion-icon name="pin" color="primary"></ion-icon>
+        <ion-label>Icon Chip</ion-label>
+        <ion-icon name="close"></ion-icon>
+      </ion-chip>,
+
+      <ion-chip>
+        <ion-avatar>
+          <img src="https://gravatar.com/avatar/dba6bae8c566f9d4041fb9cd9ada7741?d=identicon&f=y"/>
+        </ion-avatar>
+        <ion-label>Avatar Chip</ion-label>
+        <ion-icon name="close-circle"></ion-icon>
+      </ion-chip>
+    ];
+  }
+}
+```
+
+
 ### Vue
 
 ```html
diff --git a/core/src/components/chip/usage/stencil.md b/core/src/components/chip/usage/stencil.md
new file mode 100644
index 0000000000..79e9156813
--- /dev/null
+++ b/core/src/components/chip/usage/stencil.md
@@ -0,0 +1,54 @@
+```tsx
+import { Component, h } from '@stencil/core';
+
+@Component({
+  tag: 'chip-example',
+  styleUrl: 'chip-example.css'
+})
+export class ChipExample {
+  render() {
+    return [
+      <ion-chip>
+        <ion-label>Default</ion-label>
+      </ion-chip>,
+
+      <ion-chip>
+        <ion-label color="secondary">Secondary Label</ion-label>
+      </ion-chip>,
+
+      <ion-chip color="secondary">
+        <ion-label color="dark">Secondary w/ Dark label</ion-label>
+      </ion-chip>,
+
+      <ion-chip>
+        <ion-icon name="pin"></ion-icon>
+        <ion-label>Default</ion-label>
+      </ion-chip>,
+
+      <ion-chip>
+        <ion-icon name="heart" color="dark"></ion-icon>
+        <ion-label>Default</ion-label>
+      </ion-chip>,
+
+      <ion-chip>
+        <ion-label>Button Chip</ion-label>
+        <ion-icon name="close-circle"></ion-icon>
+      </ion-chip>,
+
+      <ion-chip>
+        <ion-icon name="pin" color="primary"></ion-icon>
+        <ion-label>Icon Chip</ion-label>
+        <ion-icon name="close"></ion-icon>
+      </ion-chip>,
+
+      <ion-chip>
+        <ion-avatar>
+          <img src="https://gravatar.com/avatar/dba6bae8c566f9d4041fb9cd9ada7741?d=identicon&f=y"/>
+        </ion-avatar>
+        <ion-label>Avatar Chip</ion-label>
+        <ion-icon name="close-circle"></ion-icon>
+      </ion-chip>
+    ];
+  }
+}
+```
\ No newline at end of file
diff --git a/core/src/components/content/readme.md b/core/src/components/content/readme.md
index 9e92f58efc..9b61d91cba 100644
--- a/core/src/components/content/readme.md
+++ b/core/src/components/content/readme.md
@@ -77,6 +77,47 @@ const ContentExample: React.FC = () => (
 ```
 
 
+### Stencil
+
+```tsx
+import { Component, h } from '@stencil/core';
+
+@Component({
+  tag: 'content-example',
+  styleUrl: 'content-example.css'
+})
+export class ContentExample {
+  logScrollStart() {
+    console.log('Scroll start');
+  }
+
+  logScrolling(ev) {
+    console.log('Scrolling', ev);
+  }
+
+  logScrollEnd() {
+    console.log('Scroll end');
+  }
+
+  render() {
+    return [
+      <ion-content
+        scrollEvents={true}
+        onIonScrollStart={() => this.logScrollStart()}
+        onIonScroll={(ev) => this.logScrolling(ev)}
+        onIonScrollEnd={() => this.logScrollEnd()}>
+          <h1>Main Content</h1>
+
+          <div slot="fixed">
+            <h1>Fixed Content</h1>
+          </div>
+      </ion-content>
+    ];
+  }
+}
+```
+
+
 ### Vue
 
 ```html
diff --git a/core/src/components/content/usage/stencil.md b/core/src/components/content/usage/stencil.md
new file mode 100644
index 0000000000..e39a358cbb
--- /dev/null
+++ b/core/src/components/content/usage/stencil.md
@@ -0,0 +1,37 @@
+```tsx
+import { Component, h } from '@stencil/core';
+
+@Component({
+  tag: 'content-example',
+  styleUrl: 'content-example.css'
+})
+export class ContentExample {
+  logScrollStart() {
+    console.log('Scroll start');
+  }
+
+  logScrolling(ev) {
+    console.log('Scrolling', ev);
+  }
+
+  logScrollEnd() {
+    console.log('Scroll end');
+  }
+
+  render() {
+    return [
+      <ion-content
+        scrollEvents={true}
+        onIonScrollStart={() => this.logScrollStart()}
+        onIonScroll={(ev) => this.logScrolling(ev)}
+        onIonScrollEnd={() => this.logScrollEnd()}>
+          <h1>Main Content</h1>
+
+          <div slot="fixed">
+            <h1>Fixed Content</h1>
+          </div>
+      </ion-content>
+    ];
+  }
+}
+```
diff --git a/core/src/components/datetime/readme.md b/core/src/components/datetime/readme.md
index 22a047dfb7..262d205829 100644
--- a/core/src/components/datetime/readme.md
+++ b/core/src/components/datetime/readme.md
@@ -555,6 +555,116 @@ export const DateTimeExamples: React.FC = () => {
 ```
 
 
+### Stencil
+
+```tsx
+import { Component, h } from '@stencil/core';
+
+@Component({
+  tag: 'datetime-example',
+  styleUrl: 'datetime-example.css'
+})
+export class DatetimeExample {
+  private customYearValues = [2020, 2016, 2008, 2004, 2000, 1996];
+  private customDayShortNames = ['s\u00f8n', 'man', 'tir', 'ons', 'tor', 'fre', 'l\u00f8r'];
+  private customPickerOptions = {
+    buttons: [{
+      text: 'Save',
+      handler: () => console.log('Clicked Save!')
+    }, {
+      text: 'Log',
+      handler: () => {
+        console.log('Clicked Log. Do not Dismiss.');
+        return false;
+      }
+    }]
+  }
+
+  render() {
+    return [
+      <ion-item>
+        <ion-label>MMMM</ion-label>
+        <ion-datetime displayFormat="MMMM" value="2012-12-15T13:47:20.789"></ion-datetime>
+      </ion-item>,
+
+      <ion-item>
+        <ion-label>MM DD YY</ion-label>
+        <ion-datetime displayFormat="MM DD YY" placeholder="Select Date"></ion-datetime>
+      </ion-item>,
+
+      <ion-item>
+        <ion-label>Disabled</ion-label>
+        <ion-datetime id="dynamicDisabled" displayFormat="MM DD YY" disabled value="1994-12-15"></ion-datetime>
+      </ion-item>,
+
+      <ion-item>
+        <ion-label>YYYY</ion-label>
+        <ion-datetime pickerOptions={this.customPickerOptions} placeholder="Custom Options" displayFormat="YYYY" min="1981" max="2002"></ion-datetime>
+      </ion-item>,
+
+      <ion-item>
+        <ion-label position="stacked">MMMM YY</ion-label>
+        <ion-datetime displayFormat="MMMM YY" min="1989-06-04" max="2004-08-23" value="1994-12-15T13:47:20.789"></ion-datetime>
+      </ion-item>,
+
+      <ion-item>
+        <ion-label position="floating">MM/DD/YYYY</ion-label>
+        <ion-datetime displayFormat="MM/DD/YYYY" min="1994-03-14" max="2012-12-09" value="2002-09-23T15:03:46.789"></ion-datetime>
+      </ion-item>,
+
+      <ion-item>
+        <ion-label position="floating">MM/DD/YYYY</ion-label>
+        <ion-datetime displayFormat="MM/DD/YYYY" min="1994-03-14" max="2012-12-09"></ion-datetime>
+      </ion-item>,
+
+      <ion-item>
+        <ion-label>DDD. MMM DD, YY (custom locale)</ion-label>
+        <ion-datetime value="1995-04-15" min="1990-02" max="2000"
+          dayShortNames={this.customDayShortNames}
+          displayFormat="DDD. MMM DD, YY"
+          monthShortNames="jan, feb, mar, apr, mai, jun, jul, aug, sep, okt, nov, des"></ion-datetime>
+      </ion-item>,
+
+      <ion-item>
+        <ion-label>D MMM YYYY H:mm</ion-label>
+        <ion-datetime displayFormat="D MMM YYYY H:mm" min="1997" max="2010" value="2005-06-17T11:06Z"></ion-datetime>
+      </ion-item>,
+
+      <ion-item>
+        <ion-label>DDDD MMM D, YYYY</ion-label>
+        <ion-datetime displayFormat="DDDD MMM D, YYYY" min="2005" max="2016" value="2008-09-02"></ion-datetime>
+      </ion-item>,
+
+      <ion-item>
+        <ion-label>HH:mm</ion-label>
+        <ion-datetime displayFormat="HH:mm"></ion-datetime>
+      </ion-item>,
+
+      <ion-item>
+        <ion-label>h:mm a</ion-label>
+        <ion-datetime displayFormat="h:mm a"></ion-datetime>
+      </ion-item>,
+
+      <ion-item>
+        <ion-label>hh:mm A (15 min steps)</ion-label>
+        <ion-datetime displayFormat="h:mm A" minuteValues="0,15,30,45"></ion-datetime>
+      </ion-item>,
+
+      <ion-item>
+        <ion-label>Leap years, summer months</ion-label>
+        <ion-datetime displayFormat="MM/YYYY" pickerFormat="MMMM YYYY" monthValues="6,7,8" yearValues={this.customYearValues}></ion-datetime>
+      </ion-item>,
+
+      <ion-item>
+        <ion-label>Specific days/months/years</ion-label>
+        <ion-datetime monthValues="6,7,8" yearValues="2014,2015" dayValues="01,02,03,04,05,06,08,09,10, 11, 12, 13, 14" displayFormat="DD/MMM/YYYY"></ion-datetime>
+      </ion-item>
+    ];
+  }
+}
+```
+
+
 ### Vue
 
 ```html
diff --git a/core/src/components/datetime/usage/stencil.md b/core/src/components/datetime/usage/stencil.md
new file mode 100644
index 0000000000..4be0359da5
--- /dev/null
+++ b/core/src/components/datetime/usage/stencil.md
@@ -0,0 +1,106 @@
+```tsx
+import { Component, h } from '@stencil/core';
+
+@Component({
+  tag: 'datetime-example',
+  styleUrl: 'datetime-example.css'
+})
+export class DatetimeExample {
+  private customYearValues = [2020, 2016, 2008, 2004, 2000, 1996];
+  private customDayShortNames = ['s\u00f8n', 'man', 'tir', 'ons', 'tor', 'fre', 'l\u00f8r'];
+  private customPickerOptions = {
+    buttons: [{
+      text: 'Save',
+      handler: () => console.log('Clicked Save!')
+    }, {
+      text: 'Log',
+      handler: () => {
+        console.log('Clicked Log. Do not Dismiss.');
+        return false;
+      }
+    }]
+  }
+
+  render() {
+    return [
+      <ion-item>
+        <ion-label>MMMM</ion-label>
+        <ion-datetime displayFormat="MMMM" value="2012-12-15T13:47:20.789"></ion-datetime>
+      </ion-item>,
+
+      <ion-item>
+        <ion-label>MM DD YY</ion-label>
+        <ion-datetime displayFormat="MM DD YY" placeholder="Select Date"></ion-datetime>
+      </ion-item>,
+
+      <ion-item>
+        <ion-label>Disabled</ion-label>
+        <ion-datetime id="dynamicDisabled" displayFormat="MM DD YY" disabled value="1994-12-15"></ion-datetime>
+      </ion-item>,
+
+      <ion-item>
+        <ion-label>YYYY</ion-label>
+        <ion-datetime pickerOptions={this.customPickerOptions} placeholder="Custom Options" displayFormat="YYYY" min="1981" max="2002"></ion-datetime>
+      </ion-item>,
+
+      <ion-item>
+        <ion-label position="stacked">MMMM YY</ion-label>
+        <ion-datetime displayFormat="MMMM YY" min="1989-06-04" max="2004-08-23" value="1994-12-15T13:47:20.789"></ion-datetime>
+      </ion-item>,
+
+      <ion-item>
+        <ion-label position="floating">MM/DD/YYYY</ion-label>
+        <ion-datetime displayFormat="MM/DD/YYYY" min="1994-03-14" max="2012-12-09" value="2002-09-23T15:03:46.789"></ion-datetime>
+      </ion-item>,
+
+      <ion-item>
+        <ion-label position="floating">MM/DD/YYYY</ion-label>
+        <ion-datetime displayFormat="MM/DD/YYYY" min="1994-03-14" max="2012-12-09"></ion-datetime>
+      </ion-item>,
+
+      <ion-item>
+        <ion-label>DDD. MMM DD, YY (custom locale)</ion-label>
+        <ion-datetime value="1995-04-15" min="1990-02" max="2000"
+          dayShortNames={this.customDayShortNames}
+          displayFormat="DDD. MMM DD, YY"
+          monthShortNames="jan, feb, mar, apr, mai, jun, jul, aug, sep, okt, nov, des"></ion-datetime>
+      </ion-item>,
+
+      <ion-item>
+        <ion-label>D MMM YYYY H:mm</ion-label>
+        <ion-datetime displayFormat="D MMM YYYY H:mm" min="1997" max="2010" value="2005-06-17T11:06Z"></ion-datetime>
+      </ion-item>,
+
+      <ion-item>
+        <ion-label>DDDD MMM D, YYYY</ion-label>
+        <ion-datetime displayFormat="DDDD MMM D, YYYY" min="2005" max="2016" value="2008-09-02"></ion-datetime>
+      </ion-item>,
+
+      <ion-item>
+        <ion-label>HH:mm</ion-label>
+        <ion-datetime displayFormat="HH:mm"></ion-datetime>
+      </ion-item>,
+
+      <ion-item>
+        <ion-label>h:mm a</ion-label>
+        <ion-datetime displayFormat="h:mm a"></ion-datetime>
+      </ion-item>,
+
+      <ion-item>
+        <ion-label>hh:mm A (15 min steps)</ion-label>
+        <ion-datetime displayFormat="h:mm A" minuteValues="0,15,30,45"></ion-datetime>
+      </ion-item>,
+
+      <ion-item>
+        <ion-label>Leap years, summer months</ion-label>
+        <ion-datetime displayFormat="MM/YYYY" pickerFormat="MMMM YYYY" monthValues="6,7,8" yearValues={this.customYearValues}></ion-datetime>
+      </ion-item>,
+
+      <ion-item>
+        <ion-label>Specific days/months/years</ion-label>
+        <ion-datetime monthValues="6,7,8" yearValues="2014,2015" dayValues="01,02,03,04,05,06,08,09,10, 11, 12, 13, 14" displayFormat="DD/MMM/YYYY"></ion-datetime>
+      </ion-item>
+    ];
+  }
+}
+```
diff --git a/core/src/components/fab-button/readme.md b/core/src/components/fab-button/readme.md
index 2d2e5acc7d..efd025fee3 100644
--- a/core/src/components/fab-button/readme.md
+++ b/core/src/components/fab-button/readme.md
@@ -15,7 +15,7 @@ If the FAB button is not wrapped with `<ion-fab>`, it will scroll with the conte
 <ion-content>
 
   <!-- Fixed Floating Action Button that does not scroll with the content -->
-  <ion-fab>
+  <ion-fab slot="fixed">
     <ion-fab-button>Button</ion-fab-button>
   </ion-fab>
 
@@ -45,7 +45,7 @@ import { IonContent, IonFab, IonFabButton } from '@ionic/react';
 export const FabButtonExample: React.FC = () => (
   <IonContent>
     {/*-- Fixed Floating Action Button that does not scroll with the content --*/}
-    <IonFab>
+    <IonFab slot="fixed">
       <IonFabButton>Button</IonFabButton>
     </IonFab>
 
@@ -66,6 +66,45 @@ export const FabButtonExample: React.FC = () => (
 ```
 
 
+### Stencil
+
+```tsx
+import { Component, h } from '@stencil/core';
+
+@Component({
+  tag: 'fab-button-example',
+  styleUrl: 'fab-button-example.css'
+})
+export class FabButtonExample {
+  render() {
+    return [
+      <ion-content>
+
+        {/* Fixed Floating Action Button that does not scroll with the content */}
+        <ion-fab slot="fixed">
+          <ion-fab-button>Button</ion-fab-button>
+        </ion-fab>
+
+        {/* Default Floating Action Button that scrolls with the content */}
+        <ion-fab-button>Default</ion-fab-button>
+
+        {/* Mini */}
+        <ion-fab-button size="small">Mini</ion-fab-button>
+
+        {/* Colors */}
+        <ion-fab-button color="primary">Primary</ion-fab-button>
+        <ion-fab-button color="secondary">Secondary</ion-fab-button>
+        <ion-fab-button color="danger">Danger</ion-fab-button>
+        <ion-fab-button color="light">Light</ion-fab-button>
+        <ion-fab-button color="dark">Dark</ion-fab-button>
+
+      </ion-content>
+    ];
+  }
+}
+```
+
+
 ### Vue
 
 ```html
@@ -73,7 +112,7 @@ export const FabButtonExample: React.FC = () => (
   <ion-content>
 
     <!-- Fixed Floating Action Button that does not scroll with the content -->
-    <ion-fab>
+    <ion-fab slot="fixed">
       <ion-fab-button>Button</ion-fab-button>
     </ion-fab>
 
diff --git a/core/src/components/fab-button/usage/angular.md b/core/src/components/fab-button/usage/angular.md
index bf6ccba454..03573bf6d4 100644
--- a/core/src/components/fab-button/usage/angular.md
+++ b/core/src/components/fab-button/usage/angular.md
@@ -2,7 +2,7 @@
 <ion-content>
 
   <!-- Fixed Floating Action Button that does not scroll with the content -->
-  <ion-fab>
+  <ion-fab slot="fixed">
     <ion-fab-button>Button</ion-fab-button>
   </ion-fab>
 
diff --git a/core/src/components/fab-button/usage/javascript.md b/core/src/components/fab-button/usage/javascript.md
index bf6ccba454..03573bf6d4 100644
--- a/core/src/components/fab-button/usage/javascript.md
+++ b/core/src/components/fab-button/usage/javascript.md
@@ -2,7 +2,7 @@
 <ion-content>
 
   <!-- Fixed Floating Action Button that does not scroll with the content -->
-  <ion-fab>
+  <ion-fab slot="fixed">
     <ion-fab-button>Button</ion-fab-button>
   </ion-fab>
 
diff --git a/core/src/components/fab-button/usage/react.md b/core/src/components/fab-button/usage/react.md
index fade567fca..fdd7f459b3 100644
--- a/core/src/components/fab-button/usage/react.md
+++ b/core/src/components/fab-button/usage/react.md
@@ -5,7 +5,7 @@ import { IonContent, IonFab, IonFabButton } from '@ionic/react';
 export const FabButtonExample: React.FC = () => (
   <IonContent>
     {/*-- Fixed Floating Action Button that does not scroll with the content --*/}
-    <IonFab>
+    <IonFab slot="fixed">
       <IonFabButton>Button</IonFabButton>
     </IonFab>
 
diff --git a/core/src/components/fab-button/usage/stencil.md b/core/src/components/fab-button/usage/stencil.md
new file mode 100644
index 0000000000..7318ed37f5
--- /dev/null
+++ b/core/src/components/fab-button/usage/stencil.md
@@ -0,0 +1,35 @@
+```tsx
+import { Component, h } from '@stencil/core';
+
+@Component({
+  tag: 'fab-button-example',
+  styleUrl: 'fab-button-example.css'
+})
+export class FabButtonExample {
+  render() {
+    return [
+      <ion-content>
+
+        {/* Fixed Floating Action Button that does not scroll with the content */}
+        <ion-fab slot="fixed">
+          <ion-fab-button>Button</ion-fab-button>
+        </ion-fab>
+
+        {/* Default Floating Action Button that scrolls with the content */}
+        <ion-fab-button>Default</ion-fab-button>
+
+        {/* Mini */}
+        <ion-fab-button size="small">Mini</ion-fab-button>
+
+        {/* Colors */}
+        <ion-fab-button color="primary">Primary</ion-fab-button>
+        <ion-fab-button color="secondary">Secondary</ion-fab-button>
+        <ion-fab-button color="danger">Danger</ion-fab-button>
+        <ion-fab-button color="light">Light</ion-fab-button>
+        <ion-fab-button color="dark">Dark</ion-fab-button>
+
+      </ion-content>
+    ];
+  }
+}
+```
\ No newline at end of file
diff --git a/core/src/components/fab-button/usage/vue.md b/core/src/components/fab-button/usage/vue.md
index 92d1614eb0..6e1c520151 100644
--- a/core/src/components/fab-button/usage/vue.md
+++ b/core/src/components/fab-button/usage/vue.md
@@ -3,7 +3,7 @@
   <ion-content>
 
     <!-- Fixed Floating Action Button that does not scroll with the content -->
-    <ion-fab>
+    <ion-fab slot="fixed">
       <ion-fab-button>Button</ion-fab-button>
     </ion-fab>
 
diff --git a/core/src/components/fab-list/readme.md b/core/src/components/fab-list/readme.md
index c3d58e3fed..3a7693b713 100644
--- a/core/src/components/fab-list/readme.md
+++ b/core/src/components/fab-list/readme.md
@@ -10,19 +10,55 @@ The `ion-fab-list` element is a container for multiple fab buttons. This collect
 ### Angular / javascript
 
 ```html
-<ion-fab vertical="bottom" horizontal="end">
+<ion-fab vertical="center" horizontal="center">
   <ion-fab-button>Share</ion-fab-button>
-
   <ion-fab-list side="top">
-    <ion-fab-button>Facebook</ion-fab-button>
-    <ion-fab-button>Twitter</ion-fab-button>
-    <ion-fab-button>Youtube</ion-fab-button>
+    <ion-fab-button>
+      <ion-icon name="logo-facebook"></ion-icon>
+    </ion-fab-button>
+    <ion-fab-button>
+      <ion-icon name="logo-twitter"></ion-icon>
+    </ion-fab-button>
+    <ion-fab-button>
+      <ion-icon name="logo-youtube"></ion-icon>
+    </ion-fab-button>
+  </ion-fab-list>
+
+  <ion-fab-list side="end">
+    <ion-fab-button>
+      <ion-icon name="logo-pwa"></ion-icon>
+    </ion-fab-button>
+    <ion-fab-button>
+      <ion-icon name="logo-npm"></ion-icon>
+    </ion-fab-button>
+    <ion-fab-button>
+      <ion-icon name="logo-ionic"></ion-icon>
+    </ion-fab-button>
+  </ion-fab-list>
+
+  <ion-fab-list side="bottom">
+    <ion-fab-button>
+      <ion-icon name="logo-github"></ion-icon>
+    </ion-fab-button>
+    <ion-fab-button>
+      <ion-icon name="logo-javascript"></ion-icon>
+    </ion-fab-button>
+    <ion-fab-button>
+      <ion-icon name="logo-angular"></ion-icon>
+    </ion-fab-button>
   </ion-fab-list>
 
   <ion-fab-list side="start">
-    <ion-fab-button>Vimeo</ion-fab-button>
+    <ion-fab-button>
+      <ion-icon name="logo-vimeo"></ion-icon>
+    </ion-fab-button>
+    <ion-fab-button>
+      <ion-icon name="logo-chrome"></ion-icon>
+    </ion-fab-button>
+    <ion-fab-button>
+      <ion-icon name="logo-react"></ion-icon>
+    </ion-fab-button>
   </ion-fab-list>
-
 </ion-fab>
 ```
 
@@ -32,29 +68,57 @@ The `ion-fab-list` element is a container for multiple fab buttons. This collect
 ```tsx
 import React from 'react';
 import { IonFab, IonFabButton, IonFabList, IonContent, IonIcon } from '@ionic/react';
+import { logoFacebook, logoTwitter, logoYoutube, logoPwa, logoNpm, logoIonic, logoGithub, logoJavascript, logoAngular, logoVimeo, logoChrome, logoReact } from 'ionicons/icons';
 
 export const FabListExample: React.FC = () => (
   <IonContent>
-    <IonFab vertical="bottom" horizontal="end">
-      <IonFabButton>
-        <IonIcon icon="share" />
-      </IonFabButton>
-
+    <IonFab vertical="center" horizontal="center">
+      <IonFabButton>Share</IonFabButton>
       <IonFabList side="top">
-        <IonFabButton color="primary">
-          <IonIcon icon="logo-facebook" />
+        <IonFabButton>
+          <IonIcon icon={logoFacebook} />
         </IonFabButton>
-        <IonFabButton color="primary">
-          <IonIcon icon="logo-twitter" />
+        <IonFabButton>
+          <IonIcon icon={logoTwitter} />
         </IonFabButton>
-        <IonFabButton color="primary">
-          <IonIcon icon="logo-youtube" />
+        <IonFabButton>
+          <IonIcon icon={logoYoutube} />
+        </IonFabButton>
+      </IonFabList>
+
+      <IonFabList side="end">
+        <IonFabButton>
+          <IonIcon icon={logoPwa} />
+        </IonFabButton>
+        <IonFabButton>
+          <IonIcon icon={logoNpm} />
+        </IonFabButton>
+        <IonFabButton>
+          <IonIcon icon={logoIonic} />
+        </IonFabButton>
+      </IonFabList>
+
+      <IonFabList side="bottom">
+        <IonFabButton>
+          <IonIcon icon={logoGithub} />
+        </IonFabButton>
+        <IonFabButton>
+          <IonIcon icon={logoJavascript} />
+        </IonFabButton>
+        <IonFabButton>
+          <IonIcon icon={logoAngular} />
         </IonFabButton>
       </IonFabList>
 
       <IonFabList side="start">
-        <IonFabButton color="primary">
-          <IonIcon icon="logo-vimeo" />
+        <IonFabButton>
+          <IonIcon icon={logoVimeo} />
+        </IonFabButton>
+        <IonFabButton>
+          <IonIcon icon={logoChrome} />
+        </IonFabButton>
+        <IonFabButton>
+          <IonIcon icon={logoReact} />
         </IonFabButton>
       </IonFabList>
     </IonFab>
@@ -64,6 +128,74 @@ export const FabListExample: React.FC = () => (
 ```
 
 
+### Stencil
+
+```tsx
+import { Component, h } from '@stencil/core';
+
+@Component({
+  tag: 'fab-list-example',
+  styleUrl: 'fab-list-example.css'
+})
+export class FabListExample {
+  render() {
+    return [
+      <ion-fab vertical="center" horizontal="center">
+        <ion-fab-button>Share</ion-fab-button>
+        <ion-fab-list side="top">
+          <ion-fab-button>
+            <ion-icon name="logo-facebook"></ion-icon>
+          </ion-fab-button>
+          <ion-fab-button>
+            <ion-icon name="logo-twitter"></ion-icon>
+          </ion-fab-button>
+          <ion-fab-button>
+            <ion-icon name="logo-youtube"></ion-icon>
+          </ion-fab-button>
+        </ion-fab-list>
+
+        <ion-fab-list side="end">
+          <ion-fab-button>
+            <ion-icon name="logo-pwa"></ion-icon>
+          </ion-fab-button>
+          <ion-fab-button>
+            <ion-icon name="logo-npm"></ion-icon>
+          </ion-fab-button>
+          <ion-fab-button>
+            <ion-icon name="logo-ionic"></ion-icon>
+          </ion-fab-button>
+        </ion-fab-list>
+
+        <ion-fab-list side="bottom">
+          <ion-fab-button>
+            <ion-icon name="logo-github"></ion-icon>
+          </ion-fab-button>
+          <ion-fab-button>
+            <ion-icon name="logo-javascript"></ion-icon>
+          </ion-fab-button>
+          <ion-fab-button>
+            <ion-icon name="logo-angular"></ion-icon>
+          </ion-fab-button>
+        </ion-fab-list>
+
+        <ion-fab-list side="start">
+          <ion-fab-button>
+            <ion-icon name="logo-vimeo"></ion-icon>
+          </ion-fab-button>
+          <ion-fab-button>
+            <ion-icon name="logo-chrome"></ion-icon>
+          </ion-fab-button>
+          <ion-fab-button>
+            <ion-icon name="logo-react"></ion-icon>
+          </ion-fab-button>
+        </ion-fab-list>
+      </ion-fab>
+    ];
+  }
+}
+```
+
+
 ### Vue
 
 ```html
diff --git a/core/src/components/fab-list/usage/angular.md b/core/src/components/fab-list/usage/angular.md
index feb7aafeac..e100f3c873 100644
--- a/core/src/components/fab-list/usage/angular.md
+++ b/core/src/components/fab-list/usage/angular.md
@@ -1,16 +1,52 @@
 ```html
-<ion-fab vertical="bottom" horizontal="end">
+<ion-fab vertical="center" horizontal="center">
   <ion-fab-button>Share</ion-fab-button>
-
   <ion-fab-list side="top">
-    <ion-fab-button>Facebook</ion-fab-button>
-    <ion-fab-button>Twitter</ion-fab-button>
-    <ion-fab-button>Youtube</ion-fab-button>
+    <ion-fab-button>
+      <ion-icon name="logo-facebook"></ion-icon>
+    </ion-fab-button>
+    <ion-fab-button>
+      <ion-icon name="logo-twitter"></ion-icon>
+    </ion-fab-button>
+    <ion-fab-button>
+      <ion-icon name="logo-youtube"></ion-icon>
+    </ion-fab-button>
+  </ion-fab-list>
+
+  <ion-fab-list side="end">
+    <ion-fab-button>
+      <ion-icon name="logo-pwa"></ion-icon>
+    </ion-fab-button>
+    <ion-fab-button>
+      <ion-icon name="logo-npm"></ion-icon>
+    </ion-fab-button>
+    <ion-fab-button>
+      <ion-icon name="logo-ionic"></ion-icon>
+    </ion-fab-button>
+  </ion-fab-list>
+
+  <ion-fab-list side="bottom">
+    <ion-fab-button>
+      <ion-icon name="logo-github"></ion-icon>
+    </ion-fab-button>
+    <ion-fab-button>
+      <ion-icon name="logo-javascript"></ion-icon>
+    </ion-fab-button>
+    <ion-fab-button>
+      <ion-icon name="logo-angular"></ion-icon>
+    </ion-fab-button>
   </ion-fab-list>
 
   <ion-fab-list side="start">
-    <ion-fab-button>Vimeo</ion-fab-button>
+    <ion-fab-button>
+      <ion-icon name="logo-vimeo"></ion-icon>
+    </ion-fab-button>
+    <ion-fab-button>
+      <ion-icon name="logo-chrome"></ion-icon>
+    </ion-fab-button>
+    <ion-fab-button>
+      <ion-icon name="logo-react"></ion-icon>
+    </ion-fab-button>
   </ion-fab-list>
-
 </ion-fab>
 ```
diff --git a/core/src/components/fab-list/usage/javascript.md b/core/src/components/fab-list/usage/javascript.md
index feb7aafeac..e100f3c873 100644
--- a/core/src/components/fab-list/usage/javascript.md
+++ b/core/src/components/fab-list/usage/javascript.md
@@ -1,16 +1,52 @@
 ```html
-<ion-fab vertical="bottom" horizontal="end">
+<ion-fab vertical="center" horizontal="center">
   <ion-fab-button>Share</ion-fab-button>
-
   <ion-fab-list side="top">
-    <ion-fab-button>Facebook</ion-fab-button>
-    <ion-fab-button>Twitter</ion-fab-button>
-    <ion-fab-button>Youtube</ion-fab-button>
+    <ion-fab-button>
+      <ion-icon name="logo-facebook"></ion-icon>
+    </ion-fab-button>
+    <ion-fab-button>
+      <ion-icon name="logo-twitter"></ion-icon>
+    </ion-fab-button>
+    <ion-fab-button>
+      <ion-icon name="logo-youtube"></ion-icon>
+    </ion-fab-button>
+  </ion-fab-list>
+
+  <ion-fab-list side="end">
+    <ion-fab-button>
+      <ion-icon name="logo-pwa"></ion-icon>
+    </ion-fab-button>
+    <ion-fab-button>
+      <ion-icon name="logo-npm"></ion-icon>
+    </ion-fab-button>
+    <ion-fab-button>
+      <ion-icon name="logo-ionic"></ion-icon>
+    </ion-fab-button>
+  </ion-fab-list>
+
+  <ion-fab-list side="bottom">
+    <ion-fab-button>
+      <ion-icon name="logo-github"></ion-icon>
+    </ion-fab-button>
+    <ion-fab-button>
+      <ion-icon name="logo-javascript"></ion-icon>
+    </ion-fab-button>
+    <ion-fab-button>
+      <ion-icon name="logo-angular"></ion-icon>
+    </ion-fab-button>
   </ion-fab-list>
 
   <ion-fab-list side="start">
-    <ion-fab-button>Vimeo</ion-fab-button>
+    <ion-fab-button>
+      <ion-icon name="logo-vimeo"></ion-icon>
+    </ion-fab-button>
+    <ion-fab-button>
+      <ion-icon name="logo-chrome"></ion-icon>
+    </ion-fab-button>
+    <ion-fab-button>
+      <ion-icon name="logo-react"></ion-icon>
+    </ion-fab-button>
   </ion-fab-list>
-
 </ion-fab>
 ```
diff --git a/core/src/components/fab-list/usage/react.md b/core/src/components/fab-list/usage/react.md
index 7ad2c94e67..89ac3668b1 100644
--- a/core/src/components/fab-list/usage/react.md
+++ b/core/src/components/fab-list/usage/react.md
@@ -1,29 +1,57 @@
 ```tsx
 import React from 'react';
 import { IonFab, IonFabButton, IonFabList, IonContent, IonIcon } from '@ionic/react';
+import { logoFacebook, logoTwitter, logoYoutube, logoPwa, logoNpm, logoIonic, logoGithub, logoJavascript, logoAngular, logoVimeo, logoChrome, logoReact } from 'ionicons/icons';
 
 export const FabListExample: React.FC = () => (
   <IonContent>
-    <IonFab vertical="bottom" horizontal="end">
-      <IonFabButton>
-        <IonIcon icon="share" />
-      </IonFabButton>
-
+    <IonFab vertical="center" horizontal="center">
+      <IonFabButton>Share</IonFabButton>
       <IonFabList side="top">
-        <IonFabButton color="primary">
-          <IonIcon icon="logo-facebook" />
+        <IonFabButton>
+          <IonIcon icon={logoFacebook} />
         </IonFabButton>
-        <IonFabButton color="primary">
-          <IonIcon icon="logo-twitter" />
+        <IonFabButton>
+          <IonIcon icon={logoTwitter} />
         </IonFabButton>
-        <IonFabButton color="primary">
-          <IonIcon icon="logo-youtube" />
+        <IonFabButton>
+          <IonIcon icon={logoYoutube} />
+        </IonFabButton>
+      </IonFabList>
+
+      <IonFabList side="end">
+        <IonFabButton>
+          <IonIcon icon={logoPwa} />
+        </IonFabButton>
+        <IonFabButton>
+          <IonIcon icon={logoNpm} />
+        </IonFabButton>
+        <IonFabButton>
+          <IonIcon icon={logoIonic} />
+        </IonFabButton>
+      </IonFabList>
+
+      <IonFabList side="bottom">
+        <IonFabButton>
+          <IonIcon icon={logoGithub} />
+        </IonFabButton>
+        <IonFabButton>
+          <IonIcon icon={logoJavascript} />
+        </IonFabButton>
+        <IonFabButton>
+          <IonIcon icon={logoAngular} />
         </IonFabButton>
       </IonFabList>
 
       <IonFabList side="start">
-        <IonFabButton color="primary">
-          <IonIcon icon="logo-vimeo" />
+        <IonFabButton>
+          <IonIcon icon={logoVimeo} />
+        </IonFabButton>
+        <IonFabButton>
+          <IonIcon icon={logoChrome} />
+        </IonFabButton>
+        <IonFabButton>
+          <IonIcon icon={logoReact} />
         </IonFabButton>
       </IonFabList>
     </IonFab>
diff --git a/core/src/components/fab-list/usage/stencil.md b/core/src/components/fab-list/usage/stencil.md
new file mode 100644
index 0000000000..1c066f5cad
--- /dev/null
+++ b/core/src/components/fab-list/usage/stencil.md
@@ -0,0 +1,64 @@
+```tsx
+import { Component, h } from '@stencil/core';
+
+@Component({
+  tag: 'fab-list-example',
+  styleUrl: 'fab-list-example.css'
+})
+export class FabListExample {
+  render() {
+    return [
+      <ion-fab vertical="center" horizontal="center">
+        <ion-fab-button>Share</ion-fab-button>
+        <ion-fab-list side="top">
+          <ion-fab-button>
+            <ion-icon name="logo-facebook"></ion-icon>
+          </ion-fab-button>
+          <ion-fab-button>
+            <ion-icon name="logo-twitter"></ion-icon>
+          </ion-fab-button>
+          <ion-fab-button>
+            <ion-icon name="logo-youtube"></ion-icon>
+          </ion-fab-button>
+        </ion-fab-list>
+
+        <ion-fab-list side="end">
+          <ion-fab-button>
+            <ion-icon name="logo-pwa"></ion-icon>
+          </ion-fab-button>
+          <ion-fab-button>
+            <ion-icon name="logo-npm"></ion-icon>
+          </ion-fab-button>
+          <ion-fab-button>
+            <ion-icon name="logo-ionic"></ion-icon>
+          </ion-fab-button>
+        </ion-fab-list>
+
+        <ion-fab-list side="bottom">
+          <ion-fab-button>
+            <ion-icon name="logo-github"></ion-icon>
+          </ion-fab-button>
+          <ion-fab-button>
+            <ion-icon name="logo-javascript"></ion-icon>
+          </ion-fab-button>
+          <ion-fab-button>
+            <ion-icon name="logo-angular"></ion-icon>
+          </ion-fab-button>
+        </ion-fab-list>
+
+        <ion-fab-list side="start">
+          <ion-fab-button>
+            <ion-icon name="logo-vimeo"></ion-icon>
+          </ion-fab-button>
+          <ion-fab-button>
+            <ion-icon name="logo-chrome"></ion-icon>
+          </ion-fab-button>
+          <ion-fab-button>
+            <ion-icon name="logo-react"></ion-icon>
+          </ion-fab-button>
+        </ion-fab-list>
+      </ion-fab>
+    ];
+  }
+}
+```
\ No newline at end of file
diff --git a/core/src/components/fab/readme.md b/core/src/components/fab/readme.md
index 9472ff5506..047ab1a818 100644
--- a/core/src/components/fab/readme.md
+++ b/core/src/components/fab/readme.md
@@ -10,6 +10,12 @@ Fabs are container elements that contain one or more fab buttons. They should be
 ### Angular / javascript
 
 ```html
+<ion-header>
+  <ion-toolbar>
+    <ion-title>Header</ion-title>
+  </ion-toolbar>
+</ion-header>
+
 <ion-content>
   <!-- fab placed to the top end -->
   <ion-fab vertical="top" horizontal="end" slot="fixed">
@@ -89,6 +95,12 @@ Fabs are container elements that contain one or more fab buttons. They should be
     </ion-fab-list>
   </ion-fab>
 </ion-content>
+
+<ion-footer>
+  <ion-toolbar>
+    <ion-title>Footer</ion-title>
+  </ion-toolbar>
+</ion-footer>
 ```
 
 
@@ -96,7 +108,7 @@ Fabs are container elements that contain one or more fab buttons. They should be
 
 ```tsx
 import React from 'react';
-import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar, IonFab, IonFabButton, IonIcon, IonFabList } from '@ionic/react';
+import { IonContent, IonHeader, IonFooter, IonPage, IonTitle, IonToolbar, IonFab, IonFabButton, IonIcon, IonFabList } from '@ionic/react';
 import { add, settings, share, person, arrowForwardCircle, arrowBackCircle, arrowUpCircle, logoVimeo, logoFacebook, logoInstagram, logoTwitter } from 'ionicons/icons';
 
 export const FabExamples: React.FC = () => {
@@ -104,7 +116,7 @@ export const FabExamples: React.FC = () => {
     <IonPage>
       <IonHeader>
         <IonToolbar>
-          <IonTitle>FabExamples</IonTitle>
+          <IonTitle>Header</IonTitle>
         </IonToolbar>
       </IonHeader>
       <IonContent>
@@ -186,16 +198,138 @@ export const FabExamples: React.FC = () => {
           </IonFabList>
         </IonFab>
       </IonContent>
+      <IonFooter>
+        <IonToolbar>
+          <IonTitle>Footer</IonTitle>
+        </IonToolbar>
+      </IonFooter>
     </IonPage>
   );
 };
 ```
 
 
+### Stencil
+
+```tsx
+import { Component, h } from '@stencil/core';
+
+@Component({
+  tag: 'fab-example',
+  styleUrl: 'fab-example.css'
+})
+export class FabExample {
+  render() {
+    return [
+      <ion-header>
+        <ion-toolbar>
+          <ion-title>Header</ion-title>
+        </ion-toolbar>
+      </ion-header>,
+
+      <ion-content>
+        {/* fab placed to the top end */}
+        <ion-fab vertical="top" horizontal="end" slot="fixed">
+          <ion-fab-button>
+            <ion-icon name="add"></ion-icon>
+          </ion-fab-button>
+        </ion-fab>
+
+        {/* fab placed to the bottom end */}
+        <ion-fab vertical="bottom" horizontal="end" slot="fixed">
+          <ion-fab-button>
+            <ion-icon name="arrow-forward-circle"></ion-icon>
+          </ion-fab-button>
+        </ion-fab>
+
+        {/* fab placed to the top start */}
+        <ion-fab vertical="top" horizontal="start" slot="fixed">
+          <ion-fab-button>
+            <ion-icon name="arrow-back-circle"></ion-icon>
+          </ion-fab-button>
+        </ion-fab>
+
+        {/* fab placed to the bottom start */}
+        <ion-fab vertical="bottom" horizontal="start" slot="fixed">
+          <ion-fab-button>
+            <ion-icon name="arrow-up-circle"></ion-icon>
+          </ion-fab-button>
+        </ion-fab>
+
+        {/* fab placed to the (vertical) center and start */}
+        <ion-fab vertical="center" horizontal="start" slot="fixed">
+          <ion-fab-button>
+            <ion-icon name="share"></ion-icon>
+          </ion-fab-button>
+        </ion-fab>
+
+        {/* fab placed to the (vertical) center and end */}
+        <ion-fab vertical="center" horizontal="end" slot="fixed">
+          <ion-fab-button>
+            <ion-icon name="add"></ion-icon>
+          </ion-fab-button>
+        </ion-fab>
+
+        {/* fab placed to the top and end and on the top edge of the  content overlapping header */}
+        <ion-fab vertical="top" horizontal="end" edge slot="fixed">
+          <ion-fab-button>
+            <ion-icon name="person"></ion-icon>
+          </ion-fab-button>
+        </ion-fab>
+
+        {/* fab placed to the bottom and start and on the bottom edge of content  overlapping footer with a list to the right */}
+        <ion-fab vertical="bottom" horizontal="start" edge slot="fixed">
+          <ion-fab-button>
+            <ion-icon name="settings"></ion-icon>
+          </ion-fab-button>
+          <ion-fab-list side="end">
+            <ion-fab-button><ion-icon name="logo-vimeo"></ion-icon></ion-fab-button>
+          </ion-fab-list>
+        </ion-fab>
+
+        {/* fab placed in the center of the content with a list on each side */}
+        <ion-fab vertical="center" horizontal="center" slot="fixed">
+          <ion-fab-button>
+            <ion-icon name="share"></ion-icon>
+          </ion-fab-button>
+          <ion-fab-list side="top">
+            <ion-fab-button><ion-icon name="logo-vimeo"></ion-icon></ion-fab-button>
+          </ion-fab-list>
+          <ion-fab-list side="bottom">
+            <ion-fab-button><ion-icon name="logo-facebook"></ion-icon></ion-fab-button>
+          </ion-fab-list>
+          <ion-fab-list side="start">
+            <ion-fab-button><ion-icon name="logo-instagram"></ion-icon></ion-fab-button>
+          </ion-fab-list>
+          <ion-fab-list side="end">
+            <ion-fab-button><ion-icon name="logo-twitter"></ion-icon></ion-fab-button>
+          </ion-fab-list>
+        </ion-fab>
+      </ion-content>,
+
+      <ion-footer>
+        <ion-toolbar>
+          <ion-title>
+            Footer
+          </ion-title>
+        </ion-toolbar>
+      </ion-footer>
+    ];
+  }
+}
+```
+
+
 ### Vue
 
 ```html
 <template>
+  <ion-header>
+    <ion-toolbar>
+      <ion-title>Header</ion-title>
+    </ion-toolbar>
+  </ion-header>
+
   <ion-content>
     <!-- fab placed to the top end -->
     <ion-fab vertical="top" horizontal="end" slot="fixed">
@@ -275,6 +409,12 @@ export const FabExamples: React.FC = () => {
       </ion-fab-list>
     </ion-fab>
   </ion-content>
+
+  <ion-footer>
+    <ion-toolbar>
+      <ion-title>Footer</ion-title>
+    </ion-toolbar>
+  </ion-footer>
 </template>
 ```
 
diff --git a/core/src/components/fab/usage/angular.md b/core/src/components/fab/usage/angular.md
index 3f13c497c7..c52d793b6e 100644
--- a/core/src/components/fab/usage/angular.md
+++ b/core/src/components/fab/usage/angular.md
@@ -1,4 +1,10 @@
 ```html
+<ion-header>
+  <ion-toolbar>
+    <ion-title>Header</ion-title>
+  </ion-toolbar>
+</ion-header>
+
 <ion-content>
   <!-- fab placed to the top end -->
   <ion-fab vertical="top" horizontal="end" slot="fixed">
@@ -78,4 +84,10 @@
     </ion-fab-list>
   </ion-fab>
 </ion-content>
+
+<ion-footer>
+  <ion-toolbar>
+    <ion-title>Footer</ion-title>
+  </ion-toolbar>
+</ion-footer>
 ```
diff --git a/core/src/components/fab/usage/javascript.md b/core/src/components/fab/usage/javascript.md
index 3f13c497c7..c52d793b6e 100644
--- a/core/src/components/fab/usage/javascript.md
+++ b/core/src/components/fab/usage/javascript.md
@@ -1,4 +1,10 @@
 ```html
+<ion-header>
+  <ion-toolbar>
+    <ion-title>Header</ion-title>
+  </ion-toolbar>
+</ion-header>
+
 <ion-content>
   <!-- fab placed to the top end -->
   <ion-fab vertical="top" horizontal="end" slot="fixed">
@@ -78,4 +84,10 @@
     </ion-fab-list>
   </ion-fab>
 </ion-content>
+
+<ion-footer>
+  <ion-toolbar>
+    <ion-title>Footer</ion-title>
+  </ion-toolbar>
+</ion-footer>
 ```
diff --git a/core/src/components/fab/usage/react.md b/core/src/components/fab/usage/react.md
index 8a1ae65db0..5209f4ca09 100644
--- a/core/src/components/fab/usage/react.md
+++ b/core/src/components/fab/usage/react.md
@@ -1,6 +1,6 @@
 ```tsx
 import React from 'react';
-import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar, IonFab, IonFabButton, IonIcon, IonFabList } from '@ionic/react';
+import { IonContent, IonHeader, IonFooter, IonPage, IonTitle, IonToolbar, IonFab, IonFabButton, IonIcon, IonFabList } from '@ionic/react';
 import { add, settings, share, person, arrowForwardCircle, arrowBackCircle, arrowUpCircle, logoVimeo, logoFacebook, logoInstagram, logoTwitter } from 'ionicons/icons';
 
 export const FabExamples: React.FC = () => {
@@ -8,7 +8,7 @@ export const FabExamples: React.FC = () => {
     <IonPage>
       <IonHeader>
         <IonToolbar>
-          <IonTitle>FabExamples</IonTitle>
+          <IonTitle>Header</IonTitle>
         </IonToolbar>
       </IonHeader>
       <IonContent>
@@ -90,6 +90,11 @@ export const FabExamples: React.FC = () => {
           </IonFabList>
         </IonFab>
       </IonContent>
+      <IonFooter>
+        <IonToolbar>
+          <IonTitle>Footer</IonTitle>
+        </IonToolbar>
+      </IonFooter>
     </IonPage>
   );
 };
diff --git a/core/src/components/fab/usage/stencil.md b/core/src/components/fab/usage/stencil.md
new file mode 100644
index 0000000000..234e8af287
--- /dev/null
+++ b/core/src/components/fab/usage/stencil.md
@@ -0,0 +1,107 @@
+```tsx
+import { Component, h } from '@stencil/core';
+
+@Component({
+  tag: 'fab-example',
+  styleUrl: 'fab-example.css'
+})
+export class FabExample {
+  render() {
+    return [
+      <ion-header>
+        <ion-toolbar>
+          <ion-title>Header</ion-title>
+        </ion-toolbar>
+      </ion-header>,
+
+      <ion-content>
+        {/* fab placed to the top end */}
+        <ion-fab vertical="top" horizontal="end" slot="fixed">
+          <ion-fab-button>
+            <ion-icon name="add"></ion-icon>
+          </ion-fab-button>
+        </ion-fab>
+
+        {/* fab placed to the bottom end */}
+        <ion-fab vertical="bottom" horizontal="end" slot="fixed">
+          <ion-fab-button>
+            <ion-icon name="arrow-forward-circle"></ion-icon>
+          </ion-fab-button>
+        </ion-fab>
+
+        {/* fab placed to the top start */}
+        <ion-fab vertical="top" horizontal="start" slot="fixed">
+          <ion-fab-button>
+            <ion-icon name="arrow-back-circle"></ion-icon>
+          </ion-fab-button>
+        </ion-fab>
+
+        {/* fab placed to the bottom start */}
+        <ion-fab vertical="bottom" horizontal="start" slot="fixed">
+          <ion-fab-button>
+            <ion-icon name="arrow-up-circle"></ion-icon>
+          </ion-fab-button>
+        </ion-fab>
+
+        {/* fab placed to the (vertical) center and start */}
+        <ion-fab vertical="center" horizontal="start" slot="fixed">
+          <ion-fab-button>
+            <ion-icon name="share"></ion-icon>
+          </ion-fab-button>
+        </ion-fab>
+
+        {/* fab placed to the (vertical) center and end */}
+        <ion-fab vertical="center" horizontal="end" slot="fixed">
+          <ion-fab-button>
+            <ion-icon name="add"></ion-icon>
+          </ion-fab-button>
+        </ion-fab>
+
+        {/* fab placed to the top and end and on the top edge of the  content overlapping header */}
+        <ion-fab vertical="top" horizontal="end" edge slot="fixed">
+          <ion-fab-button>
+            <ion-icon name="person"></ion-icon>
+          </ion-fab-button>
+        </ion-fab>
+
+        {/* fab placed to the bottom and start and on the bottom edge of content  overlapping footer with a list to the right */}
+        <ion-fab vertical="bottom" horizontal="start" edge slot="fixed">
+          <ion-fab-button>
+            <ion-icon name="settings"></ion-icon>
+          </ion-fab-button>
+          <ion-fab-list side="end">
+            <ion-fab-button><ion-icon name="logo-vimeo"></ion-icon></ion-fab-button>
+          </ion-fab-list>
+        </ion-fab>
+
+        {/* fab placed in the center of the content with a list on each side */}
+        <ion-fab vertical="center" horizontal="center" slot="fixed">
+          <ion-fab-button>
+            <ion-icon name="share"></ion-icon>
+          </ion-fab-button>
+          <ion-fab-list side="top">
+            <ion-fab-button><ion-icon name="logo-vimeo"></ion-icon></ion-fab-button>
+          </ion-fab-list>
+          <ion-fab-list side="bottom">
+            <ion-fab-button><ion-icon name="logo-facebook"></ion-icon></ion-fab-button>
+          </ion-fab-list>
+          <ion-fab-list side="start">
+            <ion-fab-button><ion-icon name="logo-instagram"></ion-icon></ion-fab-button>
+          </ion-fab-list>
+          <ion-fab-list side="end">
+            <ion-fab-button><ion-icon name="logo-twitter"></ion-icon></ion-fab-button>
+          </ion-fab-list>
+        </ion-fab>
+      </ion-content>,
+
+      <ion-footer>
+        <ion-toolbar>
+          <ion-title>
+            Footer
+          </ion-title>
+        </ion-toolbar>
+      </ion-footer>
+    ];
+  }
+}
+```
\ No newline at end of file
diff --git a/core/src/components/fab/usage/vue.md b/core/src/components/fab/usage/vue.md
index c7f57e6d33..dba0f9af7e 100644
--- a/core/src/components/fab/usage/vue.md
+++ b/core/src/components/fab/usage/vue.md
@@ -1,5 +1,11 @@
 ```html
 <template>
+  <ion-header>
+    <ion-toolbar>
+      <ion-title>Header</ion-title>
+    </ion-toolbar>
+  </ion-header>
+
   <ion-content>
     <!-- fab placed to the top end -->
     <ion-fab vertical="top" horizontal="end" slot="fixed">
@@ -79,5 +85,11 @@
       </ion-fab-list>
     </ion-fab>
   </ion-content>
+
+  <ion-footer>
+    <ion-toolbar>
+      <ion-title>Footer</ion-title>
+    </ion-toolbar>
+  </ion-footer>
 </template>
 ```
diff --git a/core/src/components/footer/readme.md b/core/src/components/footer/readme.md
index 2782250f7d..c87a16f280 100644
--- a/core/src/components/footer/readme.md
+++ b/core/src/components/footer/readme.md
@@ -55,6 +55,38 @@ export const FooterExample: React.FC = () => (
 ```
 
 
+### Stencil
+
+```tsx
+import { Component, h } from '@stencil/core';
+
+@Component({
+  tag: 'footer-example',
+  styleUrl: 'footer-example.css'
+})
+export class FooterExample {
+  render() {
+    return [
+      <ion-content></ion-content>,
+
+      // Footer without a border
+      <ion-footer class="ion-no-border">
+        <ion-toolbar>
+          <ion-title>Footer - No Border</ion-title>
+        </ion-toolbar>
+      </ion-footer>,
+
+      <ion-footer>
+        <ion-toolbar>
+          <ion-title>Footer</ion-title>
+        </ion-toolbar>
+      </ion-footer>
+    ];
+  }
+}
+```
+
+
 ### Vue
 
 ```html
diff --git a/core/src/components/footer/usage/stencil.md b/core/src/components/footer/usage/stencil.md
new file mode 100644
index 0000000000..84ef348a27
--- /dev/null
+++ b/core/src/components/footer/usage/stencil.md
@@ -0,0 +1,28 @@
+```tsx
+import { Component, h } from '@stencil/core';
+
+@Component({
+  tag: 'footer-example',
+  styleUrl: 'footer-example.css'
+})
+export class FooterExample {
+  render() {
+    return [
+      <ion-content></ion-content>,
+
+      // Footer without a border
+      <ion-footer class="ion-no-border">
+        <ion-toolbar>
+          <ion-title>Footer - No Border</ion-title>
+        </ion-toolbar>
+      </ion-footer>,
+
+      <ion-footer>
+        <ion-toolbar>
+          <ion-title>Footer</ion-title>
+        </ion-toolbar>
+      </ion-footer>
+    ];
+  }
+}
+```
diff --git a/core/src/components/grid/readme.md b/core/src/components/grid/readme.md
index 7809da7f6c..1c7f87924c 100644
--- a/core/src/components/grid/readme.md
+++ b/core/src/components/grid/readme.md
@@ -337,6 +337,201 @@ export const GridExample: React.FC = () => (
 ```
 
 
+### Stencil
+
+```tsx
+import { Component, h } from '@stencil/core';
+
+@Component({
+  tag: 'grid-example',
+  styleUrl: 'grid-example.css'
+})
+export class GridExample {
+  render() {
+    return [
+      <ion-grid>
+        <ion-row>
+          <ion-col>
+            ion-col
+          </ion-col>
+          <ion-col>
+            ion-col
+          </ion-col>
+          <ion-col>
+            ion-col
+          </ion-col>
+          <ion-col>
+            ion-col
+          </ion-col>
+        </ion-row>
+
+        <ion-row>
+          <ion-col size="6">
+            ion-col [size="6"]
+          </ion-col>
+          <ion-col>
+            ion-col
+          </ion-col>
+          <ion-col>
+            ion-col
+          </ion-col>
+        </ion-row>
+
+        <ion-row>
+          <ion-col size="3">
+            ion-col [size="3"]
+          </ion-col>
+          <ion-col>
+            ion-col
+          </ion-col>
+          <ion-col size="3">
+            ion-col [size="3"]
+          </ion-col>
+        </ion-row>
+
+        <ion-row>
+          <ion-col size="3">
+            ion-col [size="3"]
+          </ion-col>
+          <ion-col size="3" offset="3">
+            ion-col [size="3"] [offset="3"]
+          </ion-col>
+        </ion-row>
+
+        <ion-row>
+          <ion-col>
+            ion-col
+          </ion-col>
+          <ion-col>
+            ion-col
+            <br/>#
+          </ion-col>
+          <ion-col>
+            ion-col
+            <br/>#
+            <br/>#
+          </ion-col>
+          <ion-col>
+            ion-col
+            <br/>#
+            <br/>#
+            <br/>#
+          </ion-col>
+        </ion-row>
+
+        <ion-row>
+          <ion-col class="ion-align-self-start">
+            ion-col [start]
+          </ion-col>
+          <ion-col class="ion-align-self-center">
+            ion-col [center]
+          </ion-col>
+          <ion-col class="ion-align-self-end">
+            ion-col [end]
+          </ion-col>
+          <ion-col>
+            ion-col
+            <br/>#
+            <br/>#
+          </ion-col>
+        </ion-row>
+
+        <ion-row class="ion-align-items-start">
+          <ion-col>
+            [start] ion-col
+          </ion-col>
+          <ion-col>
+            [start] ion-col
+          </ion-col>
+          <ion-col class="ion-align-self-end">
+            [start] ion-col [end]
+          </ion-col>
+          <ion-col>
+            ion-col
+            <br/>#
+            <br/>#
+          </ion-col>
+        </ion-row>
+
+        <ion-row class="ion-align-items-center">
+          <ion-col>
+            [center] ion-col
+          </ion-col>
+          <ion-col>
+            [center] ion-col
+          </ion-col>
+          <ion-col>
+            [center] ion-col
+          </ion-col>
+          <ion-col>
+            ion-col
+            <br/>#
+            <br/>#
+          </ion-col>
+        </ion-row>
+
+        <ion-row class="ion-align-items-end">
+          <ion-col>
+            [end] ion-col
+          </ion-col>
+          <ion-col class="ion-align-self-start">
+            [end] ion-col [start]
+          </ion-col>
+          <ion-col>
+            [end] ion-col
+          </ion-col>
+          <ion-col>
+            ion-col
+            <br/>#
+            <br/>#
+          </ion-col>
+        </ion-row>
+
+        <ion-row>
+          <ion-col size="12" sizeSm="">
+            ion-col [size="12"] [sizeSm]
+          </ion-col>
+          <ion-col size="12" sizeSm="">
+            ion-col [size="12"] [sizeSm]
+          </ion-col>
+          <ion-col size="12" sizeSm="">
+            ion-col [size="12"] [sizeSm]
+          </ion-col>
+          <ion-col size="12" sizeSm="">
+            ion-col [size="12"] [sizeSm]
+          </ion-col>
+        </ion-row>
+
+        <ion-row>
+          <ion-col size="12" sizeMd="">
+            ion-col [size="12"] [sizeMd]
+          </ion-col>
+          <ion-col size="12" sizeMd="">
+            ion-col [size="12"] [sizeMd]
+          </ion-col>
+          <ion-col size="12" sizeMd="">
+            ion-col [size="12"] [sizeMd]
+          </ion-col>
+          <ion-col size="12" sizeMd="">
+            ion-col [size="12"] [sizeMd]
+          </ion-col>
+        </ion-row>
+
+        <ion-row>
+          <ion-col size="6" sizeLg="" offset="3">
+            ion-col [size="6"] [sizeLg] [offset="3"]
+          </ion-col>
+          <ion-col size="3" sizeLg="">
+            ion-col [size="3"] [sizeLg]
+          </ion-col>
+        </ion-row>
+      </ion-grid>
+    ];
+  }
+}
+```
+
+
 ### Vue
 
 ```html
diff --git a/core/src/components/grid/usage/stencil.md b/core/src/components/grid/usage/stencil.md
new file mode 100644
index 0000000000..8b71ef5316
--- /dev/null
+++ b/core/src/components/grid/usage/stencil.md
@@ -0,0 +1,191 @@
+```tsx
+import { Component, h } from '@stencil/core';
+
+@Component({
+  tag: 'grid-example',
+  styleUrl: 'grid-example.css'
+})
+export class GridExample {
+  render() {
+    return [
+      <ion-grid>
+        <ion-row>
+          <ion-col>
+            ion-col
+          </ion-col>
+          <ion-col>
+            ion-col
+          </ion-col>
+          <ion-col>
+            ion-col
+          </ion-col>
+          <ion-col>
+            ion-col
+          </ion-col>
+        </ion-row>
+
+        <ion-row>
+          <ion-col size="6">
+            ion-col [size="6"]
+          </ion-col>
+          <ion-col>
+            ion-col
+          </ion-col>
+          <ion-col>
+            ion-col
+          </ion-col>
+        </ion-row>
+
+        <ion-row>
+          <ion-col size="3">
+            ion-col [size="3"]
+          </ion-col>
+          <ion-col>
+            ion-col
+          </ion-col>
+          <ion-col size="3">
+            ion-col [size="3"]
+          </ion-col>
+        </ion-row>
+
+        <ion-row>
+          <ion-col size="3">
+            ion-col [size="3"]
+          </ion-col>
+          <ion-col size="3" offset="3">
+            ion-col [size="3"] [offset="3"]
+          </ion-col>
+        </ion-row>
+
+        <ion-row>
+          <ion-col>
+            ion-col
+          </ion-col>
+          <ion-col>
+            ion-col
+            <br/>#
+          </ion-col>
+          <ion-col>
+            ion-col
+            <br/>#
+            <br/>#
+          </ion-col>
+          <ion-col>
+            ion-col
+            <br/>#
+            <br/>#
+            <br/>#
+          </ion-col>
+        </ion-row>
+
+        <ion-row>
+          <ion-col class="ion-align-self-start">
+            ion-col [start]
+          </ion-col>
+          <ion-col class="ion-align-self-center">
+            ion-col [center]
+          </ion-col>
+          <ion-col class="ion-align-self-end">
+            ion-col [end]
+          </ion-col>
+          <ion-col>
+            ion-col
+            <br/>#
+            <br/>#
+          </ion-col>
+        </ion-row>
+
+        <ion-row class="ion-align-items-start">
+          <ion-col>
+            [start] ion-col
+          </ion-col>
+          <ion-col>
+            [start] ion-col
+          </ion-col>
+          <ion-col class="ion-align-self-end">
+            [start] ion-col [end]
+          </ion-col>
+          <ion-col>
+            ion-col
+            <br/>#
+            <br/>#
+          </ion-col>
+        </ion-row>
+
+        <ion-row class="ion-align-items-center">
+          <ion-col>
+            [center] ion-col
+          </ion-col>
+          <ion-col>
+            [center] ion-col
+          </ion-col>
+          <ion-col>
+            [center] ion-col
+          </ion-col>
+          <ion-col>
+            ion-col
+            <br/>#
+            <br/>#
+          </ion-col>
+        </ion-row>
+
+        <ion-row class="ion-align-items-end">
+          <ion-col>
+            [end] ion-col
+          </ion-col>
+          <ion-col class="ion-align-self-start">
+            [end] ion-col [start]
+          </ion-col>
+          <ion-col>
+            [end] ion-col
+          </ion-col>
+          <ion-col>
+            ion-col
+            <br/>#
+            <br/>#
+          </ion-col>
+        </ion-row>
+
+        <ion-row>
+          <ion-col size="12" sizeSm="">
+            ion-col [size="12"] [sizeSm]
+          </ion-col>
+          <ion-col size="12" sizeSm="">
+            ion-col [size="12"] [sizeSm]
+          </ion-col>
+          <ion-col size="12" sizeSm="">
+            ion-col [size="12"] [sizeSm]
+          </ion-col>
+          <ion-col size="12" sizeSm="">
+            ion-col [size="12"] [sizeSm]
+          </ion-col>
+        </ion-row>
+
+        <ion-row>
+          <ion-col size="12" sizeMd="">
+            ion-col [size="12"] [sizeMd]
+          </ion-col>
+          <ion-col size="12" sizeMd="">
+            ion-col [size="12"] [sizeMd]
+          </ion-col>
+          <ion-col size="12" sizeMd="">
+            ion-col [size="12"] [sizeMd]
+          </ion-col>
+          <ion-col size="12" sizeMd="">
+            ion-col [size="12"] [sizeMd]
+          </ion-col>
+        </ion-row>
+
+        <ion-row>
+          <ion-col size="6" sizeLg="" offset="3">
+            ion-col [size="6"] [sizeLg] [offset="3"]
+          </ion-col>
+          <ion-col size="3" sizeLg="">
+            ion-col [size="3"] [sizeLg]
+          </ion-col>
+        </ion-row>
+      </ion-grid>
+    ];
+  }
+}
+```
diff --git a/core/src/components/header/readme.md b/core/src/components/header/readme.md
index 716687853f..ef87fbc0a7 100644
--- a/core/src/components/header/readme.md
+++ b/core/src/components/header/readme.md
@@ -83,6 +83,51 @@ export const HeaderExample: React.FC = () => (
 ```
 
 
+### Stencil
+
+```tsx
+import { Component, h } from '@stencil/core';
+
+@Component({
+  tag: 'header-example',
+  styleUrl: 'header-example.css'
+})
+export class HeaderExample {
+  render() {
+    return [
+      <ion-header>
+        <ion-toolbar>
+          <ion-buttons slot="start">
+            <ion-back-button></ion-back-button>
+          </ion-buttons>
+          <ion-title>My Navigation Bar</ion-title>
+        </ion-toolbar>
+
+        <ion-toolbar>
+          <ion-title>Subheader</ion-title>
+        </ion-toolbar>
+      </ion-header>,
+
+      // Header without a border
+      <ion-header class="ion-no-border">
+        <ion-toolbar>
+          <ion-title>Header - No Border</ion-title>
+        </ion-toolbar>
+      </ion-header>,
+
+      <ion-content>
+        <ion-header collapse="condense">
+          <ion-toolbar>
+            <ion-title size="large">My Navigation Bar</ion-title>
+          </ion-toolbar>
+        </ion-header>
+      </ion-content>
+    ];
+  }
+}
+```
+
+
 ### Vue
 
 ```html
diff --git a/core/src/components/header/usage/stencil.md b/core/src/components/header/usage/stencil.md
new file mode 100644
index 0000000000..8abf3618b2
--- /dev/null
+++ b/core/src/components/header/usage/stencil.md
@@ -0,0 +1,41 @@
+```tsx
+import { Component, h } from '@stencil/core';
+
+@Component({
+  tag: 'header-example',
+  styleUrl: 'header-example.css'
+})
+export class HeaderExample {
+  render() {
+    return [
+      <ion-header>
+        <ion-toolbar>
+          <ion-buttons slot="start">
+            <ion-back-button></ion-back-button>
+          </ion-buttons>
+          <ion-title>My Navigation Bar</ion-title>
+        </ion-toolbar>
+
+        <ion-toolbar>
+          <ion-title>Subheader</ion-title>
+        </ion-toolbar>
+      </ion-header>,
+
+      // Header without a border
+      <ion-header class="ion-no-border">
+        <ion-toolbar>
+          <ion-title>Header - No Border</ion-title>
+        </ion-toolbar>
+      </ion-header>,
+
+      <ion-content>
+        <ion-header collapse="condense">
+          <ion-toolbar>
+            <ion-title size="large">My Navigation Bar</ion-title>
+          </ion-toolbar>
+        </ion-header>
+      </ion-content>
+    ];
+  }
+}
+```
diff --git a/core/src/components/icon/usage/stencil.md b/core/src/components/icon/usage/stencil.md
new file mode 100644
index 0000000000..9022f3132c
--- /dev/null
+++ b/core/src/components/icon/usage/stencil.md
@@ -0,0 +1,26 @@
+```tsx
+import { Component, h } from '@stencil/core';
+
+@Component({
+  tag: 'icon-example',
+  styleUrl: 'icon-example.css'
+})
+export class IconExample {
+  render() {
+    return [
+      // uses "star" icon for both modes
+      <ion-icon name="star"></ion-icon>,
+
+      // explicitly set the icon for each mode
+      <ion-icon ios="home" md="star"></ion-icon>,
+
+      // use a custom svg icon
+      <ion-icon src="/path/to/external/file.svg"></ion-icon>,
+
+      // set the icon size
+      <ion-icon size="small" name="heart"></ion-icon>,
+      <ion-icon size="large" name="heart"></ion-icon>
+    ];
+  }
+}
+```
diff --git a/core/src/components/img/readme.md b/core/src/components/img/readme.md
index 362d07a65f..26be240884 100644
--- a/core/src/components/img/readme.md
+++ b/core/src/components/img/readme.md
@@ -51,6 +51,45 @@ export const ImgExample: React.FC = () => (
 ```
 
 
+### Stencil
+
+```tsx
+import { Component, h } from '@stencil/core';
+
+@Component({
+  tag: 'img-example',
+  styleUrl: 'img-example.css'
+})
+export class ImgExample {
+  private items = [{
+    'text': 'Item 1',
+    'src': '/path/to/external/file.png'
+  }, {
+    'text': 'Item 2',
+    'src': '/path/to/external/file.png'
+  }, {
+    'text': 'Item 3',
+    'src': '/path/to/external/file.png'
+  }];
+
+  render() {
+    return [
+      <ion-list>
+        {this.items.map(item =>
+          <ion-item>
+            <ion-thumbnail slot="start">
+              <ion-img src={item.src}></ion-img>
+            </ion-thumbnail>
+            <ion-label>{item.text}</ion-label>
+          </ion-item>
+        )}
+      </ion-list>
+    ];
+  }
+}
+```
+
+
 ### Vue
 
 ```html
diff --git a/core/src/components/img/usage/stencil.md b/core/src/components/img/usage/stencil.md
new file mode 100644
index 0000000000..2f14878da5
--- /dev/null
+++ b/core/src/components/img/usage/stencil.md
@@ -0,0 +1,35 @@
+```tsx
+import { Component, h } from '@stencil/core';
+
+@Component({
+  tag: 'img-example',
+  styleUrl: 'img-example.css'
+})
+export class ImgExample {
+  private items = [{
+    'text': 'Item 1',
+    'src': '/path/to/external/file.png'
+  }, {
+    'text': 'Item 2',
+    'src': '/path/to/external/file.png'
+  }, {
+    'text': 'Item 3',
+    'src': '/path/to/external/file.png'
+  }];
+
+  render() {
+    return [
+      <ion-list>
+        {this.items.map(item =>
+          <ion-item>
+            <ion-thumbnail slot="start">
+              <ion-img src={item.src}></ion-img>
+            </ion-thumbnail>
+            <ion-label>{item.text}</ion-label>
+          </ion-item>
+        )}
+      </ion-list>
+    ];
+  }
+}
+```
\ No newline at end of file
diff --git a/core/src/components/infinite-scroll-content/readme.md b/core/src/components/infinite-scroll-content/readme.md
index 96dcbf08a0..ddef2f08bb 100644
--- a/core/src/components/infinite-scroll-content/readme.md
+++ b/core/src/components/infinite-scroll-content/readme.md
@@ -39,6 +39,32 @@ The `ion-infinite-scroll-content` component is not supported in React.
 ```
 
 
+### Stencil
+
+```tsx
+import { Component, h } from '@stencil/core';
+
+@Component({
+  tag: 'infinite-scroll-content-example',
+  styleUrl: 'infinite-scroll-content-example.css'
+})
+export class InfiniteScrollContentExample {
+  render() {
+    return [
+      <ion-content>
+        <ion-infinite-scroll>
+          <ion-infinite-scroll-content
+            loadingSpinner="bubbles"
+            loadingText="Loading more data...">
+          </ion-infinite-scroll-content>
+        </ion-infinite-scroll>
+      </ion-content>
+    ];
+  }
+}
+```
+
+
 ### Vue
 
 ```html
diff --git a/core/src/components/infinite-scroll-content/usage/stencil.md b/core/src/components/infinite-scroll-content/usage/stencil.md
new file mode 100644
index 0000000000..9eeae1fb85
--- /dev/null
+++ b/core/src/components/infinite-scroll-content/usage/stencil.md
@@ -0,0 +1,22 @@
+```tsx
+import { Component, h } from '@stencil/core';
+
+@Component({
+  tag: 'infinite-scroll-content-example',
+  styleUrl: 'infinite-scroll-content-example.css'
+})
+export class InfiniteScrollContentExample {
+  render() {
+    return [
+      <ion-content>
+        <ion-infinite-scroll>
+          <ion-infinite-scroll-content
+            loadingSpinner="bubbles"
+            loadingText="Loading more data...">
+          </ion-infinite-scroll-content>
+        </ion-infinite-scroll>
+      </ion-content>
+    ];
+  }
+}
+```
\ No newline at end of file
diff --git a/core/src/components/infinite-scroll/readme.md b/core/src/components/infinite-scroll/readme.md
index b51e71aae3..69f21c9a63 100644
--- a/core/src/components/infinite-scroll/readme.md
+++ b/core/src/components/infinite-scroll/readme.md
@@ -115,6 +115,88 @@ function toggleInfiniteScroll() {
 ```
 
 
+### Stencil
+
+```tsx
+import { Component, State, h } from '@stencil/core';
+
+@Component({
+  tag: 'infinite-scroll-example',
+  styleUrl: 'infinite-scroll-example.css'
+})
+export class InfiniteScrollExample {
+  private infiniteScroll: HTMLIonInfiniteScrollElement;
+
+  @State() data = [];
+
+  componentWillLoad() {
+    this.pushData();
+  }
+
+  pushData() {
+    const max = this.data.length + 20;
+    const min = max - 20;
+
+    for (var i = min; i < max; i++) {
+      this.data.push('Item ' + i);
+    }
+
+    // Stencil does not re-render when pushing to an array
+    // so create a new copy of the array
+    // https://stenciljs.com/docs/reactive-data#handling-arrays-and-objects
+    this.data = [
+      ...this.data
+    ];
+  }
+
+  loadData(ev) {
+    setTimeout(() => {
+      this.pushData();
+      console.log('Loaded data');
+      ev.target.complete();
+
+      // App logic to determine if all data is loaded
+      // and disable the infinite scroll
+      if (this.data.length == 1000) {
+        ev.target.disabled = true;
+      }
+    }, 500);
+  }
+
+  toggleInfiniteScroll() {
+    this.infiniteScroll.disabled = !this.infiniteScroll.disabled;
+  }
+
+  render() {
+    return [
+      <ion-content>
+        <ion-button onClick={() => this.toggleInfiniteScroll()} expand="block">
+          Toggle Infinite Scroll
+        </ion-button>
+
+        <ion-list>
+          {this.data.map(item =>
+            <ion-item>
+              <ion-label>{item}</ion-label>
+            </ion-item>
+          )}
+        </ion-list>
+
+        <ion-infinite-scroll
+          ref={el => this.infiniteScroll = el}
+          onIonInfinite={(ev) => this.loadData(ev)}>
+          <ion-infinite-scroll-content
+            loadingSpinner="bubbles"
+            loadingText="Loading more data...">
+          </ion-infinite-scroll-content>
+        </ion-infinite-scroll>
+      </ion-content>
+    ];
+  }
+}
+```
+
+
 
 ## Properties
 
diff --git a/core/src/components/infinite-scroll/usage/stencil.md b/core/src/components/infinite-scroll/usage/stencil.md
new file mode 100644
index 0000000000..fdf570da48
--- /dev/null
+++ b/core/src/components/infinite-scroll/usage/stencil.md
@@ -0,0 +1,78 @@
+```tsx
+import { Component, State, h } from '@stencil/core';
+
+@Component({
+  tag: 'infinite-scroll-example',
+  styleUrl: 'infinite-scroll-example.css'
+})
+export class InfiniteScrollExample {
+  private infiniteScroll: HTMLIonInfiniteScrollElement;
+
+  @State() data = [];
+
+  componentWillLoad() {
+    this.pushData();
+  }
+
+  pushData() {
+    const max = this.data.length + 20;
+    const min = max - 20;
+
+    for (var i = min; i < max; i++) {
+      this.data.push('Item ' + i);
+    }
+
+    // Stencil does not re-render when pushing to an array
+    // so create a new copy of the array
+    // https://stenciljs.com/docs/reactive-data#handling-arrays-and-objects
+    this.data = [
+      ...this.data
+    ];
+  }
+
+  loadData(ev) {
+    setTimeout(() => {
+      this.pushData();
+      console.log('Loaded data');
+      ev.target.complete();
+
+      // App logic to determine if all data is loaded
+      // and disable the infinite scroll
+      if (this.data.length == 1000) {
+        ev.target.disabled = true;
+      }
+    }, 500);
+  }
+
+  toggleInfiniteScroll() {
+    this.infiniteScroll.disabled = !this.infiniteScroll.disabled;
+  }
+
+  render() {
+    return [
+      <ion-content>
+        <ion-button onClick={() => this.toggleInfiniteScroll()} expand="block">
+          Toggle Infinite Scroll
+        </ion-button>
+
+        <ion-list>
+          {this.data.map(item =>
+            <ion-item>
+              <ion-label>{item}</ion-label>
+            </ion-item>
+          )}
+        </ion-list>
+
+        <ion-infinite-scroll
+          ref={el => this.infiniteScroll = el}
+          onIonInfinite={(ev) => this.loadData(ev)}>
+          <ion-infinite-scroll-content
+            loadingSpinner="bubbles"
+            loadingText="Loading more data...">
+          </ion-infinite-scroll-content>
+        </ion-infinite-scroll>
+      </ion-content>
+    ];
+  }
+}
+```
\ No newline at end of file
diff --git a/core/src/components/input/readme.md b/core/src/components/input/readme.md
index 25c62404da..abbada54db 100644
--- a/core/src/components/input/readme.md
+++ b/core/src/components/input/readme.md
@@ -178,6 +178,65 @@ export const InputExamples: React.FC = () => {
 ```
 
 
+### Stencil
+
+```tsx
+import { Component, h } from '@stencil/core';
+
+@Component({
+  tag: 'input-example',
+  styleUrl: 'input-example.css'
+})
+export class InputExample {
+  render() {
+    return [
+      // Default Input
+      <ion-input></ion-input>,
+
+      // Input with value
+      <ion-input value="custom"></ion-input>,
+
+      // Input with placeholder
+      <ion-input placeholder="Enter Input"></ion-input>,
+
+      // Input with clear button when there is a value
+      <ion-input clearInput value="clear me"></ion-input>,
+
+      // Number type input
+      <ion-input type="number" value="333"></ion-input>,
+
+      // Disabled input
+      <ion-input value="Disabled" disabled></ion-input>,
+
+      // Readonly input
+      <ion-input value="Readonly" readonly></ion-input>,
+
+      // Inputs with labels
+      <ion-item>
+        <ion-label>Default Label</ion-label>
+        <ion-input></ion-input>
+      </ion-item>,
+
+      <ion-item>
+        <ion-label position="floating">Floating Label</ion-label>
+        <ion-input></ion-input>
+      </ion-item>,
+
+      <ion-item>
+        <ion-label position="fixed">Fixed Label</ion-label>
+        <ion-input></ion-input>
+      </ion-item>,
+
+      <ion-item>
+        <ion-label position="stacked">Stacked Label</ion-label>
+        <ion-input></ion-input>
+      </ion-item>
+    ];
+  }
+}
+```
+
+
 ### Vue
 
 ```html
diff --git a/core/src/components/input/usage/stencil.md b/core/src/components/input/usage/stencil.md
new file mode 100644
index 0000000000..78982fb9ce
--- /dev/null
+++ b/core/src/components/input/usage/stencil.md
@@ -0,0 +1,55 @@
+```tsx
+import { Component, h } from '@stencil/core';
+
+@Component({
+  tag: 'input-example',
+  styleUrl: 'input-example.css'
+})
+export class InputExample {
+  render() {
+    return [
+      // Default Input
+      <ion-input></ion-input>,
+
+      // Input with value
+      <ion-input value="custom"></ion-input>,
+
+      // Input with placeholder
+      <ion-input placeholder="Enter Input"></ion-input>,
+
+      // Input with clear button when there is a value
+      <ion-input clearInput value="clear me"></ion-input>,
+
+      // Number type input
+      <ion-input type="number" value="333"></ion-input>,
+
+      // Disabled input
+      <ion-input value="Disabled" disabled></ion-input>,
+
+      // Readonly input
+      <ion-input value="Readonly" readonly></ion-input>,
+
+      // Inputs with labels
+      <ion-item>
+        <ion-label>Default Label</ion-label>
+        <ion-input></ion-input>
+      </ion-item>,
+
+      <ion-item>
+        <ion-label position="floating">Floating Label</ion-label>
+        <ion-input></ion-input>
+      </ion-item>,
+
+      <ion-item>
+        <ion-label position="fixed">Fixed Label</ion-label>
+        <ion-input></ion-input>
+      </ion-item>,
+
+      <ion-item>
+        <ion-label position="stacked">Stacked Label</ion-label>
+        <ion-input></ion-input>
+      </ion-item>
+    ];
+  }
+}
+```
\ No newline at end of file
diff --git a/core/src/components/item-divider/readme.md b/core/src/components/item-divider/readme.md
index 19462cfe88..1ec6eab96b 100644
--- a/core/src/components/item-divider/readme.md
+++ b/core/src/components/item-divider/readme.md
@@ -102,6 +102,62 @@ export const ItemDividerExample: React.FC = () => (
 ```
 
 
+### Stencil
+
+```tsx
+import { Component, h } from '@stencil/core';
+
+@Component({
+  tag: 'item-divider-example',
+  styleUrl: 'item-divider-example.css'
+})
+export class ItemDividerExample {
+  render() {
+    return [
+      <ion-item-divider>
+        <ion-label>
+          Basic Item Divider
+        </ion-label>
+      </ion-item-divider>,
+
+      <ion-item-divider color="secondary">
+        <ion-label>
+          Secondary Item Divider
+        </ion-label>
+      </ion-item-divider>,
+
+      //  Item Dividers in a List
+      <ion-list>
+        <ion-item-divider>
+          <ion-label>
+            Section A
+          </ion-label>
+        </ion-item-divider>
+
+        <ion-item><ion-label>A1</ion-label></ion-item>
+        <ion-item><ion-label>A2</ion-label></ion-item>
+        <ion-item><ion-label>A3</ion-label></ion-item>
+        <ion-item><ion-label>A4</ion-label></ion-item>
+        <ion-item><ion-label>A5</ion-label></ion-item>
+
+        <ion-item-divider>
+          <ion-label>
+            Section B
+          </ion-label>
+        </ion-item-divider>
+
+        <ion-item><ion-label>B1</ion-label></ion-item>
+        <ion-item><ion-label>B2</ion-label></ion-item>
+        <ion-item><ion-label>B3</ion-label></ion-item>
+        <ion-item><ion-label>B4</ion-label></ion-item>
+        <ion-item><ion-label>B5</ion-label></ion-item>
+      </ion-list>
+    ];
+  }
+}
+```
+
+
 ### Vue
 
 ```html
diff --git a/core/src/components/item-divider/usage/stencil.md b/core/src/components/item-divider/usage/stencil.md
new file mode 100644
index 0000000000..16b26cf6d2
--- /dev/null
+++ b/core/src/components/item-divider/usage/stencil.md
@@ -0,0 +1,52 @@
+```tsx
+import { Component, h } from '@stencil/core';
+
+@Component({
+  tag: 'item-divider-example',
+  styleUrl: 'item-divider-example.css'
+})
+export class ItemDividerExample {
+  render() {
+    return [
+      <ion-item-divider>
+        <ion-label>
+          Basic Item Divider
+        </ion-label>
+      </ion-item-divider>,
+
+      <ion-item-divider color="secondary">
+        <ion-label>
+          Secondary Item Divider
+        </ion-label>
+      </ion-item-divider>,
+
+      //  Item Dividers in a List
+      <ion-list>
+        <ion-item-divider>
+          <ion-label>
+            Section A
+          </ion-label>
+        </ion-item-divider>
+
+        <ion-item><ion-label>A1</ion-label></ion-item>
+        <ion-item><ion-label>A2</ion-label></ion-item>
+        <ion-item><ion-label>A3</ion-label></ion-item>
+        <ion-item><ion-label>A4</ion-label></ion-item>
+        <ion-item><ion-label>A5</ion-label></ion-item>
+
+        <ion-item-divider>
+          <ion-label>
+            Section B
+          </ion-label>
+        </ion-item-divider>
+
+        <ion-item><ion-label>B1</ion-label></ion-item>
+        <ion-item><ion-label>B2</ion-label></ion-item>
+        <ion-item><ion-label>B3</ion-label></ion-item>
+        <ion-item><ion-label>B4</ion-label></ion-item>
+        <ion-item><ion-label>B5</ion-label></ion-item>
+      </ion-list>
+    ];
+  }
+}
+```
\ No newline at end of file
diff --git a/core/src/components/item-group/readme.md b/core/src/components/item-group/readme.md
index 3a8afbf48d..d3c27f2e64 100644
--- a/core/src/components/item-group/readme.md
+++ b/core/src/components/item-group/readme.md
@@ -234,6 +234,125 @@ export default Example;
 ```
 
 
+### Stencil
+
+```tsx
+import { Component, h } from '@stencil/core';
+
+@Component({
+  tag: 'item-group-example',
+  styleUrl: 'item-group-example.css'
+})
+export class ItemGroupExample {
+  render() {
+    return [
+      <ion-item-group>
+        <ion-item-divider>
+          <ion-label>A</ion-label>
+        </ion-item-divider>
+
+        <ion-item>
+          <ion-label>Angola</ion-label>
+        </ion-item>
+        <ion-item>
+          <ion-label>Argentina</ion-label>
+        </ion-item>
+        <ion-item>
+          <ion-label>Armenia</ion-label>
+        </ion-item>
+      </ion-item-group>
+
+      <ion-item-group>
+        <ion-item-divider>
+          <ion-label>B</ion-label>
+        </ion-item-divider>
+
+        <ion-item>
+          <ion-label>Bangladesh</ion-label>
+        </ion-item>
+        <ion-item>
+          <ion-label>Belarus</ion-label>
+        </ion-item>
+        <ion-item>
+          <ion-label>Belgium</ion-label>
+        </ion-item>
+      </ion-item-group>
+
+
+      // They can also be used to group sliding items
+      <ion-item-group>
+        <ion-item-divider>
+          <ion-label>
+            Fruits
+          </ion-label>
+        </ion-item-divider>
+
+        <ion-item-sliding>
+          <ion-item>
+            <ion-label>
+              <h3>Grapes</h3>
+            </ion-label>
+          </ion-item>
+          <ion-item-options>
+            <ion-item-option>
+              Favorite
+            </ion-item-option>
+          </ion-item-options>
+        </ion-item-sliding>
+
+        <ion-item-sliding>
+          <ion-item>
+            <ion-label>
+              <h3>Apples</h3>
+            </ion-label>
+          </ion-item>
+          <ion-item-options>
+            <ion-item-option>
+              Favorite
+            </ion-item-option>
+          </ion-item-options>
+        </ion-item-sliding>
+      </ion-item-group>
+
+      <ion-item-group>
+        <ion-item-divider>
+          <ion-label>
+            Vegetables
+          </ion-label>
+        </ion-item-divider>
+
+        <ion-item-sliding>
+          <ion-item>
+            <ion-label>
+              <h3>Carrots</h3>
+            </ion-label>
+          </ion-item>
+          <ion-item-options>
+            <ion-item-option>
+              Favorite
+            </ion-item-option>
+          </ion-item-options>
+        </ion-item-sliding>
+
+        <ion-item-sliding>
+          <ion-item>
+            <ion-label>
+              <h3>Celery</h3>
+            </ion-label>
+          </ion-item>
+          <ion-item-options>
+            <ion-item-option>
+              Favorite
+            </ion-item-option>
+          </ion-item-options>
+        </ion-item-sliding>
+      </ion-item-group>
+    ];
+  }
+}
+```
+
+
 ### Vue
 
 ```html
diff --git a/core/src/components/item-group/usage/stencil.md b/core/src/components/item-group/usage/stencil.md
new file mode 100644
index 0000000000..e4cc2e435d
--- /dev/null
+++ b/core/src/components/item-group/usage/stencil.md
@@ -0,0 +1,115 @@
+```tsx
+import { Component, h } from '@stencil/core';
+
+@Component({
+  tag: 'item-group-example',
+  styleUrl: 'item-group-example.css'
+})
+export class ItemGroupExample {
+  render() {
+    return [
+      <ion-item-group>
+        <ion-item-divider>
+          <ion-label>A</ion-label>
+        </ion-item-divider>
+
+        <ion-item>
+          <ion-label>Angola</ion-label>
+        </ion-item>
+        <ion-item>
+          <ion-label>Argentina</ion-label>
+        </ion-item>
+        <ion-item>
+          <ion-label>Armenia</ion-label>
+        </ion-item>
+      </ion-item-group>
+
+      <ion-item-group>
+        <ion-item-divider>
+          <ion-label>B</ion-label>
+        </ion-item-divider>
+
+        <ion-item>
+          <ion-label>Bangladesh</ion-label>
+        </ion-item>
+        <ion-item>
+          <ion-label>Belarus</ion-label>
+        </ion-item>
+        <ion-item>
+          <ion-label>Belgium</ion-label>
+        </ion-item>
+      </ion-item-group>
+
+
+      // They can also be used to group sliding items
+      <ion-item-group>
+        <ion-item-divider>
+          <ion-label>
+            Fruits
+          </ion-label>
+        </ion-item-divider>
+
+        <ion-item-sliding>
+          <ion-item>
+            <ion-label>
+              <h3>Grapes</h3>
+            </ion-label>
+          </ion-item>
+          <ion-item-options>
+            <ion-item-option>
+              Favorite
+            </ion-item-option>
+          </ion-item-options>
+        </ion-item-sliding>
+
+        <ion-item-sliding>
+          <ion-item>
+            <ion-label>
+              <h3>Apples</h3>
+            </ion-label>
+          </ion-item>
+          <ion-item-options>
+            <ion-item-option>
+              Favorite
+            </ion-item-option>
+          </ion-item-options>
+        </ion-item-sliding>
+      </ion-item-group>
+
+      <ion-item-group>
+        <ion-item-divider>
+          <ion-label>
+            Vegetables
+          </ion-label>
+        </ion-item-divider>
+
+        <ion-item-sliding>
+          <ion-item>
+            <ion-label>
+              <h3>Carrots</h3>
+            </ion-label>
+          </ion-item>
+          <ion-item-options>
+            <ion-item-option>
+              Favorite
+            </ion-item-option>
+          </ion-item-options>
+        </ion-item-sliding>
+
+        <ion-item-sliding>
+          <ion-item>
+            <ion-label>
+              <h3>Celery</h3>
+            </ion-label>
+          </ion-item>
+          <ion-item-options>
+            <ion-item-option>
+              Favorite
+            </ion-item-option>
+          </ion-item-options>
+        </ion-item-sliding>
+      </ion-item-group>
+    ];
+  }
+}
+```
\ No newline at end of file
diff --git a/core/src/components/item-sliding/readme.md b/core/src/components/item-sliding/readme.md
index 974a655658..4110b00bfa 100644
--- a/core/src/components/item-sliding/readme.md
+++ b/core/src/components/item-sliding/readme.md
@@ -331,6 +331,8 @@ Options can be expanded to take up the full width of the item if you swipe past
 import React from 'react';
 import { IonList, IonItemSliding, IonItem, IonLabel, IonItemOptions, IonItemOption, IonIcon, IonNote } from '@ionic/react';
 
+import { heart, trash, star, archive, ellipsisHorizontal, ellipsisVertical } from 'ionicons/icons';
+
 export const ItemSlidingExample: React.FC = () => (
 <IonList>
   {/* Sliding item with text options on both sides */}
@@ -383,16 +385,16 @@ export const ItemSlidingExample: React.FC = () => (
 
     <IonItemOptions side="start">
       <IonItemOption>
-        <IonIcon slot="icon-only" name="heart"></IonIcon>
+        <IonIcon slot="icon-only" icon={heart} />
       </IonItemOption>
     </IonItemOptions>
 
     <IonItemOptions side="end">
       <IonItemOption color="danger">
-        <IonIcon slot="icon-only" name="trash"></IonIcon>
+        <IonIcon slot="icon-only" icon={trash} />
       </IonItemOption>
       <IonItemOption>
-        <IonIcon slot="icon-only" name="star"></IonIcon>
+        <IonIcon slot="icon-only" icon={star} />
       </IonItemOption>
     </IonItemOptions>
   </IonItemSliding>
@@ -406,11 +408,11 @@ export const ItemSlidingExample: React.FC = () => (
     </IonItem>
     <IonItemOptions>
       <IonItemOption color="primary">
-        <IonIcon slot="start" ios="ellipsis-horizontal" md="ellipsis-vertical"></IonIcon>
+        <IonIcon slot="start" ios={ellipsisHorizontal} md={ellipsisVertical}></IonIcon>
         More
       </IonItemOption>
       <IonItemOption color="secondary">
-        <IonIcon slot="start" name="archive"></IonIcon>
+        <IonIcon slot="start" icon={archive} />
         Archive
       </IonItemOption>
     </IonItemOptions>
@@ -425,11 +427,11 @@ export const ItemSlidingExample: React.FC = () => (
     </IonItem>
     <IonItemOptions>
       <IonItemOption color="primary">
-        <IonIcon slot="end" ios="ellipsis-horizontal" md="ellipsis-vertical"></IonIcon>
+        <IonIcon slot="end" ios={ellipsisHorizontal} md={ellipsisVertical}></IonIcon>
         More
       </IonItemOption>
       <IonItemOption color="secondary">
-        <IonIcon slot="end" name="archive"></IonIcon>
+        <IonIcon slot="end" icon={archive} />
         Archive
       </IonItemOption>
     </IonItemOptions>
@@ -444,11 +446,11 @@ export const ItemSlidingExample: React.FC = () => (
     </IonItem>
     <IonItemOptions>
       <IonItemOption color="primary">
-        <IonIcon slot="top" ios="ellipsis-horizontal" md="ellipsis-vertical"></IonIcon>
+        <IonIcon slot="top" ios={ellipsisHorizontal} md={ellipsisVertical}></IonIcon>
         More
       </IonItemOption>
       <IonItemOption color="secondary">
-        <IonIcon slot="top" name="archive"></IonIcon>
+        <IonIcon slot="top" icon={archive} />
         Archive
       </IonItemOption>
     </IonItemOptions>
@@ -463,11 +465,11 @@ export const ItemSlidingExample: React.FC = () => (
     </IonItem>
     <IonItemOptions>
       <IonItemOption color="primary">
-        <IonIcon slot="bottom" ios="ellipsis-horizontal" md="ellipsis-vertical"></IonIcon>
+        <IonIcon slot="bottom" ios={ellipsisHorizontal} md={ellipsisVertical}></IonIcon>
         More
       </IonItemOption>
       <IonItemOption color="secondary">
-        <IonIcon slot="bottom" name="archive"></IonIcon>
+        <IonIcon slot="bottom" icon={archive} />
         Archive
       </IonItemOption>
     </IonItemOptions>
@@ -477,6 +479,177 @@ export const ItemSlidingExample: React.FC = () => (
 ```
 
 
+### Stencil
+
+```tsx
+import { Component, h } from '@stencil/core';
+
+@Component({
+  tag: 'item-sliding-example',
+  styleUrl: 'item-sliding-example.css'
+})
+export class ItemSlidingExample {
+  favorite(ev: any) {
+    console.log('Favorite clicked', ev);
+  }
+
+  share(ev: any) {
+    console.log('Favorite clicked', ev);
+  }
+
+  unread(ev: any) {
+    console.log('Favorite clicked', ev);
+  }
+
+  render() {
+    return [
+      <ion-list>
+        {/* Sliding item with text options on both sides */}
+        <ion-item-sliding>
+          <ion-item-options side="start">
+            <ion-item-option onClick={(ev) => this.favorite(ev)}>Favorite</ion-item-option>
+            <ion-item-option color="danger" onClick={(ev) => this.share(ev)}>Share</ion-item-option>
+          </ion-item-options>
+
+          <ion-item>
+            <ion-label>Item Options</ion-label>
+          </ion-item>
+
+          <ion-item-options side="end">
+            <ion-item-option onClick={(ev) => this.unread(ev)}>Unread</ion-item-option>
+          </ion-item-options>
+        </ion-item-sliding>
+
+        {/* Sliding item with expandable options on both sides */}
+        <ion-item-sliding>
+          <ion-item-options side="start">
+            <ion-item-option color="danger" expandable>
+              Delete
+            </ion-item-option>
+          </ion-item-options>
+
+          <ion-item>
+            <ion-label>Expandable Options</ion-label>
+          </ion-item>
+
+          <ion-item-options side="end">
+            <ion-item-option color="tertiary" expandable>
+              Archive
+            </ion-item-option>
+          </ion-item-options>
+        </ion-item-sliding>
+
+        {/* Multi-line sliding item with icon options on both sides */}
+        <ion-item-sliding id="item100">
+          <ion-item href="#">
+            <ion-label>
+              <h2>HubStruck Notifications</h2>
+              <p>A new message in your network</p>
+              <p>Oceanic Next has joined your network</p>
+            </ion-label>
+            <ion-note slot="end">
+              10:45 AM
+            </ion-note>
+          </ion-item>
+
+          <ion-item-options side="start">
+            <ion-item-option>
+              <ion-icon slot="icon-only" name="heart"></ion-icon>
+            </ion-item-option>
+          </ion-item-options>
+
+          <ion-item-options side="end">
+            <ion-item-option color="danger">
+              <ion-icon slot="icon-only" name="trash"></ion-icon>
+            </ion-item-option>
+            <ion-item-option>
+              <ion-icon slot="icon-only" name="star"></ion-icon>
+            </ion-item-option>
+          </ion-item-options>
+        </ion-item-sliding>
+
+        {/* Sliding item with icon start options on end side */}
+        <ion-item-sliding>
+          <ion-item>
+            <ion-label>
+              Sliding Item, Icons Start
+            </ion-label>
+          </ion-item>
+          <ion-item-options>
+            <ion-item-option color="primary">
+              <ion-icon slot="start" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
+              More
+            </ion-item-option>
+            <ion-item-option color="secondary">
+              <ion-icon slot="start" name="archive"></ion-icon>
+              Archive
+            </ion-item-option>
+          </ion-item-options>
+        </ion-item-sliding>
+
+        {/* Sliding item with icon end options on end side */}
+        <ion-item-sliding>
+          <ion-item>
+            <ion-label>
+              Sliding Item, Icons End
+            </ion-label>
+          </ion-item>
+          <ion-item-options>
+            <ion-item-option color="primary">
+              <ion-icon slot="end" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
+              More
+            </ion-item-option>
+            <ion-item-option color="secondary">
+              <ion-icon slot="end" name="archive"></ion-icon>
+              Archive
+            </ion-item-option>
+          </ion-item-options>
+        </ion-item-sliding>
+
+        {/* Sliding item with icon top options on end side */}
+        <ion-item-sliding>
+          <ion-item>
+            <ion-label>
+              Sliding Item, Icons Top
+            </ion-label>
+          </ion-item>
+          <ion-item-options>
+            <ion-item-option color="primary">
+              <ion-icon slot="top" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
+              More
+            </ion-item-option>
+            <ion-item-option color="secondary">
+              <ion-icon slot="top" name="archive"></ion-icon>
+              Archive
+            </ion-item-option>
+          </ion-item-options>
+        </ion-item-sliding>
+
+        {/* Sliding item with icon bottom options on end side */}
+        <ion-item-sliding>
+          <ion-item>
+            <ion-label>
+              Sliding Item, Icons Bottom
+            </ion-label>
+          </ion-item>
+          <ion-item-options>
+            <ion-item-option color="primary">
+              <ion-icon slot="bottom" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
+              More
+            </ion-item-option>
+            <ion-item-option color="secondary">
+              <ion-icon slot="bottom" name="archive"></ion-icon>
+              Archive
+            </ion-item-option>
+          </ion-item-options>
+        </ion-item-sliding>
+      </ion-list>
+    ];
+  }
+}
+```
+
+
 ### Vue
 
 ```html
diff --git a/core/src/components/item-sliding/usage/react.md b/core/src/components/item-sliding/usage/react.md
index 08ceb726d0..d9fe0f0311 100644
--- a/core/src/components/item-sliding/usage/react.md
+++ b/core/src/components/item-sliding/usage/react.md
@@ -2,6 +2,8 @@
 import React from 'react';
 import { IonList, IonItemSliding, IonItem, IonLabel, IonItemOptions, IonItemOption, IonIcon, IonNote } from '@ionic/react';
 
+import { heart, trash, star, archive, ellipsisHorizontal, ellipsisVertical } from 'ionicons/icons';
+
 export const ItemSlidingExample: React.FC = () => (
 <IonList>
   {/* Sliding item with text options on both sides */}
@@ -54,16 +56,16 @@ export const ItemSlidingExample: React.FC = () => (
 
     <IonItemOptions side="start">
       <IonItemOption>
-        <IonIcon slot="icon-only" name="heart"></IonIcon>
+        <IonIcon slot="icon-only" icon={heart} />
       </IonItemOption>
     </IonItemOptions>
 
     <IonItemOptions side="end">
       <IonItemOption color="danger">
-        <IonIcon slot="icon-only" name="trash"></IonIcon>
+        <IonIcon slot="icon-only" icon={trash} />
       </IonItemOption>
       <IonItemOption>
-        <IonIcon slot="icon-only" name="star"></IonIcon>
+        <IonIcon slot="icon-only" icon={star} />
       </IonItemOption>
     </IonItemOptions>
   </IonItemSliding>
@@ -77,11 +79,11 @@ export const ItemSlidingExample: React.FC = () => (
     </IonItem>
     <IonItemOptions>
       <IonItemOption color="primary">
-        <IonIcon slot="start" ios="ellipsis-horizontal" md="ellipsis-vertical"></IonIcon>
+        <IonIcon slot="start" ios={ellipsisHorizontal} md={ellipsisVertical}></IonIcon>
         More
       </IonItemOption>
       <IonItemOption color="secondary">
-        <IonIcon slot="start" name="archive"></IonIcon>
+        <IonIcon slot="start" icon={archive} />
         Archive
       </IonItemOption>
     </IonItemOptions>
@@ -96,11 +98,11 @@ export const ItemSlidingExample: React.FC = () => (
     </IonItem>
     <IonItemOptions>
       <IonItemOption color="primary">
-        <IonIcon slot="end" ios="ellipsis-horizontal" md="ellipsis-vertical"></IonIcon>
+        <IonIcon slot="end" ios={ellipsisHorizontal} md={ellipsisVertical}></IonIcon>
         More
       </IonItemOption>
       <IonItemOption color="secondary">
-        <IonIcon slot="end" name="archive"></IonIcon>
+        <IonIcon slot="end" icon={archive} />
         Archive
       </IonItemOption>
     </IonItemOptions>
@@ -115,11 +117,11 @@ export const ItemSlidingExample: React.FC = () => (
     </IonItem>
     <IonItemOptions>
       <IonItemOption color="primary">
-        <IonIcon slot="top" ios="ellipsis-horizontal" md="ellipsis-vertical"></IonIcon>
+        <IonIcon slot="top" ios={ellipsisHorizontal} md={ellipsisVertical}></IonIcon>
         More
       </IonItemOption>
       <IonItemOption color="secondary">
-        <IonIcon slot="top" name="archive"></IonIcon>
+        <IonIcon slot="top" icon={archive} />
         Archive
       </IonItemOption>
     </IonItemOptions>
@@ -134,11 +136,11 @@ export const ItemSlidingExample: React.FC = () => (
     </IonItem>
     <IonItemOptions>
       <IonItemOption color="primary">
-        <IonIcon slot="bottom" ios="ellipsis-horizontal" md="ellipsis-vertical"></IonIcon>
+        <IonIcon slot="bottom" ios={ellipsisHorizontal} md={ellipsisVertical}></IonIcon>
         More
       </IonItemOption>
       <IonItemOption color="secondary">
-        <IonIcon slot="bottom" name="archive"></IonIcon>
+        <IonIcon slot="bottom" icon={archive} />
         Archive
       </IonItemOption>
     </IonItemOptions>
diff --git a/core/src/components/item-sliding/usage/stencil.md b/core/src/components/item-sliding/usage/stencil.md
new file mode 100644
index 0000000000..e697083933
--- /dev/null
+++ b/core/src/components/item-sliding/usage/stencil.md
@@ -0,0 +1,167 @@
+```tsx
+import { Component, h } from '@stencil/core';
+
+@Component({
+  tag: 'item-sliding-example',
+  styleUrl: 'item-sliding-example.css'
+})
+export class ItemSlidingExample {
+  favorite(ev: any) {
+    console.log('Favorite clicked', ev);
+  }
+
+  share(ev: any) {
+    console.log('Favorite clicked', ev);
+  }
+
+  unread(ev: any) {
+    console.log('Favorite clicked', ev);
+  }
+
+  render() {
+    return [
+      <ion-list>
+        {/* Sliding item with text options on both sides */}
+        <ion-item-sliding>
+          <ion-item-options side="start">
+            <ion-item-option onClick={(ev) => this.favorite(ev)}>Favorite</ion-item-option>
+            <ion-item-option color="danger" onClick={(ev) => this.share(ev)}>Share</ion-item-option>
+          </ion-item-options>
+
+          <ion-item>
+            <ion-label>Item Options</ion-label>
+          </ion-item>
+
+          <ion-item-options side="end">
+            <ion-item-option onClick={(ev) => this.unread(ev)}>Unread</ion-item-option>
+          </ion-item-options>
+        </ion-item-sliding>
+
+        {/* Sliding item with expandable options on both sides */}
+        <ion-item-sliding>
+          <ion-item-options side="start">
+            <ion-item-option color="danger" expandable>
+              Delete
+            </ion-item-option>
+          </ion-item-options>
+
+          <ion-item>
+            <ion-label>Expandable Options</ion-label>
+          </ion-item>
+
+          <ion-item-options side="end">
+            <ion-item-option color="tertiary" expandable>
+              Archive
+            </ion-item-option>
+          </ion-item-options>
+        </ion-item-sliding>
+
+        {/* Multi-line sliding item with icon options on both sides */}
+        <ion-item-sliding id="item100">
+          <ion-item href="#">
+            <ion-label>
+              <h2>HubStruck Notifications</h2>
+              <p>A new message in your network</p>
+              <p>Oceanic Next has joined your network</p>
+            </ion-label>
+            <ion-note slot="end">
+              10:45 AM
+            </ion-note>
+          </ion-item>
+
+          <ion-item-options side="start">
+            <ion-item-option>
+              <ion-icon slot="icon-only" name="heart"></ion-icon>
+            </ion-item-option>
+          </ion-item-options>
+
+          <ion-item-options side="end">
+            <ion-item-option color="danger">
+              <ion-icon slot="icon-only" name="trash"></ion-icon>
+            </ion-item-option>
+            <ion-item-option>
+              <ion-icon slot="icon-only" name="star"></ion-icon>
+            </ion-item-option>
+          </ion-item-options>
+        </ion-item-sliding>
+
+        {/* Sliding item with icon start options on end side */}
+        <ion-item-sliding>
+          <ion-item>
+            <ion-label>
+              Sliding Item, Icons Start
+            </ion-label>
+          </ion-item>
+          <ion-item-options>
+            <ion-item-option color="primary">
+              <ion-icon slot="start" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
+              More
+            </ion-item-option>
+            <ion-item-option color="secondary">
+              <ion-icon slot="start" name="archive"></ion-icon>
+              Archive
+            </ion-item-option>
+          </ion-item-options>
+        </ion-item-sliding>
+
+        {/* Sliding item with icon end options on end side */}
+        <ion-item-sliding>
+          <ion-item>
+            <ion-label>
+              Sliding Item, Icons End
+            </ion-label>
+          </ion-item>
+          <ion-item-options>
+            <ion-item-option color="primary">
+              <ion-icon slot="end" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
+              More
+            </ion-item-option>
+            <ion-item-option color="secondary">
+              <ion-icon slot="end" name="archive"></ion-icon>
+              Archive
+            </ion-item-option>
+          </ion-item-options>
+        </ion-item-sliding>
+
+        {/* Sliding item with icon top options on end side */}
+        <ion-item-sliding>
+          <ion-item>
+            <ion-label>
+              Sliding Item, Icons Top
+            </ion-label>
+          </ion-item>
+          <ion-item-options>
+            <ion-item-option color="primary">
+              <ion-icon slot="top" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
+              More
+            </ion-item-option>
+            <ion-item-option color="secondary">
+              <ion-icon slot="top" name="archive"></ion-icon>
+              Archive
+            </ion-item-option>
+          </ion-item-options>
+        </ion-item-sliding>
+
+        {/* Sliding item with icon bottom options on end side */}
+        <ion-item-sliding>
+          <ion-item>
+            <ion-label>
+              Sliding Item, Icons Bottom
+            </ion-label>
+          </ion-item>
+          <ion-item-options>
+            <ion-item-option color="primary">
+              <ion-icon slot="bottom" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
+              More
+            </ion-item-option>
+            <ion-item-option color="secondary">
+              <ion-icon slot="bottom" name="archive"></ion-icon>
+              Archive
+            </ion-item-option>
+          </ion-item-options>
+        </ion-item-sliding>
+      </ion-list>
+    ];
+  }
+}
+```
\ No newline at end of file
diff --git a/core/src/components/item/readme.md b/core/src/components/item/readme.md
index 89c99eb32a..3f8e436d5e 100644
--- a/core/src/components/item/readme.md
+++ b/core/src/components/item/readme.md
@@ -61,8 +61,6 @@ The highlight color changes based on the item state, but all of the states use I
 
 ### Angular
 
-Basic Usage
-
 ```html
 <!-- Default Item -->
 <ion-item>
@@ -92,7 +90,7 @@ Basic Usage
 </ion-item>
 ```
 
-Detail Arrows
+### Detail Arrows
 
 ```html
 <ion-item detail>
@@ -114,7 +112,7 @@ Detail Arrows
 </ion-item>
 ```
 
-List Items
+### List Items
 
 ```html
 <ion-list>
@@ -158,7 +156,7 @@ List Items
 </ion-list>
 ```
 
-Item Lines
+### Item Lines
 
 ```html
 <!-- Item Inset Lines -->
@@ -215,7 +213,7 @@ Item Lines
 ```
 
 
-Media Items
+### Media Items
 
 ```html
 <ion-item button (click)="testClick()">
@@ -259,7 +257,7 @@ Media Items
 </ion-item>
 ```
 
-Buttons in Items
+### Buttons in Items
 
 ```html
 <ion-item>
@@ -295,7 +293,7 @@ Buttons in Items
 </ion-item>
 ```
 
-Icons in Items
+### Icons in Items
 
 ```html
 <ion-item>
@@ -335,7 +333,7 @@ Icons in Items
 </ion-item>
 ```
 
-Item Inputs
+### Item Inputs
 
 ```html
 <ion-item>
@@ -385,8 +383,6 @@ Item Inputs
 
 ### Javascript
 
-Basic Usage
-
 ```html
 <!-- Default Item -->
 <ion-item>
@@ -416,7 +412,7 @@ Basic Usage
 </ion-item>
 ```
 
-Detail Arrows
+### Detail Arrows
 
 ```html
 <ion-item detail>
@@ -438,7 +434,7 @@ Detail Arrows
 </ion-item>
 ```
 
-List Items
+### List Items
 
 ```html
 <ion-list>
@@ -482,7 +478,7 @@ List Items
 </ion-list>
 ```
 
-Item Lines
+### Item Lines
 
 ```html
 <!-- Item Inset Lines -->
@@ -539,7 +535,7 @@ Item Lines
 ```
 
 
-Media Items
+### Media Items
 
 ```html
 <ion-item button onclick="testClick()">
@@ -583,7 +579,7 @@ Media Items
 </ion-item>
 ```
 
-Buttons in Items
+### Buttons in Items
 
 ```html
 <ion-item>
@@ -619,7 +615,7 @@ Buttons in Items
 </ion-item>
 ```
 
-Icons in Items
+### Icons in Items
 
 ```html
 <ion-item>
@@ -659,7 +655,7 @@ Icons in Items
 </ion-item>
 ```
 
-Item Inputs
+### Item Inputs
 
 ```html
 <ion-item>
@@ -727,68 +723,66 @@ export const ItemExamples: React.FC = () => {
         <IonItem>
           <IonLabel>
             Item
-      </IonLabel>
+          </IonLabel>
         </IonItem>
 
         {/*-- Item as a Button --*/}
         <IonItem button onClick={() => { }}>
           <IonLabel>
             Button Item
-      </IonLabel>
+          </IonLabel>
         </IonItem>
 
         {/*-- Item as an Anchor --*/}
         <IonItem href="https://www.ionicframework.com">
           <IonLabel>
             Anchor Item
-      </IonLabel>
+          </IonLabel>
         </IonItem>
 
         <IonItem color="secondary">
           <IonLabel>
             Secondary Color Item
-      </IonLabel>
+          </IonLabel>
         </IonItem>
 
         {/*-- Detail Arrows --*/}
-
         <IonItem detail>
           <IonLabel>
             Standard Item with Detail Arrow
-      </IonLabel>
+          </IonLabel>
         </IonItem>
 
         <IonItem button onClick={() => { }} detail>
           <IonLabel>
             Button Item with Detail Arrow
-      </IonLabel>
+          </IonLabel>
         </IonItem>
 
         <IonItem detail={false} href="https://www.ionicframework.com">
           <IonLabel>
             Anchor Item with no Detail Arrow
-      </IonLabel>
+          </IonLabel>
         </IonItem>
 
-
         <IonList>
           <IonItem>
             <IonLabel>
               Item
-        </IonLabel>
+            </IonLabel>
           </IonItem>
 
           <IonItem lines="none">
             <IonLabel>
               No Lines Item
-        </IonLabel>
+            </IonLabel>
           </IonItem>
 
           <IonItem>
             <IonLabel className="ion-text-wrap">
               Multiline text that should wrap when it is too long
               to fit on one line in the item.
-        </IonLabel>
+            </IonLabel>
           </IonItem>
 
           <IonItem>
@@ -806,12 +800,10 @@ export const ItemExamples: React.FC = () => {
           <IonItem lines="full">
             <IonLabel>
               Item with Full Lines
-        </IonLabel>
+            </IonLabel>
           </IonItem>
-
         </IonList>
 
-
         {/*-- Item Inset Lines --*/}
         <IonItem lines="inset">
           <IonLabel>Item Lines Inset</IonLabel>
@@ -864,21 +856,19 @@ export const ItemExamples: React.FC = () => {
           </IonItem>
         </IonList>
 
-
-
         <IonItem button onClick={() => { }}>
           <IonAvatar slot="start">
             <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==" />
           </IonAvatar>
           <IonLabel>
             Avatar Start, Button Item
-      </IonLabel>
+          </IonLabel>
         </IonItem>
 
         <IonItem href="#">
           <IonLabel>
             Thumbnail End, Anchor Item
-      </IonLabel>
+          </IonLabel>
           <IonThumbnail slot="end">
             <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==" />
           </IonThumbnail>
@@ -906,30 +896,27 @@ export const ItemExamples: React.FC = () => {
           <IonIcon icon={closeCircle} slot="end" />
         </IonItem>
 
-
-        Buttons in Items
-    
-    
-    <IonItem>
+        {/*-- Buttons in Items --*/}
+        <IonItem>
           <IonButton slot="start">
             Start
-      </IonButton>
+          </IonButton>
           <IonLabel>Button Start/End</IonLabel>
           <IonButton slot="end">
             End
-      </IonButton>
+          </IonButton>
         </IonItem>
 
         <IonItem>
           <IonButton slot="start">
             Start Icon
-        <IonIcon icon={home} slot="end" />>
+            <IonIcon icon={home} slot="end" />>
           </IonButton>
           <IonLabel>Buttons with Icons</IonLabel>
           <IonButton slot="end">
             <IonIcon icon={star} slot="end" />
             End Icon
-      </IonButton>
+          </IonButton>
         </IonItem>
 
         <IonItem>
@@ -942,25 +929,24 @@ export const ItemExamples: React.FC = () => {
           </IonButton>
         </IonItem>
 
-
         <IonItem>
           <IonLabel>
             Icon End
-      </IonLabel>
+          </IonLabel>
           <IonIcon icon={informationCircle} slot="end" />
         </IonItem>
 
         <IonItem>
           <IonLabel>
             Large Icon End
-      </IonLabel>
+          </IonLabel>
           <IonIcon icon={informationCircle} size="large" slot="end" />
         </IonItem>
 
         <IonItem>
           <IonLabel>
             Small Icon End
-      </IonLabel>
+          </IonLabel>
           <IonIcon icon={informationCircle} size="small" slot="end" />
         </IonItem>
 
@@ -968,13 +954,13 @@ export const ItemExamples: React.FC = () => {
           <IonIcon icon={star} slot="start" />
           <IonLabel>
             Icon Start
-      </IonLabel>
+          </IonLabel>
         </IonItem>
 
         <IonItem>
           <IonLabel>
             Two Icons End
-      </IonLabel>
+          </IonLabel>
           <IonIcon icon={checkmarkCircle} slot="end" />
           <IonIcon icon={shuffle} slot="end" />
         </IonItem>
@@ -1022,15 +1008,441 @@ export const ItemExamples: React.FC = () => {
           <IonRange></IonRange>
         </IonItem>
       </IonContent>
-    </IonPage >
+    </IonPage>
   );
 };
 ```
 
 
-### Vue
+### Stencil
 
-Basic Usage
+```tsx
+import { Component, h } from '@stencil/core';
+
+@Component({
+  tag: 'item-example',
+  styleUrl: 'item-example.css'
+})
+export class ItemExample {
+  buttonClick() {
+    console.log('Clicked button');
+  }
+
+  render() {
+    return [
+      // Default Item
+      <ion-item>
+        <ion-label>
+          Item
+        </ion-label>
+      </ion-item>,
+
+      // Item as a Button
+      <ion-item button onClick={() => this.buttonClick()}>
+        <ion-label>
+          Button Item
+        </ion-label>
+      </ion-item>,
+
+      // Item as an Anchor
+      <ion-item href="https://www.ionicframework.com">
+        <ion-label>
+          Anchor Item
+        </ion-label>
+      </ion-item>,
+
+      <ion-item color="secondary">
+        <ion-label>
+          Secondary Color Item
+        </ion-label>
+      </ion-item>
+    ];
+  }
+}
+```
+
+### Detail Arrows
+
+```tsx
+import { Component, h } from '@stencil/core';
+
+@Component({
+  tag: 'item-example',
+  styleUrl: 'item-example.css'
+})
+export class ItemExample {
+  buttonClick() {
+    console.log('Clicked button');
+  }
+
+  render() {
+    return [
+      <ion-item detail>
+        <ion-label>
+          Standard Item with Detail Arrow
+        </ion-label>
+      </ion-item>,
+
+      <ion-item button onClick={() => this.buttonClick()} detail>
+        <ion-label>
+          Button Item with Detail Arrow
+        </ion-label>
+      </ion-item>,
+
+      <ion-item detail={false} href="https://www.ionicframework.com">
+        <ion-label>
+          Anchor Item with no Detail Arrow
+        </ion-label>
+      </ion-item>
+    ];
+  }
+}
+```
+
+### List Items
+
+```tsx
+import { Component, h } from '@stencil/core';
+
+@Component({
+  tag: 'item-example',
+  styleUrl: 'item-example.css'
+})
+export class ItemExample {
+  render() {
+    return [
+      <ion-list>
+        <ion-item>
+          <ion-label>
+            Item
+          </ion-label>
+        </ion-item>,
+
+        <ion-item lines="none">
+          <ion-label>
+            No Lines Item
+          </ion-label>
+        </ion-item>,
+
+        <ion-item>
+          <ion-label class="ion-text-wrap">
+          Multiline text that should wrap when it is too long
+          to fit on one line in the item.
+          </ion-label>
+        </ion-item>,
+
+        <ion-item>
+          <ion-label class="ion-text-wrap">
+            <ion-text color="primary">
+              <h3>H3 Primary Title</h3>
+            </ion-text>
+            <p>Paragraph line 1</p>
+            <ion-text color="secondary">
+              <p>Paragraph line 2 secondary</p>
+            </ion-text>
+          </ion-label>
+        </ion-item>,
+
+        <ion-item lines="full">
+          <ion-label>
+            Item with Full Lines
+          </ion-label>
+        </ion-item>
+      </ion-list>
+    ];
+  }
+}
+```
+
+### Item Lines
+
+```tsx
+import { Component, h } from '@stencil/core';
+
+@Component({
+  tag: 'item-example',
+  styleUrl: 'item-example.css'
+})
+export class ItemExample {
+  render() {
+    return [
+      // Item Inset Lines
+      <ion-item lines="inset">
+        <ion-label>Item Lines Inset</ion-label>
+      </ion-item>,
+
+      // Item Full Lines
+      <ion-item lines="full">
+        <ion-label>Item Lines Full</ion-label>
+      </ion-item>,
+
+      // Item None Lines
+      <ion-item lines="none">
+        <ion-label>Item Lines None</ion-label>
+      </ion-item>,
+
+      // List Full Lines
+      <ion-list lines="full">
+        <ion-item>
+          <ion-label>Full Lines Item 1</ion-label>
+        </ion-item>
+
+        <ion-item>
+          <ion-label>Full Lines Item 2</ion-label>
+        </ion-item>
+      </ion-list>,
+
+      // List Inset Lines
+      <ion-list lines="inset">
+        <ion-item>
+          <ion-label>Inset Lines Item 1</ion-label>
+        </ion-item>
+
+        <ion-item>
+          <ion-label>Inset Lines Item 2</ion-label>
+        </ion-item>
+      </ion-list>,
+
+      // List No Lines
+      <ion-list lines="none">
+        <ion-item>
+          <ion-label>No lines Item 1</ion-label>
+        </ion-item>
+
+        <ion-item>
+          <ion-label>No lines Item 2</ion-label>
+        </ion-item>
+
+        <ion-item>
+          <ion-label>No lines Item 3</ion-label>
+        </ion-item>
+      </ion-list>
+    ];
+  }
+}
+```
+
+### Media Items
+
+```tsx
+import { Component, h } from '@stencil/core';
+
+@Component({
+  tag: 'item-example',
+  styleUrl: 'item-example.css'
+})
+export class ItemExample {
+  testClick() {
+    console.log('Test click');
+  }
+
+  render() {
+    return [
+      <ion-item button onClick={() => this.testClick()}>
+        <ion-avatar slot="start">
+          <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw=="/>
+        </ion-avatar>
+        <ion-label>
+          Avatar Start, Button Item
+        </ion-label>
+      </ion-item>,
+
+      <ion-item href="#">
+        <ion-label>
+          Thumbnail End, Anchor Item
+        </ion-label>
+        <ion-thumbnail slot="end">
+          <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw=="/>
+        </ion-thumbnail>
+      </ion-item>,
+
+      <ion-item>
+        <ion-thumbnail slot="start">
+          <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw=="/>
+        </ion-thumbnail>
+        <ion-label>
+          <h2>H2 Title Text</h2>
+          <p>Button on right</p>
+        </ion-label>
+        <ion-button fill="outline" slot="end">View</ion-button>
+      </ion-item>,
+
+      <ion-item button onClick={() => this.testClick()}>
+        <ion-thumbnail slot="start">
+          <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw=="/>
+        </ion-thumbnail>
+        <ion-label>
+          <h3>H3 Title Text</h3>
+          <p>Icon on right</p>
+        </ion-label>
+        <ion-icon name="close-circle" slot="end"></ion-icon>
+      </ion-item>
+    ];
+  }
+}
+```
+
+### Buttons in Items
+
+```tsx
+import { Component, h } from '@stencil/core';
+
+@Component({
+  tag: 'item-example',
+  styleUrl: 'item-example.css'
+})
+export class ItemExample {
+  render() {
+    return [
+      <ion-item>
+        <ion-button slot="start">
+          Start
+        </ion-button>
+        <ion-label>Button Start/End</ion-label>
+        <ion-button slot="end">
+          End
+        </ion-button>
+      </ion-item>,
+
+      <ion-item>
+        <ion-button slot="start">
+          Start Icon
+          <ion-icon name="home" slot="end"></ion-icon>
+        </ion-button>
+        <ion-label>Buttons with Icons</ion-label>
+        <ion-button slot="end">
+          <ion-icon name="star" slot="end"></ion-icon>
+          End Icon
+        </ion-button>
+      </ion-item>,
+
+      <ion-item>
+        <ion-button slot="start">
+          <ion-icon slot="icon-only" name="navigate"></ion-icon>
+        </ion-button>
+        <ion-label>Icon only Buttons</ion-label>
+        <ion-button slot="end">
+          <ion-icon slot="icon-only" name="star"></ion-icon>
+        </ion-button>
+      </ion-item>
+    ];
+  }
+}
+```
+
+### Icons in Items
+
+```tsx
+import { Component, h } from '@stencil/core';
+
+@Component({
+  tag: 'item-example',
+  styleUrl: 'item-example.css'
+})
+export class ItemExample {
+  render() {
+    return [
+      <ion-item>
+        <ion-label>
+          Icon End
+        </ion-label>
+        <ion-icon name="information-circle" slot="end"></ion-icon>
+      </ion-item>,
+
+      <ion-item>
+        <ion-label>
+          Large Icon End
+        </ion-label>
+        <ion-icon name="information-circle" size="large" slot="end"></ion-icon>
+      </ion-item>,
+
+      <ion-item>
+        <ion-label>
+          Small Icon End
+        </ion-label>
+        <ion-icon name="information-circle" size="small" slot="end"></ion-icon>
+      </ion-item>,
+
+      <ion-item>
+        <ion-icon name="star" slot="start"></ion-icon>
+        <ion-label>
+          Icon Start
+        </ion-label>
+      </ion-item>,
+
+      <ion-item>
+        <ion-label>
+          Two Icons End
+        </ion-label>
+        <ion-icon name="checkmark-circle" slot="end"></ion-icon>
+        <ion-icon name="shuffle" slot="end"></ion-icon>
+      </ion-item>
+    ];
+  }
+}
+```
+
+### Item Inputs
+
+```tsx
+import { Component, h } from '@stencil/core';
+
+@Component({
+  tag: 'item-example',
+  styleUrl: 'item-example.css'
+})
+export class ItemExample {
+  render() {
+    return [
+      <ion-item>
+        <ion-label position="floating">Datetime</ion-label>
+        <ion-datetime></ion-datetime>
+      </ion-item>,
+
+      <ion-item>
+        <ion-label position="floating">Select</ion-label>
+        <ion-select>
+          <ion-select-option value="">No Game Console</ion-select-option>
+          <ion-select-option value="nes">NES</ion-select-option>
+          <ion-select-option value="n64" selected>Nintendo64</ion-select-option>
+          <ion-select-option value="ps">PlayStation</ion-select-option>
+          <ion-select-option value="genesis">Sega Genesis</ion-select-option>
+          <ion-select-option value="saturn">Sega Saturn</ion-select-option>
+          <ion-select-option value="snes">SNES</ion-select-option>
+        </ion-select>
+      </ion-item>,
+
+      <ion-item>
+        <ion-label>Toggle</ion-label>
+        <ion-toggle slot="end"></ion-toggle>
+      </ion-item>,
+
+      <ion-item>
+        <ion-label position="floating">Floating Input</ion-label>
+        <ion-input></ion-input>
+      </ion-item>,
+
+      <ion-item>
+        <ion-label>Input (placeholder)</ion-label>
+        <ion-input placeholder="Placeholder"></ion-input>
+      </ion-item>,
+
+      <ion-item>
+        <ion-label>Checkbox</ion-label>
+        <ion-checkbox slot="start"></ion-checkbox>
+      </ion-item>,
+
+      <ion-item>
+        <ion-label>Range</ion-label>
+        <ion-range></ion-range>
+      </ion-item>
+    ];
+  }
+}
+```
+
+
+### Vue
 
 ```html
 <template>
@@ -1063,7 +1475,7 @@ Basic Usage
 </template>
 ```
 
-Detail Arrows
+### Detail Arrows
 
 ```html
 <template>
@@ -1087,7 +1499,7 @@ Detail Arrows
 </template>
 ```
 
-List Items
+### List Items
 
 ```html
 <template>
@@ -1133,7 +1545,7 @@ List Items
 </template>
 ```
 
-Item Lines
+### Item Lines
 
 ```html
 <template>
@@ -1192,7 +1604,7 @@ Item Lines
 ```
 
 
-Media Items
+### Media Items
 
 ```html
 <template>
@@ -1238,7 +1650,7 @@ Media Items
 </template>
 ```
 
-Buttons in Items
+### Buttons in Items
 
 ```html
 <template>
@@ -1276,7 +1688,7 @@ Buttons in Items
 </template>
 ```
 
-Icons in Items
+### Icons in Items
 
 ```html
 <template>
@@ -1318,7 +1730,7 @@ Icons in Items
 </template>
 ```
 
-Item Inputs
+### Item Inputs
 
 ```html
 <template>
diff --git a/core/src/components/item/usage/angular.md b/core/src/components/item/usage/angular.md
index f2c5b93787..6ea952267a 100644
--- a/core/src/components/item/usage/angular.md
+++ b/core/src/components/item/usage/angular.md
@@ -1,5 +1,3 @@
-Basic Usage
-
 ```html
 <!-- Default Item -->
 <ion-item>
@@ -29,7 +27,7 @@ Basic Usage
 </ion-item>
 ```
 
-Detail Arrows
+### Detail Arrows
 
 ```html
 <ion-item detail>
@@ -51,7 +49,7 @@ Detail Arrows
 </ion-item>
 ```
 
-List Items
+### List Items
 
 ```html
 <ion-list>
@@ -95,7 +93,7 @@ List Items
 </ion-list>
 ```
 
-Item Lines
+### Item Lines
 
 ```html
 <!-- Item Inset Lines -->
@@ -152,7 +150,7 @@ Item Lines
 ```
 
 
-Media Items
+### Media Items
 
 ```html
 <ion-item button (click)="testClick()">
@@ -196,7 +194,7 @@ Media Items
 </ion-item>
 ```
 
-Buttons in Items
+### Buttons in Items
 
 ```html
 <ion-item>
@@ -232,7 +230,7 @@ Buttons in Items
 </ion-item>
 ```
 
-Icons in Items
+### Icons in Items
 
 ```html
 <ion-item>
@@ -272,7 +270,7 @@ Icons in Items
 </ion-item>
 ```
 
-Item Inputs
+### Item Inputs
 
 ```html
 <ion-item>
diff --git a/core/src/components/item/usage/javascript.md b/core/src/components/item/usage/javascript.md
index 180ef6243f..01f23b6aaf 100644
--- a/core/src/components/item/usage/javascript.md
+++ b/core/src/components/item/usage/javascript.md
@@ -1,5 +1,3 @@
-Basic Usage
-
 ```html
 <!-- Default Item -->
 <ion-item>
@@ -29,7 +27,7 @@ Basic Usage
 </ion-item>
 ```
 
-Detail Arrows
+### Detail Arrows
 
 ```html
 <ion-item detail>
@@ -51,7 +49,7 @@ Detail Arrows
 </ion-item>
 ```
 
-List Items
+### List Items
 
 ```html
 <ion-list>
@@ -95,7 +93,7 @@ List Items
 </ion-list>
 ```
 
-Item Lines
+### Item Lines
 
 ```html
 <!-- Item Inset Lines -->
@@ -152,7 +150,7 @@ Item Lines
 ```
 
 
-Media Items
+### Media Items
 
 ```html
 <ion-item button onclick="testClick()">
@@ -196,7 +194,7 @@ Media Items
 </ion-item>
 ```
 
-Buttons in Items
+### Buttons in Items
 
 ```html
 <ion-item>
@@ -232,7 +230,7 @@ Buttons in Items
 </ion-item>
 ```
 
-Icons in Items
+### Icons in Items
 
 ```html
 <ion-item>
@@ -272,7 +270,7 @@ Icons in Items
 </ion-item>
 ```
 
-Item Inputs
+### Item Inputs
 
 ```html
 <ion-item>
diff --git a/core/src/components/item/usage/react.md b/core/src/components/item/usage/react.md
index e0b51a8ee0..102ac5baaa 100644
--- a/core/src/components/item/usage/react.md
+++ b/core/src/components/item/usage/react.md
@@ -16,68 +16,66 @@ export const ItemExamples: React.FC = () => {
         <IonItem>
           <IonLabel>
             Item
-      </IonLabel>
+          </IonLabel>
         </IonItem>
 
         {/*-- Item as a Button --*/}
         <IonItem button onClick={() => { }}>
           <IonLabel>
             Button Item
-      </IonLabel>
+          </IonLabel>
         </IonItem>
 
         {/*-- Item as an Anchor --*/}
         <IonItem href="https://www.ionicframework.com">
           <IonLabel>
             Anchor Item
-      </IonLabel>
+          </IonLabel>
         </IonItem>
 
         <IonItem color="secondary">
           <IonLabel>
             Secondary Color Item
-      </IonLabel>
+          </IonLabel>
         </IonItem>
 
         {/*-- Detail Arrows --*/}
-
         <IonItem detail>
           <IonLabel>
             Standard Item with Detail Arrow
-      </IonLabel>
+          </IonLabel>
         </IonItem>
 
         <IonItem button onClick={() => { }} detail>
           <IonLabel>
             Button Item with Detail Arrow
-      </IonLabel>
+          </IonLabel>
         </IonItem>
 
         <IonItem detail={false} href="https://www.ionicframework.com">
           <IonLabel>
             Anchor Item with no Detail Arrow
-      </IonLabel>
+          </IonLabel>
         </IonItem>
 
-
         <IonList>
           <IonItem>
             <IonLabel>
               Item
-        </IonLabel>
+            </IonLabel>
           </IonItem>
 
           <IonItem lines="none">
             <IonLabel>
               No Lines Item
-        </IonLabel>
+            </IonLabel>
           </IonItem>
 
           <IonItem>
             <IonLabel className="ion-text-wrap">
               Multiline text that should wrap when it is too long
               to fit on one line in the item.
-        </IonLabel>
+            </IonLabel>
           </IonItem>
 
           <IonItem>
@@ -95,12 +93,10 @@ export const ItemExamples: React.FC = () => {
           <IonItem lines="full">
             <IonLabel>
               Item with Full Lines
-        </IonLabel>
+            </IonLabel>
           </IonItem>
-
         </IonList>
 
-
         {/*-- Item Inset Lines --*/}
         <IonItem lines="inset">
           <IonLabel>Item Lines Inset</IonLabel>
@@ -153,21 +149,19 @@ export const ItemExamples: React.FC = () => {
           </IonItem>
         </IonList>
 
-
-
         <IonItem button onClick={() => { }}>
           <IonAvatar slot="start">
             <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==" />
           </IonAvatar>
           <IonLabel>
             Avatar Start, Button Item
-      </IonLabel>
+          </IonLabel>
         </IonItem>
 
         <IonItem href="#">
           <IonLabel>
             Thumbnail End, Anchor Item
-      </IonLabel>
+          </IonLabel>
           <IonThumbnail slot="end">
             <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==" />
           </IonThumbnail>
@@ -195,30 +189,27 @@ export const ItemExamples: React.FC = () => {
           <IonIcon icon={closeCircle} slot="end" />
         </IonItem>
 
-
-        Buttons in Items
-    
-    
-    <IonItem>
+        {/*-- Buttons in Items --*/}
+        <IonItem>
           <IonButton slot="start">
             Start
-      </IonButton>
+          </IonButton>
           <IonLabel>Button Start/End</IonLabel>
           <IonButton slot="end">
             End
-      </IonButton>
+          </IonButton>
         </IonItem>
 
         <IonItem>
           <IonButton slot="start">
             Start Icon
-        <IonIcon icon={home} slot="end" />>
+            <IonIcon icon={home} slot="end" />>
           </IonButton>
           <IonLabel>Buttons with Icons</IonLabel>
           <IonButton slot="end">
             <IonIcon icon={star} slot="end" />
             End Icon
-      </IonButton>
+          </IonButton>
         </IonItem>
 
         <IonItem>
@@ -231,25 +222,24 @@ export const ItemExamples: React.FC = () => {
           </IonButton>
         </IonItem>
 
-
         <IonItem>
           <IonLabel>
             Icon End
-      </IonLabel>
+          </IonLabel>
           <IonIcon icon={informationCircle} slot="end" />
         </IonItem>
 
         <IonItem>
           <IonLabel>
             Large Icon End
-      </IonLabel>
+          </IonLabel>
           <IonIcon icon={informationCircle} size="large" slot="end" />
         </IonItem>
 
         <IonItem>
           <IonLabel>
             Small Icon End
-      </IonLabel>
+          </IonLabel>
           <IonIcon icon={informationCircle} size="small" slot="end" />
         </IonItem>
 
@@ -257,13 +247,13 @@ export const ItemExamples: React.FC = () => {
           <IonIcon icon={star} slot="start" />
           <IonLabel>
             Icon Start
-      </IonLabel>
+          </IonLabel>
         </IonItem>
 
         <IonItem>
           <IonLabel>
             Two Icons End
-      </IonLabel>
+          </IonLabel>
           <IonIcon icon={checkmarkCircle} slot="end" />
           <IonIcon icon={shuffle} slot="end" />
         </IonItem>
@@ -311,7 +301,7 @@ export const ItemExamples: React.FC = () => {
           <IonRange></IonRange>
         </IonItem>
       </IonContent>
-    </IonPage >
+    </IonPage>
   );
 };
 ```
diff --git a/core/src/components/item/usage/stencil.md b/core/src/components/item/usage/stencil.md
new file mode 100644
index 0000000000..b4e04f2602
--- /dev/null
+++ b/core/src/components/item/usage/stencil.md
@@ -0,0 +1,424 @@
+```tsx
+import { Component, h } from '@stencil/core';
+
+@Component({
+  tag: 'item-example',
+  styleUrl: 'item-example.css'
+})
+export class ItemExample {
+  buttonClick() {
+    console.log('Clicked button');
+  }
+
+  render() {
+    return [
+      // Default Item
+      <ion-item>
+        <ion-label>
+          Item
+        </ion-label>
+      </ion-item>,
+
+      // Item as a Button
+      <ion-item button onClick={() => this.buttonClick()}>
+        <ion-label>
+          Button Item
+        </ion-label>
+      </ion-item>,
+
+      // Item as an Anchor
+      <ion-item href="https://www.ionicframework.com">
+        <ion-label>
+          Anchor Item
+        </ion-label>
+      </ion-item>,
+
+      <ion-item color="secondary">
+        <ion-label>
+          Secondary Color Item
+        </ion-label>
+      </ion-item>
+    ];
+  }
+}
+```
+
+### Detail Arrows
+
+```tsx
+import { Component, h } from '@stencil/core';
+
+@Component({
+  tag: 'item-example',
+  styleUrl: 'item-example.css'
+})
+export class ItemExample {
+  buttonClick() {
+    console.log('Clicked button');
+  }
+
+  render() {
+    return [
+      <ion-item detail>
+        <ion-label>
+          Standard Item with Detail Arrow
+        </ion-label>
+      </ion-item>,
+
+      <ion-item button onClick={() => this.buttonClick()} detail>
+        <ion-label>
+          Button Item with Detail Arrow
+        </ion-label>
+      </ion-item>,
+
+      <ion-item detail={false} href="https://www.ionicframework.com">
+        <ion-label>
+          Anchor Item with no Detail Arrow
+        </ion-label>
+      </ion-item>
+    ];
+  }
+}
+```
+
+### List Items
+
+```tsx
+import { Component, h } from '@stencil/core';
+
+@Component({
+  tag: 'item-example',
+  styleUrl: 'item-example.css'
+})
+export class ItemExample {
+  render() {
+    return [
+      <ion-list>
+        <ion-item>
+          <ion-label>
+            Item
+          </ion-label>
+        </ion-item>,
+
+        <ion-item lines="none">
+          <ion-label>
+            No Lines Item
+          </ion-label>
+        </ion-item>,
+
+        <ion-item>
+          <ion-label class="ion-text-wrap">
+          Multiline text that should wrap when it is too long
+          to fit on one line in the item.
+          </ion-label>
+        </ion-item>,
+
+        <ion-item>
+          <ion-label class="ion-text-wrap">
+            <ion-text color="primary">
+              <h3>H3 Primary Title</h3>
+            </ion-text>
+            <p>Paragraph line 1</p>
+            <ion-text color="secondary">
+              <p>Paragraph line 2 secondary</p>
+            </ion-text>
+          </ion-label>
+        </ion-item>,
+
+        <ion-item lines="full">
+          <ion-label>
+            Item with Full Lines
+          </ion-label>
+        </ion-item>
+      </ion-list>
+    ];
+  }
+}
+```
+
+### Item Lines
+
+```tsx
+import { Component, h } from '@stencil/core';
+
+@Component({
+  tag: 'item-example',
+  styleUrl: 'item-example.css'
+})
+export class ItemExample {
+  render() {
+    return [
+      // Item Inset Lines
+      <ion-item lines="inset">
+        <ion-label>Item Lines Inset</ion-label>
+      </ion-item>,
+
+      // Item Full Lines
+      <ion-item lines="full">
+        <ion-label>Item Lines Full</ion-label>
+      </ion-item>,
+
+      // Item None Lines
+      <ion-item lines="none">
+        <ion-label>Item Lines None</ion-label>
+      </ion-item>,
+
+      // List Full Lines
+      <ion-list lines="full">
+        <ion-item>
+          <ion-label>Full Lines Item 1</ion-label>
+        </ion-item>
+
+        <ion-item>
+          <ion-label>Full Lines Item 2</ion-label>
+        </ion-item>
+      </ion-list>,
+
+      // List Inset Lines
+      <ion-list lines="inset">
+        <ion-item>
+          <ion-label>Inset Lines Item 1</ion-label>
+        </ion-item>
+
+        <ion-item>
+          <ion-label>Inset Lines Item 2</ion-label>
+        </ion-item>
+      </ion-list>,
+
+      // List No Lines
+      <ion-list lines="none">
+        <ion-item>
+          <ion-label>No lines Item 1</ion-label>
+        </ion-item>
+
+        <ion-item>
+          <ion-label>No lines Item 2</ion-label>
+        </ion-item>
+
+        <ion-item>
+          <ion-label>No lines Item 3</ion-label>
+        </ion-item>
+      </ion-list>
+    ];
+  }
+}
+```
+
+### Media Items
+
+```tsx
+import { Component, h } from '@stencil/core';
+
+@Component({
+  tag: 'item-example',
+  styleUrl: 'item-example.css'
+})
+export class ItemExample {
+  testClick() {
+    console.log('Test click');
+  }
+
+  render() {
+    return [
+      <ion-item button onClick={() => this.testClick()}>
+        <ion-avatar slot="start">
+          <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw=="/>
+        </ion-avatar>
+        <ion-label>
+          Avatar Start, Button Item
+        </ion-label>
+      </ion-item>,
+
+      <ion-item href="#">
+        <ion-label>
+          Thumbnail End, Anchor Item
+        </ion-label>
+        <ion-thumbnail slot="end">
+          <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw=="/>
+        </ion-thumbnail>
+      </ion-item>,
+
+      <ion-item>
+        <ion-thumbnail slot="start">
+          <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw=="/>
+        </ion-thumbnail>
+        <ion-label>
+          <h2>H2 Title Text</h2>
+          <p>Button on right</p>
+        </ion-label>
+        <ion-button fill="outline" slot="end">View</ion-button>
+      </ion-item>,
+
+      <ion-item button onClick={() => this.testClick()}>
+        <ion-thumbnail slot="start">
+          <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw=="/>
+        </ion-thumbnail>
+        <ion-label>
+          <h3>H3 Title Text</h3>
+          <p>Icon on right</p>
+        </ion-label>
+        <ion-icon name="close-circle" slot="end"></ion-icon>
+      </ion-item>
+    ];
+  }
+}
+```
+
+### Buttons in Items
+
+```tsx
+import { Component, h } from '@stencil/core';
+
+@Component({
+  tag: 'item-example',
+  styleUrl: 'item-example.css'
+})
+export class ItemExample {
+  render() {
+    return [
+      <ion-item>
+        <ion-button slot="start">
+          Start
+        </ion-button>
+        <ion-label>Button Start/End</ion-label>
+        <ion-button slot="end">
+          End
+        </ion-button>
+      </ion-item>,
+
+      <ion-item>
+        <ion-button slot="start">
+          Start Icon
+          <ion-icon name="home" slot="end"></ion-icon>
+        </ion-button>
+        <ion-label>Buttons with Icons</ion-label>
+        <ion-button slot="end">
+          <ion-icon name="star" slot="end"></ion-icon>
+          End Icon
+        </ion-button>
+      </ion-item>,
+
+      <ion-item>
+        <ion-button slot="start">
+          <ion-icon slot="icon-only" name="navigate"></ion-icon>
+        </ion-button>
+        <ion-label>Icon only Buttons</ion-label>
+        <ion-button slot="end">
+          <ion-icon slot="icon-only" name="star"></ion-icon>
+        </ion-button>
+      </ion-item>
+    ];
+  }
+}
+```
+
+### Icons in Items
+
+```tsx
+import { Component, h } from '@stencil/core';
+
+@Component({
+  tag: 'item-example',
+  styleUrl: 'item-example.css'
+})
+export class ItemExample {
+  render() {
+    return [
+      <ion-item>
+        <ion-label>
+          Icon End
+        </ion-label>
+        <ion-icon name="information-circle" slot="end"></ion-icon>
+      </ion-item>,
+
+      <ion-item>
+        <ion-label>
+          Large Icon End
+        </ion-label>
+        <ion-icon name="information-circle" size="large" slot="end"></ion-icon>
+      </ion-item>,
+
+      <ion-item>
+        <ion-label>
+          Small Icon End
+        </ion-label>
+        <ion-icon name="information-circle" size="small" slot="end"></ion-icon>
+      </ion-item>,
+
+      <ion-item>
+        <ion-icon name="star" slot="start"></ion-icon>
+        <ion-label>
+          Icon Start
+        </ion-label>
+      </ion-item>,
+
+      <ion-item>
+        <ion-label>
+          Two Icons End
+        </ion-label>
+        <ion-icon name="checkmark-circle" slot="end"></ion-icon>
+        <ion-icon name="shuffle" slot="end"></ion-icon>
+      </ion-item>
+    ];
+  }
+}
+```
+
+### Item Inputs
+
+```tsx
+import { Component, h } from '@stencil/core';
+
+@Component({
+  tag: 'item-example',
+  styleUrl: 'item-example.css'
+})
+export class ItemExample {
+  render() {
+    return [
+      <ion-item>
+        <ion-label position="floating">Datetime</ion-label>
+        <ion-datetime></ion-datetime>
+      </ion-item>,
+
+      <ion-item>
+        <ion-label position="floating">Select</ion-label>
+        <ion-select>
+          <ion-select-option value="">No Game Console</ion-select-option>
+          <ion-select-option value="nes">NES</ion-select-option>
+          <ion-select-option value="n64" selected>Nintendo64</ion-select-option>
+          <ion-select-option value="ps">PlayStation</ion-select-option>
+          <ion-select-option value="genesis">Sega Genesis</ion-select-option>
+          <ion-select-option value="saturn">Sega Saturn</ion-select-option>
+          <ion-select-option value="snes">SNES</ion-select-option>
+        </ion-select>
+      </ion-item>,
+
+      <ion-item>
+        <ion-label>Toggle</ion-label>
+        <ion-toggle slot="end"></ion-toggle>
+      </ion-item>,
+
+      <ion-item>
+        <ion-label position="floating">Floating Input</ion-label>
+        <ion-input></ion-input>
+      </ion-item>,
+
+      <ion-item>
+        <ion-label>Input (placeholder)</ion-label>
+        <ion-input placeholder="Placeholder"></ion-input>
+      </ion-item>,
+
+      <ion-item>
+        <ion-label>Checkbox</ion-label>
+        <ion-checkbox slot="start"></ion-checkbox>
+      </ion-item>,
+
+      <ion-item>
+        <ion-label>Range</ion-label>
+        <ion-range></ion-range>
+      </ion-item>
+    ];
+  }
+}
+```
\ No newline at end of file
diff --git a/core/src/components/item/usage/vue.md b/core/src/components/item/usage/vue.md
index dcb9844375..03ac9dc702 100644
--- a/core/src/components/item/usage/vue.md
+++ b/core/src/components/item/usage/vue.md
@@ -1,5 +1,3 @@
-Basic Usage
-
 ```html
 <template>
   <!-- Default Item -->
@@ -31,7 +29,7 @@ Basic Usage
 </template>
 ```
 
-Detail Arrows
+### Detail Arrows
 
 ```html
 <template>
@@ -55,7 +53,7 @@ Detail Arrows
 </template>
 ```
 
-List Items
+### List Items
 
 ```html
 <template>
@@ -101,7 +99,7 @@ List Items
 </template>
 ```
 
-Item Lines
+### Item Lines
 
 ```html
 <template>
@@ -160,7 +158,7 @@ Item Lines
 ```
 
 
-Media Items
+### Media Items
 
 ```html
 <template>
@@ -206,7 +204,7 @@ Media Items
 </template>
 ```
 
-Buttons in Items
+### Buttons in Items
 
 ```html
 <template>
@@ -244,7 +242,7 @@ Buttons in Items
 </template>
 ```
 
-Icons in Items
+### Icons in Items
 
 ```html
 <template>
@@ -286,7 +284,7 @@ Icons in Items
 </template>
 ```
 
-Item Inputs
+### Item Inputs
 
 ```html
 <template>
diff --git a/core/src/components/label/readme.md b/core/src/components/label/readme.md
index 0f12dfeabe..f8e81f906b 100644
--- a/core/src/components/label/readme.md
+++ b/core/src/components/label/readme.md
@@ -131,6 +131,76 @@ export const LabelExample: React.FC = () => (
 ```
 
 
+### Stencil
+
+```tsx
+import { Component, h } from '@stencil/core';
+
+@Component({
+  tag: 'label-example',
+  styleUrl: 'label-example.css'
+})
+export class LabelExample {
+  render() {
+    return [
+      // Default Label
+      <ion-label>Label</ion-label>,
+
+      // Label Colors
+      <ion-label color="primary">Primary Label</ion-label>,
+      <ion-label color="secondary">Secondary Label</ion-label>,
+      <ion-label color="danger">Danger Label</ion-label>,
+      <ion-label color="light">Light Label</ion-label>,
+      <ion-label color="dark">Dark Label</ion-label>,
+
+      // Item Labels
+      <ion-item>
+        <ion-label>Default Item</ion-label>
+      </ion-item>,
+
+      <ion-item>
+        <ion-label class="ion-text-wrap">
+          Multi-line text that should wrap when it is too long
+          to fit on one line in the item.
+        </ion-label>
+      </ion-item>,
+
+      // Input Labels
+      <ion-item>
+        <ion-label>Default Input</ion-label>
+        <ion-input></ion-input>
+      </ion-item>,
+
+      <ion-item>
+        <ion-label position="fixed">Fixed</ion-label>
+        <ion-input></ion-input>
+      </ion-item>,
+
+      <ion-item>
+        <ion-label position="floating">Floating</ion-label>
+        <ion-input></ion-input>
+      </ion-item>,
+
+      <ion-item>
+        <ion-label position="stacked">Stacked</ion-label>
+        <ion-input></ion-input>
+      </ion-item>,
+
+      <ion-item>
+        <ion-label>Toggle</ion-label>
+        <ion-toggle slot="end" checked={true}></ion-toggle>
+      </ion-item>,
+
+      <ion-item>
+        <ion-checkbox slot="start" checked={true}></ion-checkbox>
+        <ion-label>Checkbox</ion-label>
+      </ion-item>
+    ];
+  }
+}
+```
+
+
 ### Vue
 
 ```html
diff --git a/core/src/components/label/usage/stencil.md b/core/src/components/label/usage/stencil.md
new file mode 100644
index 0000000000..50129df190
--- /dev/null
+++ b/core/src/components/label/usage/stencil.md
@@ -0,0 +1,66 @@
+```tsx
+import { Component, h } from '@stencil/core';
+
+@Component({
+  tag: 'label-example',
+  styleUrl: 'label-example.css'
+})
+export class LabelExample {
+  render() {
+    return [
+      // Default Label
+      <ion-label>Label</ion-label>,
+
+      // Label Colors
+      <ion-label color="primary">Primary Label</ion-label>,
+      <ion-label color="secondary">Secondary Label</ion-label>,
+      <ion-label color="danger">Danger Label</ion-label>,
+      <ion-label color="light">Light Label</ion-label>,
+      <ion-label color="dark">Dark Label</ion-label>,
+
+      // Item Labels
+      <ion-item>
+        <ion-label>Default Item</ion-label>
+      </ion-item>,
+
+      <ion-item>
+        <ion-label class="ion-text-wrap">
+          Multi-line text that should wrap when it is too long
+          to fit on one line in the item.
+        </ion-label>
+      </ion-item>,
+
+      // Input Labels
+      <ion-item>
+        <ion-label>Default Input</ion-label>
+        <ion-input></ion-input>
+      </ion-item>,
+
+      <ion-item>
+        <ion-label position="fixed">Fixed</ion-label>
+        <ion-input></ion-input>
+      </ion-item>,
+
+      <ion-item>
+        <ion-label position="floating">Floating</ion-label>
+        <ion-input></ion-input>
+      </ion-item>,
+
+      <ion-item>
+        <ion-label position="stacked">Stacked</ion-label>
+        <ion-input></ion-input>
+      </ion-item>,
+
+      <ion-item>
+        <ion-label>Toggle</ion-label>
+        <ion-toggle slot="end" checked={true}></ion-toggle>
+      </ion-item>,
+
+      <ion-item>
+        <ion-checkbox slot="start" checked={true}></ion-checkbox>
+        <ion-label>Checkbox</ion-label>
+      </ion-item>
+    ];
+  }
+}
+```
diff --git a/core/src/components/list-header/readme.md b/core/src/components/list-header/readme.md
index a355b27159..6b23a0b454 100644
--- a/core/src/components/list-header/readme.md
+++ b/core/src/components/list-header/readme.md
@@ -152,6 +152,86 @@ export const ListHeaderExample: React.FC = () => (
 ```
 
 
+### Stencil
+
+```tsx
+import { Component, h } from '@stencil/core';
+
+@Component({
+  tag: 'list-header-example',
+  styleUrl: 'list-header-example.css'
+})
+export class ListHeaderExample {
+  render() {
+    return [
+      // Default List Header
+      <ion-list-header>
+        <ion-label>List Header</ion-label>
+      </ion-list-header>,
+
+      // List Header with Button
+      <ion-list-header>
+        <ion-label>New This Week</ion-label>
+        <ion-button>See All</ion-button>
+      </ion-list-header>,
+
+      // List Header with Outline Button
+      <ion-list-header>
+        <ion-label>New This Week</ion-label>
+        <ion-button fill="outline">See All</ion-button>
+      </ion-list-header>,
+
+      // List Header Full Lines
+      <ion-list-header lines="full">
+        <ion-label>New This Week</ion-label>
+        <ion-button>See All</ion-button>
+      </ion-list-header>,
+
+      // List Header Inset Lines
+      <ion-list-header lines="inset">
+        <ion-label>New This Week</ion-label>
+        <ion-button>See All</ion-button>
+      </ion-list-header>,
+
+      // List Headers in Lists
+      <ion-list>
+        <ion-list-header lines="inset">
+          <ion-label>Recent</ion-label>
+          <ion-button>Clear</ion-button>
+        </ion-list-header>
+        <ion-item lines="none">
+          <ion-label color="primary">
+            <h1>I got you babe</h1>
+          </ion-label>
+        </ion-item>
+      </ion-list>,
+
+      <ion-list>
+        <ion-list-header lines="inset">
+          <ion-label>Trending</ion-label>
+        </ion-list-header>
+        <ion-item>
+          <ion-label color="primary">
+            <h1>harry styles</h1>
+          </ion-label>
+        </ion-item>
+        <ion-item>
+          <ion-label color="primary">
+            <h1>christmas</h1>
+          </ion-label>
+        </ion-item>
+        <ion-item lines="none">
+          <ion-label color="primary">
+            <h1>falling</h1>
+          </ion-label>
+        </ion-item>
+      </ion-list>
+    ];
+  }
+}
+```
+
+
 ### Vue
 
 ```html
diff --git a/core/src/components/list-header/usage/stencil.md b/core/src/components/list-header/usage/stencil.md
new file mode 100644
index 0000000000..2c44087240
--- /dev/null
+++ b/core/src/components/list-header/usage/stencil.md
@@ -0,0 +1,76 @@
+```tsx
+import { Component, h } from '@stencil/core';
+
+@Component({
+  tag: 'list-header-example',
+  styleUrl: 'list-header-example.css'
+})
+export class ListHeaderExample {
+  render() {
+    return [
+      // Default List Header
+      <ion-list-header>
+        <ion-label>List Header</ion-label>
+      </ion-list-header>,
+
+      // List Header with Button
+      <ion-list-header>
+        <ion-label>New This Week</ion-label>
+        <ion-button>See All</ion-button>
+      </ion-list-header>,
+
+      // List Header with Outline Button
+      <ion-list-header>
+        <ion-label>New This Week</ion-label>
+        <ion-button fill="outline">See All</ion-button>
+      </ion-list-header>,
+
+      // List Header Full Lines
+      <ion-list-header lines="full">
+        <ion-label>New This Week</ion-label>
+        <ion-button>See All</ion-button>
+      </ion-list-header>,
+
+      // List Header Inset Lines
+      <ion-list-header lines="inset">
+        <ion-label>New This Week</ion-label>
+        <ion-button>See All</ion-button>
+      </ion-list-header>,
+
+      // List Headers in Lists
+      <ion-list>
+        <ion-list-header lines="inset">
+          <ion-label>Recent</ion-label>
+          <ion-button>Clear</ion-button>
+        </ion-list-header>
+        <ion-item lines="none">
+          <ion-label color="primary">
+            <h1>I got you babe</h1>
+          </ion-label>
+        </ion-item>
+      </ion-list>,
+
+      <ion-list>
+        <ion-list-header lines="inset">
+          <ion-label>Trending</ion-label>
+        </ion-list-header>
+        <ion-item>
+          <ion-label color="primary">
+            <h1>harry styles</h1>
+          </ion-label>
+        </ion-item>
+        <ion-item>
+          <ion-label color="primary">
+            <h1>christmas</h1>
+          </ion-label>
+        </ion-item>
+        <ion-item lines="none">
+          <ion-label color="primary">
+            <h1>falling</h1>
+          </ion-label>
+        </ion-item>
+      </ion-list>
+    ];
+  }
+}
+```
diff --git a/core/src/components/list/readme.md b/core/src/components/list/readme.md
index edbd3ad814..11e8ae91d7 100644
--- a/core/src/components/list/readme.md
+++ b/core/src/components/list/readme.md
@@ -213,6 +213,87 @@ export const ListExample: React.FC = () => (
 ```
 
 
+### Stencil
+
+```tsx
+import { Component, h } from '@stencil/core';
+
+@Component({
+  tag: 'list-example',
+  styleUrl: 'list-example.css'
+})
+export class ListExample {
+  unread(ev: Event) {
+    console.log('Item is unread', ev);
+  }
+
+  render() {
+    return [
+      // List of Text Items
+      <ion-list>
+        <ion-item>
+          <ion-label>Pokémon Yellow</ion-label>
+        </ion-item>
+        <ion-item>
+          <ion-label>Mega Man X</ion-label>
+        </ion-item>
+        <ion-item>
+          <ion-label>The Legend of Zelda</ion-label>
+        </ion-item>
+        <ion-item>
+          <ion-label>Pac-Man</ion-label>
+        </ion-item>
+        <ion-item>
+          <ion-label>Super Mario World</ion-label>
+        </ion-item>
+      </ion-list>,
+
+      // List of Input Items
+      <ion-list>
+        <ion-item>
+          <ion-label>Input</ion-label>
+          <ion-input></ion-input>
+        </ion-item>
+        <ion-item>
+          <ion-label>Toggle</ion-label>
+          <ion-toggle slot="end"></ion-toggle>
+        </ion-item>
+        <ion-item>
+          <ion-label>Radio</ion-label>
+          <ion-radio slot="end"></ion-radio>
+        </ion-item>
+        <ion-item>
+          <ion-label>Checkbox</ion-label>
+          <ion-checkbox slot="start"></ion-checkbox>
+        </ion-item>
+      </ion-list>,
+
+      // List of Sliding Items
+      <ion-list>
+        <ion-item-sliding>
+          <ion-item>
+            <ion-label>Item</ion-label>
+          </ion-item>
+          <ion-item-options side="end">
+            <ion-item-option onClick={(ev) => this.unread(ev)}>Unread</ion-item-option>
+          </ion-item-options>
+        </ion-item-sliding>
+
+        <ion-item-sliding>
+          <ion-item>
+            <ion-label>Item</ion-label>
+          </ion-item>
+          <ion-item-options side="end">
+            <ion-item-option onClick={(ev) => this.unread(ev)}>Unread</ion-item-option>
+          </ion-item-options>
+        </ion-item-sliding>
+      </ion-list>
+    ];
+  }
+}
+```
+
+
 ### Vue
 
 ```html
diff --git a/core/src/components/list/usage/stencil.md b/core/src/components/list/usage/stencil.md
new file mode 100644
index 0000000000..1556a16009
--- /dev/null
+++ b/core/src/components/list/usage/stencil.md
@@ -0,0 +1,77 @@
+```tsx
+import { Component, h } from '@stencil/core';
+
+@Component({
+  tag: 'list-example',
+  styleUrl: 'list-example.css'
+})
+export class ListExample {
+  unread(ev: Event) {
+    console.log('Item is unread', ev);
+  }
+
+  render() {
+    return [
+      // List of Text Items
+      <ion-list>
+        <ion-item>
+          <ion-label>Pokémon Yellow</ion-label>
+        </ion-item>
+        <ion-item>
+          <ion-label>Mega Man X</ion-label>
+        </ion-item>
+        <ion-item>
+          <ion-label>The Legend of Zelda</ion-label>
+        </ion-item>
+        <ion-item>
+          <ion-label>Pac-Man</ion-label>
+        </ion-item>
+        <ion-item>
+          <ion-label>Super Mario World</ion-label>
+        </ion-item>
+      </ion-list>,
+
+      // List of Input Items
+      <ion-list>
+        <ion-item>
+          <ion-label>Input</ion-label>
+          <ion-input></ion-input>
+        </ion-item>
+        <ion-item>
+          <ion-label>Toggle</ion-label>
+          <ion-toggle slot="end"></ion-toggle>
+        </ion-item>
+        <ion-item>
+          <ion-label>Radio</ion-label>
+          <ion-radio slot="end"></ion-radio>
+        </ion-item>
+        <ion-item>
+          <ion-label>Checkbox</ion-label>
+          <ion-checkbox slot="start"></ion-checkbox>
+        </ion-item>
+      </ion-list>,
+
+      // List of Sliding Items
+      <ion-list>
+        <ion-item-sliding>
+          <ion-item>
+            <ion-label>Item</ion-label>
+          </ion-item>
+          <ion-item-options side="end">
+            <ion-item-option onClick={(ev) => this.unread(ev)}>Unread</ion-item-option>
+          </ion-item-options>
+        </ion-item-sliding>
+
+        <ion-item-sliding>
+          <ion-item>
+            <ion-label>Item</ion-label>
+          </ion-item>
+          <ion-item-options side="end">
+            <ion-item-option onClick={(ev) => this.unread(ev)}>Unread</ion-item-option>
+          </ion-item-options>
+        </ion-item-sliding>
+      </ion-list>
+    ];
+  }
+}
+```
diff --git a/core/src/components/loading/readme.md b/core/src/components/loading/readme.md
index 98f4fe7b4b..4dba594281 100644
--- a/core/src/components/loading/readme.md
+++ b/core/src/components/loading/readme.md
@@ -117,6 +117,56 @@ export const LoadingExample: React.FC = () => {
 ```
 
 
+### Stencil
+
+```tsx
+import { Component, h } from '@stencil/core';
+
+import { loadingController } from '@ionic/core';
+
+@Component({
+  tag: 'loading-example',
+  styleUrl: 'loading-example.css'
+})
+export class LoadingExample {
+  async presentLoading() {
+    const loading = await loadingController.create({
+      message: 'Please wait...',
+      duration: 2000
+    });
+    await loading.present();
+
+    const { role, data } = await loading.onDidDismiss();
+    console.log('Loading dismissed!', role, data);
+  }
+
+  async presentLoadingWithOptions() {
+    const loading = await loadingController.create({
+      spinner: null,
+      duration: 5000,
+      message: 'Click the backdrop to dismiss early...',
+      translucent: true,
+      cssClass: 'custom-class custom-loading',
+      backdropDismiss: true
+    });
+    await loading.present();
+
+    const { role, data } = await loading.onDidDismiss();
+    console.log('Loading dismissed with role:', role, data);
+  }
+
+  render() {
+    return [
+      <ion-content>
+        <ion-button onClick={() => this.presentLoading()}>Present Loading</ion-button>
+        <ion-button onClick={() => this.presentLoadingWithOptions()}>Present Loading: Options</ion-button>
+      </ion-content>
+    ];
+  }
+}
+```
+
+
 ### Vue
 
 ```html
diff --git a/core/src/components/loading/usage/stencil.md b/core/src/components/loading/usage/stencil.md
new file mode 100644
index 0000000000..26b1c7efc0
--- /dev/null
+++ b/core/src/components/loading/usage/stencil.md
@@ -0,0 +1,46 @@
+```tsx
+import { Component, h } from '@stencil/core';
+
+import { loadingController } from '@ionic/core';
+
+@Component({
+  tag: 'loading-example',
+  styleUrl: 'loading-example.css'
+})
+export class LoadingExample {
+  async presentLoading() {
+    const loading = await loadingController.create({
+      message: 'Please wait...',
+      duration: 2000
+    });
+    await loading.present();
+
+    const { role, data } = await loading.onDidDismiss();
+    console.log('Loading dismissed!', role, data);
+  }
+
+  async presentLoadingWithOptions() {
+    const loading = await loadingController.create({
+      spinner: null,
+      duration: 5000,
+      message: 'Click the backdrop to dismiss early...',
+      translucent: true,
+      cssClass: 'custom-class custom-loading',
+      backdropDismiss: true
+    });
+    await loading.present();
+
+    const { role, data } = await loading.onDidDismiss();
+    console.log('Loading dismissed with role:', role, data);
+  }
+
+  render() {
+    return [
+      <ion-content>
+        <ion-button onClick={() => this.presentLoading()}>Present Loading</ion-button>
+        <ion-button onClick={() => this.presentLoadingWithOptions()}>Present Loading: Options</ion-button>
+      </ion-content>
+    ];
+  }
+}
+```
\ No newline at end of file
diff --git a/core/src/components/menu/readme.md b/core/src/components/menu/readme.md
index 9d875b2665..06f8aefa1f 100644
--- a/core/src/components/menu/readme.md
+++ b/core/src/components/menu/readme.md
@@ -271,6 +271,103 @@ export const MenuExample: React.FC = () => (
 ```
 
 
+### Stencil
+
+```tsx
+import { Component, h } from '@stencil/core';
+
+import { menuController } from '@ionic/core';
+
+@Component({
+  tag: 'menu-example',
+  styleUrl: 'menu-example.css'
+})
+export class MenuExample {
+  openFirst() {
+    menuController.enable(true, 'first');
+    menuController.open('first');
+  }
+
+  openEnd() {
+    menuController.open('end');
+  }
+
+  openCustom() {
+    menuController.enable(true, 'custom');
+    menuController.open('custom');
+  }
+
+  render() {
+    return [
+      <ion-menu side="start" menuId="first" contentId="main">
+        <ion-header>
+          <ion-toolbar color="primary">
+            <ion-title>Start Menu</ion-title>
+          </ion-toolbar>
+        </ion-header>
+        <ion-content>
+          <ion-list>
+            <ion-item>Menu Item</ion-item>
+            <ion-item>Menu Item</ion-item>
+            <ion-item>Menu Item</ion-item>
+            <ion-item>Menu Item</ion-item>
+            <ion-item>Menu Item</ion-item>
+          </ion-list>
+        </ion-content>
+      </ion-menu>,
+
+      <ion-menu side="start" menuId="custom" contentId="main" class="my-custom-menu">
+        <ion-header>
+          <ion-toolbar color="tertiary">
+            <ion-title>Custom Menu</ion-title>
+          </ion-toolbar>
+        </ion-header>
+        <ion-content>
+          <ion-list>
+            <ion-item>Menu Item</ion-item>
+            <ion-item>Menu Item</ion-item>
+            <ion-item>Menu Item</ion-item>
+            <ion-item>Menu Item</ion-item>
+            <ion-item>Menu Item</ion-item>
+          </ion-list>
+        </ion-content>
+      </ion-menu>,
+
+      <ion-menu side="end" type="push" contentId="main">
+        <ion-header>
+          <ion-toolbar color="danger">
+            <ion-title>End Menu</ion-title>
+          </ion-toolbar>
+        </ion-header>
+        <ion-content>
+          <ion-list>
+            <ion-item>Menu Item</ion-item>
+            <ion-item>Menu Item</ion-item>
+            <ion-item>Menu Item</ion-item>
+            <ion-item>Menu Item</ion-item>
+            <ion-item>Menu Item</ion-item>
+          </ion-list>
+        </ion-content>
+      </ion-menu>,
+
+      // A router outlet can be placed here instead
+      <ion-content id="main">
+        <ion-button expand="block" onClick={() => this.openFirst()}>Open Start Menu</ion-button>
+        <ion-button expand="block" onClick={() => this.openEnd()}>Open End Menu</ion-button>
+        <ion-button expand="block" onClick={() => this.openCustom()}>Open Custom Menu</ion-button>
+      </ion-content>
+    ];
+  }
+}
+```
+
+```css
+.my-custom-menu {
+  --width: 500px;
+}
+```
+
+
 ### Vue
 
 ```html
diff --git a/core/src/components/menu/usage/stencil.md b/core/src/components/menu/usage/stencil.md
new file mode 100644
index 0000000000..d5bf61b915
--- /dev/null
+++ b/core/src/components/menu/usage/stencil.md
@@ -0,0 +1,93 @@
+```tsx
+import { Component, h } from '@stencil/core';
+
+import { menuController } from '@ionic/core';
+
+@Component({
+  tag: 'menu-example',
+  styleUrl: 'menu-example.css'
+})
+export class MenuExample {
+  openFirst() {
+    menuController.enable(true, 'first');
+    menuController.open('first');
+  }
+
+  openEnd() {
+    menuController.open('end');
+  }
+
+  openCustom() {
+    menuController.enable(true, 'custom');
+    menuController.open('custom');
+  }
+
+  render() {
+    return [
+      <ion-menu side="start" menuId="first" contentId="main">
+        <ion-header>
+          <ion-toolbar color="primary">
+            <ion-title>Start Menu</ion-title>
+          </ion-toolbar>
+        </ion-header>
+        <ion-content>
+          <ion-list>
+            <ion-item>Menu Item</ion-item>
+            <ion-item>Menu Item</ion-item>
+            <ion-item>Menu Item</ion-item>
+            <ion-item>Menu Item</ion-item>
+            <ion-item>Menu Item</ion-item>
+          </ion-list>
+        </ion-content>
+      </ion-menu>,
+
+      <ion-menu side="start" menuId="custom" contentId="main" class="my-custom-menu">
+        <ion-header>
+          <ion-toolbar color="tertiary">
+            <ion-title>Custom Menu</ion-title>
+          </ion-toolbar>
+        </ion-header>
+        <ion-content>
+          <ion-list>
+            <ion-item>Menu Item</ion-item>
+            <ion-item>Menu Item</ion-item>
+            <ion-item>Menu Item</ion-item>
+            <ion-item>Menu Item</ion-item>
+            <ion-item>Menu Item</ion-item>
+          </ion-list>
+        </ion-content>
+      </ion-menu>,
+
+      <ion-menu side="end" type="push" contentId="main">
+        <ion-header>
+          <ion-toolbar color="danger">
+            <ion-title>End Menu</ion-title>
+          </ion-toolbar>
+        </ion-header>
+        <ion-content>
+          <ion-list>
+            <ion-item>Menu Item</ion-item>
+            <ion-item>Menu Item</ion-item>
+            <ion-item>Menu Item</ion-item>
+            <ion-item>Menu Item</ion-item>
+            <ion-item>Menu Item</ion-item>
+          </ion-list>
+        </ion-content>
+      </ion-menu>,
+
+      // A router outlet can be placed here instead
+      <ion-content id="main">
+        <ion-button expand="block" onClick={() => this.openFirst()}>Open Start Menu</ion-button>
+        <ion-button expand="block" onClick={() => this.openEnd()}>Open End Menu</ion-button>
+        <ion-button expand="block" onClick={() => this.openCustom()}>Open Custom Menu</ion-button>
+      </ion-content>
+    ];
+  }
+}
+```
+
+```css
+.my-custom-menu {
+  --width: 500px;
+}
+```
\ No newline at end of file
diff --git a/core/src/components/modal/readme.md b/core/src/components/modal/readme.md
index dc23e86d2f..6be90687a8 100644
--- a/core/src/components/modal/readme.md
+++ b/core/src/components/modal/readme.md
@@ -340,6 +340,155 @@ In most scenarios, setting a ref on `IonPage` and passing that ref's `current` v
 ```
 
 
+### Stencil
+
+```tsx
+import { Component, h } from '@stencil/core';
+
+import { modalController } from '@ionic/core';
+
+@Component({
+  tag: 'modal-example',
+  styleUrl: 'modal-example.css'
+})
+export class ModalExample {
+  async presentModal() {
+    const modal = await modalController.create({
+      component: 'page-modal'
+    });
+    await modal.present();
+  }
+}
+```
+
+```tsx
+import { Component, h } from '@stencil/core';
+
+@Component({
+  tag: 'page-modal',
+  styleUrl: 'page-modal.css',
+})
+export class PageModal {
+  render() {
+    return [
+      <ion-list>
+        <ion-item>
+          <ion-label>Documentation</ion-label>
+        </ion-item>
+        <ion-item>
+          <ion-label>Feedback</ion-label>
+        </ion-item>
+        <ion-item>
+          <ion-label>Settings</ion-label>
+        </ion-item>
+      </ion-list>
+    ];
+  }
+}
+```
+
+### Passing Data
+
+During creation of a modal, data can be passed in through the `componentProps`.
+The previous example can be written to include data:
+
+```tsx
+async presentModal() {
+  const modal = await modalController.create({
+    component: 'page-modal',
+    componentProps: {
+      'firstName': 'Douglas',
+      'lastName': 'Adams',
+      'middleInitial': 'N'
+    }
+  });
+  await modal.present();
+}
+```
+
+To get the data passed into the `componentProps`, set each one as a `@Prop`:
+
+```tsx
+import { Component, Prop, h } from '@stencil/core';
+
+@Component({
+  tag: 'page-modal',
+  styleUrl: 'page-modal.css',
+})
+export class PageModal {
+  // Data passed in by componentProps
+  @Prop() firstName: string;
+  @Prop() lastName: string;
+  @Prop() middleInitial: string;
+}
+```
+
+### Dismissing a Modal
+
+A modal can be dismissed by calling the dismiss method on the modal controller and optionally passing any data from the modal.
+
+```tsx
+export class ModalPage {
+  ...
+
+  dismiss(data?: any) {
+    // dismiss the closest modal and optionally pass back data
+    (this.el.closest('ion-modal') as any).dismiss({
+      'dismissed': true
+    });
+  }
+}
+```
+
+After being dismissed, the data can be read in through the `onWillDismiss` or `onDidDismiss` attached to the modal after creation:
+
+```tsx
+const { data } = await modal.onWillDismiss();
+console.log(data);
+```
+
+### Swipeable Modals
+
+Modals in iOS mode have the ability to be presented in a card-style and swiped to close. The card-style presentation and swipe to close gesture are not mutually exclusive, meaning you can pick and choose which features you want to use. For example, you can have a card-style modal that cannot be swiped or a full sized modal that can be swiped.
+
+```tsx
+import { Component, Element, h } from '@stencil/core';
+
+import { modalController } from '@ionic/core';
+
+@Component({
+  tag: 'modal-example',
+  styleUrl: 'modal-example.css'
+})
+export class ModalExample {
+  @Element() el: any;
+
+  async presentModal() {
+    const modal = await modalController.create({
+      component: 'page-modal',
+      swipeToClose: true,
+      presentingElement: this.el.closest('ion-router-outlet'),
+    });
+    await modal.present();
+  }
+
+}
+```
+
+In most scenarios, using the `ion-router-outlet` element as the `presentingElement` is fine. In cases where you are presenting a card-style modal from within another modal, you should pass in the top-most `ion-modal` element as the `presentingElement`.
+
+```tsx
+async presentModal() {
+  const modal = await modalController.create({
+    component: 'page-modal',
+    swipeToClose: true,
+    presentingElement: await modalController.getTop() // Get the top-most ion-modal
+  });
+  await modal.present();
+}
+```
+
+
 ### Vue
 
 ```html
diff --git a/core/src/components/modal/usage/stencil.md b/core/src/components/modal/usage/stencil.md
new file mode 100644
index 0000000000..aecf844a50
--- /dev/null
+++ b/core/src/components/modal/usage/stencil.md
@@ -0,0 +1,145 @@
+```tsx
+import { Component, h } from '@stencil/core';
+
+import { modalController } from '@ionic/core';
+
+@Component({
+  tag: 'modal-example',
+  styleUrl: 'modal-example.css'
+})
+export class ModalExample {
+  async presentModal() {
+    const modal = await modalController.create({
+      component: 'page-modal'
+    });
+    await modal.present();
+  }
+}
+```
+
+```tsx
+import { Component, h } from '@stencil/core';
+
+@Component({
+  tag: 'page-modal',
+  styleUrl: 'page-modal.css',
+})
+export class PageModal {
+  render() {
+    return [
+      <ion-list>
+        <ion-item>
+          <ion-label>Documentation</ion-label>
+        </ion-item>
+        <ion-item>
+          <ion-label>Feedback</ion-label>
+        </ion-item>
+        <ion-item>
+          <ion-label>Settings</ion-label>
+        </ion-item>
+      </ion-list>
+    ];
+  }
+}
+```
+
+### Passing Data
+
+During creation of a modal, data can be passed in through the `componentProps`.
+The previous example can be written to include data:
+
+```tsx
+async presentModal() {
+  const modal = await modalController.create({
+    component: 'page-modal',
+    componentProps: {
+      'firstName': 'Douglas',
+      'lastName': 'Adams',
+      'middleInitial': 'N'
+    }
+  });
+  await modal.present();
+}
+```
+
+To get the data passed into the `componentProps`, set each one as a `@Prop`:
+
+```tsx
+import { Component, Prop, h } from '@stencil/core';
+
+@Component({
+  tag: 'page-modal',
+  styleUrl: 'page-modal.css',
+})
+export class PageModal {
+  // Data passed in by componentProps
+  @Prop() firstName: string;
+  @Prop() lastName: string;
+  @Prop() middleInitial: string;
+}
+```
+
+### Dismissing a Modal
+
+A modal can be dismissed by calling the dismiss method on the modal controller and optionally passing any data from the modal.
+
+```tsx
+export class ModalPage {
+  ...
+
+  dismiss(data?: any) {
+    // dismiss the closest modal and optionally pass back data
+    (this.el.closest('ion-modal') as any).dismiss({
+      'dismissed': true
+    });
+  }
+}
+```
+
+After being dismissed, the data can be read in through the `onWillDismiss` or `onDidDismiss` attached to the modal after creation:
+
+```tsx
+const { data } = await modal.onWillDismiss();
+console.log(data);
+```
+
+### Swipeable Modals
+
+Modals in iOS mode have the ability to be presented in a card-style and swiped to close. The card-style presentation and swipe to close gesture are not mutually exclusive, meaning you can pick and choose which features you want to use. For example, you can have a card-style modal that cannot be swiped or a full sized modal that can be swiped.
+
+```tsx
+import { Component, Element, h } from '@stencil/core';
+
+import { modalController } from '@ionic/core';
+
+@Component({
+  tag: 'modal-example',
+  styleUrl: 'modal-example.css'
+})
+export class ModalExample {
+  @Element() el: any;
+
+  async presentModal() {
+    const modal = await modalController.create({
+      component: 'page-modal',
+      swipeToClose: true,
+      presentingElement: this.el.closest('ion-router-outlet'),
+    });
+    await modal.present();
+  }
+
+}
+```
+
+In most scenarios, using the `ion-router-outlet` element as the `presentingElement` is fine. In cases where you are presenting a card-style modal from within another modal, you should pass in the top-most `ion-modal` element as the `presentingElement`.
+
+```tsx
+async presentModal() {
+  const modal = await modalController.create({
+    component: 'page-modal',
+    swipeToClose: true,
+    presentingElement: await modalController.getTop() // Get the top-most ion-modal
+  });
+  await modal.present();
+}
+```
diff --git a/core/src/components/note/readme.md b/core/src/components/note/readme.md
index fca87d752d..9c1ec6ffe7 100644
--- a/core/src/components/note/readme.md
+++ b/core/src/components/note/readme.md
@@ -71,6 +71,46 @@ export const NoteExample: React.FC = () => (
 ```
 
 
+### Stencil
+
+```tsx
+import { Component, h } from '@stencil/core';
+
+@Component({
+  tag: 'note-example',
+  styleUrl: 'note-example.css'
+})
+export class NoteExample {
+  render() {
+    return [
+      // Default Note
+      <ion-note>Default Note</ion-note>,
+
+      // Note Colors
+      <ion-note color="primary">Primary Note</ion-note>,
+      <ion-note color="secondary">Secondary Note</ion-note>,
+      <ion-note color="danger">Danger Note</ion-note>,
+      <ion-note color="light">Light Note</ion-note>,
+      <ion-note color="dark">Dark Note</ion-note>,
+
+      // Notes in a List
+      <ion-list>
+        <ion-item>
+          <ion-label>Note (End)</ion-label>
+          <ion-note slot="end">On</ion-note>
+        </ion-item>
+
+        <ion-item>
+          <ion-note slot="start">Off</ion-note>
+          <ion-label>Note (Start)</ion-label>
+        </ion-item>
+      </ion-list>
+    ];
+  }
+}
+```
+
+
 ### Vue
 
 ```html
diff --git a/core/src/components/note/usage/stencil.md b/core/src/components/note/usage/stencil.md
new file mode 100644
index 0000000000..706f14f404
--- /dev/null
+++ b/core/src/components/note/usage/stencil.md
@@ -0,0 +1,36 @@
+```tsx
+import { Component, h } from '@stencil/core';
+
+@Component({
+  tag: 'note-example',
+  styleUrl: 'note-example.css'
+})
+export class NoteExample {
+  render() {
+    return [
+      // Default Note
+      <ion-note>Default Note</ion-note>,
+
+      // Note Colors
+      <ion-note color="primary">Primary Note</ion-note>,
+      <ion-note color="secondary">Secondary Note</ion-note>,
+      <ion-note color="danger">Danger Note</ion-note>,
+      <ion-note color="light">Light Note</ion-note>,
+      <ion-note color="dark">Dark Note</ion-note>,
+
+      // Notes in a List
+      <ion-list>
+        <ion-item>
+          <ion-label>Note (End)</ion-label>
+          <ion-note slot="end">On</ion-note>
+        </ion-item>
+
+        <ion-item>
+          <ion-note slot="start">Off</ion-note>
+          <ion-label>Note (Start)</ion-label>
+        </ion-item>
+      </ion-list>
+    ];
+  }
+}
+```
diff --git a/core/src/components/popover/readme.md b/core/src/components/popover/readme.md
index ddc65c7b7c..997680c687 100644
--- a/core/src/components/popover/readme.md
+++ b/core/src/components/popover/readme.md
@@ -78,6 +78,64 @@ export const PopoverExample: React.FC = () => {
 ```
 
 
+### Stencil
+
+```tsx
+import { Component, h } from '@stencil/core';
+
+import { popoverController } from '@ionic/core';
+
+@Component({
+  tag: 'popover-example',
+  styleUrl: 'popover-example.css'
+})
+export class PopoverExample {
+  async presentPopover(ev: any) {
+    const popover = await popoverController.create({
+      component: 'page-popover',
+      event: ev,
+      translucent: true
+    });
+    return await popover.present();
+  }
+
+  render() {
+    return [
+      <ion-content>
+        <ion-button onClick={(ev) => this.presentPopover(ev)}>Present Popover</ion-button>
+      </ion-content>
+    ];
+  }
+}
+```
+
+```tsx
+import { Component, h } from '@stencil/core';
+
+@Component({
+  tag: 'page-popover',
+  styleUrl: 'page-popover.css',
+})
+export class PagePopover {
+  render() {
+    return [
+      <ion-list>
+        <ion-item>
+          <ion-label>Documentation</ion-label>
+        </ion-item>
+        <ion-item>
+          <ion-label>Feedback</ion-label>
+        </ion-item>
+        <ion-item>
+          <ion-label>Settings</ion-label>
+        </ion-item>
+      </ion-list>
+    ];
+  }
+}
+```
+
+
 
 ## Properties
 
diff --git a/core/src/components/popover/usage/stencil.md b/core/src/components/popover/usage/stencil.md
new file mode 100644
index 0000000000..e1c7746656
--- /dev/null
+++ b/core/src/components/popover/usage/stencil.md
@@ -0,0 +1,54 @@
+```tsx
+import { Component, h } from '@stencil/core';
+
+import { popoverController } from '@ionic/core';
+
+@Component({
+  tag: 'popover-example',
+  styleUrl: 'popover-example.css'
+})
+export class PopoverExample {
+  async presentPopover(ev: any) {
+    const popover = await popoverController.create({
+      component: 'page-popover',
+      event: ev,
+      translucent: true
+    });
+    return await popover.present();
+  }
+
+  render() {
+    return [
+      <ion-content>
+        <ion-button onClick={(ev) => this.presentPopover(ev)}>Present Popover</ion-button>
+      </ion-content>
+    ];
+  }
+}
+```
+
+```tsx
+import { Component, h } from '@stencil/core';
+
+@Component({
+  tag: 'page-popover',
+  styleUrl: 'page-popover.css',
+})
+export class PagePopover {
+  render() {
+    return [
+      <ion-list>
+        <ion-item>
+          <ion-label>Documentation</ion-label>
+        </ion-item>
+        <ion-item>
+          <ion-label>Feedback</ion-label>
+        </ion-item>
+        <ion-item>
+          <ion-label>Settings</ion-label>
+        </ion-item>
+      </ion-list>
+    ];
+  }
+}
+```
\ No newline at end of file
diff --git a/core/src/components/progress-bar/readme.md b/core/src/components/progress-bar/readme.md
index 8008cc9256..b10543538b 100644
--- a/core/src/components/progress-bar/readme.md
+++ b/core/src/components/progress-bar/readme.md
@@ -68,6 +68,38 @@ export const ProgressbarExample: React.FC = () => (
 ```
 
 
+### Stencil
+
+```tsx
+import { Component, h } from '@stencil/core';
+
+@Component({
+  tag: 'progress-bar-example',
+  styleUrl: 'progress-bar-example.css'
+})
+export class ProgressBarExample {
+  render() {
+    return [
+      // Default Progressbar
+      <ion-progress-bar></ion-progress-bar>,
+
+      // Default Progressbar with 50 percent
+      <ion-progress-bar value={0.5}></ion-progress-bar>,
+
+      // Colorize Progressbar
+      <ion-progress-bar color="primary" value={0.5}></ion-progress-bar>,
+      <ion-progress-bar color="secondary" value={0.5}></ion-progress-bar>,
+
+      // Other types
+      <ion-progress-bar value={0.25} buffer={0.5}></ion-progress-bar>,
+      <ion-progress-bar type="indeterminate"></ion-progress-bar>,
+      <ion-progress-bar type="indeterminate" reversed={true}></ion-progress-bar>
+    ];
+  }
+}
+```
+
+
 ### Vue
 
 ```html
diff --git a/core/src/components/progress-bar/usage/stencil.md b/core/src/components/progress-bar/usage/stencil.md
new file mode 100644
index 0000000000..423213df7d
--- /dev/null
+++ b/core/src/components/progress-bar/usage/stencil.md
@@ -0,0 +1,28 @@
+```tsx
+import { Component, h } from '@stencil/core';
+
+@Component({
+  tag: 'progress-bar-example',
+  styleUrl: 'progress-bar-example.css'
+})
+export class ProgressBarExample {
+  render() {
+    return [
+      // Default Progressbar
+      <ion-progress-bar></ion-progress-bar>,
+
+      // Default Progressbar with 50 percent
+      <ion-progress-bar value={0.5}></ion-progress-bar>,
+
+      // Colorize Progressbar
+      <ion-progress-bar color="primary" value={0.5}></ion-progress-bar>,
+      <ion-progress-bar color="secondary" value={0.5}></ion-progress-bar>,
+
+      // Other types
+      <ion-progress-bar value={0.25} buffer={0.5}></ion-progress-bar>,
+      <ion-progress-bar type="indeterminate"></ion-progress-bar>,
+      <ion-progress-bar type="indeterminate" reversed={true}></ion-progress-bar>
+    ];
+  }
+}
+```
diff --git a/core/src/components/radio-group/readme.md b/core/src/components/radio-group/readme.md
index fa2ba72fef..c340d25067 100644
--- a/core/src/components/radio-group/readme.md
+++ b/core/src/components/radio-group/readme.md
@@ -100,6 +100,58 @@ export const RadioGroupExample: React.FC = () => (
 ```
 
 
+### Stencil
+
+```tsx
+import { Component, h } from '@stencil/core';
+
+@Component({
+  tag: 'radio-group-example',
+  styleUrl: 'radio-group-example.css'
+})
+export class RadioGroupExample {
+  render() {
+    return [
+      <ion-list>
+        <ion-radio-group>
+          <ion-list-header>
+            <ion-label>
+              Auto Manufacturers
+            </ion-label>
+          </ion-list-header>
+
+          <ion-item>
+            <ion-label>Cord</ion-label>
+            <ion-radio value="cord"></ion-radio>
+          </ion-item>
+
+          <ion-item>
+            <ion-label>Duesenberg</ion-label>
+            <ion-radio value="duesenberg"></ion-radio>
+          </ion-item>
+
+          <ion-item>
+            <ion-label>Hudson</ion-label>
+            <ion-radio value="hudson"></ion-radio>
+          </ion-item>
+
+          <ion-item>
+            <ion-label>Packard</ion-label>
+            <ion-radio value="packard"></ion-radio>
+          </ion-item>
+
+          <ion-item>
+            <ion-label>Studebaker</ion-label>
+            <ion-radio value="studebaker"></ion-radio>
+          </ion-item>
+        </ion-radio-group>
+      </ion-list>
+    ];
+  }
+}
+```
+
+
 ### Vue
 
 ```html
diff --git a/core/src/components/radio-group/usage/stencil.md b/core/src/components/radio-group/usage/stencil.md
new file mode 100644
index 0000000000..4d63ff7cff
--- /dev/null
+++ b/core/src/components/radio-group/usage/stencil.md
@@ -0,0 +1,48 @@
+```tsx
+import { Component, h } from '@stencil/core';
+
+@Component({
+  tag: 'radio-group-example',
+  styleUrl: 'radio-group-example.css'
+})
+export class RadioGroupExample {
+  render() {
+    return [
+      <ion-list>
+        <ion-radio-group>
+          <ion-list-header>
+            <ion-label>
+              Auto Manufacturers
+            </ion-label>
+          </ion-list-header>
+
+          <ion-item>
+            <ion-label>Cord</ion-label>
+            <ion-radio value="cord"></ion-radio>
+          </ion-item>
+
+          <ion-item>
+            <ion-label>Duesenberg</ion-label>
+            <ion-radio value="duesenberg"></ion-radio>
+          </ion-item>
+
+          <ion-item>
+            <ion-label>Hudson</ion-label>
+            <ion-radio value="hudson"></ion-radio>
+          </ion-item>
+
+          <ion-item>
+            <ion-label>Packard</ion-label>
+            <ion-radio value="packard"></ion-radio>
+          </ion-item>
+
+          <ion-item>
+            <ion-label>Studebaker</ion-label>
+            <ion-radio value="studebaker"></ion-radio>
+          </ion-item>
+        </ion-radio-group>
+      </ion-list>
+    ];
+  }
+}
+```
diff --git a/core/src/components/radio/readme.md b/core/src/components/radio/readme.md
index 77e5d17561..01c03eb856 100644
--- a/core/src/components/radio/readme.md
+++ b/core/src/components/radio/readme.md
@@ -87,6 +87,46 @@ export const RadioExamples: React.FC = () => {
 ```
 
 
+### Stencil
+
+```tsx
+import { Component, h } from '@stencil/core';
+
+@Component({
+  tag: 'radio-example',
+  styleUrl: 'radio-example.css'
+})
+export class RadioExample {
+  render() {
+    return [
+      <ion-list>
+        <ion-radio-group value="biff">
+          <ion-list-header>
+            <ion-label>Name</ion-label>
+          </ion-list-header>
+
+          <ion-item>
+            <ion-label>Biff</ion-label>
+            <ion-radio slot="start" value="biff"></ion-radio>
+          </ion-item>
+
+          <ion-item>
+            <ion-label>Griff</ion-label>
+            <ion-radio slot="start" value="griff"></ion-radio>
+          </ion-item>
+
+          <ion-item>
+            <ion-label>Buford</ion-label>
+            <ion-radio slot="start" value="buford"></ion-radio>
+          </ion-item>
+        </ion-radio-group>
+      </ion-list>
+    ];
+  }
+}
+```
+
+
 ### Vue
 
 ```html
diff --git a/core/src/components/radio/usage/stencil.md b/core/src/components/radio/usage/stencil.md
new file mode 100644
index 0000000000..817b837e13
--- /dev/null
+++ b/core/src/components/radio/usage/stencil.md
@@ -0,0 +1,36 @@
+```tsx
+import { Component, h } from '@stencil/core';
+
+@Component({
+  tag: 'radio-example',
+  styleUrl: 'radio-example.css'
+})
+export class RadioExample {
+  render() {
+    return [
+      <ion-list>
+        <ion-radio-group value="biff">
+          <ion-list-header>
+            <ion-label>Name</ion-label>
+          </ion-list-header>
+
+          <ion-item>
+            <ion-label>Biff</ion-label>
+            <ion-radio slot="start" value="biff"></ion-radio>
+          </ion-item>
+
+          <ion-item>
+            <ion-label>Griff</ion-label>
+            <ion-radio slot="start" value="griff"></ion-radio>
+          </ion-item>
+
+          <ion-item>
+            <ion-label>Buford</ion-label>
+            <ion-radio slot="start" value="buford"></ion-radio>
+          </ion-item>
+        </ion-radio-group>
+      </ion-list>
+    ];
+  }
+}
+```
diff --git a/core/src/components/range/readme.md b/core/src/components/range/readme.md
index 7c6c221e0c..a1d36dd4d9 100644
--- a/core/src/components/range/readme.md
+++ b/core/src/components/range/readme.md
@@ -165,6 +165,55 @@ export const RangeExamples: React.FC = () => {
 ```
 
 
+### Stencil
+
+```tsx
+import { Component, h } from '@stencil/core';
+
+@Component({
+  tag: 'range-example',
+  styleUrl: 'range-example.css'
+})
+export class RangeExample {
+  render() {
+    return [
+      <ion-list>
+        <ion-item>
+          <ion-range color="danger" pin={true}></ion-range>
+        </ion-item>
+
+        <ion-item>
+          <ion-range min={-200} max={200} color="secondary">
+            <ion-label slot="start">-200</ion-label>
+            <ion-label slot="end">200</ion-label>
+          </ion-range>
+        </ion-item>
+
+        <ion-item>
+          <ion-range min={20} max={80} step={2}>
+            <ion-icon size="small" slot="start" name="sunny"></ion-icon>
+            <ion-icon slot="end" name="sunny"></ion-icon>
+          </ion-range>
+        </ion-item>
+
+        <ion-item>
+          <ion-range min={1000} max={2000} step={100} snaps={true} color="secondary"></ion-range>
+        </ion-item>
+
+        <ion-item>
+          <ion-range min={1000} max={2000} step={100} snaps={true} ticks={false} color="secondary"></ion-range>
+        </ion-item>
+
+        <ion-item>
+          <ion-range dualKnobs={true} min={21} max={72} step={3} snaps={true}></ion-range>
+        </ion-item>
+      </ion-list>
+    ];
+  }
+}
+```
+
+
 ### Vue
 
 ```html
diff --git a/core/src/components/range/usage/stencil.md b/core/src/components/range/usage/stencil.md
new file mode 100644
index 0000000000..b5e7a5dacb
--- /dev/null
+++ b/core/src/components/range/usage/stencil.md
@@ -0,0 +1,45 @@
+```tsx
+import { Component, h } from '@stencil/core';
+
+@Component({
+  tag: 'range-example',
+  styleUrl: 'range-example.css'
+})
+export class RangeExample {
+  render() {
+    return [
+      <ion-list>
+        <ion-item>
+          <ion-range color="danger" pin={true}></ion-range>
+        </ion-item>
+
+        <ion-item>
+          <ion-range min={-200} max={200} color="secondary">
+            <ion-label slot="start">-200</ion-label>
+            <ion-label slot="end">200</ion-label>
+          </ion-range>
+        </ion-item>
+
+        <ion-item>
+          <ion-range min={20} max={80} step={2}>
+            <ion-icon size="small" slot="start" name="sunny"></ion-icon>
+            <ion-icon slot="end" name="sunny"></ion-icon>
+          </ion-range>
+        </ion-item>
+
+        <ion-item>
+          <ion-range min={1000} max={2000} step={100} snaps={true} color="secondary"></ion-range>
+        </ion-item>
+
+        <ion-item>
+          <ion-range min={1000} max={2000} step={100} snaps={true} ticks={false} color="secondary"></ion-range>
+        </ion-item>
+
+        <ion-item>
+          <ion-range dualKnobs={true} min={21} max={72} step={3} snaps={true}></ion-range>
+        </ion-item>
+      </ion-list>
+    ];
+  }
+}
+```
diff --git a/core/src/components/refresher/readme.md b/core/src/components/refresher/readme.md
index 7cc88f987d..ed1710cc95 100644
--- a/core/src/components/refresher/readme.md
+++ b/core/src/components/refresher/readme.md
@@ -163,6 +163,58 @@ export const RefresherExample: React.FC = () => (
 ```
 
 
+### Stencil
+
+```tsx
+import { Component, h } from '@stencil/core';
+
+@Component({
+  tag: 'refresher-example',
+  styleUrl: 'refresher-example.css'
+})
+export class RefresherExample {
+  doRefresh(ev: any) {
+    console.log('Begin async operation');
+
+    setTimeout(() => {
+      console.log('Async operation has ended');
+      ev.target.complete();
+    }, 2000);
+  }
+
+  render() {
+    return [
+      // Default Refresher
+      <ion-content>
+        <ion-refresher slot="fixed" onIonRefresh={(ev) => this.doRefresh(ev)}>
+          <ion-refresher-content></ion-refresher-content>
+        </ion-refresher>
+      </ion-content>,
+
+      // Custom Refresher Properties
+      <ion-content>
+        <ion-refresher slot="fixed" pullFactor={0.5} pullMin={100} pullMax={200}>
+          <ion-refresher-content></ion-refresher-content>
+        </ion-refresher>
+      </ion-content>,
+
+      // Custom Refresher Content
+      <ion-content>
+        <ion-refresher slot="fixed" onIonRefresh={(ev) => this.doRefresh(ev)}>
+          <ion-refresher-content
+            pullingIcon="chevron-down-circle-outline"
+            pullingText="Pull to refresh"
+            refreshingSpinner="circles"
+            refreshingText="Refreshing...">
+          </ion-refresher-content>
+        </ion-refresher>
+      </ion-content>
+    ];
+  }
+}
+```
+
+
 ### Vue
 
 ```html
diff --git a/core/src/components/refresher/usage/stencil.md b/core/src/components/refresher/usage/stencil.md
new file mode 100644
index 0000000000..26af9bdbc6
--- /dev/null
+++ b/core/src/components/refresher/usage/stencil.md
@@ -0,0 +1,48 @@
+```tsx
+import { Component, h } from '@stencil/core';
+
+@Component({
+  tag: 'refresher-example',
+  styleUrl: 'refresher-example.css'
+})
+export class RefresherExample {
+  doRefresh(ev: any) {
+    console.log('Begin async operation');
+
+    setTimeout(() => {
+      console.log('Async operation has ended');
+      ev.target.complete();
+    }, 2000);
+  }
+
+  render() {
+    return [
+      // Default Refresher
+      <ion-content>
+        <ion-refresher slot="fixed" onIonRefresh={(ev) => this.doRefresh(ev)}>
+          <ion-refresher-content></ion-refresher-content>
+        </ion-refresher>
+      </ion-content>,
+
+      // Custom Refresher Properties
+      <ion-content>
+        <ion-refresher slot="fixed" pullFactor={0.5} pullMin={100} pullMax={200}>
+          <ion-refresher-content></ion-refresher-content>
+        </ion-refresher>
+      </ion-content>,
+
+      // Custom Refresher Content
+      <ion-content>
+        <ion-refresher slot="fixed" onIonRefresh={(ev) => this.doRefresh(ev)}>
+          <ion-refresher-content
+            pullingIcon="chevron-down-circle-outline"
+            pullingText="Pull to refresh"
+            refreshingSpinner="circles"
+            refreshingText="Refreshing...">
+          </ion-refresher-content>
+        </ion-refresher>
+      </ion-content>
+    ];
+  }
+}
+```
\ No newline at end of file
diff --git a/core/src/components/reorder-group/readme.md b/core/src/components/reorder-group/readme.md
index 149460a657..bd22110ad2 100644
--- a/core/src/components/reorder-group/readme.md
+++ b/core/src/components/reorder-group/readme.md
@@ -116,7 +116,7 @@ export class ReorderGroupExample {
 }
 ```
 
-#### Updating Data
+### Updating Data
 
 ```javascript
 import { Component, ViewChild } from '@angular/core';
@@ -239,7 +239,7 @@ reorderGroup.addEventListener('ionItemReorder', ({detail}) => {
 });
 ```
 
-#### Updating Data
+### Updating Data
 
 ```javascript
 const items = [1, 2, 3, 4, 5];
@@ -338,7 +338,7 @@ export const ReorderGroupExample: React.FC = () => (
 );
 ```
 
-#### Updating Data
+### Updating Data
 
 ```tsx
 const items = [1, 2, 3, 4, 5];
@@ -359,6 +359,149 @@ function doReorder(event: CustomEvent) {
 ```
 
 
+### Stencil
+
+```tsx
+import { Component, h } from '@stencil/core';
+
+@Component({
+  tag: 'reorder-group-example',
+  styleUrl: 'reorder-group-example.css'
+})
+export class ReorderGroupExample {
+  doReorder(ev: any) {
+    // The `from` and `to` properties contain the index of the item
+    // when the drag started and ended, respectively
+    console.log('Dragged from index', ev.detail.from, 'to', ev.detail.to);
+
+    // Finish the reorder and position the item in the DOM based on
+    // where the gesture ended. This method can also be called directly
+    // by the reorder group
+    ev.detail.complete();
+  }
+
+  render() {
+    return [
+      // The reorder gesture is disabled by default, enable it to drag and drop items
+      <ion-reorder-group onIonItemReorder={(ev) => this.doReorder(ev)} disabled={false}>
+        {/* Default reorder icon, end aligned items */}
+        <ion-item>
+          <ion-label>
+            Item 1
+          </ion-label>
+          <ion-reorder slot="end"></ion-reorder>
+        </ion-item>
+
+        <ion-item>
+          <ion-label>
+            Item 2
+          </ion-label>
+          <ion-reorder slot="end"></ion-reorder>
+        </ion-item>
+
+        {/* Default reorder icon, start aligned items */}
+        <ion-item>
+          <ion-reorder slot="start"></ion-reorder>
+          <ion-label>
+            Item 3
+          </ion-label>
+        </ion-item>
+
+        <ion-item>
+          <ion-reorder slot="start"></ion-reorder>
+          <ion-label>
+            Item 4
+          </ion-label>
+        </ion-item>
+
+        {/* Custom reorder icon end items */}
+        <ion-item>
+          <ion-label>
+            Item 5
+          </ion-label>
+          <ion-reorder slot="end">
+            <ion-icon name="pizza"></ion-icon>
+          </ion-reorder>
+        </ion-item>
+
+        <ion-item>
+          <ion-label>
+            Item 6
+          </ion-label>
+          <ion-reorder slot="end">
+            <ion-icon name="pizza"></ion-icon>
+          </ion-reorder>
+        </ion-item>
+
+        {/* Items wrapped in a reorder, entire item can be dragged */}
+        <ion-reorder>
+          <ion-item>
+            <ion-label>
+              Item 7
+            </ion-label>
+          </ion-item>
+        </ion-reorder>
+
+        <ion-reorder>
+          <ion-item>
+            <ion-label>
+              Item 8
+            </ion-label>
+          </ion-item>
+        </ion-reorder>
+      </ion-reorder-group>
+    ]
+  }
+}
+```
+
+### Updating Data
+
+```tsx
+import { Component, State, h } from '@stencil/core';
+
+@Component({
+  tag: 'reorder-group-example',
+  styleUrl: 'reorder-group-example.css'
+})
+export class ReorderGroupExample {
+  @State() items = [1, 2, 3, 4, 5];
+
+  doReorder(ev: any) {
+    // Before complete is called with the items they will remain in the
+    // order before the drag
+    console.log('Before complete', this.items);
+
+    // Finish the reorder and position the item in the DOM based on
+    // where the gesture ended. Update the items variable to the
+    // new order of items
+    this.items = ev.detail.complete(this.items);
+
+    // After complete is called the items will be in the new order
+    console.log('After complete', this.items);
+  }
+
+  render() {
+    return [
+      // The reorder gesture is disabled by default, enable it to drag and drop items
+      <ion-reorder-group onIonItemReorder={(ev) => this.doReorder(ev)} disabled={false}>
+
+        {this.items.map(item =>
+          <ion-item>
+            <ion-label>
+              Item { item }
+            </ion-label>
+            <ion-reorder slot="end"></ion-reorder>
+          </ion-item>
+        )}
+
+      </ion-reorder-group>
+    ]
+  }
+}
+```
+
+
 ### Vue
 
 ```html
@@ -453,7 +596,7 @@ function doReorder(event: CustomEvent) {
 </script>
 ```
 
-#### Updating Data
+### Updating Data
 
 ```html
 <script lang="ts">
diff --git a/core/src/components/reorder-group/usage/angular.md b/core/src/components/reorder-group/usage/angular.md
index 4ba9ceb6be..43111202e6 100644
--- a/core/src/components/reorder-group/usage/angular.md
+++ b/core/src/components/reorder-group/usage/angular.md
@@ -100,7 +100,7 @@ export class ReorderGroupExample {
 }
 ```
 
-#### Updating Data
+### Updating Data
 
 ```javascript
 import { Component, ViewChild } from '@angular/core';
diff --git a/core/src/components/reorder-group/usage/javascript.md b/core/src/components/reorder-group/usage/javascript.md
index a51fe347dd..021df65310 100644
--- a/core/src/components/reorder-group/usage/javascript.md
+++ b/core/src/components/reorder-group/usage/javascript.md
@@ -84,7 +84,7 @@ reorderGroup.addEventListener('ionItemReorder', ({detail}) => {
 });
 ```
 
-#### Updating Data
+### Updating Data
 
 ```javascript
 const items = [1, 2, 3, 4, 5];
diff --git a/core/src/components/reorder-group/usage/react.md b/core/src/components/reorder-group/usage/react.md
index 2f28116e28..8bfe6c2bbc 100644
--- a/core/src/components/reorder-group/usage/react.md
+++ b/core/src/components/reorder-group/usage/react.md
@@ -73,7 +73,7 @@ export const ReorderGroupExample: React.FC = () => (
 );
 ```
 
-#### Updating Data
+### Updating Data
 
 ```tsx
 const items = [1, 2, 3, 4, 5];
diff --git a/core/src/components/reorder-group/usage/stencil.md b/core/src/components/reorder-group/usage/stencil.md
new file mode 100644
index 0000000000..cacc74f035
--- /dev/null
+++ b/core/src/components/reorder-group/usage/stencil.md
@@ -0,0 +1,139 @@
+```tsx
+import { Component, h } from '@stencil/core';
+
+@Component({
+  tag: 'reorder-group-example',
+  styleUrl: 'reorder-group-example.css'
+})
+export class ReorderGroupExample {
+  doReorder(ev: any) {
+    // The `from` and `to` properties contain the index of the item
+    // when the drag started and ended, respectively
+    console.log('Dragged from index', ev.detail.from, 'to', ev.detail.to);
+
+    // Finish the reorder and position the item in the DOM based on
+    // where the gesture ended. This method can also be called directly
+    // by the reorder group
+    ev.detail.complete();
+  }
+
+  render() {
+    return [
+      // The reorder gesture is disabled by default, enable it to drag and drop items
+      <ion-reorder-group onIonItemReorder={(ev) => this.doReorder(ev)} disabled={false}>
+        {/* Default reorder icon, end aligned items */}
+        <ion-item>
+          <ion-label>
+            Item 1
+          </ion-label>
+          <ion-reorder slot="end"></ion-reorder>
+        </ion-item>
+
+        <ion-item>
+          <ion-label>
+            Item 2
+          </ion-label>
+          <ion-reorder slot="end"></ion-reorder>
+        </ion-item>
+
+        {/* Default reorder icon, start aligned items */}
+        <ion-item>
+          <ion-reorder slot="start"></ion-reorder>
+          <ion-label>
+            Item 3
+          </ion-label>
+        </ion-item>
+
+        <ion-item>
+          <ion-reorder slot="start"></ion-reorder>
+          <ion-label>
+            Item 4
+          </ion-label>
+        </ion-item>
+
+        {/* Custom reorder icon end items */}
+        <ion-item>
+          <ion-label>
+            Item 5
+          </ion-label>
+          <ion-reorder slot="end">
+            <ion-icon name="pizza"></ion-icon>
+          </ion-reorder>
+        </ion-item>
+
+        <ion-item>
+          <ion-label>
+            Item 6
+          </ion-label>
+          <ion-reorder slot="end">
+            <ion-icon name="pizza"></ion-icon>
+          </ion-reorder>
+        </ion-item>
+
+        {/* Items wrapped in a reorder, entire item can be dragged */}
+        <ion-reorder>
+          <ion-item>
+            <ion-label>
+              Item 7
+            </ion-label>
+          </ion-item>
+        </ion-reorder>
+
+        <ion-reorder>
+          <ion-item>
+            <ion-label>
+              Item 8
+            </ion-label>
+          </ion-item>
+        </ion-reorder>
+      </ion-reorder-group>
+    ]
+  }
+}
+```
+
+### Updating Data
+
+```tsx
+import { Component, State, h } from '@stencil/core';
+
+@Component({
+  tag: 'reorder-group-example',
+  styleUrl: 'reorder-group-example.css'
+})
+export class ReorderGroupExample {
+  @State() items = [1, 2, 3, 4, 5];
+
+  doReorder(ev: any) {
+    // Before complete is called with the items they will remain in the
+    // order before the drag
+    console.log('Before complete', this.items);
+
+    // Finish the reorder and position the item in the DOM based on
+    // where the gesture ended. Update the items variable to the
+    // new order of items
+    this.items = ev.detail.complete(this.items);
+
+    // After complete is called the items will be in the new order
+    console.log('After complete', this.items);
+  }
+
+  render() {
+    return [
+      // The reorder gesture is disabled by default, enable it to drag and drop items
+      <ion-reorder-group onIonItemReorder={(ev) => this.doReorder(ev)} disabled={false}>
+
+        {this.items.map(item =>
+          <ion-item>
+            <ion-label>
+              Item { item }
+            </ion-label>
+            <ion-reorder slot="end"></ion-reorder>
+          </ion-item>
+        )}
+
+      </ion-reorder-group>
+    ]
+  }
+}
+```
\ No newline at end of file
diff --git a/core/src/components/reorder-group/usage/vue.md b/core/src/components/reorder-group/usage/vue.md
index bcf11107c2..019013527f 100644
--- a/core/src/components/reorder-group/usage/vue.md
+++ b/core/src/components/reorder-group/usage/vue.md
@@ -90,7 +90,7 @@
 </script>
 ```
 
-#### Updating Data
+### Updating Data
 
 ```html
 <script lang="ts">
diff --git a/core/src/components/reorder/readme.md b/core/src/components/reorder/readme.md
index fb58b1758d..950cbdbd42 100644
--- a/core/src/components/reorder/readme.md
+++ b/core/src/components/reorder/readme.md
@@ -13,141 +13,8 @@ Reorder is a component that allows an item in a group of items to be dragged to
 ### Angular / javascript
 
 ```html
-<!-- Default reorder icon, end aligned items -->
-<ion-item>
-  <ion-label>
-    Item 1
-  </ion-label>
-  <ion-reorder slot="end"></ion-reorder>
-</ion-item>
-
-<ion-item>
-  <ion-label>
-    Item 2
-  </ion-label>
-  <ion-reorder slot="end"></ion-reorder>
-</ion-item>
-
-<!-- Default reorder icon, start aligned items -->
-<ion-item>
-  <ion-reorder slot="start"></ion-reorder>
-  <ion-label>
-    Item 3
-  </ion-label>
-</ion-item>
-
-<ion-item>
-  <ion-reorder slot="start"></ion-reorder>
-  <ion-label>
-    Item 4
-  </ion-label>
-</ion-item>
-
-<!-- Custom reorder icon end items -->
-<ion-item>
-  <ion-label>
-    Item 5
-  </ion-label>
-  <ion-reorder slot="end">
-    <ion-icon name="pizza"></ion-icon>
-  </ion-reorder>
-</ion-item>
-
-<ion-item>
-  <ion-label>
-    Item 6
-  </ion-label>
-  <ion-reorder slot="end">
-    <ion-icon name="pizza"></ion-icon>
-  </ion-reorder>
-</ion-item>
-
-<!-- Items wrapped in a reorder, entire item can be dragged -->
-<ion-reorder>
-  <ion-item>
-    <ion-label>
-      Item 7
-    </ion-label>
-  </ion-item>
-</ion-reorder>
-
-<ion-reorder>
-  <ion-item>
-    <ion-label>
-      Item 8
-    </ion-label>
-  </ion-item>
-</ion-reorder>
-```
-
-
-### React
-
-```tsx
-import React from 'react';
-import { IonIcon, IonItem, IonLabel, IonReorder, IonContent } from '@ionic/react';
-import { pizza } from 'ionicons/icons';
-
-export const ReorderExample: React.FC = () => (
-  <IonContent>
-    {/*-- Default reorder icon, end aligned items --*/}
-    <IonItem>
-      <IonLabel>Item 1</IonLabel>
-      <IonReorder slot="end" />
-    </IonItem>
-
-    <IonItem>
-      <IonLabel>Item 2</IonLabel>
-      <IonReorder slot="end" />
-    </IonItem>
-
-    {/*-- Default reorder icon, start aligned items --*/}
-    <IonItem>
-      <IonReorder slot="start" />
-      <IonLabel>Item 3</IonLabel>
-    </IonItem>
-
-    <IonItem>
-      <IonReorder slot="start" />
-      <IonLabel>Item 4</IonLabel>
-    </IonItem>
-
-    {/*-- Custom reorder icon end items --*/}
-    <IonItem>
-      <IonLabel>Item 5</IonLabel>
-      <IonReorder slot="end">
-        <IonIcon icon={pizza} />
-      </IonReorder>
-    </IonItem>
-
-    <IonItem>
-      <IonLabel>Item 6</IonLabel>
-      <IonReorder slot="end">
-        <IonIcon icon={pizza} />
-      </IonReorder>
-    </IonItem>
-
-    {/*-- Items wrapped in a reorder, entire item can be dragged --*/}
-    <IonReorder>
-      <IonItem>
-        <IonLabel>Item 7</IonLabel>
-      </IonItem>
-    </IonReorder>
-
-    <IonReorder>
-      <IonItem>
-        <IonLabel>Item 8</IonLabel>
-      </IonItem>
-    </IonReorder>
-  </IonContent>
-);
-```
-
-
-### Vue
-
-```html
-<template>
+<!-- The reorder gesture is disabled by default, enable it to drag and drop items -->
+<ion-reorder-group disabled="false">
   <!-- Default reorder icon, end aligned items -->
   <ion-item>
     <ion-label>
@@ -213,6 +80,234 @@ export const ReorderExample: React.FC = () => (
       </ion-label>
     </ion-item>
   </ion-reorder>
+</ion-reorder-group>
+```
+
+
+### React
+
+```tsx
+import React from 'react';
+import { IonIcon, IonItem, IonLabel, IonReorder, IonReorderGroup, IonContent } from '@ionic/react';
+import { pizza } from 'ionicons/icons';
+
+export const ReorderExample: React.FC = () => (
+  <IonContent>
+    {/*-- The reorder gesture is disabled by default, enable it to drag and drop items --*/}
+    <IonReorderGroup disabled={false}>
+      {/*-- Default reorder icon, end aligned items --*/}
+      <IonItem>
+        <IonLabel>Item 1</IonLabel>
+        <IonReorder slot="end" />
+      </IonItem>
+
+      <IonItem>
+        <IonLabel>Item 2</IonLabel>
+        <IonReorder slot="end" />
+      </IonItem>
+
+      {/*-- Default reorder icon, start aligned items --*/}
+      <IonItem>
+        <IonReorder slot="start" />
+        <IonLabel>Item 3</IonLabel>
+      </IonItem>
+
+      <IonItem>
+        <IonReorder slot="start" />
+        <IonLabel>Item 4</IonLabel>
+      </IonItem>
+
+      {/*-- Custom reorder icon end items --*/}
+      <IonItem>
+        <IonLabel>Item 5</IonLabel>
+        <IonReorder slot="end">
+          <IonIcon icon={pizza} />
+        </IonReorder>
+      </IonItem>
+
+      <IonItem>
+        <IonLabel>Item 6</IonLabel>
+        <IonReorder slot="end">
+          <IonIcon icon={pizza} />
+        </IonReorder>
+      </IonItem>
+
+      {/*-- Items wrapped in a reorder, entire item can be dragged --*/}
+      <IonReorder>
+        <IonItem>
+          <IonLabel>Item 7</IonLabel>
+        </IonItem>
+      </IonReorder>
+
+      <IonReorder>
+        <IonItem>
+          <IonLabel>Item 8</IonLabel>
+        </IonItem>
+      </IonReorder>
+    </IonReorderGroup>
+  </IonContent>
+);
+```
+
+
+### Stencil
+
+```tsx
+import { Component, h } from '@stencil/core';
+
+@Component({
+  tag: 'reorder-example',
+  styleUrl: 'reorder-example.css'
+})
+export class ReorderExample {
+  render() {
+    return [
+      // The reorder gesture is disabled by default, enable it to drag and drop items
+      <ion-reorder-group disabled={false}>
+        {/* Default reorder icon, end aligned items */}
+        <ion-item>
+          <ion-label>
+            Item 1
+          </ion-label>
+          <ion-reorder slot="end"></ion-reorder>
+        </ion-item>
+
+        <ion-item>
+          <ion-label>
+            Item 2
+          </ion-label>
+          <ion-reorder slot="end"></ion-reorder>
+        </ion-item>
+
+        {/* Default reorder icon, start aligned items */}
+        <ion-item>
+          <ion-reorder slot="start"></ion-reorder>
+          <ion-label>
+            Item 3
+          </ion-label>
+        </ion-item>
+
+        <ion-item>
+          <ion-reorder slot="start"></ion-reorder>
+          <ion-label>
+            Item 4
+          </ion-label>
+        </ion-item>
+
+        {/* Custom reorder icon end items */}
+        <ion-item>
+          <ion-label>
+            Item 5
+          </ion-label>
+          <ion-reorder slot="end">
+            <ion-icon name="pizza"></ion-icon>
+          </ion-reorder>
+        </ion-item>
+
+        <ion-item>
+          <ion-label>
+            Item 6
+          </ion-label>
+          <ion-reorder slot="end">
+            <ion-icon name="pizza"></ion-icon>
+          </ion-reorder>
+        </ion-item>
+
+        {/* Items wrapped in a reorder, entire item can be dragged */}
+        <ion-reorder>
+          <ion-item>
+            <ion-label>
+              Item 7
+            </ion-label>
+          </ion-item>
+        </ion-reorder>
+
+        <ion-reorder>
+          <ion-item>
+            <ion-label>
+              Item 8
+            </ion-label>
+          </ion-item>
+        </ion-reorder>
+      </ion-reorder-group>
+    ];
+  }
+}
+```
+
+
+### Vue
+
+```html
+<template>
+  <!-- The reorder gesture is disabled by default, enable it to drag and drop items -->
+  <ion-reorder-group disabled="false">
+    <!-- Default reorder icon, end aligned items -->
+    <ion-item>
+      <ion-label>
+        Item 1
+      </ion-label>
+      <ion-reorder slot="end"></ion-reorder>
+    </ion-item>
+
+    <ion-item>
+      <ion-label>
+        Item 2
+      </ion-label>
+      <ion-reorder slot="end"></ion-reorder>
+    </ion-item>
+
+    <!-- Default reorder icon, start aligned items -->
+    <ion-item>
+      <ion-reorder slot="start"></ion-reorder>
+      <ion-label>
+        Item 3
+      </ion-label>
+    </ion-item>
+
+    <ion-item>
+      <ion-reorder slot="start"></ion-reorder>
+      <ion-label>
+        Item 4
+      </ion-label>
+    </ion-item>
+
+    <!-- Custom reorder icon end items -->
+    <ion-item>
+      <ion-label>
+        Item 5
+      </ion-label>
+      <ion-reorder slot="end">
+        <ion-icon name="pizza"></ion-icon>
+      </ion-reorder>
+    </ion-item>
+
+    <ion-item>
+      <ion-label>
+        Item 6
+      </ion-label>
+      <ion-reorder slot="end">
+        <ion-icon name="pizza"></ion-icon>
+      </ion-reorder>
+    </ion-item>
+
+    <!-- Items wrapped in a reorder, entire item can be dragged -->
+    <ion-reorder>
+      <ion-item>
+        <ion-label>
+          Item 7
+        </ion-label>
+      </ion-item>
+    </ion-reorder>
+
+    <ion-reorder>
+      <ion-item>
+        <ion-label>
+          Item 8
+        </ion-label>
+      </ion-item>
+    </ion-reorder>
+  </ion-reorder-group>
 </template>
 ```
 
diff --git a/core/src/components/reorder/usage/angular.md b/core/src/components/reorder/usage/angular.md
index 2163e3c756..3dac711521 100644
--- a/core/src/components/reorder/usage/angular.md
+++ b/core/src/components/reorder/usage/angular.md
@@ -1,68 +1,71 @@
 
 ```html
-<!-- Default reorder icon, end aligned items -->
-<ion-item>
-  <ion-label>
-    Item 1
-  </ion-label>
-  <ion-reorder slot="end"></ion-reorder>
-</ion-item>
-
-<ion-item>
-  <ion-label>
-    Item 2
-  </ion-label>
-  <ion-reorder slot="end"></ion-reorder>
-</ion-item>
-
-<!-- Default reorder icon, start aligned items -->
-<ion-item>
-  <ion-reorder slot="start"></ion-reorder>
-  <ion-label>
-    Item 3
-  </ion-label>
-</ion-item>
-
-<ion-item>
-  <ion-reorder slot="start"></ion-reorder>
-  <ion-label>
-    Item 4
-  </ion-label>
-</ion-item>
-
-<!-- Custom reorder icon end items -->
-<ion-item>
-  <ion-label>
-    Item 5
-  </ion-label>
-  <ion-reorder slot="end">
-    <ion-icon name="pizza"></ion-icon>
-  </ion-reorder>
-</ion-item>
-
-<ion-item>
-  <ion-label>
-    Item 6
-  </ion-label>
-  <ion-reorder slot="end">
-    <ion-icon name="pizza"></ion-icon>
-  </ion-reorder>
-</ion-item>
-
-<!-- Items wrapped in a reorder, entire item can be dragged -->
-<ion-reorder>
+<!-- The reorder gesture is disabled by default, enable it to drag and drop items -->
+<ion-reorder-group disabled="false">
+  <!-- Default reorder icon, end aligned items -->
   <ion-item>
     <ion-label>
-      Item 7
+      Item 1
     </ion-label>
+    <ion-reorder slot="end"></ion-reorder>
   </ion-item>
-</ion-reorder>
 
-<ion-reorder>
   <ion-item>
     <ion-label>
-      Item 8
+      Item 2
+    </ion-label>
+    <ion-reorder slot="end"></ion-reorder>
+  </ion-item>
+
+  <!-- Default reorder icon, start aligned items -->
+  <ion-item>
+    <ion-reorder slot="start"></ion-reorder>
+    <ion-label>
+      Item 3
     </ion-label>
   </ion-item>
-</ion-reorder>
+
+  <ion-item>
+    <ion-reorder slot="start"></ion-reorder>
+    <ion-label>
+      Item 4
+    </ion-label>
+  </ion-item>
+
+  <!-- Custom reorder icon end items -->
+  <ion-item>
+    <ion-label>
+      Item 5
+    </ion-label>
+    <ion-reorder slot="end">
+      <ion-icon name="pizza"></ion-icon>
+    </ion-reorder>
+  </ion-item>
+
+  <ion-item>
+    <ion-label>
+      Item 6
+    </ion-label>
+    <ion-reorder slot="end">
+      <ion-icon name="pizza"></ion-icon>
+    </ion-reorder>
+  </ion-item>
+
+  <!-- Items wrapped in a reorder, entire item can be dragged -->
+  <ion-reorder>
+    <ion-item>
+      <ion-label>
+        Item 7
+      </ion-label>
+    </ion-item>
+  </ion-reorder>
+
+  <ion-reorder>
+    <ion-item>
+      <ion-label>
+        Item 8
+      </ion-label>
+    </ion-item>
+  </ion-reorder>
+</ion-reorder-group>
 ```
\ No newline at end of file
diff --git a/core/src/components/reorder/usage/javascript.md b/core/src/components/reorder/usage/javascript.md
index 2163e3c756..3dac711521 100644
--- a/core/src/components/reorder/usage/javascript.md
+++ b/core/src/components/reorder/usage/javascript.md
@@ -1,68 +1,71 @@
 
 ```html
-<!-- Default reorder icon, end aligned items -->
-<ion-item>
-  <ion-label>
-    Item 1
-  </ion-label>
-  <ion-reorder slot="end"></ion-reorder>
-</ion-item>
-
-<ion-item>
-  <ion-label>
-    Item 2
-  </ion-label>
-  <ion-reorder slot="end"></ion-reorder>
-</ion-item>
-
-<!-- Default reorder icon, start aligned items -->
-<ion-item>
-  <ion-reorder slot="start"></ion-reorder>
-  <ion-label>
-    Item 3
-  </ion-label>
-</ion-item>
-
-<ion-item>
-  <ion-reorder slot="start"></ion-reorder>
-  <ion-label>
-    Item 4
-  </ion-label>
-</ion-item>
-
-<!-- Custom reorder icon end items -->
-<ion-item>
-  <ion-label>
-    Item 5
-  </ion-label>
-  <ion-reorder slot="end">
-    <ion-icon name="pizza"></ion-icon>
-  </ion-reorder>
-</ion-item>
-
-<ion-item>
-  <ion-label>
-    Item 6
-  </ion-label>
-  <ion-reorder slot="end">
-    <ion-icon name="pizza"></ion-icon>
-  </ion-reorder>
-</ion-item>
-
-<!-- Items wrapped in a reorder, entire item can be dragged -->
-<ion-reorder>
+<!-- The reorder gesture is disabled by default, enable it to drag and drop items -->
+<ion-reorder-group disabled="false">
+  <!-- Default reorder icon, end aligned items -->
   <ion-item>
     <ion-label>
-      Item 7
+      Item 1
     </ion-label>
+    <ion-reorder slot="end"></ion-reorder>
   </ion-item>
-</ion-reorder>
 
-<ion-reorder>
   <ion-item>
     <ion-label>
-      Item 8
+      Item 2
+    </ion-label>
+    <ion-reorder slot="end"></ion-reorder>
+  </ion-item>
+
+  <!-- Default reorder icon, start aligned items -->
+  <ion-item>
+    <ion-reorder slot="start"></ion-reorder>
+    <ion-label>
+      Item 3
     </ion-label>
   </ion-item>
-</ion-reorder>
+
+  <ion-item>
+    <ion-reorder slot="start"></ion-reorder>
+    <ion-label>
+      Item 4
+    </ion-label>
+  </ion-item>
+
+  <!-- Custom reorder icon end items -->
+  <ion-item>
+    <ion-label>
+      Item 5
+    </ion-label>
+    <ion-reorder slot="end">
+      <ion-icon name="pizza"></ion-icon>
+    </ion-reorder>
+  </ion-item>
+
+  <ion-item>
+    <ion-label>
+      Item 6
+    </ion-label>
+    <ion-reorder slot="end">
+      <ion-icon name="pizza"></ion-icon>
+    </ion-reorder>
+  </ion-item>
+
+  <!-- Items wrapped in a reorder, entire item can be dragged -->
+  <ion-reorder>
+    <ion-item>
+      <ion-label>
+        Item 7
+      </ion-label>
+    </ion-item>
+  </ion-reorder>
+
+  <ion-reorder>
+    <ion-item>
+      <ion-label>
+        Item 8
+      </ion-label>
+    </ion-item>
+  </ion-reorder>
+</ion-reorder-group>
 ```
\ No newline at end of file
diff --git a/core/src/components/reorder/usage/react.md b/core/src/components/reorder/usage/react.md
index a3e86e3fd2..8da015872e 100644
--- a/core/src/components/reorder/usage/react.md
+++ b/core/src/components/reorder/usage/react.md
@@ -1,59 +1,62 @@
 ```tsx
 import React from 'react';
-import { IonIcon, IonItem, IonLabel, IonReorder, IonContent } from '@ionic/react';
+import { IonIcon, IonItem, IonLabel, IonReorder, IonReorderGroup, IonContent } from '@ionic/react';
 import { pizza } from 'ionicons/icons';
 
 export const ReorderExample: React.FC = () => (
   <IonContent>
-    {/*-- Default reorder icon, end aligned items --*/}
-    <IonItem>
-      <IonLabel>Item 1</IonLabel>
-      <IonReorder slot="end" />
-    </IonItem>
-
-    <IonItem>
-      <IonLabel>Item 2</IonLabel>
-      <IonReorder slot="end" />
-    </IonItem>
-
-    {/*-- Default reorder icon, start aligned items --*/}
-    <IonItem>
-      <IonReorder slot="start" />
-      <IonLabel>Item 3</IonLabel>
-    </IonItem>
-
-    <IonItem>
-      <IonReorder slot="start" />
-      <IonLabel>Item 4</IonLabel>
-    </IonItem>
-
-    {/*-- Custom reorder icon end items --*/}
-    <IonItem>
-      <IonLabel>Item 5</IonLabel>
-      <IonReorder slot="end">
-        <IonIcon icon={pizza} />
-      </IonReorder>
-    </IonItem>
-
-    <IonItem>
-      <IonLabel>Item 6</IonLabel>
-      <IonReorder slot="end">
-        <IonIcon icon={pizza} />
-      </IonReorder>
-    </IonItem>
-
-    {/*-- Items wrapped in a reorder, entire item can be dragged --*/}
-    <IonReorder>
+    {/*-- The reorder gesture is disabled by default, enable it to drag and drop items --*/}
+    <IonReorderGroup disabled={false}>
+      {/*-- Default reorder icon, end aligned items --*/}
       <IonItem>
-        <IonLabel>Item 7</IonLabel>
+        <IonLabel>Item 1</IonLabel>
+        <IonReorder slot="end" />
       </IonItem>
-    </IonReorder>
 
-    <IonReorder>
       <IonItem>
-        <IonLabel>Item 8</IonLabel>
+        <IonLabel>Item 2</IonLabel>
+        <IonReorder slot="end" />
       </IonItem>
-    </IonReorder>
+
+      {/*-- Default reorder icon, start aligned items --*/}
+      <IonItem>
+        <IonReorder slot="start" />
+        <IonLabel>Item 3</IonLabel>
+      </IonItem>
+
+      <IonItem>
+        <IonReorder slot="start" />
+        <IonLabel>Item 4</IonLabel>
+      </IonItem>
+
+      {/*-- Custom reorder icon end items --*/}
+      <IonItem>
+        <IonLabel>Item 5</IonLabel>
+        <IonReorder slot="end">
+          <IonIcon icon={pizza} />
+        </IonReorder>
+      </IonItem>
+
+      <IonItem>
+        <IonLabel>Item 6</IonLabel>
+        <IonReorder slot="end">
+          <IonIcon icon={pizza} />
+        </IonReorder>
+      </IonItem>
+
+      {/*-- Items wrapped in a reorder, entire item can be dragged --*/}
+      <IonReorder>
+        <IonItem>
+          <IonLabel>Item 7</IonLabel>
+        </IonItem>
+      </IonReorder>
+
+      <IonReorder>
+        <IonItem>
+          <IonLabel>Item 8</IonLabel>
+        </IonItem>
+      </IonReorder>
+    </IonReorderGroup>
   </IonContent>
 );
 ```
diff --git a/core/src/components/reorder/usage/stencil.md b/core/src/components/reorder/usage/stencil.md
new file mode 100644
index 0000000000..508c303687
--- /dev/null
+++ b/core/src/components/reorder/usage/stencil.md
@@ -0,0 +1,82 @@
+```tsx
+import { Component, h } from '@stencil/core';
+
+@Component({
+  tag: 'reorder-example',
+  styleUrl: 'reorder-example.css'
+})
+export class ReorderExample {
+  render() {
+    return [
+      // The reorder gesture is disabled by default, enable it to drag and drop items
+      <ion-reorder-group disabled={false}>
+        {/* Default reorder icon, end aligned items */}
+        <ion-item>
+          <ion-label>
+            Item 1
+          </ion-label>
+          <ion-reorder slot="end"></ion-reorder>
+        </ion-item>
+
+        <ion-item>
+          <ion-label>
+            Item 2
+          </ion-label>
+          <ion-reorder slot="end"></ion-reorder>
+        </ion-item>
+
+        {/* Default reorder icon, start aligned items */}
+        <ion-item>
+          <ion-reorder slot="start"></ion-reorder>
+          <ion-label>
+            Item 3
+          </ion-label>
+        </ion-item>
+
+        <ion-item>
+          <ion-reorder slot="start"></ion-reorder>
+          <ion-label>
+            Item 4
+          </ion-label>
+        </ion-item>
+
+        {/* Custom reorder icon end items */}
+        <ion-item>
+          <ion-label>
+            Item 5
+          </ion-label>
+          <ion-reorder slot="end">
+            <ion-icon name="pizza"></ion-icon>
+          </ion-reorder>
+        </ion-item>
+
+        <ion-item>
+          <ion-label>
+            Item 6
+          </ion-label>
+          <ion-reorder slot="end">
+            <ion-icon name="pizza"></ion-icon>
+          </ion-reorder>
+        </ion-item>
+
+        {/* Items wrapped in a reorder, entire item can be dragged */}
+        <ion-reorder>
+          <ion-item>
+            <ion-label>
+              Item 7
+            </ion-label>
+          </ion-item>
+        </ion-reorder>
+
+        <ion-reorder>
+          <ion-item>
+            <ion-label>
+              Item 8
+            </ion-label>
+          </ion-item>
+        </ion-reorder>
+      </ion-reorder-group>
+    ];
+  }
+}
+```
diff --git a/core/src/components/reorder/usage/vue.md b/core/src/components/reorder/usage/vue.md
index 49b0fdcbdf..0c5b3931ba 100644
--- a/core/src/components/reorder/usage/vue.md
+++ b/core/src/components/reorder/usage/vue.md
@@ -1,69 +1,72 @@
 ```html
 <template>
-  <!-- Default reorder icon, end aligned items -->
-  <ion-item>
-    <ion-label>
-      Item 1
-    </ion-label>
-    <ion-reorder slot="end"></ion-reorder>
-  </ion-item>
-
-  <ion-item>
-    <ion-label>
-      Item 2
-    </ion-label>
-    <ion-reorder slot="end"></ion-reorder>
-  </ion-item>
-
-  <!-- Default reorder icon, start aligned items -->
-  <ion-item>
-    <ion-reorder slot="start"></ion-reorder>
-    <ion-label>
-      Item 3
-    </ion-label>
-  </ion-item>
-
-  <ion-item>
-    <ion-reorder slot="start"></ion-reorder>
-    <ion-label>
-      Item 4
-    </ion-label>
-  </ion-item>
-
-  <!-- Custom reorder icon end items -->
-  <ion-item>
-    <ion-label>
-      Item 5
-    </ion-label>
-    <ion-reorder slot="end">
-      <ion-icon name="pizza"></ion-icon>
-    </ion-reorder>
-  </ion-item>
-
-  <ion-item>
-    <ion-label>
-      Item 6
-    </ion-label>
-    <ion-reorder slot="end">
-      <ion-icon name="pizza"></ion-icon>
-    </ion-reorder>
-  </ion-item>
-
-  <!-- Items wrapped in a reorder, entire item can be dragged -->
-  <ion-reorder>
+  <!-- The reorder gesture is disabled by default, enable it to drag and drop items -->
+  <ion-reorder-group disabled="false">
+    <!-- Default reorder icon, end aligned items -->
     <ion-item>
       <ion-label>
-        Item 7
+        Item 1
       </ion-label>
+      <ion-reorder slot="end"></ion-reorder>
     </ion-item>
-  </ion-reorder>
 
-  <ion-reorder>
     <ion-item>
       <ion-label>
-        Item 8
+        Item 2
+      </ion-label>
+      <ion-reorder slot="end"></ion-reorder>
+    </ion-item>
+
+    <!-- Default reorder icon, start aligned items -->
+    <ion-item>
+      <ion-reorder slot="start"></ion-reorder>
+      <ion-label>
+        Item 3
       </ion-label>
     </ion-item>
-  </ion-reorder>
+
+    <ion-item>
+      <ion-reorder slot="start"></ion-reorder>
+      <ion-label>
+        Item 4
+      </ion-label>
+    </ion-item>
+
+    <!-- Custom reorder icon end items -->
+    <ion-item>
+      <ion-label>
+        Item 5
+      </ion-label>
+      <ion-reorder slot="end">
+        <ion-icon name="pizza"></ion-icon>
+      </ion-reorder>
+    </ion-item>
+
+    <ion-item>
+      <ion-label>
+        Item 6
+      </ion-label>
+      <ion-reorder slot="end">
+        <ion-icon name="pizza"></ion-icon>
+      </ion-reorder>
+    </ion-item>
+
+    <!-- Items wrapped in a reorder, entire item can be dragged -->
+    <ion-reorder>
+      <ion-item>
+        <ion-label>
+          Item 7
+        </ion-label>
+      </ion-item>
+    </ion-reorder>
+
+    <ion-reorder>
+      <ion-item>
+        <ion-label>
+          Item 8
+        </ion-label>
+      </ion-item>
+    </ion-reorder>
+  </ion-reorder-group>
 </template>
 ```
\ No newline at end of file
diff --git a/core/src/components/ripple-effect/readme.md b/core/src/components/ripple-effect/readme.md
index 53447b1e6d..5c418113ea 100644
--- a/core/src/components/ripple-effect/readme.md
+++ b/core/src/components/ripple-effect/readme.md
@@ -89,6 +89,54 @@ export const RippleExample: React.FC = () => (
 ```
 
 
+### Stencil
+
+```tsx
+import { Component, h } from '@stencil/core';
+
+@Component({
+  tag: 'ripple-effect-example',
+  styleUrl: 'ripple-effect-example.css'
+})
+export class RippleEffectExample {
+  render() {
+    return [
+      <ion-app>
+        <ion-content>
+          <div class="ion-activatable ripple-parent">
+            A plain div with a bounded ripple effect
+            <ion-ripple-effect></ion-ripple-effect>
+          </div>
+
+          <button class="ion-activatable ripple-parent">
+            A button with a bounded ripple effect
+            <ion-ripple-effect></ion-ripple-effect>
+          </button>
+
+          <div class="ion-activatable ripple-parent">
+            A plain div with an unbounded ripple effect
+            <ion-ripple-effect type="unbounded"></ion-ripple-effect>
+          </div>
+
+          <button class="ion-activatable ripple-parent">
+            A button with an unbounded ripple effect
+            <ion-ripple-effect type="unbounded"></ion-ripple-effect>
+          </button>
+        </ion-content>
+      </ion-app>
+    ];
+  }
+}
+```
+
+```css
+.ripple-parent {
+  position: relative;
+  overflow: hidden;
+}
+```
+
+
 ### Vue
 
 ```html
diff --git a/core/src/components/ripple-effect/usage/stencil.md b/core/src/components/ripple-effect/usage/stencil.md
new file mode 100644
index 0000000000..65586a2428
--- /dev/null
+++ b/core/src/components/ripple-effect/usage/stencil.md
@@ -0,0 +1,44 @@
+```tsx
+import { Component, h } from '@stencil/core';
+
+@Component({
+  tag: 'ripple-effect-example',
+  styleUrl: 'ripple-effect-example.css'
+})
+export class RippleEffectExample {
+  render() {
+    return [
+      <ion-app>
+        <ion-content>
+          <div class="ion-activatable ripple-parent">
+            A plain div with a bounded ripple effect
+            <ion-ripple-effect></ion-ripple-effect>
+          </div>
+
+          <button class="ion-activatable ripple-parent">
+            A button with a bounded ripple effect
+            <ion-ripple-effect></ion-ripple-effect>
+          </button>
+
+          <div class="ion-activatable ripple-parent">
+            A plain div with an unbounded ripple effect
+            <ion-ripple-effect type="unbounded"></ion-ripple-effect>
+          </div>
+
+          <button class="ion-activatable ripple-parent">
+            A button with an unbounded ripple effect
+            <ion-ripple-effect type="unbounded"></ion-ripple-effect>
+          </button>
+        </ion-content>
+      </ion-app>
+    ];
+  }
+}
+```
+
+```css
+.ripple-parent {
+  position: relative;
+  overflow: hidden;
+}
+```
\ No newline at end of file
diff --git a/core/src/components/searchbar/readme.md b/core/src/components/searchbar/readme.md
index ef31ad02d8..781bd07053 100644
--- a/core/src/components/searchbar/readme.md
+++ b/core/src/components/searchbar/readme.md
@@ -187,6 +187,67 @@ export const SearchBarExamples: React.FC = () => {
 ```
 
 
+### Stencil
+
+```tsx
+import { Component, h } from '@stencil/core';
+
+@Component({
+  tag: 'searchbar-example',
+  styleUrl: 'searchbar-example.css'
+})
+export class SearchbarExample {
+  render() {
+    return [
+       // Default Searchbar
+      <ion-searchbar></ion-searchbar>,
+
+      // Searchbar with cancel button always shown
+      <ion-searchbar showCancelButton="always"></ion-searchbar>,
+
+      // Searchbar with cancel button never shown
+      <ion-searchbar showCancelButton="never"></ion-searchbar>,
+
+      // Searchbar with cancel button shown on focus
+      <ion-searchbar showCancelButton="focus"></ion-searchbar>,
+
+      // Searchbar with danger color
+      <ion-searchbar color="danger"></ion-searchbar>,
+
+      // Searchbar with value
+      <ion-searchbar value="Ionic"></ion-searchbar>,
+
+      // Searchbar with telephone type
+      <ion-searchbar type="tel"></ion-searchbar>,
+
+      // Searchbar with numeric inputmode
+      <ion-searchbar inputmode="numeric"></ion-searchbar>,
+
+      // Searchbar disabled
+      <ion-searchbar disabled={true}></ion-searchbar>,
+
+      // Searchbar with a cancel button and custom cancel button text
+      <ion-searchbar showCancelButton="focus" cancelButtonText="Custom Cancel"></ion-searchbar>,
+
+      // Searchbar with a custom debounce
+      <ion-searchbar debounce={500}></ion-searchbar>,
+
+      // Animated Searchbar
+      <ion-searchbar animated={true}></ion-searchbar>,
+
+      // Searchbar with a placeholder
+      <ion-searchbar placeholder="Filter Schedules"></ion-searchbar>,
+
+      // Searchbar in a Toolbar
+      <ion-toolbar>
+        <ion-searchbar></ion-searchbar>
+      </ion-toolbar>
+    ];
+  }
+}
+```
+
+
 ### Vue
 
 ```html
diff --git a/core/src/components/searchbar/usage/stencil.md b/core/src/components/searchbar/usage/stencil.md
new file mode 100644
index 0000000000..f80e605047
--- /dev/null
+++ b/core/src/components/searchbar/usage/stencil.md
@@ -0,0 +1,57 @@
+```tsx
+import { Component, h } from '@stencil/core';
+
+@Component({
+  tag: 'searchbar-example',
+  styleUrl: 'searchbar-example.css'
+})
+export class SearchbarExample {
+  render() {
+    return [
+       // Default Searchbar
+      <ion-searchbar></ion-searchbar>,
+
+      // Searchbar with cancel button always shown
+      <ion-searchbar showCancelButton="always"></ion-searchbar>,
+
+      // Searchbar with cancel button never shown
+      <ion-searchbar showCancelButton="never"></ion-searchbar>,
+
+      // Searchbar with cancel button shown on focus
+      <ion-searchbar showCancelButton="focus"></ion-searchbar>,
+
+      // Searchbar with danger color
+      <ion-searchbar color="danger"></ion-searchbar>,
+
+      // Searchbar with value
+      <ion-searchbar value="Ionic"></ion-searchbar>,
+
+      // Searchbar with telephone type
+      <ion-searchbar type="tel"></ion-searchbar>,
+
+      // Searchbar with numeric inputmode
+      <ion-searchbar inputmode="numeric"></ion-searchbar>,
+
+      // Searchbar disabled
+      <ion-searchbar disabled={true}></ion-searchbar>,
+
+      // Searchbar with a cancel button and custom cancel button text
+      <ion-searchbar showCancelButton="focus" cancelButtonText="Custom Cancel"></ion-searchbar>,
+
+      // Searchbar with a custom debounce
+      <ion-searchbar debounce={500}></ion-searchbar>,
+
+      // Animated Searchbar
+      <ion-searchbar animated={true}></ion-searchbar>,
+
+      // Searchbar with a placeholder
+      <ion-searchbar placeholder="Filter Schedules"></ion-searchbar>,
+
+      // Searchbar in a Toolbar
+      <ion-toolbar>
+        <ion-searchbar></ion-searchbar>
+      </ion-toolbar>
+    ];
+  }
+}
+```
diff --git a/core/src/components/segment-button/readme.md b/core/src/components/segment-button/readme.md
index fe77f22de3..abbbbef990 100644
--- a/core/src/components/segment-button/readme.md
+++ b/core/src/components/segment-button/readme.md
@@ -471,6 +471,163 @@ export const SegmentButtonExamples: React.FC = () => {
 ```
 
 
+### Stencil
+
+```tsx
+import { Component, h } from '@stencil/core';
+
+@Component({
+  tag: 'segment-button-example',
+  styleUrl: 'segment-button-example.css'
+})
+export class SegmentButtonExample {
+  segmentChanged(ev: any) {
+    console.log('Segment changed', ev);
+  }
+
+  render() {
+    return [
+      // Segment buttons with text and click listener
+      <ion-segment onIonChange={(ev) => this.segmentChanged(ev)}>
+        <ion-segment-button>
+          <ion-label>Friends</ion-label>
+        </ion-segment-button>
+        <ion-segment-button>
+          <ion-label>Enemies</ion-label>
+        </ion-segment-button>
+      </ion-segment>,
+
+      // Segment buttons with the first checked and the last disabled
+      <ion-segment value="paid">
+        <ion-segment-button value="paid">
+          <ion-label>Paid</ion-label>
+        </ion-segment-button>
+        <ion-segment-button value="free">
+          <ion-label>Free</ion-label>
+        </ion-segment-button>
+        <ion-segment-button disabled value="top">
+          <ion-label>Top</ion-label>
+        </ion-segment-button>
+      </ion-segment>,
+
+      // Segment buttons with values and icons
+      <ion-segment>
+        <ion-segment-button value="camera">
+          <ion-icon name="camera"></ion-icon>
+        </ion-segment-button>
+        <ion-segment-button value="bookmark">
+          <ion-icon name="bookmark"></ion-icon>
+        </ion-segment-button>
+      </ion-segment>,
+
+      // Segment with a value that checks the last button
+      <ion-segment value="shared">
+        <ion-segment-button value="bookmarks">
+          <ion-label>Bookmarks</ion-label>
+        </ion-segment-button>
+        <ion-segment-button value="reading">
+          <ion-label>Reading List</ion-label>
+        </ion-segment-button>
+        <ion-segment-button value="shared">
+          <ion-label>Shared Links</ion-label>
+        </ion-segment-button>
+      </ion-segment>,
+
+      // Label only
+      <ion-segment value="1">
+        <ion-segment-button value="1">
+          <ion-label>Item One</ion-label>
+        </ion-segment-button>
+        <ion-segment-button value="2">
+          <ion-label>Item Two</ion-label>
+        </ion-segment-button>
+        <ion-segment-button value="3">
+          <ion-label>Item Three</ion-label>
+        </ion-segment-button>
+      </ion-segment>,
+
+      // Icon only
+      <ion-segment value="heart">
+        <ion-segment-button value="call">
+          <ion-icon name="call"></ion-icon>
+        </ion-segment-button>
+        <ion-segment-button value="heart">
+          <ion-icon name="heart"></ion-icon>
+        </ion-segment-button>
+        <ion-segment-button value="pin">
+          <ion-icon name="pin"></ion-icon>
+        </ion-segment-button>
+      </ion-segment>,
+
+      // Icon top
+      <ion-segment value="2">
+        <ion-segment-button value="1">
+          <ion-label>Item One</ion-label>
+          <ion-icon name="call"></ion-icon>
+        </ion-segment-button>
+        <ion-segment-button value="2">
+          <ion-label>Item Two</ion-label>
+          <ion-icon name="heart"></ion-icon>
+        </ion-segment-button>
+        <ion-segment-button value="3">
+          <ion-label>Item Three</ion-label>
+          <ion-icon name="pin"></ion-icon>
+        </ion-segment-button>
+      </ion-segment>,
+
+      // Icon bottom
+      <ion-segment value="1">
+        <ion-segment-button value="1" layout="icon-bottom">
+          <ion-icon name="call"></ion-icon>
+          <ion-label>Item One</ion-label>
+        </ion-segment-button>
+        <ion-segment-button value="2" layout="icon-bottom">
+          <ion-icon name="heart"></ion-icon>
+          <ion-label>Item Two</ion-label>
+        </ion-segment-button>
+        <ion-segment-button value="3" layout="icon-bottom">
+          <ion-icon name="pin"></ion-icon>
+          <ion-label>Item Three</ion-label>
+        </ion-segment-button>
+      </ion-segment>,
+
+      // Icon start
+      <ion-segment value="1">
+        <ion-segment-button value="1" layout="icon-start">
+          <ion-label>Item One</ion-label>
+          <ion-icon name="call"></ion-icon>
+        </ion-segment-button>
+        <ion-segment-button value="2" layout="icon-start">
+          <ion-label>Item Two</ion-label>
+          <ion-icon name="heart"></ion-icon>
+        </ion-segment-button>
+        <ion-segment-button value="3" layout="icon-start">
+          <ion-label>Item Three</ion-label>
+          <ion-icon name="pin"></ion-icon>
+        </ion-segment-button>
+      </ion-segment>,
+
+      // Icon end
+      <ion-segment value="1">
+        <ion-segment-button value="1" layout="icon-end">
+          <ion-icon name="call"></ion-icon>
+          <ion-label>Item One</ion-label>
+        </ion-segment-button>
+        <ion-segment-button value="2" disabled layout="icon-end">
+          <ion-icon name="heart"></ion-icon>
+          <ion-label>Item Two</ion-label>
+        </ion-segment-button>
+        <ion-segment-button value="3" layout="icon-end">
+          <ion-icon name="pin"></ion-icon>
+          <ion-label>Item Three</ion-label>
+        </ion-segment-button>
+      </ion-segment>
+    ];
+  }
+}
+```
+
+
 ### Vue
 
 ```html
diff --git a/core/src/components/segment-button/usage/stencil.md b/core/src/components/segment-button/usage/stencil.md
new file mode 100644
index 0000000000..0d521fa710
--- /dev/null
+++ b/core/src/components/segment-button/usage/stencil.md
@@ -0,0 +1,153 @@
+```tsx
+import { Component, h } from '@stencil/core';
+
+@Component({
+  tag: 'segment-button-example',
+  styleUrl: 'segment-button-example.css'
+})
+export class SegmentButtonExample {
+  segmentChanged(ev: any) {
+    console.log('Segment changed', ev);
+  }
+
+  render() {
+    return [
+      // Segment buttons with text and click listener
+      <ion-segment onIonChange={(ev) => this.segmentChanged(ev)}>
+        <ion-segment-button>
+          <ion-label>Friends</ion-label>
+        </ion-segment-button>
+        <ion-segment-button>
+          <ion-label>Enemies</ion-label>
+        </ion-segment-button>
+      </ion-segment>,
+
+      // Segment buttons with the first checked and the last disabled
+      <ion-segment value="paid">
+        <ion-segment-button value="paid">
+          <ion-label>Paid</ion-label>
+        </ion-segment-button>
+        <ion-segment-button value="free">
+          <ion-label>Free</ion-label>
+        </ion-segment-button>
+        <ion-segment-button disabled value="top">
+          <ion-label>Top</ion-label>
+        </ion-segment-button>
+      </ion-segment>,
+
+      // Segment buttons with values and icons
+      <ion-segment>
+        <ion-segment-button value="camera">
+          <ion-icon name="camera"></ion-icon>
+        </ion-segment-button>
+        <ion-segment-button value="bookmark">
+          <ion-icon name="bookmark"></ion-icon>
+        </ion-segment-button>
+      </ion-segment>,
+
+      // Segment with a value that checks the last button
+      <ion-segment value="shared">
+        <ion-segment-button value="bookmarks">
+          <ion-label>Bookmarks</ion-label>
+        </ion-segment-button>
+        <ion-segment-button value="reading">
+          <ion-label>Reading List</ion-label>
+        </ion-segment-button>
+        <ion-segment-button value="shared">
+          <ion-label>Shared Links</ion-label>
+        </ion-segment-button>
+      </ion-segment>,
+
+      // Label only
+      <ion-segment value="1">
+        <ion-segment-button value="1">
+          <ion-label>Item One</ion-label>
+        </ion-segment-button>
+        <ion-segment-button value="2">
+          <ion-label>Item Two</ion-label>
+        </ion-segment-button>
+        <ion-segment-button value="3">
+          <ion-label>Item Three</ion-label>
+        </ion-segment-button>
+      </ion-segment>,
+
+      // Icon only
+      <ion-segment value="heart">
+        <ion-segment-button value="call">
+          <ion-icon name="call"></ion-icon>
+        </ion-segment-button>
+        <ion-segment-button value="heart">
+          <ion-icon name="heart"></ion-icon>
+        </ion-segment-button>
+        <ion-segment-button value="pin">
+          <ion-icon name="pin"></ion-icon>
+        </ion-segment-button>
+      </ion-segment>,
+
+      // Icon top
+      <ion-segment value="2">
+        <ion-segment-button value="1">
+          <ion-label>Item One</ion-label>
+          <ion-icon name="call"></ion-icon>
+        </ion-segment-button>
+        <ion-segment-button value="2">
+          <ion-label>Item Two</ion-label>
+          <ion-icon name="heart"></ion-icon>
+        </ion-segment-button>
+        <ion-segment-button value="3">
+          <ion-label>Item Three</ion-label>
+          <ion-icon name="pin"></ion-icon>
+        </ion-segment-button>
+      </ion-segment>,
+
+      // Icon bottom
+      <ion-segment value="1">
+        <ion-segment-button value="1" layout="icon-bottom">
+          <ion-icon name="call"></ion-icon>
+          <ion-label>Item One</ion-label>
+        </ion-segment-button>
+        <ion-segment-button value="2" layout="icon-bottom">
+          <ion-icon name="heart"></ion-icon>
+          <ion-label>Item Two</ion-label>
+        </ion-segment-button>
+        <ion-segment-button value="3" layout="icon-bottom">
+          <ion-icon name="pin"></ion-icon>
+          <ion-label>Item Three</ion-label>
+        </ion-segment-button>
+      </ion-segment>,
+
+      // Icon start
+      <ion-segment value="1">
+        <ion-segment-button value="1" layout="icon-start">
+          <ion-label>Item One</ion-label>
+          <ion-icon name="call"></ion-icon>
+        </ion-segment-button>
+        <ion-segment-button value="2" layout="icon-start">
+          <ion-label>Item Two</ion-label>
+          <ion-icon name="heart"></ion-icon>
+        </ion-segment-button>
+        <ion-segment-button value="3" layout="icon-start">
+          <ion-label>Item Three</ion-label>
+          <ion-icon name="pin"></ion-icon>
+        </ion-segment-button>
+      </ion-segment>,
+
+      // Icon end
+      <ion-segment value="1">
+        <ion-segment-button value="1" layout="icon-end">
+          <ion-icon name="call"></ion-icon>
+          <ion-label>Item One</ion-label>
+        </ion-segment-button>
+        <ion-segment-button value="2" disabled layout="icon-end">
+          <ion-icon name="heart"></ion-icon>
+          <ion-label>Item Two</ion-label>
+        </ion-segment-button>
+        <ion-segment-button value="3" layout="icon-end">
+          <ion-icon name="pin"></ion-icon>
+          <ion-label>Item Three</ion-label>
+        </ion-segment-button>
+      </ion-segment>
+    ];
+  }
+}
+```
\ No newline at end of file
diff --git a/core/src/components/segment/readme.md b/core/src/components/segment/readme.md
index d8dbf5a0bf..ed2c02cf99 100644
--- a/core/src/components/segment/readme.md
+++ b/core/src/components/segment/readme.md
@@ -38,10 +38,10 @@ Segments are not scrollable by default. Each segment button has a fixed width, a
 
 <!-- Segment with anchors -->
 <ion-segment (ionChange)="segmentChanged($event)">
-  <ion-segment-button href="#dogs" value="dogs">
+  <ion-segment-button value="dogs">
     <ion-label>Dogs</ion-label>
   </ion-segment-button>
-  <ion-segment-button href="#cats" value="cats">
+  <ion-segment-button value="cats">
     <ion-label>Cats</ion-label>
   </ion-segment-button>
 </ion-segment>
@@ -148,10 +148,10 @@ export class SegmentExample {
 
 <!-- Segment with anchors -->
 <ion-segment>
-  <ion-segment-button href="#dogs" value="dogs">
+  <ion-segment-button value="dogs">
     <ion-label>Dogs</ion-label>
   </ion-segment-button>
-  <ion-segment-button href="#cats" value="cats">
+  <ion-segment-button value="cats">
     <ion-label>Cats</ion-label>
   </ion-segment-button>
 </ion-segment>
@@ -341,6 +341,117 @@ export const SegmentExamples: React.FC = () => {
 ```
 
 
+### Stencil
+
+```tsx
+import { Component, h } from '@stencil/core';
+
+@Component({
+  tag: 'segment-example',
+  styleUrl: 'segment-example.css'
+})
+export class SegmentExample {
+  segmentChanged(ev: any) {
+    console.log('Segment changed', ev);
+  }
+
+  render() {
+     return [
+      // Default Segment
+      <ion-segment onIonChange={(ev) => this.segmentChanged(ev)}>
+        <ion-segment-button value="friends">
+          <ion-label>Friends</ion-label>
+        </ion-segment-button>
+        <ion-segment-button value="enemies">
+          <ion-label>Enemies</ion-label>
+        </ion-segment-button>
+      </ion-segment>,
+
+      // Disabled Segment
+      <ion-segment onIonChange={(ev) => this.segmentChanged(ev)} disabled={true} value="sunny">
+        <ion-segment-button value="sunny">
+          <ion-label>Sunny</ion-label>
+        </ion-segment-button>
+        <ion-segment-button value="rainy">
+          <ion-label>Rainy</ion-label>
+        </ion-segment-button>
+      </ion-segment>,
+
+      // Segment with anchors
+      <ion-segment onIonChange={(ev) => this.segmentChanged(ev)}>
+        <ion-segment-button value="dogs">
+          <ion-label>Dogs</ion-label>
+        </ion-segment-button>
+        <ion-segment-button value="cats">
+          <ion-label>Cats</ion-label>
+        </ion-segment-button>
+      </ion-segment>,
+
+      // Scrollable Segment
+      <ion-segment scrollable value="heart">
+        <ion-segment-button value="home">
+          <ion-icon name="home"></ion-icon>
+        </ion-segment-button>
+        <ion-segment-button value="heart">
+          <ion-icon name="heart"></ion-icon>
+        </ion-segment-button>
+        <ion-segment-button value="pin">
+          <ion-icon name="pin"></ion-icon>
+        </ion-segment-button>
+        <ion-segment-button value="star">
+          <ion-icon name="star"></ion-icon>
+        </ion-segment-button>
+        <ion-segment-button value="call">
+          <ion-icon name="call"></ion-icon>
+        </ion-segment-button>
+        <ion-segment-button value="globe">
+          <ion-icon name="globe"></ion-icon>
+        </ion-segment-button>
+        <ion-segment-button value="basket">
+          <ion-icon name="basket"></ion-icon>
+        </ion-segment-button>
+      </ion-segment>,
+
+      // Segment with secondary color
+      <ion-segment onIonChange={(ev) => this.segmentChanged(ev)} color="secondary">
+        <ion-segment-button value="standard">
+          <ion-label>Standard</ion-label>
+        </ion-segment-button>
+        <ion-segment-button value="hybrid">
+          <ion-label>Hybrid</ion-label>
+        </ion-segment-button>
+        <ion-segment-button value="sat">
+          <ion-label>Satellite</ion-label>
+        </ion-segment-button>
+      </ion-segment>,
+
+      // Segment in a toolbar
+      <ion-toolbar>
+        <ion-segment onIonChange={(ev) => this.segmentChanged(ev)}>
+          <ion-segment-button value="camera">
+            <ion-icon name="camera"></ion-icon>
+          </ion-segment-button>
+          <ion-segment-button value="bookmark">
+            <ion-icon name="bookmark"></ion-icon>
+          </ion-segment-button>
+        </ion-segment>
+      </ion-toolbar>,
+
+      // Segment with default selection
+      <ion-segment onIonChange={(ev) => this.segmentChanged(ev)} value="javascript">
+        <ion-segment-button value="python">
+          <ion-label>Python</ion-label>
+        </ion-segment-button>
+        <ion-segment-button value="javascript">
+          <ion-label>Javascript</ion-label>
+        </ion-segment-button>
+      </ion-segment>
+    ];
+  }
+}
+```
+
+
 ### Vue
 
 ```html
@@ -367,10 +478,10 @@ export const SegmentExamples: React.FC = () => {
 
   <!-- Segment with anchors -->
   <ion-segment @ionChange="segmentChanged($event)">
-    <ion-segment-button href="#dogs" value="dogs">
+    <ion-segment-button value="dogs">
       <ion-label>Dogs</ion-label>
     </ion-segment-button>
-    <ion-segment-button href="#cats" value="cats">
+    <ion-segment-button value="cats">
       <ion-label>Cats</ion-label>
     </ion-segment-button>
   </ion-segment>
diff --git a/core/src/components/segment/usage/angular.md b/core/src/components/segment/usage/angular.md
index 92feb5208a..728ba73205 100644
--- a/core/src/components/segment/usage/angular.md
+++ b/core/src/components/segment/usage/angular.md
@@ -21,10 +21,10 @@
 
 <!-- Segment with anchors -->
 <ion-segment (ionChange)="segmentChanged($event)">
-  <ion-segment-button href="#dogs" value="dogs">
+  <ion-segment-button value="dogs">
     <ion-label>Dogs</ion-label>
   </ion-segment-button>
-  <ion-segment-button href="#cats" value="cats">
+  <ion-segment-button value="cats">
     <ion-label>Cats</ion-label>
   </ion-segment-button>
 </ion-segment>
diff --git a/core/src/components/segment/usage/javascript.md b/core/src/components/segment/usage/javascript.md
index e1b6b1d0a1..a815016a08 100644
--- a/core/src/components/segment/usage/javascript.md
+++ b/core/src/components/segment/usage/javascript.md
@@ -21,10 +21,10 @@
 
 <!-- Segment with anchors -->
 <ion-segment>
-  <ion-segment-button href="#dogs" value="dogs">
+  <ion-segment-button value="dogs">
     <ion-label>Dogs</ion-label>
   </ion-segment-button>
-  <ion-segment-button href="#cats" value="cats">
+  <ion-segment-button value="cats">
     <ion-label>Cats</ion-label>
   </ion-segment-button>
 </ion-segment>
diff --git a/core/src/components/segment/usage/stencil.md b/core/src/components/segment/usage/stencil.md
new file mode 100644
index 0000000000..cade3c1fa2
--- /dev/null
+++ b/core/src/components/segment/usage/stencil.md
@@ -0,0 +1,107 @@
+```tsx
+import { Component, h } from '@stencil/core';
+
+@Component({
+  tag: 'segment-example',
+  styleUrl: 'segment-example.css'
+})
+export class SegmentExample {
+  segmentChanged(ev: any) {
+    console.log('Segment changed', ev);
+  }
+
+  render() {
+     return [
+      // Default Segment
+      <ion-segment onIonChange={(ev) => this.segmentChanged(ev)}>
+        <ion-segment-button value="friends">
+          <ion-label>Friends</ion-label>
+        </ion-segment-button>
+        <ion-segment-button value="enemies">
+          <ion-label>Enemies</ion-label>
+        </ion-segment-button>
+      </ion-segment>,
+
+      // Disabled Segment
+      <ion-segment onIonChange={(ev) => this.segmentChanged(ev)} disabled={true} value="sunny">
+        <ion-segment-button value="sunny">
+          <ion-label>Sunny</ion-label>
+        </ion-segment-button>
+        <ion-segment-button value="rainy">
+          <ion-label>Rainy</ion-label>
+        </ion-segment-button>
+      </ion-segment>,
+
+      // Segment with anchors
+      <ion-segment onIonChange={(ev) => this.segmentChanged(ev)}>
+        <ion-segment-button value="dogs">
+          <ion-label>Dogs</ion-label>
+        </ion-segment-button>
+        <ion-segment-button value="cats">
+          <ion-label>Cats</ion-label>
+        </ion-segment-button>
+      </ion-segment>,
+
+      // Scrollable Segment
+      <ion-segment scrollable value="heart">
+        <ion-segment-button value="home">
+          <ion-icon name="home"></ion-icon>
+        </ion-segment-button>
+        <ion-segment-button value="heart">
+          <ion-icon name="heart"></ion-icon>
+        </ion-segment-button>
+        <ion-segment-button value="pin">
+          <ion-icon name="pin"></ion-icon>
+        </ion-segment-button>
+        <ion-segment-button value="star">
+          <ion-icon name="star"></ion-icon>
+        </ion-segment-button>
+        <ion-segment-button value="call">
+          <ion-icon name="call"></ion-icon>
+        </ion-segment-button>
+        <ion-segment-button value="globe">
+          <ion-icon name="globe"></ion-icon>
+        </ion-segment-button>
+        <ion-segment-button value="basket">
+          <ion-icon name="basket"></ion-icon>
+        </ion-segment-button>
+      </ion-segment>,
+
+      // Segment with secondary color
+      <ion-segment onIonChange={(ev) => this.segmentChanged(ev)} color="secondary">
+        <ion-segment-button value="standard">
+          <ion-label>Standard</ion-label>
+        </ion-segment-button>
+        <ion-segment-button value="hybrid">
+          <ion-label>Hybrid</ion-label>
+        </ion-segment-button>
+        <ion-segment-button value="sat">
+          <ion-label>Satellite</ion-label>
+        </ion-segment-button>
+      </ion-segment>,
+
+      // Segment in a toolbar
+      <ion-toolbar>
+        <ion-segment onIonChange={(ev) => this.segmentChanged(ev)}>
+          <ion-segment-button value="camera">
+            <ion-icon name="camera"></ion-icon>
+          </ion-segment-button>
+          <ion-segment-button value="bookmark">
+            <ion-icon name="bookmark"></ion-icon>
+          </ion-segment-button>
+        </ion-segment>
+      </ion-toolbar>,
+
+      // Segment with default selection
+      <ion-segment onIonChange={(ev) => this.segmentChanged(ev)} value="javascript">
+        <ion-segment-button value="python">
+          <ion-label>Python</ion-label>
+        </ion-segment-button>
+        <ion-segment-button value="javascript">
+          <ion-label>Javascript</ion-label>
+        </ion-segment-button>
+      </ion-segment>
+    ];
+  }
+}
+```
\ No newline at end of file
diff --git a/core/src/components/segment/usage/vue.md b/core/src/components/segment/usage/vue.md
index 9a51f98b97..3d175b87b2 100644
--- a/core/src/components/segment/usage/vue.md
+++ b/core/src/components/segment/usage/vue.md
@@ -22,10 +22,10 @@
 
   <!-- Segment with anchors -->
   <ion-segment @ionChange="segmentChanged($event)">
-    <ion-segment-button href="#dogs" value="dogs">
+    <ion-segment-button value="dogs">
       <ion-label>Dogs</ion-label>
     </ion-segment-button>
-    <ion-segment-button href="#cats" value="cats">
+    <ion-segment-button value="cats">
       <ion-label>Cats</ion-label>
     </ion-segment-button>
   </ion-segment>
diff --git a/core/src/components/select/readme.md b/core/src/components/select/readme.md
index 1606eaae5e..529474b135 100644
--- a/core/src/components/select/readme.md
+++ b/core/src/components/select/readme.md
@@ -742,6 +742,238 @@ export const InterfaceOptionsSelection: React.FC = () => {
 ```
 
 
+### Stencil
+
+### Single Selection
+
+```tsx
+import { Component, h } from '@stencil/core';
+
+@Component({
+  tag: 'select-example',
+  styleUrl: 'select-example.css'
+})
+export class SelectExample {
+  render() {
+    return [
+      <ion-list>
+        <ion-list-header>
+          <ion-label>
+            Single Selection
+          </ion-label>
+        </ion-list-header>
+
+        <ion-item>
+          <ion-label>Gender</ion-label>
+          <ion-select placeholder="Select One">
+            <ion-select-option value="f">Female</ion-select-option>
+            <ion-select-option value="m">Male</ion-select-option>
+          </ion-select>
+        </ion-item>
+
+        <ion-item>
+          <ion-label>Hair Color</ion-label>
+          <ion-select value="brown" okText="Okay" cancelText="Dismiss">
+            <ion-select-option value="brown">Brown</ion-select-option>
+            <ion-select-option value="blonde">Blonde</ion-select-option>
+            <ion-select-option value="black">Black</ion-select-option>
+            <ion-select-option value="red">Red</ion-select-option>
+          </ion-select>
+        </ion-item>
+
+      </ion-list>
+    ];
+  }
+}
+```
+
+### Multiple Selection
+
+```tsx
+import { Component, h } from '@stencil/core';
+
+@Component({
+  tag: 'select-example',
+  styleUrl: 'select-example.css'
+})
+export class SelectExample {
+  render() {
+    return [
+      <ion-list>
+        <ion-list-header>
+          <ion-label>
+            Multiple Selection
+          </ion-label>
+        </ion-list-header>
+
+        <ion-item>
+          <ion-label>Toppings</ion-label>
+          <ion-select multiple={true} cancelText="Nah" okText="Okay!">
+            <ion-select-option value="bacon">Bacon</ion-select-option>
+            <ion-select-option value="olives">Black Olives</ion-select-option>
+            <ion-select-option value="xcheese">Extra Cheese</ion-select-option>
+            <ion-select-option value="peppers">Green Peppers</ion-select-option>
+            <ion-select-option value="mushrooms">Mushrooms</ion-select-option>
+            <ion-select-option value="onions">Onions</ion-select-option>
+            <ion-select-option value="pepperoni">Pepperoni</ion-select-option>
+            <ion-select-option value="pineapple">Pineapple</ion-select-option>
+            <ion-select-option value="sausage">Sausage</ion-select-option>
+            <ion-select-option value="Spinach">Spinach</ion-select-option>
+          </ion-select>
+        </ion-item>
+
+        <ion-item>
+          <ion-label>Pets</ion-label>
+          <ion-select multiple={true} value={['bird', 'dog']}>
+            <ion-select-option value="bird">Bird</ion-select-option>
+            <ion-select-option value="cat">Cat</ion-select-option>
+            <ion-select-option value="dog">Dog</ion-select-option>
+            <ion-select-option value="honeybadger">Honey Badger</ion-select-option>
+          </ion-select>
+        </ion-item>
+      </ion-list>
+    ];
+  }
+}
+```
+
+### Objects as Values
+
+```tsx
+import { Component, h } from '@stencil/core';
+
+@Component({
+  tag: 'select-example',
+  styleUrl: 'select-example.css'
+})
+export class SelectExample {
+  private users: any[] = [
+    {
+      id: 1,
+      first: 'Alice',
+      last: 'Smith',
+    },
+    {
+      id: 2,
+      first: 'Bob',
+      last: 'Davis',
+    },
+    {
+      id: 3,
+      first: 'Charlie',
+      last: 'Rosenburg',
+    }
+  ];
+
+  compareWith = (o1, o2) => {
+    return o1 && o2 ? o1.id === o2.id : o1 === o2;
+  };
+
+  render() {
+    return [
+      <ion-list>
+        <ion-list-header>
+          <ion-label>
+            Objects as Values (compareWith)
+          </ion-label>
+        </ion-list-header>
+
+        <ion-item>
+          <ion-label>Users</ion-label>
+          <ion-select compareWith={this.compareWith}>
+            {this.users.map(user =>
+            <ion-select-option value={user}>
+              {user.first + ' ' + user.last}
+            </ion-select-option>
+            )}
+          </ion-select>
+        </ion-item>
+      </ion-list>
+    ];
+  }
+}
+```
+
+### Interface Options
+
+```tsx
+import { Component, h } from '@stencil/core';
+
+@Component({
+  tag: 'select-example',
+  styleUrl: 'select-example.css'
+})
+export class SelectExample {
+  private customAlertOptions: any = {
+    header: 'Pizza Toppings',
+    subHeader: 'Select your toppings',
+    message: '$1.00 per topping',
+    translucent: true
+  };
+
+  private customPopoverOptions: any = {
+    header: 'Hair Color',
+    subHeader: 'Select your hair color',
+    message: 'Only select your dominant hair color'
+  };
+
+  private customActionSheetOptions: any = {
+    header: 'Colors',
+    subHeader: 'Select your favorite color'
+  };
+
+  render() {
+    return [
+      <ion-list>
+        <ion-list-header>
+          <ion-label>
+            Interface Options
+          </ion-label>
+        </ion-list-header>
+
+        <ion-item>
+          <ion-label>Alert</ion-label>
+          <ion-select interfaceOptions={this.customAlertOptions} interface="alert" multiple={true} placeholder="Select One">
+            <ion-select-option value="bacon">Bacon</ion-select-option>
+            <ion-select-option value="olives">Black Olives</ion-select-option>
+            <ion-select-option value="xcheese">Extra Cheese</ion-select-option>
+            <ion-select-option value="peppers">Green Peppers</ion-select-option>
+            <ion-select-option value="mushrooms">Mushrooms</ion-select-option>
+            <ion-select-option value="onions">Onions</ion-select-option>
+            <ion-select-option value="pepperoni">Pepperoni</ion-select-option>
+            <ion-select-option value="pineapple">Pineapple</ion-select-option>
+            <ion-select-option value="sausage">Sausage</ion-select-option>
+            <ion-select-option value="Spinach">Spinach</ion-select-option>
+          </ion-select>
+        </ion-item>
+
+        <ion-item>
+          <ion-label>Popover</ion-label>
+          <ion-select interfaceOptions={this.customPopoverOptions} interface="popover" placeholder="Select One">
+            <ion-select-option value="brown">Brown</ion-select-option>
+            <ion-select-option value="blonde">Blonde</ion-select-option>
+            <ion-select-option value="black">Black</ion-select-option>
+            <ion-select-option value="red">Red</ion-select-option>
+          </ion-select>
+        </ion-item>
+
+        <ion-item>
+          <ion-label>Action Sheet</ion-label>
+          <ion-select interfaceOptions={this.customActionSheetOptions} interface="action-sheet" placeholder="Select One">
+            <ion-select-option value="red">Red</ion-select-option>
+            <ion-select-option value="purple">Purple</ion-select-option>
+            <ion-select-option value="yellow">Yellow</ion-select-option>
+            <ion-select-option value="orange">Orange</ion-select-option>
+            <ion-select-option value="green">Green</ion-select-option>
+          </ion-select>
+        </ion-item>
+      </ion-list>
+    ];
+  }
+}
+```
+
+
 ### Vue
 
 ### Single Selection
diff --git a/core/src/components/select/usage/stencil.md b/core/src/components/select/usage/stencil.md
new file mode 100644
index 0000000000..2054e0c256
--- /dev/null
+++ b/core/src/components/select/usage/stencil.md
@@ -0,0 +1,228 @@
+### Single Selection
+
+```tsx
+import { Component, h } from '@stencil/core';
+
+@Component({
+  tag: 'select-example',
+  styleUrl: 'select-example.css'
+})
+export class SelectExample {
+  render() {
+    return [
+      <ion-list>
+        <ion-list-header>
+          <ion-label>
+            Single Selection
+          </ion-label>
+        </ion-list-header>
+
+        <ion-item>
+          <ion-label>Gender</ion-label>
+          <ion-select placeholder="Select One">
+            <ion-select-option value="f">Female</ion-select-option>
+            <ion-select-option value="m">Male</ion-select-option>
+          </ion-select>
+        </ion-item>
+
+        <ion-item>
+          <ion-label>Hair Color</ion-label>
+          <ion-select value="brown" okText="Okay" cancelText="Dismiss">
+            <ion-select-option value="brown">Brown</ion-select-option>
+            <ion-select-option value="blonde">Blonde</ion-select-option>
+            <ion-select-option value="black">Black</ion-select-option>
+            <ion-select-option value="red">Red</ion-select-option>
+          </ion-select>
+        </ion-item>
+
+      </ion-list>
+    ];
+  }
+}
+```
+
+### Multiple Selection
+
+```tsx
+import { Component, h } from '@stencil/core';
+
+@Component({
+  tag: 'select-example',
+  styleUrl: 'select-example.css'
+})
+export class SelectExample {
+  render() {
+    return [
+      <ion-list>
+        <ion-list-header>
+          <ion-label>
+            Multiple Selection
+          </ion-label>
+        </ion-list-header>
+
+        <ion-item>
+          <ion-label>Toppings</ion-label>
+          <ion-select multiple={true} cancelText="Nah" okText="Okay!">
+            <ion-select-option value="bacon">Bacon</ion-select-option>
+            <ion-select-option value="olives">Black Olives</ion-select-option>
+            <ion-select-option value="xcheese">Extra Cheese</ion-select-option>
+            <ion-select-option value="peppers">Green Peppers</ion-select-option>
+            <ion-select-option value="mushrooms">Mushrooms</ion-select-option>
+            <ion-select-option value="onions">Onions</ion-select-option>
+            <ion-select-option value="pepperoni">Pepperoni</ion-select-option>
+            <ion-select-option value="pineapple">Pineapple</ion-select-option>
+            <ion-select-option value="sausage">Sausage</ion-select-option>
+            <ion-select-option value="Spinach">Spinach</ion-select-option>
+          </ion-select>
+        </ion-item>
+
+        <ion-item>
+          <ion-label>Pets</ion-label>
+          <ion-select multiple={true} value={['bird', 'dog']}>
+            <ion-select-option value="bird">Bird</ion-select-option>
+            <ion-select-option value="cat">Cat</ion-select-option>
+            <ion-select-option value="dog">Dog</ion-select-option>
+            <ion-select-option value="honeybadger">Honey Badger</ion-select-option>
+          </ion-select>
+        </ion-item>
+      </ion-list>
+    ];
+  }
+}
+```
+
+### Objects as Values
+
+```tsx
+import { Component, h } from '@stencil/core';
+
+@Component({
+  tag: 'select-example',
+  styleUrl: 'select-example.css'
+})
+export class SelectExample {
+  private users: any[] = [
+    {
+      id: 1,
+      first: 'Alice',
+      last: 'Smith',
+    },
+    {
+      id: 2,
+      first: 'Bob',
+      last: 'Davis',
+    },
+    {
+      id: 3,
+      first: 'Charlie',
+      last: 'Rosenburg',
+    }
+  ];
+
+  compareWith = (o1, o2) => {
+    return o1 && o2 ? o1.id === o2.id : o1 === o2;
+  };
+
+  render() {
+    return [
+      <ion-list>
+        <ion-list-header>
+          <ion-label>
+            Objects as Values (compareWith)
+          </ion-label>
+        </ion-list-header>
+
+        <ion-item>
+          <ion-label>Users</ion-label>
+          <ion-select compareWith={this.compareWith}>
+            {this.users.map(user =>
+            <ion-select-option value={user}>
+              {user.first + ' ' + user.last}
+            </ion-select-option>
+            )}
+          </ion-select>
+        </ion-item>
+      </ion-list>
+    ];
+  }
+}
+```
+
+### Interface Options
+
+```tsx
+import { Component, h } from '@stencil/core';
+
+@Component({
+  tag: 'select-example',
+  styleUrl: 'select-example.css'
+})
+export class SelectExample {
+  private customAlertOptions: any = {
+    header: 'Pizza Toppings',
+    subHeader: 'Select your toppings',
+    message: '$1.00 per topping',
+    translucent: true
+  };
+
+  private customPopoverOptions: any = {
+    header: 'Hair Color',
+    subHeader: 'Select your hair color',
+    message: 'Only select your dominant hair color'
+  };
+
+  private customActionSheetOptions: any = {
+    header: 'Colors',
+    subHeader: 'Select your favorite color'
+  };
+
+  render() {
+    return [
+      <ion-list>
+        <ion-list-header>
+          <ion-label>
+            Interface Options
+          </ion-label>
+        </ion-list-header>
+
+        <ion-item>
+          <ion-label>Alert</ion-label>
+          <ion-select interfaceOptions={this.customAlertOptions} interface="alert" multiple={true} placeholder="Select One">
+            <ion-select-option value="bacon">Bacon</ion-select-option>
+            <ion-select-option value="olives">Black Olives</ion-select-option>
+            <ion-select-option value="xcheese">Extra Cheese</ion-select-option>
+            <ion-select-option value="peppers">Green Peppers</ion-select-option>
+            <ion-select-option value="mushrooms">Mushrooms</ion-select-option>
+            <ion-select-option value="onions">Onions</ion-select-option>
+            <ion-select-option value="pepperoni">Pepperoni</ion-select-option>
+            <ion-select-option value="pineapple">Pineapple</ion-select-option>
+            <ion-select-option value="sausage">Sausage</ion-select-option>
+            <ion-select-option value="Spinach">Spinach</ion-select-option>
+          </ion-select>
+        </ion-item>
+
+        <ion-item>
+          <ion-label>Popover</ion-label>
+          <ion-select interfaceOptions={this.customPopoverOptions} interface="popover" placeholder="Select One">
+            <ion-select-option value="brown">Brown</ion-select-option>
+            <ion-select-option value="blonde">Blonde</ion-select-option>
+            <ion-select-option value="black">Black</ion-select-option>
+            <ion-select-option value="red">Red</ion-select-option>
+          </ion-select>
+        </ion-item>
+
+        <ion-item>
+          <ion-label>Action Sheet</ion-label>
+          <ion-select interfaceOptions={this.customActionSheetOptions} interface="action-sheet" placeholder="Select One">
+            <ion-select-option value="red">Red</ion-select-option>
+            <ion-select-option value="purple">Purple</ion-select-option>
+            <ion-select-option value="yellow">Yellow</ion-select-option>
+            <ion-select-option value="orange">Orange</ion-select-option>
+            <ion-select-option value="green">Green</ion-select-option>
+          </ion-select>
+        </ion-item>
+      </ion-list>
+    ];
+  }
+}
+```
\ No newline at end of file
diff --git a/core/src/components/skeleton-text/readme.md b/core/src/components/skeleton-text/readme.md
index 584d0da38a..50ec2be3d1 100644
--- a/core/src/components/skeleton-text/readme.md
+++ b/core/src/components/skeleton-text/readme.md
@@ -491,6 +491,185 @@ export const SkeletonTextExample: React.FC = () => {
 ```
 
 
+### Stencil
+
+```tsx
+import { Component, State, h } from '@stencil/core';
+
+@Component({
+  tag: 'skeleton-text-example',
+  styleUrl: 'skeleton-text-example.css'
+})
+export class SkeletonTextExample {
+  @State() data: any;
+
+  componentWillLoad() {
+    // Data will show after 5 seconds
+    setTimeout(() => {
+      this.data = {
+        'heading': 'Normal text',
+        'para1': 'Lorem ipsum dolor sit amet, consectetur',
+        'para2': 'adipiscing elit.'
+      };
+    }, 5000);
+  }
+
+  // Render skeleton screen when there is no data
+  renderSkeletonScreen() {
+    return [
+      <ion-content>
+        <div class="ion-padding custom-skeleton">
+          <ion-skeleton-text animated style={{ 'width': '60%' }}></ion-skeleton-text>
+          <ion-skeleton-text animated></ion-skeleton-text>
+          <ion-skeleton-text animated style={{ 'width': '88%' }}></ion-skeleton-text>
+          <ion-skeleton-text animated style={{ 'width': '70%' }}></ion-skeleton-text>
+          <ion-skeleton-text animated style={{ 'width': '60%' }}></ion-skeleton-text>
+        </div>
+
+        <ion-list>
+          <ion-list-header>
+            <ion-label>
+              <ion-skeleton-text animated style={{ 'width': '20%' }}></ion-skeleton-text>
+            </ion-label>
+          </ion-list-header>
+          <ion-item>
+            <ion-avatar slot="start">
+              <ion-skeleton-text animated></ion-skeleton-text>
+            </ion-avatar>
+            <ion-label>
+              <h3>
+                <ion-skeleton-text animated style={{ 'width': '50%' }}></ion-skeleton-text>
+              </h3>
+              <p>
+                <ion-skeleton-text animated style={{ 'width': '80%' }}></ion-skeleton-text>
+              </p>
+              <p>
+                <ion-skeleton-text animated style={{ 'width': '60%' }}></ion-skeleton-text>
+              </p>
+            </ion-label>
+          </ion-item>
+          <ion-item>
+            <ion-thumbnail slot="start">
+              <ion-skeleton-text animated></ion-skeleton-text>
+            </ion-thumbnail>
+            <ion-label>
+              <h3>
+                <ion-skeleton-text animated style={{ 'width': '50%' }}></ion-skeleton-text>
+              </h3>
+              <p>
+                <ion-skeleton-text animated style={{ 'width': '80%' }}></ion-skeleton-text>
+              </p>
+              <p>
+                <ion-skeleton-text animated style={{ 'width': '60%' }}></ion-skeleton-text>
+              </p>
+            </ion-label>
+          </ion-item>
+          <ion-item>
+            <ion-skeleton-text animated style={{ 'width': '27p', 'height': '27px' }} slot="start"></ion-skeleton-text>
+            <ion-label>
+              <h3>
+                <ion-skeleton-text animated style={{ 'width': '50%' }}></ion-skeleton-text>
+              </h3>
+              <p>
+                <ion-skeleton-text animated style={{ 'width': '80%' }}></ion-skeleton-text>
+              </p>
+              <p>
+                <ion-skeleton-text animated style={{ 'width': '60%' }}></ion-skeleton-text>
+              </p>
+            </ion-label>
+          </ion-item>
+        </ion-list>
+      </ion-content>
+    ];
+  }
+
+  // Render the elements with data
+  renderDataScreen() {
+    return [
+      <ion-content>
+        <div class="ion-padding">
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ac eros est. Cras iaculis pulvinar arcu non vehicula. Fusce at quam a eros malesuada condimentum. Aliquam tincidunt tincidunt vehicula.
+        </div>
+
+        <ion-list>
+          <ion-list-header>
+            <ion-label>
+              Data
+            </ion-label>
+          </ion-list-header>
+          <ion-item>
+            <ion-avatar slot="start">
+              <img src="./avatar.svg"/>
+            </ion-avatar>
+            <ion-label>
+              <h3>
+                { this.data.heading }
+              </h3>
+              <p>
+                { this.data.para1 }
+              </p>
+              <p>
+                { this.data.para2 }
+              </p>
+            </ion-label>
+          </ion-item>
+          <ion-item>
+            <ion-thumbnail slot="start">
+              <img src="./thumbnail.svg"/>
+            </ion-thumbnail>
+            <ion-label>
+              <h3>
+                { this.data.heading }
+              </h3>
+              <p>
+                { this.data.para1 }
+              </p>
+              <p>
+                { this.data.para2 }
+              </p>
+            </ion-label>
+          </ion-item>
+          <ion-item>
+            <ion-icon name="call" slot="start"></ion-icon>
+            <ion-label>
+              <h3>
+                { this.data.heading }
+              </h3>
+              <p>
+                { this.data.para1 }
+              </p>
+              <p>
+                { this.data.para2 }
+              </p>
+            </ion-label>
+          </ion-item>
+        </ion-list>
+      </ion-content>
+    ];
+  }
+
+  render() {
+    if (this.data) {
+      return this.renderDataScreen();
+    } else {
+      return this.renderSkeletonScreen();
+    }
+  }
+}
+```
+
+```css
+/* Custom Skeleton Line Height and Margin */
+.custom-skeleton ion-skeleton-text {
+  line-height: 13px;
+}
+
+.custom-skeleton ion-skeleton-text:last-child {
+  margin-bottom: 5px;
+}
+```
+
+
 ### Vue
 
 ```html
diff --git a/core/src/components/skeleton-text/usage/stencil.md b/core/src/components/skeleton-text/usage/stencil.md
new file mode 100644
index 0000000000..a7fa8f1122
--- /dev/null
+++ b/core/src/components/skeleton-text/usage/stencil.md
@@ -0,0 +1,175 @@
+```tsx
+import { Component, State, h } from '@stencil/core';
+
+@Component({
+  tag: 'skeleton-text-example',
+  styleUrl: 'skeleton-text-example.css'
+})
+export class SkeletonTextExample {
+  @State() data: any;
+
+  componentWillLoad() {
+    // Data will show after 5 seconds
+    setTimeout(() => {
+      this.data = {
+        'heading': 'Normal text',
+        'para1': 'Lorem ipsum dolor sit amet, consectetur',
+        'para2': 'adipiscing elit.'
+      };
+    }, 5000);
+  }
+
+  // Render skeleton screen when there is no data
+  renderSkeletonScreen() {
+    return [
+      <ion-content>
+        <div class="ion-padding custom-skeleton">
+          <ion-skeleton-text animated style={{ 'width': '60%' }}></ion-skeleton-text>
+          <ion-skeleton-text animated></ion-skeleton-text>
+          <ion-skeleton-text animated style={{ 'width': '88%' }}></ion-skeleton-text>
+          <ion-skeleton-text animated style={{ 'width': '70%' }}></ion-skeleton-text>
+          <ion-skeleton-text animated style={{ 'width': '60%' }}></ion-skeleton-text>
+        </div>
+
+        <ion-list>
+          <ion-list-header>
+            <ion-label>
+              <ion-skeleton-text animated style={{ 'width': '20%' }}></ion-skeleton-text>
+            </ion-label>
+          </ion-list-header>
+          <ion-item>
+            <ion-avatar slot="start">
+              <ion-skeleton-text animated></ion-skeleton-text>
+            </ion-avatar>
+            <ion-label>
+              <h3>
+                <ion-skeleton-text animated style={{ 'width': '50%' }}></ion-skeleton-text>
+              </h3>
+              <p>
+                <ion-skeleton-text animated style={{ 'width': '80%' }}></ion-skeleton-text>
+              </p>
+              <p>
+                <ion-skeleton-text animated style={{ 'width': '60%' }}></ion-skeleton-text>
+              </p>
+            </ion-label>
+          </ion-item>
+          <ion-item>
+            <ion-thumbnail slot="start">
+              <ion-skeleton-text animated></ion-skeleton-text>
+            </ion-thumbnail>
+            <ion-label>
+              <h3>
+                <ion-skeleton-text animated style={{ 'width': '50%' }}></ion-skeleton-text>
+              </h3>
+              <p>
+                <ion-skeleton-text animated style={{ 'width': '80%' }}></ion-skeleton-text>
+              </p>
+              <p>
+                <ion-skeleton-text animated style={{ 'width': '60%' }}></ion-skeleton-text>
+              </p>
+            </ion-label>
+          </ion-item>
+          <ion-item>
+            <ion-skeleton-text animated style={{ 'width': '27p', 'height': '27px' }} slot="start"></ion-skeleton-text>
+            <ion-label>
+              <h3>
+                <ion-skeleton-text animated style={{ 'width': '50%' }}></ion-skeleton-text>
+              </h3>
+              <p>
+                <ion-skeleton-text animated style={{ 'width': '80%' }}></ion-skeleton-text>
+              </p>
+              <p>
+                <ion-skeleton-text animated style={{ 'width': '60%' }}></ion-skeleton-text>
+              </p>
+            </ion-label>
+          </ion-item>
+        </ion-list>
+      </ion-content>
+    ];
+  }
+
+  // Render the elements with data
+  renderDataScreen() {
+    return [
+      <ion-content>
+        <div class="ion-padding">
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ac eros est. Cras iaculis pulvinar arcu non vehicula. Fusce at quam a eros malesuada condimentum. Aliquam tincidunt tincidunt vehicula.
+        </div>
+
+        <ion-list>
+          <ion-list-header>
+            <ion-label>
+              Data
+            </ion-label>
+          </ion-list-header>
+          <ion-item>
+            <ion-avatar slot="start">
+              <img src="./avatar.svg"/>
+            </ion-avatar>
+            <ion-label>
+              <h3>
+                { this.data.heading }
+              </h3>
+              <p>
+                { this.data.para1 }
+              </p>
+              <p>
+                { this.data.para2 }
+              </p>
+            </ion-label>
+          </ion-item>
+          <ion-item>
+            <ion-thumbnail slot="start">
+              <img src="./thumbnail.svg"/>
+            </ion-thumbnail>
+            <ion-label>
+              <h3>
+                { this.data.heading }
+              </h3>
+              <p>
+                { this.data.para1 }
+              </p>
+              <p>
+                { this.data.para2 }
+              </p>
+            </ion-label>
+          </ion-item>
+          <ion-item>
+            <ion-icon name="call" slot="start"></ion-icon>
+            <ion-label>
+              <h3>
+                { this.data.heading }
+              </h3>
+              <p>
+                { this.data.para1 }
+              </p>
+              <p>
+                { this.data.para2 }
+              </p>
+            </ion-label>
+          </ion-item>
+        </ion-list>
+      </ion-content>
+    ];
+  }
+
+  render() {
+    if (this.data) {
+      return this.renderDataScreen();
+    } else {
+      return this.renderSkeletonScreen();
+    }
+  }
+}
+```
+
+```css
+/* Custom Skeleton Line Height and Margin */
+.custom-skeleton ion-skeleton-text {
+  line-height: 13px;
+}
+
+.custom-skeleton ion-skeleton-text:last-child {
+  margin-bottom: 5px;
+}
+```
\ No newline at end of file
diff --git a/core/src/components/slides/readme.md b/core/src/components/slides/readme.md
index 45c53fbf28..ab78ed2134 100644
--- a/core/src/components/slides/readme.md
+++ b/core/src/components/slides/readme.md
@@ -442,21 +442,24 @@ import { Component } from '@angular/core';
 @Component({
   selector: 'slides-example',
   template: `
-    <ion-slides pager="true" [options]="slideOpts">
-      <ion-slide>
-        <h1>Slide 1</h1>
-      </ion-slide>
-      <ion-slide>
-        <h1>Slide 2</h1>
-      </ion-slide>
-      <ion-slide>
-        <h1>Slide 3</h1>
-      </ion-slide>
-    </ion-slides>
+    <ion-content>
+      <ion-slides pager="true" [options]="slideOpts">
+        <ion-slide>
+          <h1>Slide 1</h1>
+        </ion-slide>
+        <ion-slide>
+          <h1>Slide 2</h1>
+        </ion-slide>
+        <ion-slide>
+          <h1>Slide 3</h1>
+        </ion-slide>
+      </ion-slides>
+    </ion-content>
   `
 })
 export class SlideExample {
-  // Optional parameters to pass to the swiper instance. See http://idangero.us/swiper/api/ for valid options.
+  // Optional parameters to pass to the swiper instance.
+  // See http://idangero.us/swiper/api/ for valid options.
   slideOpts = {
     initialSlide: 1,
     speed: 400
@@ -465,12 +468,19 @@ export class SlideExample {
 }
 ```
 
+```css
+/* Without setting height the slides will take up the height of the slide's content */
+ion-slides {
+  height: 100%;
+}
+```
+
 
 ### Javascript
 
 ```html
+<ion-content>
   <ion-slides pager="true">
-
     <ion-slide>
       <h1>Slide 1</h1>
     </ion-slide>
@@ -483,18 +493,27 @@ export class SlideExample {
       <h1>Slide 3</h1>
     </ion-slide>
   </ion-slides>
+</ion-content>
 ```
 
 ```javascript
 var slides = document.querySelector('ion-slides');
 
-// Optional parameters to pass to the swiper instance. See http://idangero.us/swiper/api/ for valid options.
+// Optional parameters to pass to the swiper instance.
+// See http://idangero.us/swiper/api/ for valid options.
 slides.options = {
   initialSlide: 1,
   speed: 400
 }
 ```
 
+```css
+/* Without setting height the slides will take up the height of the slide's content */
+ion-slides {
+  height: 100%;
+}
+```
+
 
 ### React
 
@@ -502,7 +521,8 @@ slides.options = {
 import React from 'react';
 import { IonSlides, IonSlide, IonContent } from '@ionic/react';
 
-// Optional parameters to pass to the swiper instance. See http://idangero.us/swiper/api/ for valid options.
+// Optional parameters to pass to the swiper instance.
+// See http://idangero.us/swiper/api/ for valid options.
 const slideOpts = {
   initialSlide: 1,
   speed: 400
@@ -525,6 +545,60 @@ export const SlidesExample: React.FC = () => (
 );
 ```
 
+```css
+/* Without setting height the slides will take up the height of the slide's content */
+ion-slides {
+  height: 100%;
+}
+```
+
+
+### Stencil
+
+```tsx
+import { Component, h } from '@stencil/core';
+
+@Component({
+  tag: 'slides-example',
+  styleUrl: 'slides-example.css'
+})
+export class SlidesExample {
+  // Optional parameters to pass to the swiper instance.
+  // See http://idangero.us/swiper/api/ for valid options.
+  private slideOpts = {
+    initialSlide: 1,
+    speed: 400
+  };
+
+  render() {
+    return [
+      <ion-content>
+        <ion-slides pager={true} options={this.slideOpts}>
+          <ion-slide>
+            <h1>Slide 1</h1>
+          </ion-slide>
+
+          <ion-slide>
+            <h1>Slide 2</h1>
+          </ion-slide>
+
+          <ion-slide>
+            <h1>Slide 3</h1>
+          </ion-slide>
+        </ion-slides>
+      </ion-content>
+    ];
+  }
+}
+```
+
+```css
+/* Without setting height the slides will take up the height of the slide's content */
+ion-slides {
+  height: 100%;
+}
+```
+
 
 ### Vue
 
diff --git a/core/src/components/slides/usage/angular.md b/core/src/components/slides/usage/angular.md
index 18e7ee8c5d..de4a7a70fa 100644
--- a/core/src/components/slides/usage/angular.md
+++ b/core/src/components/slides/usage/angular.md
@@ -4,21 +4,24 @@ import { Component } from '@angular/core';
 @Component({
   selector: 'slides-example',
   template: `
-    <ion-slides pager="true" [options]="slideOpts">
-      <ion-slide>
-        <h1>Slide 1</h1>
-      </ion-slide>
-      <ion-slide>
-        <h1>Slide 2</h1>
-      </ion-slide>
-      <ion-slide>
-        <h1>Slide 3</h1>
-      </ion-slide>
-    </ion-slides>
+    <ion-content>
+      <ion-slides pager="true" [options]="slideOpts">
+        <ion-slide>
+          <h1>Slide 1</h1>
+        </ion-slide>
+        <ion-slide>
+          <h1>Slide 2</h1>
+        </ion-slide>
+        <ion-slide>
+          <h1>Slide 3</h1>
+        </ion-slide>
+      </ion-slides>
+    </ion-content>
   `
 })
 export class SlideExample {
-  // Optional parameters to pass to the swiper instance. See http://idangero.us/swiper/api/ for valid options.
+  // Optional parameters to pass to the swiper instance.
+  // See http://idangero.us/swiper/api/ for valid options.
   slideOpts = {
     initialSlide: 1,
     speed: 400
@@ -26,3 +29,10 @@ export class SlideExample {
   constructor() {}
 }
 ```
+
+```css
+/* Without setting height the slides will take up the height of the slide's content */
+ion-slides {
+  height: 100%;
+}
+```
diff --git a/core/src/components/slides/usage/javascript.md b/core/src/components/slides/usage/javascript.md
index 89a93ee993..f949ef633d 100644
--- a/core/src/components/slides/usage/javascript.md
+++ b/core/src/components/slides/usage/javascript.md
@@ -1,6 +1,6 @@
 ```html
+<ion-content>
   <ion-slides pager="true">
-
     <ion-slide>
       <h1>Slide 1</h1>
     </ion-slide>
@@ -13,14 +13,23 @@
       <h1>Slide 3</h1>
     </ion-slide>
   </ion-slides>
+</ion-content>
 ```
 
 ```javascript
 var slides = document.querySelector('ion-slides');
 
-// Optional parameters to pass to the swiper instance. See http://idangero.us/swiper/api/ for valid options.
+// Optional parameters to pass to the swiper instance.
+// See http://idangero.us/swiper/api/ for valid options.
 slides.options = {
   initialSlide: 1,
   speed: 400
 }
 ```
+
+```css
+/* Without setting height the slides will take up the height of the slide's content */
+ion-slides {
+  height: 100%;
+}
+```
diff --git a/core/src/components/slides/usage/react.md b/core/src/components/slides/usage/react.md
index 48c92c51d9..fe3f1bdc9a 100644
--- a/core/src/components/slides/usage/react.md
+++ b/core/src/components/slides/usage/react.md
@@ -2,7 +2,8 @@
 import React from 'react';
 import { IonSlides, IonSlide, IonContent } from '@ionic/react';
 
-// Optional parameters to pass to the swiper instance. See http://idangero.us/swiper/api/ for valid options.
+// Optional parameters to pass to the swiper instance.
+// See http://idangero.us/swiper/api/ for valid options.
 const slideOpts = {
   initialSlide: 1,
   speed: 400
@@ -24,3 +25,10 @@ export const SlidesExample: React.FC = () => (
   </IonContent>
 );
 ```
+
+```css
+/* Without setting height the slides will take up the height of the slide's content */
+ion-slides {
+  height: 100%;
+}
+```
\ No newline at end of file
diff --git a/core/src/components/slides/usage/stencil.md b/core/src/components/slides/usage/stencil.md
new file mode 100644
index 0000000000..e120ae1e36
--- /dev/null
+++ b/core/src/components/slides/usage/stencil.md
@@ -0,0 +1,43 @@
+```tsx
+import { Component, h } from '@stencil/core';
+
+@Component({
+  tag: 'slides-example',
+  styleUrl: 'slides-example.css'
+})
+export class SlidesExample {
+  // Optional parameters to pass to the swiper instance.
+  // See http://idangero.us/swiper/api/ for valid options.
+  private slideOpts = {
+    initialSlide: 1,
+    speed: 400
+  };
+
+  render() {
+    return [
+      <ion-content>
+        <ion-slides pager={true} options={this.slideOpts}>
+          <ion-slide>
+            <h1>Slide 1</h1>
+          </ion-slide>
+
+          <ion-slide>
+            <h1>Slide 2</h1>
+          </ion-slide>
+
+          <ion-slide>
+            <h1>Slide 3</h1>
+          </ion-slide>
+        </ion-slides>
+      </ion-content>
+    ];
+  }
+}
+```
+
+```css
+/* Without setting height the slides will take up the height of the slide's content */
+ion-slides {
+  height: 100%;
+}
+```
\ No newline at end of file
diff --git a/core/src/components/spinner/readme.md b/core/src/components/spinner/readme.md
index 2fa1c3e81b..3c35a959a9 100644
--- a/core/src/components/spinner/readme.md
+++ b/core/src/components/spinner/readme.md
@@ -76,6 +76,47 @@ export const SpinnerExample: React.FC = () => (
 ```
 
 
+### Stencil
+
+```tsx
+import { Component, h } from '@stencil/core';
+
+@Component({
+  tag: 'spinner-example',
+  styleUrl: 'spinner-example.css'
+})
+export class SpinnerExample {
+  render() {
+    return [
+      // Default Spinner
+      <ion-spinner></ion-spinner>,
+
+      // Lines
+      <ion-spinner name="lines"></ion-spinner>,
+
+      // Lines Small
+      <ion-spinner name="lines-small"></ion-spinner>,
+
+      // Dots
+      <ion-spinner name="dots"></ion-spinner>,
+
+      // Bubbles
+      <ion-spinner name="bubbles"></ion-spinner>,
+
+      // Circles
+      <ion-spinner name="circles"></ion-spinner>,
+
+      // Crescent
+      <ion-spinner name="crescent"></ion-spinner>,
+
+      // Paused Default Spinner
+      <ion-spinner paused={true}></ion-spinner>
+    ];
+  }
+}
+```
+
+
 ### Vue
 
 ```html
diff --git a/core/src/components/spinner/usage/stencil.md b/core/src/components/spinner/usage/stencil.md
new file mode 100644
index 0000000000..fd8c0c2d5b
--- /dev/null
+++ b/core/src/components/spinner/usage/stencil.md
@@ -0,0 +1,37 @@
+```tsx
+import { Component, h } from '@stencil/core';
+
+@Component({
+  tag: 'spinner-example',
+  styleUrl: 'spinner-example.css'
+})
+export class SpinnerExample {
+  render() {
+    return [
+      // Default Spinner
+      <ion-spinner></ion-spinner>,
+
+      // Lines
+      <ion-spinner name="lines"></ion-spinner>,
+
+      // Lines Small
+      <ion-spinner name="lines-small"></ion-spinner>,
+
+      // Dots
+      <ion-spinner name="dots"></ion-spinner>,
+
+      // Bubbles
+      <ion-spinner name="bubbles"></ion-spinner>,
+
+      // Circles
+      <ion-spinner name="circles"></ion-spinner>,
+
+      // Crescent
+      <ion-spinner name="crescent"></ion-spinner>,
+
+      // Paused Default Spinner
+      <ion-spinner paused={true}></ion-spinner>
+    ];
+  }
+}
+```
diff --git a/core/src/components/split-pane/readme.md b/core/src/components/split-pane/readme.md
index 71563b2a1e..8a1582c52f 100644
--- a/core/src/components/split-pane/readme.md
+++ b/core/src/components/split-pane/readme.md
@@ -38,7 +38,7 @@ By default, the split pane will expand when the screen is larger than 992px. To
 
 ```html
 <ion-split-pane contentId="main">
-  <!--  our side menu  -->
+  <!--  the side menu  -->
   <ion-menu contentId="main">
     <ion-header>
       <ion-toolbar>
@@ -57,7 +57,7 @@ By default, the split pane will expand when the screen is larger than 992px. To
 
 ```html
 <ion-split-pane content-id="main">
-  <!--  our side menu  -->
+  <!--  the side menu  -->
   <ion-menu content-id="main">
     <ion-header>
       <ion-toolbar>
@@ -92,7 +92,7 @@ import {
 export const SplitPlaneExample: React.SFC<{}> = () => (
   <IonContent>
     <IonSplitPane contentId="main">
-      {/*--  our side menu  --*/}
+      {/*--  the side menu  --*/}
       <IonMenu contentId="main">
         <IonHeader>
           <IonToolbar>
@@ -109,12 +109,43 @@ export const SplitPlaneExample: React.SFC<{}> = () => (
 ```
 
 
+### Stencil
+
+```tsx
+import { Component, h } from '@stencil/core';
+
+@Component({
+  tag: 'split-pane-example',
+  styleUrl: 'split-pane-example.css'
+})
+export class SplitPaneExample {
+  render() {
+    return [
+      <ion-split-pane content-id="main">
+        {/*  the side menu */}
+        <ion-menu content-id="main">
+          <ion-header>
+            <ion-toolbar>
+              <ion-title>Menu</ion-title>
+            </ion-toolbar>
+          </ion-header>
+        </ion-menu>
+
+        {/* the main content */}
+        <ion-router-outlet id="main"></ion-router-outlet>
+      </ion-split-pane>
+    ];
+  }
+}
+```
+
+
 ### Vue
 
 ```html
 <template>
   <ion-split-pane content-id="main">
-    <!--  our side menu  -->
+    <!--  the side menu  -->
     <ion-menu content-id="main">
       <ion-header>
         <ion-toolbar>
diff --git a/core/src/components/split-pane/usage/angular.md b/core/src/components/split-pane/usage/angular.md
index a33280b29e..0196008ee2 100644
--- a/core/src/components/split-pane/usage/angular.md
+++ b/core/src/components/split-pane/usage/angular.md
@@ -1,6 +1,6 @@
 ```html
 <ion-split-pane contentId="main">
-  <!--  our side menu  -->
+  <!--  the side menu  -->
   <ion-menu contentId="main">
     <ion-header>
       <ion-toolbar>
diff --git a/core/src/components/split-pane/usage/javascript.md b/core/src/components/split-pane/usage/javascript.md
index ad127dd01f..b8166778f2 100644
--- a/core/src/components/split-pane/usage/javascript.md
+++ b/core/src/components/split-pane/usage/javascript.md
@@ -1,6 +1,6 @@
 ```html
 <ion-split-pane content-id="main">
-  <!--  our side menu  -->
+  <!--  the side menu  -->
   <ion-menu content-id="main">
     <ion-header>
       <ion-toolbar>
diff --git a/core/src/components/split-pane/usage/react.md b/core/src/components/split-pane/usage/react.md
index e4dcf98177..95032962dd 100644
--- a/core/src/components/split-pane/usage/react.md
+++ b/core/src/components/split-pane/usage/react.md
@@ -14,7 +14,7 @@ import {
 export const SplitPlaneExample: React.SFC<{}> = () => (
   <IonContent>
     <IonSplitPane contentId="main">
-      {/*--  our side menu  --*/}
+      {/*--  the side menu  --*/}
       <IonMenu contentId="main">
         <IonHeader>
           <IonToolbar>
diff --git a/core/src/components/split-pane/usage/stencil.md b/core/src/components/split-pane/usage/stencil.md
new file mode 100644
index 0000000000..b044a31552
--- /dev/null
+++ b/core/src/components/split-pane/usage/stencil.md
@@ -0,0 +1,27 @@
+```tsx
+import { Component, h } from '@stencil/core';
+
+@Component({
+  tag: 'split-pane-example',
+  styleUrl: 'split-pane-example.css'
+})
+export class SplitPaneExample {
+  render() {
+    return [
+      <ion-split-pane content-id="main">
+        {/*  the side menu */}
+        <ion-menu content-id="main">
+          <ion-header>
+            <ion-toolbar>
+              <ion-title>Menu</ion-title>
+            </ion-toolbar>
+          </ion-header>
+        </ion-menu>
+
+        {/* the main content */}
+        <ion-router-outlet id="main"></ion-router-outlet>
+      </ion-split-pane>
+    ];
+  }
+}
+```
diff --git a/core/src/components/split-pane/usage/vue.md b/core/src/components/split-pane/usage/vue.md
index 07b39e2d13..51a6cbe660 100644
--- a/core/src/components/split-pane/usage/vue.md
+++ b/core/src/components/split-pane/usage/vue.md
@@ -1,7 +1,7 @@
 ```html
 <template>
   <ion-split-pane content-id="main">
-    <!--  our side menu  -->
+    <!--  the side menu  -->
     <ion-menu content-id="main">
       <ion-header>
         <ion-toolbar>
diff --git a/core/src/components/tab-bar/readme.md b/core/src/components/tab-bar/readme.md
index 1187eef46e..038b14b265 100644
--- a/core/src/components/tab-bar/readme.md
+++ b/core/src/components/tab-bar/readme.md
@@ -81,6 +81,43 @@ export const TabBarExample: React.FC = () => (
 ```
 
 
+### Stencil
+
+```tsx
+import { Component, h } from '@stencil/core';
+
+@Component({
+  tag: 'tab-bar-example',
+  styleUrl: 'tab-bar-example.css'
+})
+export class TabBarExample {
+  render() {
+    return [
+      <ion-tabs>
+        {/* Tab views */}
+        <ion-tab tab="account" component="page-account"></ion-tab>
+        <ion-tab tab="contact" component="page-contact"></ion-tab>
+        <ion-tab tab="settings" component="page-settings"></ion-tab>
+
+        {/* Tab bar */}
+        <ion-tab-bar slot="bottom">
+          <ion-tab-button tab="account">
+            <ion-icon name="person"></ion-icon>
+          </ion-tab-button>
+          <ion-tab-button tab="contact">
+            <ion-icon name="call"></ion-icon>
+          </ion-tab-button>
+          <ion-tab-button tab="settings">
+            <ion-icon name="settings"></ion-icon>
+          </ion-tab-button>
+        </ion-tab-bar>
+      </ion-tabs>
+    ];
+  }
+}
+```
+
+
 ### Vue
 
 ```html
diff --git a/core/src/components/tab-bar/usage/stencil.md b/core/src/components/tab-bar/usage/stencil.md
new file mode 100644
index 0000000000..878bfa9b09
--- /dev/null
+++ b/core/src/components/tab-bar/usage/stencil.md
@@ -0,0 +1,33 @@
+```tsx
+import { Component, h } from '@stencil/core';
+
+@Component({
+  tag: 'tab-bar-example',
+  styleUrl: 'tab-bar-example.css'
+})
+export class TabBarExample {
+  render() {
+    return [
+      <ion-tabs>
+        {/* Tab views */}
+        <ion-tab tab="account" component="page-account"></ion-tab>
+        <ion-tab tab="contact" component="page-contact"></ion-tab>
+        <ion-tab tab="settings" component="page-settings"></ion-tab>
+
+        {/* Tab bar */}
+        <ion-tab-bar slot="bottom">
+          <ion-tab-button tab="account">
+            <ion-icon name="person"></ion-icon>
+          </ion-tab-button>
+          <ion-tab-button tab="contact">
+            <ion-icon name="call"></ion-icon>
+          </ion-tab-button>
+          <ion-tab-button tab="settings">
+            <ion-icon name="settings"></ion-icon>
+          </ion-tab-button>
+        </ion-tab-bar>
+      </ion-tabs>
+    ];
+  }
+}
+```
diff --git a/core/src/components/tab-button/readme.md b/core/src/components/tab-button/readme.md
index 1e2971508c..2c5cfbb98a 100644
--- a/core/src/components/tab-button/readme.md
+++ b/core/src/components/tab-button/readme.md
@@ -14,7 +14,7 @@ See the [tabs documentation](../tabs) for more details on configuring tabs.
 
 ```html
 <ion-tabs>
-
+  <!-- Tab bar -->
   <ion-tab-bar slot="bottom">
     <ion-tab-button tab="schedule">
       <ion-icon name="calendar"></ion-icon>
@@ -36,7 +36,6 @@ See the [tabs documentation](../tabs) for more details on configuring tabs.
       <ion-label>About</ion-label>
     </ion-tab-button>
   </ion-tab-bar>
-
 </ion-tabs>
 ```
 
@@ -45,7 +44,24 @@ See the [tabs documentation](../tabs) for more details on configuring tabs.
 
 ```html
 <ion-tabs>
+  <!-- Tab views -->
+  <ion-tab tab="schedule">
+    <ion-router-outlet name="schedule"></ion-router-outlet>
+  </ion-tab>
 
+  <ion-tab tab="speakers">
+    <ion-router-outlet name="speakers"></ion-router-outlet>
+  </ion-tab>
+
+  <ion-tab tab="map">
+    <ion-router-outlet name="map"></ion-router-outlet>
+  </ion-tab>
+
+  <ion-tab tab="about">
+    <ion-router-outlet name="about"></ion-router-outlet>
+  </ion-tab>
+
+  <!-- Tab bar -->
   <ion-tab-bar slot="bottom">
     <ion-tab-button tab="schedule" href="/app/tabs/(schedule:schedule)">
       <ion-icon name="calendar"></ion-icon>
@@ -67,23 +83,6 @@ See the [tabs documentation](../tabs) for more details on configuring tabs.
       <ion-label>About</ion-label>
     </ion-tab-button>
   </ion-tab-bar>
-
-  <ion-tab tab="schedule">
-    <ion-router-outlet name="schedule"></ion-router-outlet>
-  </ion-tab>
-
-  <ion-tab tab="speakers">
-    <ion-router-outlet name="speakers"></ion-router-outlet>
-  </ion-tab>
-
-  <ion-tab tab="map">
-    <ion-router-outlet name="map"></ion-router-outlet>
-  </ion-tab>
-
-  <ion-tab tab="about">
-    <ion-router-outlet name="about"></ion-router-outlet>
-  </ion-tab>
-
 </ion-tabs>
 ```
 
@@ -98,6 +97,7 @@ import { calendar, personCircle, map, informationCircle } from 'ionicons/icons';
 export const TabButtonExample: React.FC = () => (
   <IonContent>
     <IonTabs>
+      {/*-- Tab bar --*/}
       <IonTabBar slot="bottom">
         <IonTabButton tab="schedule">
           <IonIcon icon={calendar} />
@@ -125,12 +125,71 @@ export const TabButtonExample: React.FC = () => (
 ```
 
 
+### Stencil
+
+```tsx
+import { Component, h } from '@stencil/core';
+
+@Component({
+  tag: 'tab-button-example',
+  styleUrl: 'tab-button-example.css'
+})
+export class TabButtonExample {
+  render() {
+    return [
+      <ion-tabs>
+        {/* Tab views */}
+        <ion-tab tab="schedule">
+          <ion-router-outlet name="schedule"></ion-router-outlet>
+        </ion-tab>
+
+        <ion-tab tab="speakers">
+          <ion-router-outlet name="speakers"></ion-router-outlet>
+        </ion-tab>
+
+        <ion-tab tab="map">
+          <ion-router-outlet name="map"></ion-router-outlet>
+        </ion-tab>
+
+        <ion-tab tab="about">
+          <ion-router-outlet name="about"></ion-router-outlet>
+        </ion-tab>
+
+        {/* Tab bar */}
+        <ion-tab-bar slot="bottom">
+          <ion-tab-button tab="schedule" href="/app/tabs/(schedule:schedule)">
+            <ion-icon name="calendar"></ion-icon>
+            <ion-label>Schedule</ion-label>
+          </ion-tab-button>
+
+          <ion-tab-button tab="speakers" href="/app/tabs/(speakers:speakers)">
+            <ion-icon name="person-circle"></ion-icon>
+            <ion-label>Speakers</ion-label>
+          </ion-tab-button>
+
+          <ion-tab-button tab="map" href="/app/tabs/(map:map)">
+            <ion-icon name="map"></ion-icon>
+            <ion-label>Map</ion-label>
+          </ion-tab-button>
+
+          <ion-tab-button tab="about" href="/app/tabs/(about:about)">
+            <ion-icon name="information-circle"></ion-icon>
+            <ion-label>About</ion-label>
+          </ion-tab-button>
+        </ion-tab-bar>
+      </ion-tabs>
+    ];
+  }
+}
+```
+
+
 ### Vue
 
 ```html
 <template>
   <ion-tabs>
-
+    <!-- Tab bar -->
     <ion-tab-bar slot="bottom">
       <ion-tab-button tab="schedule">
         <ion-icon name="calendar"></ion-icon>
@@ -152,7 +211,6 @@ export const TabButtonExample: React.FC = () => (
         <ion-label>About</ion-label>
       </ion-tab-button>
     </ion-tab-bar>
-
   </ion-tabs>
 </template>
 ```
diff --git a/core/src/components/tab-button/usage/angular.md b/core/src/components/tab-button/usage/angular.md
index 64afca6abf..37449bf856 100644
--- a/core/src/components/tab-button/usage/angular.md
+++ b/core/src/components/tab-button/usage/angular.md
@@ -1,6 +1,6 @@
 ```html
 <ion-tabs>
-
+  <!-- Tab bar -->
   <ion-tab-bar slot="bottom">
     <ion-tab-button tab="schedule">
       <ion-icon name="calendar"></ion-icon>
@@ -22,6 +22,5 @@
       <ion-label>About</ion-label>
     </ion-tab-button>
   </ion-tab-bar>
-
 </ion-tabs>
 ```
diff --git a/core/src/components/tab-button/usage/javascript.md b/core/src/components/tab-button/usage/javascript.md
index 6c8379c6a5..0875600b4f 100644
--- a/core/src/components/tab-button/usage/javascript.md
+++ b/core/src/components/tab-button/usage/javascript.md
@@ -1,6 +1,23 @@
 ```html
 <ion-tabs>
+  <!-- Tab views -->
+  <ion-tab tab="schedule">
+    <ion-router-outlet name="schedule"></ion-router-outlet>
+  </ion-tab>
 
+  <ion-tab tab="speakers">
+    <ion-router-outlet name="speakers"></ion-router-outlet>
+  </ion-tab>
+
+  <ion-tab tab="map">
+    <ion-router-outlet name="map"></ion-router-outlet>
+  </ion-tab>
+
+  <ion-tab tab="about">
+    <ion-router-outlet name="about"></ion-router-outlet>
+  </ion-tab>
+
+  <!-- Tab bar -->
   <ion-tab-bar slot="bottom">
     <ion-tab-button tab="schedule" href="/app/tabs/(schedule:schedule)">
       <ion-icon name="calendar"></ion-icon>
@@ -22,22 +39,5 @@
       <ion-label>About</ion-label>
     </ion-tab-button>
   </ion-tab-bar>
-
-  <ion-tab tab="schedule">
-    <ion-router-outlet name="schedule"></ion-router-outlet>
-  </ion-tab>
-
-  <ion-tab tab="speakers">
-    <ion-router-outlet name="speakers"></ion-router-outlet>
-  </ion-tab>
-
-  <ion-tab tab="map">
-    <ion-router-outlet name="map"></ion-router-outlet>
-  </ion-tab>
-
-  <ion-tab tab="about">
-    <ion-router-outlet name="about"></ion-router-outlet>
-  </ion-tab>
-
 </ion-tabs>
 ```
diff --git a/core/src/components/tab-button/usage/react.md b/core/src/components/tab-button/usage/react.md
index 5c755565c5..0987a91151 100644
--- a/core/src/components/tab-button/usage/react.md
+++ b/core/src/components/tab-button/usage/react.md
@@ -6,6 +6,7 @@ import { calendar, personCircle, map, informationCircle } from 'ionicons/icons';
 export const TabButtonExample: React.FC = () => (
   <IonContent>
     <IonTabs>
+      {/*-- Tab bar --*/}
       <IonTabBar slot="bottom">
         <IonTabButton tab="schedule">
           <IonIcon icon={calendar} />
diff --git a/core/src/components/tab-button/usage/stencil.md b/core/src/components/tab-button/usage/stencil.md
new file mode 100644
index 0000000000..38685e4402
--- /dev/null
+++ b/core/src/components/tab-button/usage/stencil.md
@@ -0,0 +1,55 @@
+```tsx
+import { Component, h } from '@stencil/core';
+
+@Component({
+  tag: 'tab-button-example',
+  styleUrl: 'tab-button-example.css'
+})
+export class TabButtonExample {
+  render() {
+    return [
+      <ion-tabs>
+        {/* Tab views */}
+        <ion-tab tab="schedule">
+          <ion-router-outlet name="schedule"></ion-router-outlet>
+        </ion-tab>
+
+        <ion-tab tab="speakers">
+          <ion-router-outlet name="speakers"></ion-router-outlet>
+        </ion-tab>
+
+        <ion-tab tab="map">
+          <ion-router-outlet name="map"></ion-router-outlet>
+        </ion-tab>
+
+        <ion-tab tab="about">
+          <ion-router-outlet name="about"></ion-router-outlet>
+        </ion-tab>
+
+        {/* Tab bar */}
+        <ion-tab-bar slot="bottom">
+          <ion-tab-button tab="schedule" href="/app/tabs/(schedule:schedule)">
+            <ion-icon name="calendar"></ion-icon>
+            <ion-label>Schedule</ion-label>
+          </ion-tab-button>
+
+          <ion-tab-button tab="speakers" href="/app/tabs/(speakers:speakers)">
+            <ion-icon name="person-circle"></ion-icon>
+            <ion-label>Speakers</ion-label>
+          </ion-tab-button>
+
+          <ion-tab-button tab="map" href="/app/tabs/(map:map)">
+            <ion-icon name="map"></ion-icon>
+            <ion-label>Map</ion-label>
+          </ion-tab-button>
+
+          <ion-tab-button tab="about" href="/app/tabs/(about:about)">
+            <ion-icon name="information-circle"></ion-icon>
+            <ion-label>About</ion-label>
+          </ion-tab-button>
+        </ion-tab-bar>
+      </ion-tabs>
+    ];
+  }
+}
+```
diff --git a/core/src/components/tab-button/usage/vue.md b/core/src/components/tab-button/usage/vue.md
index fd67ba39ab..651139f912 100644
--- a/core/src/components/tab-button/usage/vue.md
+++ b/core/src/components/tab-button/usage/vue.md
@@ -1,7 +1,7 @@
 ```html
 <template>
   <ion-tabs>
-
+    <!-- Tab bar -->
     <ion-tab-bar slot="bottom">
       <ion-tab-button tab="schedule">
         <ion-icon name="calendar"></ion-icon>
@@ -23,7 +23,6 @@
         <ion-label>About</ion-label>
       </ion-tab-button>
     </ion-tab-bar>
-
   </ion-tabs>
 </template>
 ```
diff --git a/core/src/components/tabs/readme.md b/core/src/components/tabs/readme.md
index 9147b4c46c..01b5a61fe2 100644
--- a/core/src/components/tabs/readme.md
+++ b/core/src/components/tabs/readme.md
@@ -137,7 +137,7 @@ const routes: Routes = [
 ```
 
 
-## Activating Tabs
+### Activating Tabs
 
 Each `ion-tab-button` will activate one of the tabs when pressed. In order to link the `ion-tab-button` to the `ion-tab` container, a matching `tab` property should be set on each component.
 
@@ -210,6 +210,101 @@ export const TabsExample: React.FC = () => (
 ```
 
 
+### Stencil
+
+```tsx
+import { Component, h } from '@stencil/core';
+
+@Component({
+  tag: 'tabs-example',
+  styleUrl: 'tabs-example.css'
+})
+export class TabsExample {
+  render() {
+    return [
+     <ion-tabs>
+      <ion-tab tab="tab-schedule">
+        <ion-nav></ion-nav>
+      </ion-tab>
+
+      <ion-tab tab="tab-speaker">
+        <ion-nav></ion-nav>
+      </ion-tab>
+
+      <ion-tab tab="tab-map" component="page-map">
+        <ion-nav></ion-nav>
+      </ion-tab>
+
+      <ion-tab tab="tab-about" component="page-about">
+        <ion-nav></ion-nav>
+      </ion-tab>
+
+      <ion-tab-bar slot="bottom">
+        <ion-tab-button tab="tab-schedule">
+          <ion-icon name="calendar"></ion-icon>
+          <ion-label>Schedule</ion-label>
+          <ion-badge>6</ion-badge>
+        </ion-tab-button>
+
+        <ion-tab-button tab="tab-speaker">
+          <ion-icon name="person-circle"></ion-icon>
+          <ion-label>Speakers</ion-label>
+        </ion-tab-button>
+
+        <ion-tab-button tab="tab-map">
+          <ion-icon name="map"></ion-icon>
+          <ion-label>Map</ion-label>
+        </ion-tab-button>
+
+        <ion-tab-button tab="tab-about">
+          <ion-icon name="information-circle"></ion-icon>
+          <ion-label>About</ion-label>
+        </ion-tab-button>
+      </ion-tab-bar>
+
+    </ion-tabs>
+    ];
+  }
+}
+```
+
+
+### Activating Tabs
+
+Each `ion-tab-button` will activate one of the tabs when pressed. In order to link the `ion-tab-button` to the `ion-tab` container, a matching `tab` property should be set on each component.
+
+```jsx
+<ion-tab tab="settings">
+  ...
+</ion-tab>
+
+<ion-tab-button tab="settings">
+  ...
+</ion-tab-button>
+```
+
+The `ion-tab-button` and `ion-tab` above are linked by the common `tab` property.
+
+The `tab` property identifies each tab, and it has to be unique within the `ion-tabs`. It's important to always set the `tab` property on the `ion-tab` and `ion-tab-button`, even if one component is not used.
+
+
+### Router integration
+
+When used with Ionic's router (`ion-router`) the `tab` property of the `ion-tab` matches the `component` property of an `ion-route`.
+
+The following route within the scope of an `ion-tabs` outlet:
+
+```tsx
+<ion-route url="/settings-page" component="settings"></ion-route>
+```
+
+will match the following tab:
+
+```tsx
+<ion-tab tab="settings" component="settings-component"></ion-tab>
+```
+
+
 ### Vue
 
 ```html
diff --git a/core/src/components/tabs/usage/javascript.md b/core/src/components/tabs/usage/javascript.md
index 93fbdbc208..9a46242a9e 100644
--- a/core/src/components/tabs/usage/javascript.md
+++ b/core/src/components/tabs/usage/javascript.md
@@ -44,7 +44,7 @@
 ```
 
 
-## Activating Tabs
+### Activating Tabs
 
 Each `ion-tab-button` will activate one of the tabs when pressed. In order to link the `ion-tab-button` to the `ion-tab` container, a matching `tab` property should be set on each component.
 
diff --git a/core/src/components/tabs/usage/stencil.md b/core/src/components/tabs/usage/stencil.md
new file mode 100644
index 0000000000..ce2000852d
--- /dev/null
+++ b/core/src/components/tabs/usage/stencil.md
@@ -0,0 +1,91 @@
+```tsx
+import { Component, h } from '@stencil/core';
+
+@Component({
+  tag: 'tabs-example',
+  styleUrl: 'tabs-example.css'
+})
+export class TabsExample {
+  render() {
+    return [
+     <ion-tabs>
+      <ion-tab tab="tab-schedule">
+        <ion-nav></ion-nav>
+      </ion-tab>
+
+      <ion-tab tab="tab-speaker">
+        <ion-nav></ion-nav>
+      </ion-tab>
+
+      <ion-tab tab="tab-map" component="page-map">
+        <ion-nav></ion-nav>
+      </ion-tab>
+
+      <ion-tab tab="tab-about" component="page-about">
+        <ion-nav></ion-nav>
+      </ion-tab>
+
+      <ion-tab-bar slot="bottom">
+        <ion-tab-button tab="tab-schedule">
+          <ion-icon name="calendar"></ion-icon>
+          <ion-label>Schedule</ion-label>
+          <ion-badge>6</ion-badge>
+        </ion-tab-button>
+
+        <ion-tab-button tab="tab-speaker">
+          <ion-icon name="person-circle"></ion-icon>
+          <ion-label>Speakers</ion-label>
+        </ion-tab-button>
+
+        <ion-tab-button tab="tab-map">
+          <ion-icon name="map"></ion-icon>
+          <ion-label>Map</ion-label>
+        </ion-tab-button>
+
+        <ion-tab-button tab="tab-about">
+          <ion-icon name="information-circle"></ion-icon>
+          <ion-label>About</ion-label>
+        </ion-tab-button>
+      </ion-tab-bar>
+
+    </ion-tabs>
+    ];
+  }
+}
+```
+
+
+### Activating Tabs
+
+Each `ion-tab-button` will activate one of the tabs when pressed. In order to link the `ion-tab-button` to the `ion-tab` container, a matching `tab` property should be set on each component.
+
+```jsx
+<ion-tab tab="settings">
+  ...
+</ion-tab>
+
+<ion-tab-button tab="settings">
+  ...
+</ion-tab-button>
+```
+
+The `ion-tab-button` and `ion-tab` above are linked by the common `tab` property.
+
+The `tab` property identifies each tab, and it has to be unique within the `ion-tabs`. It's important to always set the `tab` property on the `ion-tab` and `ion-tab-button`, even if one component is not used.
+
+
+### Router integration
+
+When used with Ionic's router (`ion-router`) the `tab` property of the `ion-tab` matches the `component` property of an `ion-route`.
+
+The following route within the scope of an `ion-tabs` outlet:
+
+```tsx
+<ion-route url="/settings-page" component="settings"></ion-route>
+```
+
+will match the following tab:
+
+```tsx
+<ion-tab tab="settings" component="settings-component"></ion-tab>
+```
\ No newline at end of file
diff --git a/core/src/components/textarea/readme.md b/core/src/components/textarea/readme.md
index 41ddc50c0c..391f3ff773 100644
--- a/core/src/components/textarea/readme.md
+++ b/core/src/components/textarea/readme.md
@@ -158,6 +158,59 @@ export const TextAreaExamples: React.FC = () => {
 ```
 
 
+### Stencil
+
+```tsx
+import { Component, h } from '@stencil/core';
+
+@Component({
+  tag: 'textarea-example',
+  styleUrl: 'textarea-example.css'
+})
+export class TextareaExample {
+  render() {
+    return [
+      // Default textarea
+      <ion-textarea></ion-textarea>,
+
+      // Textarea in an item with a placeholder
+      <ion-item>
+        <ion-textarea placeholder="Enter more information here..."></ion-textarea>
+      </ion-item>,
+
+      // Textarea in an item with a floating label
+      <ion-item>
+        <ion-label position="floating">Description</ion-label>
+        <ion-textarea></ion-textarea>
+      </ion-item>,
+
+      // Disabled and readonly textarea in an item with a stacked label
+      <ion-item>
+        <ion-label position="stacked">Summary</ion-label>
+        <ion-textarea
+          disabled
+          readonly
+          value="Ionic enables developers to build performant, high-quality mobile apps.">
+        </ion-textarea>
+      </ion-item>,
+
+      // Textarea that clears the value on edit
+      <ion-item>
+        <ion-label>Comment</ion-label>
+        <ion-textarea clearOnEdit={true}></ion-textarea>
+      </ion-item>,
+
+      // Textarea with custom number of rows and cols
+      <ion-item>
+        <ion-label>Notes</ion-label>
+        <ion-textarea rows={6} cols={20} placeholder="Enter any notes here..."></ion-textarea>
+      </ion-item>
+    ];
+  }
+}
+```
+
+
 ### Vue
 
 ```html
diff --git a/core/src/components/textarea/usage/stencil.md b/core/src/components/textarea/usage/stencil.md
new file mode 100644
index 0000000000..c271f40c5d
--- /dev/null
+++ b/core/src/components/textarea/usage/stencil.md
@@ -0,0 +1,49 @@
+```tsx
+import { Component, h } from '@stencil/core';
+
+@Component({
+  tag: 'textarea-example',
+  styleUrl: 'textarea-example.css'
+})
+export class TextareaExample {
+  render() {
+    return [
+      // Default textarea
+      <ion-textarea></ion-textarea>,
+
+      // Textarea in an item with a placeholder
+      <ion-item>
+        <ion-textarea placeholder="Enter more information here..."></ion-textarea>
+      </ion-item>,
+
+      // Textarea in an item with a floating label
+      <ion-item>
+        <ion-label position="floating">Description</ion-label>
+        <ion-textarea></ion-textarea>
+      </ion-item>,
+
+      // Disabled and readonly textarea in an item with a stacked label
+      <ion-item>
+        <ion-label position="stacked">Summary</ion-label>
+        <ion-textarea
+          disabled
+          readonly
+          value="Ionic enables developers to build performant, high-quality mobile apps.">
+        </ion-textarea>
+      </ion-item>,
+
+      // Textarea that clears the value on edit
+      <ion-item>
+        <ion-label>Comment</ion-label>
+        <ion-textarea clearOnEdit={true}></ion-textarea>
+      </ion-item>,
+
+      // Textarea with custom number of rows and cols
+      <ion-item>
+        <ion-label>Notes</ion-label>
+        <ion-textarea rows={6} cols={20} placeholder="Enter any notes here..."></ion-textarea>
+      </ion-item>
+    ];
+  }
+}
+```
diff --git a/core/src/components/thumbnail/readme.md b/core/src/components/thumbnail/readme.md
index 4b50961c2a..1c89a765cb 100644
--- a/core/src/components/thumbnail/readme.md
+++ b/core/src/components/thumbnail/readme.md
@@ -49,6 +49,34 @@ export const ThumbnailExample: React.FC = () => (
 ```
 
 
+### Stencil
+
+```tsx
+import { Component, h } from '@stencil/core';
+
+@Component({
+  tag: 'thumbnail-example',
+  styleUrl: 'thumbnail-example.css'
+})
+export class ThumbnailExample {
+  render() {
+    return [
+      <ion-thumbnail>
+        <img src="https://gravatar.com/avatar/dba6bae8c566f9d4041fb9cd9ada7741?d=identicon&f=y"/>
+      </ion-thumbnail>,
+
+      <ion-item>
+        <ion-thumbnail slot="start">
+          <img src="https://gravatar.com/avatar/dba6bae8c566f9d4041fb9cd9ada7741?d=identicon&f=y"/>
+        </ion-thumbnail>
+        <ion-label>Item Thumbnail</ion-label>
+      </ion-item>
+    ];
+  }
+}
+```
+
+
 ### Vue
 
 ```html
diff --git a/core/src/components/thumbnail/usage/stencil.md b/core/src/components/thumbnail/usage/stencil.md
new file mode 100644
index 0000000000..6878e1419e
--- /dev/null
+++ b/core/src/components/thumbnail/usage/stencil.md
@@ -0,0 +1,24 @@
+```tsx
+import { Component, h } from '@stencil/core';
+
+@Component({
+  tag: 'thumbnail-example',
+  styleUrl: 'thumbnail-example.css'
+})
+export class ThumbnailExample {
+  render() {
+    return [
+      <ion-thumbnail>
+        <img src="https://gravatar.com/avatar/dba6bae8c566f9d4041fb9cd9ada7741?d=identicon&f=y"/>
+      </ion-thumbnail>,
+
+      <ion-item>
+        <ion-thumbnail slot="start">
+          <img src="https://gravatar.com/avatar/dba6bae8c566f9d4041fb9cd9ada7741?d=identicon&f=y"/>
+        </ion-thumbnail>
+        <ion-label>Item Thumbnail</ion-label>
+      </ion-item>
+    ];
+  }
+}
+```
diff --git a/core/src/components/title/readme.md b/core/src/components/title/readme.md
index 99766c5adc..74c962ebb0 100644
--- a/core/src/components/title/readme.md
+++ b/core/src/components/title/readme.md
@@ -35,23 +35,23 @@ Ionic provides a way to create the collapsible titles that exist on stock iOS ap
 
 ```html
 <ion-header translucent="true">
-  <ion-toolbar>    
-    <ion-title>Settings</ion-title>               
+  <ion-toolbar>
+    <ion-title>Settings</ion-title>
   </ion-toolbar>
 </ion-header>
 
 <ion-content fullscreen="true">
-  <ion-header collapse="condense">              
-    <ion-toolbar>      
+  <ion-header collapse="condense">
+    <ion-toolbar>
       <ion-title size="large">Settings</ion-title>
     </ion-toolbar>
     <ion-toolbar>
       <ion-searchbar></ion-searchbar>
     </ion-toolbar>
   </ion-header>
-  
+
   ...
-  
+
 </ion-content>
 ```
 
@@ -59,17 +59,17 @@ In the example above, notice there are two `ion-header` elements. The first `ion
 
 ```html
 <ion-header translucent="true">
-  <ion-toolbar>   
+  <ion-toolbar>
     <ion-buttons collapse="true" slot="end">
       <ion-button>Click Me</ion-button>
-    </ion-buttons> 
-    <ion-title>Settings</ion-title>               
+    </ion-buttons>
+    <ion-title>Settings</ion-title>
   </ion-toolbar>
 </ion-header>
 
 <ion-content fullscreen="true">
-  <ion-header collapse="condense">              
-    <ion-toolbar>      
+  <ion-header collapse="condense">
+    <ion-toolbar>
       <ion-buttons collapse="true" slot="end">
         <ion-button>Click Me</ion-button>
       </ion-buttons>
@@ -79,13 +79,13 @@ In the example above, notice there are two `ion-header` elements. The first `ion
       <ion-searchbar></ion-searchbar>
     </ion-toolbar>
   </ion-header>
-  
+
   ...
-  
+
 </ion-content>
 ```
 
-In this example, notice that we have added two sets of `ion-buttons` both with `collapse="true"`. When the secondary header collapses, the buttons in the secondary header will hide, and the buttons in the primary header will show. This is useful for ensuring that your header buttons always appear next to an `ion-title` element.
+In this example, notice that we have added two sets of `ion-buttons` both with `collapse` set to `true`. When the secondary header collapses, the buttons in the secondary header will hide, and the buttons in the primary header will show. This is useful for ensuring that your header buttons always appear next to an `ion-title` element.
 
 `ion-buttons` elements that do not have `collapse` set will always be visible, regardless of collapsed state. When using the large title and `ion-buttons` elements inside of `ion-content`, the `ion-buttons` elements should always be placed in the `end` slot.
 
@@ -98,7 +98,7 @@ ion-title.large-title {
 }
 ```
 
-> When using collapsible large titles, it is required that `fullscreen="true"` be set on `ion-content` and `translucent="true"` be set on the main `ion-header`.
+> When using collapsible large titles, it is required that `fullscreen` is set to `true` on `ion-content` and `translucent` is set to `true` on the main `ion-header`.
 
 
 ### React
@@ -115,7 +115,7 @@ export const ToolbarExample: React.FC = () => (
   <IonToolbar>
     <IonTitle>Default Title</IonTitle>
   </IonToolbar>
-  
+
   {/*-- Small title --*/}
   <IonToolbar>
     <IonTitle size="small">Small Title above a Default Title</IonTitle>
@@ -123,7 +123,7 @@ export const ToolbarExample: React.FC = () => (
   <IonToolbar>
     <IonTitle>Default Title</IonTitle>
   </IonToolbar>
-  
+
   {/*-- Large title --*/}
   <IonToolbar>
     <IonTitle size="large">Large Title</IonTitle>
@@ -148,23 +148,23 @@ import {
 export const LargeTitleExample: React.FC = () => (
   <>
     <IonHeader translucent="true">
-      <IonToolbar>    
-        <IonTitle>Settings</IonTitle>               
+      <IonToolbar>
+        <IonTitle>Settings</IonTitle>
       </IonToolbar>
     </IonHeader>
-    
+
     <IonContent fullscreen="true">
-      <IonHeader collapse="condense">              
-        <IonToolbar>      
+      <IonHeader collapse="condense">
+        <IonToolbar>
           <IonTitle size="large">Settings</IonTitle>
         </IonToolbar>
         <IonToolbar>
           <IonSearchbar></IonSearchbar>
         </IonToolbar>
       </IonHeader>
-      
+
       ...
-      
+
     </IonContent>
   </>
 );
@@ -181,23 +181,23 @@ import {
   IonHeader,
   IonSearchbar,
   IonTitle,
-  IonToolbar  
+  IonToolbar
 } from '@ionic/react';
 
 export const LargeTitleExample: React.FC = () => (
   <>
     <IonHeader translucent="true">
-      <IonToolbar>   
+      <IonToolbar>
         <IonButtons collapse="true" slot="end">
           <IonButton>Click Me</IonButton>
-        </IonButtons> 
-        <IonTitle>Settings</IonTitle>               
+        </IonButtons>
+        <IonTitle>Settings</IonTitle>
       </IonToolbar>
     </IonHeader>
-    
+
     <IonContent fullscreen="true">
-      <IonHeader collapse="condense">              
-        <IonToolbar>      
+      <IonHeader collapse="condense">
+        <IonToolbar>
           <IonButtons collapse="true" slot="end">
             <IonButton>Click Me</IonButton>
           </IonButtons>
@@ -207,15 +207,15 @@ export const LargeTitleExample: React.FC = () => (
           <IonSearchbar></IonSearchbar>
         </IonToolbar>
       </IonHeader>
-      
+
       ...
-      
+
     </IonContent>
   </>
 );
 ```
 
-In this example, notice that we have added two sets of `IonButtons` both with `collapse="true"`. When the secondary header collapses, the buttons in the secondary header will hide, and the buttons in the primary header will show. This is useful for ensuring that your header buttons always appear next to an `IonTitle` element.
+In this example, notice that we have added two sets of `IonButtons` both with `collapse` set to `true`. When the secondary header collapses, the buttons in the secondary header will hide, and the buttons in the primary header will show. This is useful for ensuring that your header buttons always appear next to an `IonTitle` element.
 
 `IonButtons` elements that do not have `collapse` set will always be visible, regardless of collapsed state. When using the large title and `ion-buttons` elements inside of `ion-content`, the `ion-buttons` elements should always be placed in the `end` slot.
 
@@ -228,7 +228,138 @@ ion-title.large-title {
 }
 ```
 
-> When using collapsible large titles, it is required that `fullscreen="true"` be set on `IonContent` and `translucent="true"` be set on the main `IonHeader`.
+> When using collapsible large titles, it is required that `fullscreen` is set to `true` on `IonContent` and `translucent="true"` be set on the main `IonHeader`.
+
+
+### Stencil
+
+```tsx
+import { Component, h } from '@stencil/core';
+
+@Component({
+  tag: 'title-example',
+  styleUrl: 'title-example.css'
+})
+export class TitleExample {
+  render() {
+    return [
+      // Default title
+      <ion-toolbar>
+        <ion-title>Default Title</ion-title>
+      </ion-toolbar>,
+
+      // Small title above a default title
+      <ion-toolbar>
+        <ion-title size="small">Small Title above a Default Title</ion-title>
+      </ion-toolbar>,
+      <ion-toolbar>
+        <ion-title>Default Title</ion-title>
+      </ion-toolbar>,
+
+      // Large title
+      <ion-toolbar>
+        <ion-title size="large">Large Title</ion-title>
+      </ion-toolbar>
+    ];
+  }
+}
+```
+
+
+### Collapsible Large Titles
+
+Ionic provides a way to create the collapsible titles that exist on stock iOS apps. Getting this setup requires configuring your `ion-title`, `ion-header`, and (optionally) `ion-buttons` elements.
+
+```tsx
+import { Component, h } from '@stencil/core';
+
+@Component({
+  tag: 'title-example',
+  styleUrl: 'title-example.css'
+})
+export class TitleExample {
+  render() {
+    return [
+      <ion-header translucent={true}>
+        <ion-toolbar>
+          <ion-title>Settings</ion-title>
+        </ion-toolbar>
+      </ion-header>,
+
+      <ion-content fullscreen={true}>
+        <ion-header collapse="condense">
+          <ion-toolbar>
+            <ion-title size="large">Settings</ion-title>
+          </ion-toolbar>
+          <ion-toolbar>
+            <ion-searchbar></ion-searchbar>
+          </ion-toolbar>
+        </ion-header>
+
+        ...
+
+      </ion-content>
+    ];
+  }
+}
+```
+
+In the example above, notice there are two `ion-header` elements. The first `ion-header` represents the "collapsed" state of your collapsible header, and the second `ion-header` represents the "expanded" state of your collapsible header. Notice that the second `ion-header` must have `collapse="condense"` and must exist within `ion-content`. Additionally, in order to get the large title styling, `ion-title` must have `size="large"`.
+
+```tsx
+import { Component, h } from '@stencil/core';
+
+@Component({
+  tag: 'title-example',
+  styleUrl: 'title-example.css'
+})
+export class TitleExample {
+  render() {
+    return [
+      <ion-header translucent={true}>
+        <ion-toolbar>
+          <ion-buttons collapse={true} slot="end">
+            <ion-button>Click Me</ion-button>
+          </ion-buttons>
+          <ion-title>Settings</ion-title>
+        </ion-toolbar>
+      </ion-header>,
+
+      <ion-content fullscreen={true}>
+        <ion-header collapse="condense">
+          <ion-toolbar>
+            <ion-buttons collapse={true} slot="end">
+              <ion-button>Click Me</ion-button>
+            </ion-buttons>
+            <ion-title size="large">Settings</ion-title>
+          </ion-toolbar>
+          <ion-toolbar>
+            <ion-searchbar></ion-searchbar>
+          </ion-toolbar>
+        </ion-header>
+
+        ...
+
+      </ion-content>
+    ];
+  }
+}
+```
+
+In this example, notice that we have added two sets of `ion-buttons` both with `collapse` set to `true`. When the secondary header collapses, the buttons in the secondary header will hide, and the buttons in the primary header will show. This is useful for ensuring that your header buttons always appear next to an `ion-title` element.
+
+`ion-buttons` elements that do not have `collapse` set will always be visible, regardless of collapsed state. When using the large title and `ion-buttons` elements inside of `ion-content`, the `ion-buttons` elements should always be placed in the `end` slot.
+
+When styling the large title, you should target the large title globally as opposed to within the context of a particular page or tab, otherwise its styles will not be applied during the navigation animation.
+
+```css
+ion-title.large-title {
+  color: purple;
+  font-size: 30px;
+}
+```
+
+> When using collapsible large titles, it is required that `fullscreen` is set to `true` on `ion-content` and `translucent` is set to `true` on the main `ion-header`.
 
 
 ### Vue
@@ -239,7 +370,7 @@ ion-title.large-title {
   <ion-toolbar>
     <ion-title>Default Title</ion-title>
   </ion-toolbar>
-  
+
   <!-- Small title -->
   <ion-toolbar>
     <ion-title size="small">Small Title above a Default Title</ion-title>
@@ -247,7 +378,7 @@ ion-title.large-title {
   <ion-toolbar>
     <ion-title>Default Title</ion-title>
   </ion-toolbar>
-  
+
   <!-- Large title -->
   <ion-toolbar>
     <ion-title size="large">Large Title</ion-title>
@@ -262,23 +393,23 @@ Ionic provides a way to create the collapsible titles that exist on stock iOS ap
 ```html
 <template>
   <ion-header translucent="true">
-    <ion-toolbar>    
-      <ion-title>Settings</ion-title>               
+    <ion-toolbar>
+      <ion-title>Settings</ion-title>
     </ion-toolbar>
   </ion-header>
-  
+
   <ion-content fullscreen="true">
-    <ion-header collapse="condense">              
-      <ion-toolbar>      
+    <ion-header collapse="condense">
+      <ion-toolbar>
         <ion-title size="large">Settings</ion-title>
       </ion-toolbar>
       <ion-toolbar>
         <ion-searchbar></ion-searchbar>
       </ion-toolbar>
     </ion-header>
-    
+
     ...
-    
+
   </ion-content>
 </template>
 ```
@@ -288,17 +419,17 @@ In the example above, notice there are two `ion-header` elements. The first `ion
 ```html
 <template>
   <ion-header translucent="true">
-    <ion-toolbar>   
+    <ion-toolbar>
       <ion-buttons collapse="true" slot="end">
         <ion-button>Click Me</ion-button>
-      </ion-buttons> 
-      <ion-title>Settings</ion-title>               
+      </ion-buttons>
+      <ion-title>Settings</ion-title>
     </ion-toolbar>
   </ion-header>
-  
+
   <ion-content fullscreen="true">
-    <ion-header collapse="condense">              
-      <ion-toolbar>      
+    <ion-header collapse="condense">
+      <ion-toolbar>
         <ion-buttons collapse="true" slot="end">
           <ion-button>Click Me</ion-button>
         </ion-buttons>
@@ -308,14 +439,14 @@ In the example above, notice there are two `ion-header` elements. The first `ion
         <ion-searchbar></ion-searchbar>
       </ion-toolbar>
     </ion-header>
-    
+
     ...
-    
+
   </ion-content>
 </template>
 ```
 
-In this example, notice that we have added two sets of `ion-buttons` both with `collapse="true"`. When the secondary header collapses, the buttons in the secondary header will hide, and the buttons in the primary header will show. This is useful for ensuring that your header buttons always appear next to an `ion-title` element.
+In this example, notice that we have added two sets of `ion-buttons` both with `collapse` set to `true`. When the secondary header collapses, the buttons in the secondary header will hide, and the buttons in the primary header will show. This is useful for ensuring that your header buttons always appear next to an `ion-title` element.
 
 `ion-buttons` elements that do not have `collapse` set will always be visible, regardless of collapsed state. When using the large title and `ion-buttons` elements inside of `ion-content`, the `ion-buttons` elements should always be placed in the `end` slot.
 
@@ -328,7 +459,7 @@ ion-title.large-title {
 }
 ```
 
-> When using collapsible large titles, it is required that `fullscreen="true"` be set on `ion-content` and `translucent="true"` be set on the main `ion-header`.
+> When using collapsible large titles, it is required that `fullscreen` is set to `true` on `ion-content` and `translucent` is set to `true` on the main `ion-header`.
 
 
 
diff --git a/core/src/components/title/usage/angular.md b/core/src/components/title/usage/angular.md
index fa530033c2..3dfd2edf44 100644
--- a/core/src/components/title/usage/angular.md
+++ b/core/src/components/title/usage/angular.md
@@ -24,23 +24,23 @@ Ionic provides a way to create the collapsible titles that exist on stock iOS ap
 
 ```html
 <ion-header translucent="true">
-  <ion-toolbar>    
-    <ion-title>Settings</ion-title>               
+  <ion-toolbar>
+    <ion-title>Settings</ion-title>
   </ion-toolbar>
 </ion-header>
 
 <ion-content fullscreen="true">
-  <ion-header collapse="condense">              
-    <ion-toolbar>      
+  <ion-header collapse="condense">
+    <ion-toolbar>
       <ion-title size="large">Settings</ion-title>
     </ion-toolbar>
     <ion-toolbar>
       <ion-searchbar></ion-searchbar>
     </ion-toolbar>
   </ion-header>
-  
+
   ...
-  
+
 </ion-content>
 ```
 
@@ -48,17 +48,17 @@ In the example above, notice there are two `ion-header` elements. The first `ion
 
 ```html
 <ion-header translucent="true">
-  <ion-toolbar>   
+  <ion-toolbar>
     <ion-buttons collapse="true" slot="end">
       <ion-button>Click Me</ion-button>
-    </ion-buttons> 
-    <ion-title>Settings</ion-title>               
+    </ion-buttons>
+    <ion-title>Settings</ion-title>
   </ion-toolbar>
 </ion-header>
 
 <ion-content fullscreen="true">
-  <ion-header collapse="condense">              
-    <ion-toolbar>      
+  <ion-header collapse="condense">
+    <ion-toolbar>
       <ion-buttons collapse="true" slot="end">
         <ion-button>Click Me</ion-button>
       </ion-buttons>
@@ -68,13 +68,13 @@ In the example above, notice there are two `ion-header` elements. The first `ion
       <ion-searchbar></ion-searchbar>
     </ion-toolbar>
   </ion-header>
-  
+
   ...
-  
+
 </ion-content>
 ```
 
-In this example, notice that we have added two sets of `ion-buttons` both with `collapse="true"`. When the secondary header collapses, the buttons in the secondary header will hide, and the buttons in the primary header will show. This is useful for ensuring that your header buttons always appear next to an `ion-title` element.
+In this example, notice that we have added two sets of `ion-buttons` both with `collapse` set to `true`. When the secondary header collapses, the buttons in the secondary header will hide, and the buttons in the primary header will show. This is useful for ensuring that your header buttons always appear next to an `ion-title` element.
 
 `ion-buttons` elements that do not have `collapse` set will always be visible, regardless of collapsed state. When using the large title and `ion-buttons` elements inside of `ion-content`, the `ion-buttons` elements should always be placed in the `end` slot.
 
@@ -87,4 +87,4 @@ ion-title.large-title {
 }
 ```
 
-> When using collapsible large titles, it is required that `fullscreen="true"` be set on `ion-content` and `translucent="true"` be set on the main `ion-header`.
\ No newline at end of file
+> When using collapsible large titles, it is required that `fullscreen` is set to `true` on `ion-content` and `translucent` is set to `true` on the main `ion-header`.
\ No newline at end of file
diff --git a/core/src/components/title/usage/javascript.md b/core/src/components/title/usage/javascript.md
index fa530033c2..3dfd2edf44 100644
--- a/core/src/components/title/usage/javascript.md
+++ b/core/src/components/title/usage/javascript.md
@@ -24,23 +24,23 @@ Ionic provides a way to create the collapsible titles that exist on stock iOS ap
 
 ```html
 <ion-header translucent="true">
-  <ion-toolbar>    
-    <ion-title>Settings</ion-title>               
+  <ion-toolbar>
+    <ion-title>Settings</ion-title>
   </ion-toolbar>
 </ion-header>
 
 <ion-content fullscreen="true">
-  <ion-header collapse="condense">              
-    <ion-toolbar>      
+  <ion-header collapse="condense">
+    <ion-toolbar>
       <ion-title size="large">Settings</ion-title>
     </ion-toolbar>
     <ion-toolbar>
       <ion-searchbar></ion-searchbar>
     </ion-toolbar>
   </ion-header>
-  
+
   ...
-  
+
 </ion-content>
 ```
 
@@ -48,17 +48,17 @@ In the example above, notice there are two `ion-header` elements. The first `ion
 
 ```html
 <ion-header translucent="true">
-  <ion-toolbar>   
+  <ion-toolbar>
     <ion-buttons collapse="true" slot="end">
       <ion-button>Click Me</ion-button>
-    </ion-buttons> 
-    <ion-title>Settings</ion-title>               
+    </ion-buttons>
+    <ion-title>Settings</ion-title>
   </ion-toolbar>
 </ion-header>
 
 <ion-content fullscreen="true">
-  <ion-header collapse="condense">              
-    <ion-toolbar>      
+  <ion-header collapse="condense">
+    <ion-toolbar>
       <ion-buttons collapse="true" slot="end">
         <ion-button>Click Me</ion-button>
       </ion-buttons>
@@ -68,13 +68,13 @@ In the example above, notice there are two `ion-header` elements. The first `ion
       <ion-searchbar></ion-searchbar>
     </ion-toolbar>
   </ion-header>
-  
+
   ...
-  
+
 </ion-content>
 ```
 
-In this example, notice that we have added two sets of `ion-buttons` both with `collapse="true"`. When the secondary header collapses, the buttons in the secondary header will hide, and the buttons in the primary header will show. This is useful for ensuring that your header buttons always appear next to an `ion-title` element.
+In this example, notice that we have added two sets of `ion-buttons` both with `collapse` set to `true`. When the secondary header collapses, the buttons in the secondary header will hide, and the buttons in the primary header will show. This is useful for ensuring that your header buttons always appear next to an `ion-title` element.
 
 `ion-buttons` elements that do not have `collapse` set will always be visible, regardless of collapsed state. When using the large title and `ion-buttons` elements inside of `ion-content`, the `ion-buttons` elements should always be placed in the `end` slot.
 
@@ -87,4 +87,4 @@ ion-title.large-title {
 }
 ```
 
-> When using collapsible large titles, it is required that `fullscreen="true"` be set on `ion-content` and `translucent="true"` be set on the main `ion-header`.
\ No newline at end of file
+> When using collapsible large titles, it is required that `fullscreen` is set to `true` on `ion-content` and `translucent` is set to `true` on the main `ion-header`.
\ No newline at end of file
diff --git a/core/src/components/title/usage/react.md b/core/src/components/title/usage/react.md
index f8ad4f33f5..046c8011f8 100644
--- a/core/src/components/title/usage/react.md
+++ b/core/src/components/title/usage/react.md
@@ -10,7 +10,7 @@ export const ToolbarExample: React.FC = () => (
   <IonToolbar>
     <IonTitle>Default Title</IonTitle>
   </IonToolbar>
-  
+
   {/*-- Small title --*/}
   <IonToolbar>
     <IonTitle size="small">Small Title above a Default Title</IonTitle>
@@ -18,7 +18,7 @@ export const ToolbarExample: React.FC = () => (
   <IonToolbar>
     <IonTitle>Default Title</IonTitle>
   </IonToolbar>
-  
+
   {/*-- Large title --*/}
   <IonToolbar>
     <IonTitle size="large">Large Title</IonTitle>
@@ -43,23 +43,23 @@ import {
 export const LargeTitleExample: React.FC = () => (
   <>
     <IonHeader translucent="true">
-      <IonToolbar>    
-        <IonTitle>Settings</IonTitle>               
+      <IonToolbar>
+        <IonTitle>Settings</IonTitle>
       </IonToolbar>
     </IonHeader>
-    
+
     <IonContent fullscreen="true">
-      <IonHeader collapse="condense">              
-        <IonToolbar>      
+      <IonHeader collapse="condense">
+        <IonToolbar>
           <IonTitle size="large">Settings</IonTitle>
         </IonToolbar>
         <IonToolbar>
           <IonSearchbar></IonSearchbar>
         </IonToolbar>
       </IonHeader>
-      
+
       ...
-      
+
     </IonContent>
   </>
 );
@@ -76,23 +76,23 @@ import {
   IonHeader,
   IonSearchbar,
   IonTitle,
-  IonToolbar  
+  IonToolbar
 } from '@ionic/react';
 
 export const LargeTitleExample: React.FC = () => (
   <>
     <IonHeader translucent="true">
-      <IonToolbar>   
+      <IonToolbar>
         <IonButtons collapse="true" slot="end">
           <IonButton>Click Me</IonButton>
-        </IonButtons> 
-        <IonTitle>Settings</IonTitle>               
+        </IonButtons>
+        <IonTitle>Settings</IonTitle>
       </IonToolbar>
     </IonHeader>
-    
+
     <IonContent fullscreen="true">
-      <IonHeader collapse="condense">              
-        <IonToolbar>      
+      <IonHeader collapse="condense">
+        <IonToolbar>
           <IonButtons collapse="true" slot="end">
             <IonButton>Click Me</IonButton>
           </IonButtons>
@@ -102,15 +102,15 @@ export const LargeTitleExample: React.FC = () => (
           <IonSearchbar></IonSearchbar>
         </IonToolbar>
       </IonHeader>
-      
+
       ...
-      
+
     </IonContent>
   </>
 );
 ```
 
-In this example, notice that we have added two sets of `IonButtons` both with `collapse="true"`. When the secondary header collapses, the buttons in the secondary header will hide, and the buttons in the primary header will show. This is useful for ensuring that your header buttons always appear next to an `IonTitle` element.
+In this example, notice that we have added two sets of `IonButtons` both with `collapse` set to `true`. When the secondary header collapses, the buttons in the secondary header will hide, and the buttons in the primary header will show. This is useful for ensuring that your header buttons always appear next to an `IonTitle` element.
 
 `IonButtons` elements that do not have `collapse` set will always be visible, regardless of collapsed state. When using the large title and `ion-buttons` elements inside of `ion-content`, the `ion-buttons` elements should always be placed in the `end` slot.
 
@@ -123,4 +123,4 @@ ion-title.large-title {
 }
 ```
 
-> When using collapsible large titles, it is required that `fullscreen="true"` be set on `IonContent` and `translucent="true"` be set on the main `IonHeader`.
\ No newline at end of file
+> When using collapsible large titles, it is required that `fullscreen` is set to `true` on `IonContent` and `translucent="true"` be set on the main `IonHeader`.
\ No newline at end of file
diff --git a/core/src/components/title/usage/stencil.md b/core/src/components/title/usage/stencil.md
new file mode 100644
index 0000000000..6357de49a3
--- /dev/null
+++ b/core/src/components/title/usage/stencil.md
@@ -0,0 +1,127 @@
+```tsx
+import { Component, h } from '@stencil/core';
+
+@Component({
+  tag: 'title-example',
+  styleUrl: 'title-example.css'
+})
+export class TitleExample {
+  render() {
+    return [
+      // Default title
+      <ion-toolbar>
+        <ion-title>Default Title</ion-title>
+      </ion-toolbar>,
+
+      // Small title above a default title
+      <ion-toolbar>
+        <ion-title size="small">Small Title above a Default Title</ion-title>
+      </ion-toolbar>,
+      <ion-toolbar>
+        <ion-title>Default Title</ion-title>
+      </ion-toolbar>,
+
+      // Large title
+      <ion-toolbar>
+        <ion-title size="large">Large Title</ion-title>
+      </ion-toolbar>
+    ];
+  }
+}
+```
+
+
+### Collapsible Large Titles
+
+Ionic provides a way to create the collapsible titles that exist on stock iOS apps. Getting this setup requires configuring your `ion-title`, `ion-header`, and (optionally) `ion-buttons` elements.
+
+```tsx
+import { Component, h } from '@stencil/core';
+
+@Component({
+  tag: 'title-example',
+  styleUrl: 'title-example.css'
+})
+export class TitleExample {
+  render() {
+    return [
+      <ion-header translucent={true}>
+        <ion-toolbar>
+          <ion-title>Settings</ion-title>
+        </ion-toolbar>
+      </ion-header>,
+
+      <ion-content fullscreen={true}>
+        <ion-header collapse="condense">
+          <ion-toolbar>
+            <ion-title size="large">Settings</ion-title>
+          </ion-toolbar>
+          <ion-toolbar>
+            <ion-searchbar></ion-searchbar>
+          </ion-toolbar>
+        </ion-header>
+
+        ...
+
+      </ion-content>
+    ];
+  }
+}
+```
+
+In the example above, notice there are two `ion-header` elements. The first `ion-header` represents the "collapsed" state of your collapsible header, and the second `ion-header` represents the "expanded" state of your collapsible header. Notice that the second `ion-header` must have `collapse="condense"` and must exist within `ion-content`. Additionally, in order to get the large title styling, `ion-title` must have `size="large"`.
+
+```tsx
+import { Component, h } from '@stencil/core';
+
+@Component({
+  tag: 'title-example',
+  styleUrl: 'title-example.css'
+})
+export class TitleExample {
+  render() {
+    return [
+      <ion-header translucent={true}>
+        <ion-toolbar>
+          <ion-buttons collapse={true} slot="end">
+            <ion-button>Click Me</ion-button>
+          </ion-buttons>
+          <ion-title>Settings</ion-title>
+        </ion-toolbar>
+      </ion-header>,
+
+      <ion-content fullscreen={true}>
+        <ion-header collapse="condense">
+          <ion-toolbar>
+            <ion-buttons collapse={true} slot="end">
+              <ion-button>Click Me</ion-button>
+            </ion-buttons>
+            <ion-title size="large">Settings</ion-title>
+          </ion-toolbar>
+          <ion-toolbar>
+            <ion-searchbar></ion-searchbar>
+          </ion-toolbar>
+        </ion-header>
+
+        ...
+
+      </ion-content>
+    ];
+  }
+}
+```
+
+In this example, notice that we have added two sets of `ion-buttons` both with `collapse` set to `true`. When the secondary header collapses, the buttons in the secondary header will hide, and the buttons in the primary header will show. This is useful for ensuring that your header buttons always appear next to an `ion-title` element.
+
+`ion-buttons` elements that do not have `collapse` set will always be visible, regardless of collapsed state. When using the large title and `ion-buttons` elements inside of `ion-content`, the `ion-buttons` elements should always be placed in the `end` slot.
+
+When styling the large title, you should target the large title globally as opposed to within the context of a particular page or tab, otherwise its styles will not be applied during the navigation animation.
+
+```css
+ion-title.large-title {
+  color: purple;
+  font-size: 30px;
+}
+```
+
+> When using collapsible large titles, it is required that `fullscreen` is set to `true` on `ion-content` and `translucent` is set to `true` on the main `ion-header`.
\ No newline at end of file
diff --git a/core/src/components/title/usage/vue.md b/core/src/components/title/usage/vue.md
index a3766bffa3..d52d1ad5ee 100644
--- a/core/src/components/title/usage/vue.md
+++ b/core/src/components/title/usage/vue.md
@@ -4,7 +4,7 @@
   <ion-toolbar>
     <ion-title>Default Title</ion-title>
   </ion-toolbar>
-  
+
   <!-- Small title -->
   <ion-toolbar>
     <ion-title size="small">Small Title above a Default Title</ion-title>
@@ -12,7 +12,7 @@
   <ion-toolbar>
     <ion-title>Default Title</ion-title>
   </ion-toolbar>
-  
+
   <!-- Large title -->
   <ion-toolbar>
     <ion-title size="large">Large Title</ion-title>
@@ -27,23 +27,23 @@ Ionic provides a way to create the collapsible titles that exist on stock iOS ap
 ```html
 <template>
   <ion-header translucent="true">
-    <ion-toolbar>    
-      <ion-title>Settings</ion-title>               
+    <ion-toolbar>
+      <ion-title>Settings</ion-title>
     </ion-toolbar>
   </ion-header>
-  
+
   <ion-content fullscreen="true">
-    <ion-header collapse="condense">              
-      <ion-toolbar>      
+    <ion-header collapse="condense">
+      <ion-toolbar>
         <ion-title size="large">Settings</ion-title>
       </ion-toolbar>
       <ion-toolbar>
         <ion-searchbar></ion-searchbar>
       </ion-toolbar>
     </ion-header>
-    
+
     ...
-    
+
   </ion-content>
 </template>
 ```
@@ -53,17 +53,17 @@ In the example above, notice there are two `ion-header` elements. The first `ion
 ```html
 <template>
   <ion-header translucent="true">
-    <ion-toolbar>   
+    <ion-toolbar>
       <ion-buttons collapse="true" slot="end">
         <ion-button>Click Me</ion-button>
-      </ion-buttons> 
-      <ion-title>Settings</ion-title>               
+      </ion-buttons>
+      <ion-title>Settings</ion-title>
     </ion-toolbar>
   </ion-header>
-  
+
   <ion-content fullscreen="true">
-    <ion-header collapse="condense">              
-      <ion-toolbar>      
+    <ion-header collapse="condense">
+      <ion-toolbar>
         <ion-buttons collapse="true" slot="end">
           <ion-button>Click Me</ion-button>
         </ion-buttons>
@@ -73,14 +73,14 @@ In the example above, notice there are two `ion-header` elements. The first `ion
         <ion-searchbar></ion-searchbar>
       </ion-toolbar>
     </ion-header>
-    
+
     ...
-    
+
   </ion-content>
 </template>
 ```
 
-In this example, notice that we have added two sets of `ion-buttons` both with `collapse="true"`. When the secondary header collapses, the buttons in the secondary header will hide, and the buttons in the primary header will show. This is useful for ensuring that your header buttons always appear next to an `ion-title` element.
+In this example, notice that we have added two sets of `ion-buttons` both with `collapse` set to `true`. When the secondary header collapses, the buttons in the secondary header will hide, and the buttons in the primary header will show. This is useful for ensuring that your header buttons always appear next to an `ion-title` element.
 
 `ion-buttons` elements that do not have `collapse` set will always be visible, regardless of collapsed state. When using the large title and `ion-buttons` elements inside of `ion-content`, the `ion-buttons` elements should always be placed in the `end` slot.
 
@@ -93,4 +93,4 @@ ion-title.large-title {
 }
 ```
 
-> When using collapsible large titles, it is required that `fullscreen="true"` be set on `ion-content` and `translucent="true"` be set on the main `ion-header`.
\ No newline at end of file
+> When using collapsible large titles, it is required that `fullscreen` is set to `true` on `ion-content` and `translucent` is set to `true` on the main `ion-header`.
\ No newline at end of file
diff --git a/core/src/components/toast/readme.md b/core/src/components/toast/readme.md
index 8dff3cb405..1c924dc97a 100644
--- a/core/src/components/toast/readme.md
+++ b/core/src/components/toast/readme.md
@@ -158,6 +158,63 @@ export const ToastExample: React.FC = () => {
 ```
 
 
+### Stencil
+
+```tsx
+import { Component, h } from '@stencil/core';
+
+import { toastController } from '@ionic/core';
+
+@Component({
+  tag: 'toast-example',
+  styleUrl: 'toast-example.css'
+})
+export class ToastExample {
+  async presentToast() {
+    const toast = await toastController.create({
+      message: 'Your settings have been saved.',
+      duration: 2000
+    });
+    toast.present();
+  }
+
+  async presentToastWithOptions() {
+    const toast = await toastController.create({
+      header: 'Toast header',
+      message: 'Click to Close',
+      position: 'top',
+      buttons: [
+        {
+          side: 'start',
+          icon: 'star',
+          text: 'Favorite',
+          handler: () => {
+            console.log('Favorite clicked');
+          }
+        }, {
+          text: 'Done',
+          role: 'cancel',
+          handler: () => {
+            console.log('Cancel clicked');
+          }
+        }
+      ]
+    });
+    toast.present();
+  }
+
+  render() {
+    return [
+      <ion-content>
+        <ion-button onClick={() => this.presentToast()}>Present Toast</ion-button>
+        <ion-button onClick={() => this.presentToastWithOptions()}>Present Toast: Options</ion-button>
+      </ion-content>
+    ];
+  }
+}
+```
+
+
 
 ## Properties
 
diff --git a/core/src/components/toast/usage/stencil.md b/core/src/components/toast/usage/stencil.md
new file mode 100644
index 0000000000..a189df9cf3
--- /dev/null
+++ b/core/src/components/toast/usage/stencil.md
@@ -0,0 +1,53 @@
+```tsx
+import { Component, h } from '@stencil/core';
+
+import { toastController } from '@ionic/core';
+
+@Component({
+  tag: 'toast-example',
+  styleUrl: 'toast-example.css'
+})
+export class ToastExample {
+  async presentToast() {
+    const toast = await toastController.create({
+      message: 'Your settings have been saved.',
+      duration: 2000
+    });
+    toast.present();
+  }
+
+  async presentToastWithOptions() {
+    const toast = await toastController.create({
+      header: 'Toast header',
+      message: 'Click to Close',
+      position: 'top',
+      buttons: [
+        {
+          side: 'start',
+          icon: 'star',
+          text: 'Favorite',
+          handler: () => {
+            console.log('Favorite clicked');
+          }
+        }, {
+          text: 'Done',
+          role: 'cancel',
+          handler: () => {
+            console.log('Cancel clicked');
+          }
+        }
+      ]
+    });
+    toast.present();
+  }
+
+  render() {
+    return [
+      <ion-content>
+        <ion-button onClick={() => this.presentToast()}>Present Toast</ion-button>
+        <ion-button onClick={() => this.presentToastWithOptions()}>Present Toast: Options</ion-button>
+      </ion-content>
+    ];
+  }
+}
+```
\ No newline at end of file
diff --git a/core/src/components/toggle/readme.md b/core/src/components/toggle/readme.md
index e4d164aeb1..e62b91797e 100644
--- a/core/src/components/toggle/readme.md
+++ b/core/src/components/toggle/readme.md
@@ -307,6 +307,67 @@ export const ToggleExamples: React.FC = () => {
 ```
 
 
+### Stencil
+
+```tsx
+import { Component, State, h } from '@stencil/core';
+
+@Component({
+  tag: 'toggle-example',
+  styleUrl: 'toggle-example.css'
+})
+export class ToggleExample {
+  @State() pepperoni: boolean = false;
+  @State() sausage: boolean = true;
+  @State() mushrooms: boolean = false;
+
+  render() {
+    return [
+      // Default Toggle
+      <ion-toggle></ion-toggle>,
+
+      // Disabled Toggle
+      <ion-toggle disabled></ion-toggle>,
+
+      // Checked Toggle
+      <ion-toggle checked></ion-toggle>,
+
+      // Toggle Colors
+      <ion-toggle color="primary"></ion-toggle>,
+      <ion-toggle color="secondary"></ion-toggle>,
+      <ion-toggle color="danger"></ion-toggle>,
+      <ion-toggle color="light"></ion-toggle>,
+      <ion-toggle color="dark"></ion-toggle>,
+
+      // Toggles in a List
+      <ion-list>
+        <ion-item>
+          <ion-label>Pepperoni</ion-label>
+          <ion-toggle checked={this.pepperoni} onIonChange={(ev) => this.pepperoni = ev.detail.checked}></ion-toggle>
+        </ion-item>
+
+        <ion-item>
+          <ion-label>Sausage</ion-label>
+          <ion-toggle checked={this.sausage} onIonChange={(ev) => this.sausage = ev.detail.checked} disabled={true}></ion-toggle>
+        </ion-item>
+
+        <ion-item>
+          <ion-label>Mushrooms</ion-label>
+          <ion-toggle checked={this.mushrooms} onIonChange={(ev) => this.mushrooms = ev.detail.checked}></ion-toggle>
+        </ion-item>
+      </ion-list>,
+
+      <div>
+        Pepperoni: {this.pepperoni ? "true" : "false"}<br/>
+        Sausage: {this.sausage ? "true" : "false"}<br/>
+        Mushrooms: {this.mushrooms ? "true" : "false"}
+      </div>
+    ];
+  }
+}
+```
+
+
 ### Vue
 
 ```html
diff --git a/core/src/components/toggle/usage/stencil.md b/core/src/components/toggle/usage/stencil.md
new file mode 100644
index 0000000000..747a57aa6b
--- /dev/null
+++ b/core/src/components/toggle/usage/stencil.md
@@ -0,0 +1,57 @@
+```tsx
+import { Component, State, h } from '@stencil/core';
+
+@Component({
+  tag: 'toggle-example',
+  styleUrl: 'toggle-example.css'
+})
+export class ToggleExample {
+  @State() pepperoni: boolean = false;
+  @State() sausage: boolean = true;
+  @State() mushrooms: boolean = false;
+
+  render() {
+    return [
+      // Default Toggle
+      <ion-toggle></ion-toggle>,
+
+      // Disabled Toggle
+      <ion-toggle disabled></ion-toggle>,
+
+      // Checked Toggle
+      <ion-toggle checked></ion-toggle>,
+
+      // Toggle Colors
+      <ion-toggle color="primary"></ion-toggle>,
+      <ion-toggle color="secondary"></ion-toggle>,
+      <ion-toggle color="danger"></ion-toggle>,
+      <ion-toggle color="light"></ion-toggle>,
+      <ion-toggle color="dark"></ion-toggle>,
+
+      // Toggles in a List
+      <ion-list>
+        <ion-item>
+          <ion-label>Pepperoni</ion-label>
+          <ion-toggle checked={this.pepperoni} onIonChange={(ev) => this.pepperoni = ev.detail.checked}></ion-toggle>
+        </ion-item>
+
+        <ion-item>
+          <ion-label>Sausage</ion-label>
+          <ion-toggle checked={this.sausage} onIonChange={(ev) => this.sausage = ev.detail.checked} disabled={true}></ion-toggle>
+        </ion-item>
+
+        <ion-item>
+          <ion-label>Mushrooms</ion-label>
+          <ion-toggle checked={this.mushrooms} onIonChange={(ev) => this.mushrooms = ev.detail.checked}></ion-toggle>
+        </ion-item>
+      </ion-list>,
+
+      <div>
+        Pepperoni: {this.pepperoni ? "true" : "false"}<br/>
+        Sausage: {this.sausage ? "true" : "false"}<br/>
+        Mushrooms: {this.mushrooms ? "true" : "false"}
+      </div>
+    ];
+  }
+}
+```
diff --git a/core/src/components/toolbar/readme.md b/core/src/components/toolbar/readme.md
index 51f89d1a47..7410957852 100644
--- a/core/src/components/toolbar/readme.md
+++ b/core/src/components/toolbar/readme.md
@@ -146,8 +146,8 @@ In `md` mode, the `<ion-header>` will receive a box-shadow on the bottom, and th
 </ion-toolbar>
 
 <ion-toolbar>
-  <ion-segment>
-    <ion-segment-button value="all" checked>
+  <ion-segment value="all">
+    <ion-segment-button value="all">
       All
     </ion-segment-button>
     <ion-segment-button value="favorites">
@@ -310,8 +310,8 @@ In `md` mode, the `<ion-header>` will receive a box-shadow on the bottom, and th
 </ion-toolbar>
 
 <ion-toolbar>
-  <ion-segment>
-    <ion-segment-button value="all" checked>
+  <ion-segment value="all">
+    <ion-segment-button value="all">
       All
     </ion-segment-button>
     <ion-segment-button value="favorites">
@@ -360,18 +360,8 @@ In `md` mode, the `<ion-header>` will receive a box-shadow on the bottom, and th
 
 ```tsx
 import React from 'react';
-import {
-  IonToolbar,
-  IonTitle,
-  IonButtons,
-  IonBackButton,
-  IonButton,
-  IonIcon,
-  IonMenuButton,
-  IonSearchbar,
-  IonSegment,
-  IonSegmentButton,
-} from '@ionic/react';
+import { IonToolbar, IonTitle, IonButtons, IonBackButton, IonButton, IonIcon, IonMenuButton, IonSearchbar, IonSegment, IonSegmentButton } from '@ionic/react';
+import { personCircle, search, helpCircle, star, create, ellipsisHorizontal, ellipsisVertical } from 'ionicons/icons';
 
 export const ToolbarExample: React.FC = () => (
   <IonToolbar>
@@ -395,15 +385,15 @@ export const ToolbarExample: React.FC = () => (
   <IonToolbar>
     <IonButtons slot="secondary">
       <IonButton>
-        <IonIcon slot="icon-only" name="person-circle" />
+        <IonIcon slot="icon-only" icon={personCircle} />
       </IonButton>
       <IonButton>
-        <IonIcon slot="icon-only" name="search" />
+        <IonIcon slot="icon-only" icon={search} />
       </IonButton>
     </IonButtons>
     <IonButtons slot="primary">
       <IonButton color="secondary">
-        <IonIcon slot="icon-only" ios="ellipsis-horizontal" md="ellipsis-vertical" />
+        <IonIcon slot="icon-only" ios={ellipsisHorizontal} md={ellipsisVertical} />
       </IonButton>
     </IonButtons>
     <IonTitle>Default Buttons</IonTitle>
@@ -412,7 +402,7 @@ export const ToolbarExample: React.FC = () => (
   <IonToolbar>
     <IonButtons slot="secondary">
       <IonButton fill="solid">
-        <IonIcon slot="start" name="person-circle" />
+        <IonIcon slot="start" icon={personCircle} />
         Contact
       </IonButton>
     </IonButtons>
@@ -420,7 +410,7 @@ export const ToolbarExample: React.FC = () => (
     <IonButtons slot="primary">
       <IonButton fill="solid" color="secondary">
         Help
-        <IonIcon slot="end" name="help-circle" />
+        <IonIcon slot="end" icon={helpCircle} />
       </IonButton>
     </IonButtons>
   </IonToolbar>
@@ -428,7 +418,7 @@ export const ToolbarExample: React.FC = () => (
   <IonToolbar>
     <IonButtons slot="secondary">
       <IonButton fill="outline">
-        <IonIcon slot="start" name="star" />
+        <IonIcon slot="start" icon={star} />
         Star
       </IonButton>
     </IonButtons>
@@ -436,7 +426,7 @@ export const ToolbarExample: React.FC = () => (
     <IonButtons slot="primary">
       <IonButton color="danger" fill="outline">
         Edit
-        <IonIcon slot="end" name="create" />
+        <IonIcon slot="end" icon={create} />
       </IonButton>
     </IonButtons>
   </IonToolbar>
@@ -457,7 +447,7 @@ export const ToolbarExample: React.FC = () => (
     </IonButtons>
     <IonButtons slot="secondary">
       <IonButton>
-        <IonIcon slot="icon-only" name="star" />
+        <IonIcon slot="icon-only" icon={star} />
       </IonButton>
     </IonButtons>
     <IonTitle>Left side menu toggle</IonTitle>
@@ -466,7 +456,7 @@ export const ToolbarExample: React.FC = () => (
   <IonToolbar>
     <IonButtons slot="primary">
       <IonButton onClick={() => {}}>
-        <IonIcon slot="icon-only" name="star" />
+        <IonIcon slot="icon-only" icon={star} />
       </IonButton>
     </IonButtons>
     <IonTitle>Right side menu toggle</IonTitle>
@@ -478,15 +468,15 @@ export const ToolbarExample: React.FC = () => (
   <IonToolbar>
     <IonButtons slot="primary">
       <IonButton onClick={() => {}}>
-        <IonIcon slot="icon-only" name="search" />
+        <IonIcon slot="icon-only" icon={search} />
       </IonButton>
     </IonButtons>
     <IonSearchbar placeholder="Search Favorites" />
   </IonToolbar>
 
   <IonToolbar>
-    <IonSegment>
-      <IonSegmentButton value="all" checked>
+    <IonSegment value="all">
+      <IonSegmentButton value="all">
         All
       </IonSegmentButton>
       <IonSegmentButton value="favorites">Favorites</IonSegmentButton>
@@ -496,15 +486,15 @@ export const ToolbarExample: React.FC = () => (
   <IonToolbar color="secondary">
     <IonButtons slot="secondary">
       <IonButton>
-        <IonIcon slot="icon-only" name="person-circle" />
+        <IonIcon slot="icon-only" icon={personCircle} />
       </IonButton>
       <IonButton>
-        <IonIcon slot="icon-only" name="search" />
+        <IonIcon slot="icon-only" icon={search} />
       </IonButton>
     </IonButtons>
     <IonButtons slot="primary">
       <IonButton color="primary">
-        <IonIcon slot="icon-only" ios="ellipsis-horizontal" md="ellipsis-vertical" />
+        <IonIcon slot="icon-only" ios={ellipsisHorizontal} md={ellipsisVertical} />
       </IonButton>
     </IonButtons>
     <IonTitle>Secondary Toolbar</IonTitle>
@@ -513,15 +503,15 @@ export const ToolbarExample: React.FC = () => (
   <IonToolbar color="dark">
     <IonButtons slot="secondary">
       <IonButton>
-        <IonIcon slot="icon-only" name="person-circle" />
+        <IonIcon slot="icon-only" icon={personCircle} />
       </IonButton>
       <IonButton>
-        <IonIcon slot="icon-only" name="search" />
+        <IonIcon slot="icon-only" icon={search} />
       </IonButton>
     </IonButtons>
     <IonButtons slot="primary">
       <IonButton color="danger">
-        <IonIcon slot="icon-only" ios="ellipsis-horizontal" md="ellipsis-vertical" />
+        <IonIcon slot="icon-only" ios={ellipsisHorizontal} md={ellipsisVertical} />
       </IonButton>
     </IonButtons>
     <IonTitle>Dark Toolbar</IonTitle>
@@ -530,6 +520,193 @@ export const ToolbarExample: React.FC = () => (
 ```
 
 
+### Stencil
+
+```tsx
+import { Component, h } from '@stencil/core';
+
+@Component({
+  tag: 'toolbar-example',
+  styleUrl: 'toolbar-example.css'
+})
+export class ToolbarExample {
+
+  clickedStar() {
+    console.log("Clicked star button");
+  }
+
+  clickedSearch() {
+    console.log("Clicked search button");
+  }
+
+  render() {
+    return [
+      <ion-toolbar>
+        <ion-title>Title Only</ion-title>
+      </ion-toolbar>,
+
+      <ion-toolbar>
+        <ion-buttons slot="start">
+          <ion-back-button></ion-back-button>
+        </ion-buttons>
+        <ion-title>Back Button</ion-title>
+      </ion-toolbar>,
+
+      <ion-toolbar>
+        <ion-title size="small">Small Title above a Default Title</ion-title>
+      </ion-toolbar>,
+      <ion-toolbar>
+        <ion-title>Default Title</ion-title>
+      </ion-toolbar>,
+
+      <ion-toolbar>
+        <ion-buttons slot="secondary">
+          <ion-button>
+            <ion-icon slot="icon-only" name="person-circle"></ion-icon>
+          </ion-button>
+          <ion-button>
+            <ion-icon slot="icon-only" name="search"></ion-icon>
+          </ion-button>
+        </ion-buttons>
+        <ion-buttons slot="primary">
+          <ion-button color="secondary">
+            <ion-icon slot="icon-only" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
+          </ion-button>
+        </ion-buttons>
+        <ion-title>Default Buttons</ion-title>
+      </ion-toolbar>,
+
+      <ion-toolbar>
+        <ion-buttons slot="secondary">
+          <ion-button fill="solid">
+            <ion-icon slot="start" name="person-circle"></ion-icon>
+            Contact
+          </ion-button>
+        </ion-buttons>
+        <ion-title>Solid Buttons</ion-title>
+        <ion-buttons slot="primary">
+          <ion-button fill="solid" color="secondary">
+            Help
+            <ion-icon slot="end" name="help-circle"></ion-icon>
+          </ion-button>
+        </ion-buttons>
+      </ion-toolbar>,
+
+      <ion-toolbar>
+        <ion-buttons slot="secondary">
+          <ion-button fill="outline">
+            <ion-icon slot="start" name="star"></ion-icon>
+            Star
+          </ion-button>
+        </ion-buttons>
+        <ion-title>Outline Buttons</ion-title>
+        <ion-buttons slot="primary">
+          <ion-button color="danger" fill="outline">
+            Edit
+            <ion-icon slot="end" name="create"></ion-icon>
+          </ion-button>
+        </ion-buttons>
+      </ion-toolbar>,
+
+      <ion-toolbar>
+        <ion-buttons slot="secondary">
+          <ion-button>
+            Account
+          </ion-button>
+        </ion-buttons>
+        <ion-buttons slot="primary">
+          <ion-button color="danger">
+            Edit
+          </ion-button>
+        </ion-buttons>
+        <ion-title>Text Only Buttons</ion-title>
+      </ion-toolbar>,
+
+      <ion-toolbar>
+        <ion-buttons slot="start">
+          <ion-menu-button autoHide={false}></ion-menu-button>
+
+        </ion-buttons>
+        <ion-buttons slot="secondary">
+          <ion-button>
+            <ion-icon slot="icon-only" name="star"></ion-icon>
+          </ion-button>
+        </ion-buttons>
+        <ion-title>Left side menu toggle</ion-title>
+      </ion-toolbar>,
+
+      <ion-toolbar>
+        <ion-buttons slot="primary">
+          <ion-button onClick={() => this.clickedStar()}>
+            <ion-icon slot="icon-only" name="star"></ion-icon>
+          </ion-button>
+        </ion-buttons>
+        <ion-title>Right side menu toggle</ion-title>
+        <ion-buttons slot="end">
+          <ion-menu-button autoHide={false}></ion-menu-button>
+
+        </ion-buttons>
+      </ion-toolbar>,
+
+      <ion-toolbar>
+        <ion-buttons slot="primary">
+          <ion-button onClick={() => this.clickedSearch()}>
+            <ion-icon slot="icon-only" name="search"></ion-icon>
+          </ion-button>
+        </ion-buttons>
+        <ion-searchbar placeholder="Search Favorites"></ion-searchbar>
+      </ion-toolbar>,
+
+      <ion-toolbar>
+        <ion-segment value="all">
+          <ion-segment-button value="all">
+            All
+          </ion-segment-button>
+          <ion-segment-button value="favorites">
+            Favorites
+          </ion-segment-button>
+        </ion-segment>
+      </ion-toolbar>,
+
+      <ion-toolbar color="secondary">
+        <ion-buttons slot="secondary">
+          <ion-button>
+            <ion-icon slot="icon-only" name="person-circle"></ion-icon>
+          </ion-button>
+          <ion-button>
+            <ion-icon slot="icon-only" name="search"></ion-icon>
+          </ion-button>
+        </ion-buttons>
+        <ion-buttons slot="primary">
+          <ion-button color="primary">
+            <ion-icon slot="icon-only" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
+          </ion-button>
+        </ion-buttons>
+        <ion-title>Secondary Toolbar</ion-title>
+      </ion-toolbar>,
+
+      <ion-toolbar color="dark">
+        <ion-buttons slot="secondary">
+          <ion-button>
+            <ion-icon slot="icon-only" name="person-circle"></ion-icon>
+          </ion-button>
+          <ion-button>
+            <ion-icon slot="icon-only" name="search"></ion-icon>
+          </ion-button>
+        </ion-buttons>
+        <ion-buttons slot="primary">
+          <ion-button color="danger">
+            <ion-icon slot="icon-only" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
+          </ion-button>
+        </ion-buttons>
+        <ion-title>Dark Toolbar</ion-title>
+      </ion-toolbar>
+    ];
+  }
+}
+```
+
+
 ### Vue
 
 ```html
@@ -651,8 +828,8 @@ export const ToolbarExample: React.FC = () => (
   </ion-toolbar>
 
   <ion-toolbar>
-    <ion-segment>
-      <ion-segment-button value="all" checked>
+    <ion-segment value="all">
+      <ion-segment-button value="all">
         All
       </ion-segment-button>
       <ion-segment-button value="favorites">
diff --git a/core/src/components/toolbar/usage/angular.md b/core/src/components/toolbar/usage/angular.md
index 045ae64cad..dc40b1e011 100644
--- a/core/src/components/toolbar/usage/angular.md
+++ b/core/src/components/toolbar/usage/angular.md
@@ -116,8 +116,8 @@
 </ion-toolbar>
 
 <ion-toolbar>
-  <ion-segment>
-    <ion-segment-button value="all" checked>
+  <ion-segment value="all">
+    <ion-segment-button value="all">
       All
     </ion-segment-button>
     <ion-segment-button value="favorites">
diff --git a/core/src/components/toolbar/usage/javascript.md b/core/src/components/toolbar/usage/javascript.md
index 54f869bb60..1e879e10e4 100644
--- a/core/src/components/toolbar/usage/javascript.md
+++ b/core/src/components/toolbar/usage/javascript.md
@@ -114,8 +114,8 @@
 </ion-toolbar>
 
 <ion-toolbar>
-  <ion-segment>
-    <ion-segment-button value="all" checked>
+  <ion-segment value="all">
+    <ion-segment-button value="all">
       All
     </ion-segment-button>
     <ion-segment-button value="favorites">
diff --git a/core/src/components/toolbar/usage/react.md b/core/src/components/toolbar/usage/react.md
index 2beedad67b..8887eba549 100644
--- a/core/src/components/toolbar/usage/react.md
+++ b/core/src/components/toolbar/usage/react.md
@@ -1,17 +1,7 @@
 ```tsx
 import React from 'react';
-import {
-  IonToolbar,
-  IonTitle,
-  IonButtons,
-  IonBackButton,
-  IonButton,
-  IonIcon,
-  IonMenuButton,
-  IonSearchbar,
-  IonSegment,
-  IonSegmentButton,
-} from '@ionic/react';
+import { IonToolbar, IonTitle, IonButtons, IonBackButton, IonButton, IonIcon, IonMenuButton, IonSearchbar, IonSegment, IonSegmentButton } from '@ionic/react';
+import { personCircle, search, helpCircle, star, create, ellipsisHorizontal, ellipsisVertical } from 'ionicons/icons';
 
 export const ToolbarExample: React.FC = () => (
   <IonToolbar>
@@ -35,15 +25,15 @@ export const ToolbarExample: React.FC = () => (
   <IonToolbar>
     <IonButtons slot="secondary">
       <IonButton>
-        <IonIcon slot="icon-only" name="person-circle" />
+        <IonIcon slot="icon-only" icon={personCircle} />
       </IonButton>
       <IonButton>
-        <IonIcon slot="icon-only" name="search" />
+        <IonIcon slot="icon-only" icon={search} />
       </IonButton>
     </IonButtons>
     <IonButtons slot="primary">
       <IonButton color="secondary">
-        <IonIcon slot="icon-only" ios="ellipsis-horizontal" md="ellipsis-vertical" />
+        <IonIcon slot="icon-only" ios={ellipsisHorizontal} md={ellipsisVertical} />
       </IonButton>
     </IonButtons>
     <IonTitle>Default Buttons</IonTitle>
@@ -52,7 +42,7 @@ export const ToolbarExample: React.FC = () => (
   <IonToolbar>
     <IonButtons slot="secondary">
       <IonButton fill="solid">
-        <IonIcon slot="start" name="person-circle" />
+        <IonIcon slot="start" icon={personCircle} />
         Contact
       </IonButton>
     </IonButtons>
@@ -60,7 +50,7 @@ export const ToolbarExample: React.FC = () => (
     <IonButtons slot="primary">
       <IonButton fill="solid" color="secondary">
         Help
-        <IonIcon slot="end" name="help-circle" />
+        <IonIcon slot="end" icon={helpCircle} />
       </IonButton>
     </IonButtons>
   </IonToolbar>
@@ -68,7 +58,7 @@ export const ToolbarExample: React.FC = () => (
   <IonToolbar>
     <IonButtons slot="secondary">
       <IonButton fill="outline">
-        <IonIcon slot="start" name="star" />
+        <IonIcon slot="start" icon={star} />
         Star
       </IonButton>
     </IonButtons>
@@ -76,7 +66,7 @@ export const ToolbarExample: React.FC = () => (
     <IonButtons slot="primary">
       <IonButton color="danger" fill="outline">
         Edit
-        <IonIcon slot="end" name="create" />
+        <IonIcon slot="end" icon={create} />
       </IonButton>
     </IonButtons>
   </IonToolbar>
@@ -97,7 +87,7 @@ export const ToolbarExample: React.FC = () => (
     </IonButtons>
     <IonButtons slot="secondary">
       <IonButton>
-        <IonIcon slot="icon-only" name="star" />
+        <IonIcon slot="icon-only" icon={star} />
       </IonButton>
     </IonButtons>
     <IonTitle>Left side menu toggle</IonTitle>
@@ -106,7 +96,7 @@ export const ToolbarExample: React.FC = () => (
   <IonToolbar>
     <IonButtons slot="primary">
       <IonButton onClick={() => {}}>
-        <IonIcon slot="icon-only" name="star" />
+        <IonIcon slot="icon-only" icon={star} />
       </IonButton>
     </IonButtons>
     <IonTitle>Right side menu toggle</IonTitle>
@@ -118,15 +108,15 @@ export const ToolbarExample: React.FC = () => (
   <IonToolbar>
     <IonButtons slot="primary">
       <IonButton onClick={() => {}}>
-        <IonIcon slot="icon-only" name="search" />
+        <IonIcon slot="icon-only" icon={search} />
       </IonButton>
     </IonButtons>
     <IonSearchbar placeholder="Search Favorites" />
   </IonToolbar>
 
   <IonToolbar>
-    <IonSegment>
-      <IonSegmentButton value="all" checked>
+    <IonSegment value="all">
+      <IonSegmentButton value="all">
         All
       </IonSegmentButton>
       <IonSegmentButton value="favorites">Favorites</IonSegmentButton>
@@ -136,15 +126,15 @@ export const ToolbarExample: React.FC = () => (
   <IonToolbar color="secondary">
     <IonButtons slot="secondary">
       <IonButton>
-        <IonIcon slot="icon-only" name="person-circle" />
+        <IonIcon slot="icon-only" icon={personCircle} />
       </IonButton>
       <IonButton>
-        <IonIcon slot="icon-only" name="search" />
+        <IonIcon slot="icon-only" icon={search} />
       </IonButton>
     </IonButtons>
     <IonButtons slot="primary">
       <IonButton color="primary">
-        <IonIcon slot="icon-only" ios="ellipsis-horizontal" md="ellipsis-vertical" />
+        <IonIcon slot="icon-only" ios={ellipsisHorizontal} md={ellipsisVertical} />
       </IonButton>
     </IonButtons>
     <IonTitle>Secondary Toolbar</IonTitle>
@@ -153,15 +143,15 @@ export const ToolbarExample: React.FC = () => (
   <IonToolbar color="dark">
     <IonButtons slot="secondary">
       <IonButton>
-        <IonIcon slot="icon-only" name="person-circle" />
+        <IonIcon slot="icon-only" icon={personCircle} />
       </IonButton>
       <IonButton>
-        <IonIcon slot="icon-only" name="search" />
+        <IonIcon slot="icon-only" icon={search} />
       </IonButton>
     </IonButtons>
     <IonButtons slot="primary">
       <IonButton color="danger">
-        <IonIcon slot="icon-only" ios="ellipsis-horizontal" md="ellipsis-vertical" />
+        <IonIcon slot="icon-only" ios={ellipsisHorizontal} md={ellipsisVertical} />
       </IonButton>
     </IonButtons>
     <IonTitle>Dark Toolbar</IonTitle>
diff --git a/core/src/components/toolbar/usage/stencil.md b/core/src/components/toolbar/usage/stencil.md
new file mode 100644
index 0000000000..0baf557da2
--- /dev/null
+++ b/core/src/components/toolbar/usage/stencil.md
@@ -0,0 +1,183 @@
+```tsx
+import { Component, h } from '@stencil/core';
+
+@Component({
+  tag: 'toolbar-example',
+  styleUrl: 'toolbar-example.css'
+})
+export class ToolbarExample {
+
+  clickedStar() {
+    console.log("Clicked star button");
+  }
+
+  clickedSearch() {
+    console.log("Clicked search button");
+  }
+
+  render() {
+    return [
+      <ion-toolbar>
+        <ion-title>Title Only</ion-title>
+      </ion-toolbar>,
+
+      <ion-toolbar>
+        <ion-buttons slot="start">
+          <ion-back-button></ion-back-button>
+        </ion-buttons>
+        <ion-title>Back Button</ion-title>
+      </ion-toolbar>,
+
+      <ion-toolbar>
+        <ion-title size="small">Small Title above a Default Title</ion-title>
+      </ion-toolbar>,
+      <ion-toolbar>
+        <ion-title>Default Title</ion-title>
+      </ion-toolbar>,
+
+      <ion-toolbar>
+        <ion-buttons slot="secondary">
+          <ion-button>
+            <ion-icon slot="icon-only" name="person-circle"></ion-icon>
+          </ion-button>
+          <ion-button>
+            <ion-icon slot="icon-only" name="search"></ion-icon>
+          </ion-button>
+        </ion-buttons>
+        <ion-buttons slot="primary">
+          <ion-button color="secondary">
+            <ion-icon slot="icon-only" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
+          </ion-button>
+        </ion-buttons>
+        <ion-title>Default Buttons</ion-title>
+      </ion-toolbar>,
+
+      <ion-toolbar>
+        <ion-buttons slot="secondary">
+          <ion-button fill="solid">
+            <ion-icon slot="start" name="person-circle"></ion-icon>
+            Contact
+          </ion-button>
+        </ion-buttons>
+        <ion-title>Solid Buttons</ion-title>
+        <ion-buttons slot="primary">
+          <ion-button fill="solid" color="secondary">
+            Help
+            <ion-icon slot="end" name="help-circle"></ion-icon>
+          </ion-button>
+        </ion-buttons>
+      </ion-toolbar>,
+
+      <ion-toolbar>
+        <ion-buttons slot="secondary">
+          <ion-button fill="outline">
+            <ion-icon slot="start" name="star"></ion-icon>
+            Star
+          </ion-button>
+        </ion-buttons>
+        <ion-title>Outline Buttons</ion-title>
+        <ion-buttons slot="primary">
+          <ion-button color="danger" fill="outline">
+            Edit
+            <ion-icon slot="end" name="create"></ion-icon>
+          </ion-button>
+        </ion-buttons>
+      </ion-toolbar>,
+
+      <ion-toolbar>
+        <ion-buttons slot="secondary">
+          <ion-button>
+            Account
+          </ion-button>
+        </ion-buttons>
+        <ion-buttons slot="primary">
+          <ion-button color="danger">
+            Edit
+          </ion-button>
+        </ion-buttons>
+        <ion-title>Text Only Buttons</ion-title>
+      </ion-toolbar>,
+
+      <ion-toolbar>
+        <ion-buttons slot="start">
+          <ion-menu-button autoHide={false}></ion-menu-button>
+
+        </ion-buttons>
+        <ion-buttons slot="secondary">
+          <ion-button>
+            <ion-icon slot="icon-only" name="star"></ion-icon>
+          </ion-button>
+        </ion-buttons>
+        <ion-title>Left side menu toggle</ion-title>
+      </ion-toolbar>,
+
+      <ion-toolbar>
+        <ion-buttons slot="primary">
+          <ion-button onClick={() => this.clickedStar()}>
+            <ion-icon slot="icon-only" name="star"></ion-icon>
+          </ion-button>
+        </ion-buttons>
+        <ion-title>Right side menu toggle</ion-title>
+        <ion-buttons slot="end">
+          <ion-menu-button autoHide={false}></ion-menu-button>
+
+        </ion-buttons>
+      </ion-toolbar>,
+
+      <ion-toolbar>
+        <ion-buttons slot="primary">
+          <ion-button onClick={() => this.clickedSearch()}>
+            <ion-icon slot="icon-only" name="search"></ion-icon>
+          </ion-button>
+        </ion-buttons>
+        <ion-searchbar placeholder="Search Favorites"></ion-searchbar>
+      </ion-toolbar>,
+
+      <ion-toolbar>
+        <ion-segment value="all">
+          <ion-segment-button value="all">
+            All
+          </ion-segment-button>
+          <ion-segment-button value="favorites">
+            Favorites
+          </ion-segment-button>
+        </ion-segment>
+      </ion-toolbar>,
+
+      <ion-toolbar color="secondary">
+        <ion-buttons slot="secondary">
+          <ion-button>
+            <ion-icon slot="icon-only" name="person-circle"></ion-icon>
+          </ion-button>
+          <ion-button>
+            <ion-icon slot="icon-only" name="search"></ion-icon>
+          </ion-button>
+        </ion-buttons>
+        <ion-buttons slot="primary">
+          <ion-button color="primary">
+            <ion-icon slot="icon-only" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
+          </ion-button>
+        </ion-buttons>
+        <ion-title>Secondary Toolbar</ion-title>
+      </ion-toolbar>,
+
+      <ion-toolbar color="dark">
+        <ion-buttons slot="secondary">
+          <ion-button>
+            <ion-icon slot="icon-only" name="person-circle"></ion-icon>
+          </ion-button>
+          <ion-button>
+            <ion-icon slot="icon-only" name="search"></ion-icon>
+          </ion-button>
+        </ion-buttons>
+        <ion-buttons slot="primary">
+          <ion-button color="danger">
+            <ion-icon slot="icon-only" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
+          </ion-button>
+        </ion-buttons>
+        <ion-title>Dark Toolbar</ion-title>
+      </ion-toolbar>
+    ];
+  }
+}
+```
\ No newline at end of file
diff --git a/core/src/components/toolbar/usage/vue.md b/core/src/components/toolbar/usage/vue.md
index d34df718b8..31fe0b3b63 100644
--- a/core/src/components/toolbar/usage/vue.md
+++ b/core/src/components/toolbar/usage/vue.md
@@ -117,8 +117,8 @@
   </ion-toolbar>
 
   <ion-toolbar>
-    <ion-segment>
-      <ion-segment-button value="all" checked>
+    <ion-segment value="all">
+      <ion-segment-button value="all">
         All
       </ion-segment-button>
       <ion-segment-button value="favorites">