diff --git a/core/src/components/action-sheet/readme.md b/core/src/components/action-sheet/readme.md
index cc808f9d0f..1be4437998 100644
--- a/core/src/components/action-sheet/readme.md
+++ b/core/src/components/action-sheet/readme.md
@@ -123,6 +123,73 @@ async function presentActionSheet() {
 ```
 
 
+### React
+
+```typescript
+import React, { Component } from 'react'
+import { IonActionSheet } from '@ionic/react';
+
+type Props = {}
+type State = {
+  showActionSheet: boolean
+}
+
+export default class ActionSheetExample extends Component<Props, State> {
+
+  constructor(props: Props) {
+    super(props);
+    this.state = {
+      showActionSheet: false
+    };
+  }
+
+  render() {
+    return (
+      <IonActionSheet
+        isOpen={this.state.showActionSheet}
+        onDidDismiss={() => this.setState(() => ({ showActionSheet: false }))}
+        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: 'arrow-dropright-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');
+          }
+        }]}
+      >
+      </IonActionSheet>
+    );
+  }
+}
+
+```
+
+
 
 ## Properties
 
diff --git a/core/src/components/action-sheet/usage/react.md b/core/src/components/action-sheet/usage/react.md
new file mode 100644
index 0000000000..f4643fdba6
--- /dev/null
+++ b/core/src/components/action-sheet/usage/react.md
@@ -0,0 +1,63 @@
+```typescript
+import React, { Component } from 'react'
+import { IonActionSheet } from '@ionic/react';
+
+type Props = {}
+type State = {
+  showActionSheet: boolean
+}
+
+export default class ActionSheetExample extends Component<Props, State> {
+
+  constructor(props: Props) {
+    super(props);
+    this.state = {
+      showActionSheet: false
+    };
+  }
+
+  render() {
+    return (
+      <IonActionSheet
+        isOpen={this.state.showActionSheet}
+        onDidDismiss={() => this.setState(() => ({ showActionSheet: false }))}
+        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: 'arrow-dropright-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');
+          }
+        }]}
+      >
+      </IonActionSheet>
+    );
+  }
+}
+
+```
diff --git a/core/src/components/alert/readme.md b/core/src/components/alert/readme.md
index e3dd4d4a8a..788a357318 100644
--- a/core/src/components/alert/readme.md
+++ b/core/src/components/alert/readme.md
@@ -526,6 +526,281 @@ async function presentAlertCheckbox() {
 ```
 
 
+### React
+
+```tsx
+import React, { Component } from 'react'
+import { IonAlert } from '@ionic/react';
+
+type Props = {}
+type State = {
+  showAlert1: boolean
+  showAlert2: boolean
+  showAlert3: boolean
+  showAlert4: boolean
+  showAlert5: boolean
+  showAlert6: boolean
+}
+
+export default class AlertExample extends Component<Props, State> {
+
+  constructor(props: Props) {
+    super(props);
+    this.state = {
+      showAlert1: false
+      showAlert2: false
+      showAlert3: false
+      showAlert4: false
+      showAlert5: false
+      showAlert6: false
+    };
+  }
+
+  render() {
+    return (
+      <IonAlert
+        isOpen={this.state.showAlert1}
+        onDidDismiss={() => this.setState(() => ({ showAlert1: false }))}
+        header={'Alert'}
+        subHeader={'Subtitle'}
+        message={'This is an alert message.'}
+        buttons={['OK']}
+      >
+      </IonAlert>
+
+
+      <IonAlert
+        isOpen={this.state.showAlert2}
+        onDidDismiss={() => this.setState(() => ({ showAlert2: false }))}
+        header={'Alert'}
+        subHeader={'Subtitle'}
+        message={'This is an alert message.'}
+        buttons={['Cancel', 'Open Modal', 'Delete']}
+      >
+      </IonAlert>
+
+
+      <IonAlert
+        isOpen={this.state.showAlert3}
+        onDidDismiss={() => this.setState(() => ({ showAlert3: false }))}
+        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');
+            }
+          }
+        ]}
+      >
+      </IonAlert>
+
+
+      <IonAlert
+        isOpen={this.state.showAlert4}
+        onDidDismiss={() => this.setState(() => ({ showAlert4: false }))}
+        header={'Prompt!'}
+        inputs={[
+          {
+            name: 'name1',
+            type: 'text',
+            placeholder: 'Placeholder 1'
+          },
+          {
+            name: 'name2',
+            type: 'text',
+            id: 'name2-id',
+            value: 'hello',
+            placeholder: 'Placeholder 2'
+          },
+          {
+            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');
+            }
+          }
+        ]}
+      >
+      </IonAlert>
+
+
+
+
+      <IonAlert
+        isOpen={this.state.showAlert5}
+        onDidDismiss={() => this.setState(() => ({ showAlert5: false }))}
+        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',
+            value: 'value6'
+          }
+        ]}
+        buttons={[
+          {
+            text: 'Cancel',
+            role: 'cancel',
+            cssClass: 'secondary',
+            handler: () => {
+              console.log('Confirm Cancel');
+            }
+          }, {
+            text: 'Ok',
+            handler: () => {
+              console.log('Confirm Ok');
+            }
+          }
+        ]}
+      >
+      </IonAlert>
+
+
+
+      <IonAlert
+        isOpen={this.state.showAlert6}
+        onDidDismiss={() => this.setState(() => ({ showAlert6: false }))}
+        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',
+            value: 'value6'
+          }
+        ]}
+        buttons={[
+          {
+            text: 'Cancel',
+            role: 'cancel',
+            cssClass: 'secondary',
+            handler: () => {
+              console.log('Confirm Cancel');
+            }
+          }, {
+            text: 'Ok',
+            handler: () => {
+              console.log('Confirm Ok');
+            }
+          }
+        ]}
+      >
+      </IonAlert>
+    );
+  }
+}
+
+```
+
+
 
 ## Properties
 
diff --git a/core/src/components/alert/usage/react.md b/core/src/components/alert/usage/react.md
new file mode 100644
index 0000000000..81baa70067
--- /dev/null
+++ b/core/src/components/alert/usage/react.md
@@ -0,0 +1,271 @@
+```tsx
+import React, { Component } from 'react'
+import { IonAlert } from '@ionic/react';
+
+type Props = {}
+type State = {
+  showAlert1: boolean
+  showAlert2: boolean
+  showAlert3: boolean
+  showAlert4: boolean
+  showAlert5: boolean
+  showAlert6: boolean
+}
+
+export default class AlertExample extends Component<Props, State> {
+
+  constructor(props: Props) {
+    super(props);
+    this.state = {
+      showAlert1: false
+      showAlert2: false
+      showAlert3: false
+      showAlert4: false
+      showAlert5: false
+      showAlert6: false
+    };
+  }
+
+  render() {
+    return (
+      <IonAlert
+        isOpen={this.state.showAlert1}
+        onDidDismiss={() => this.setState(() => ({ showAlert1: false }))}
+        header={'Alert'}
+        subHeader={'Subtitle'}
+        message={'This is an alert message.'}
+        buttons={['OK']}
+      >
+      </IonAlert>
+
+
+      <IonAlert
+        isOpen={this.state.showAlert2}
+        onDidDismiss={() => this.setState(() => ({ showAlert2: false }))}
+        header={'Alert'}
+        subHeader={'Subtitle'}
+        message={'This is an alert message.'}
+        buttons={['Cancel', 'Open Modal', 'Delete']}
+      >
+      </IonAlert>
+
+
+      <IonAlert
+        isOpen={this.state.showAlert3}
+        onDidDismiss={() => this.setState(() => ({ showAlert3: false }))}
+        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');
+            }
+          }
+        ]}
+      >
+      </IonAlert>
+
+
+      <IonAlert
+        isOpen={this.state.showAlert4}
+        onDidDismiss={() => this.setState(() => ({ showAlert4: false }))}
+        header={'Prompt!'}
+        inputs={[
+          {
+            name: 'name1',
+            type: 'text',
+            placeholder: 'Placeholder 1'
+          },
+          {
+            name: 'name2',
+            type: 'text',
+            id: 'name2-id',
+            value: 'hello',
+            placeholder: 'Placeholder 2'
+          },
+          {
+            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');
+            }
+          }
+        ]}
+      >
+      </IonAlert>
+
+
+
+
+      <IonAlert
+        isOpen={this.state.showAlert5}
+        onDidDismiss={() => this.setState(() => ({ showAlert5: false }))}
+        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',
+            value: 'value6'
+          }
+        ]}
+        buttons={[
+          {
+            text: 'Cancel',
+            role: 'cancel',
+            cssClass: 'secondary',
+            handler: () => {
+              console.log('Confirm Cancel');
+            }
+          }, {
+            text: 'Ok',
+            handler: () => {
+              console.log('Confirm Ok');
+            }
+          }
+        ]}
+      >
+      </IonAlert>
+
+
+
+      <IonAlert
+        isOpen={this.state.showAlert6}
+        onDidDismiss={() => this.setState(() => ({ showAlert6: false }))}
+        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',
+            value: 'value6'
+          }
+        ]}
+        buttons={[
+          {
+            text: 'Cancel',
+            role: 'cancel',
+            cssClass: 'secondary',
+            handler: () => {
+              console.log('Confirm Cancel');
+            }
+          }, {
+            text: 'Ok',
+            handler: () => {
+              console.log('Confirm Ok');
+            }
+          }
+        ]}
+      >
+      </IonAlert>
+    );
+  }
+}
+
+```
diff --git a/core/src/components/avatar/readme.md b/core/src/components/avatar/readme.md
index bfffbc4ee2..755936b9d1 100644
--- a/core/src/components/avatar/readme.md
+++ b/core/src/components/avatar/readme.md
@@ -33,6 +33,38 @@ Avatars can be used by themselves or inside of any element. If placed inside of
 ```
 
 
+### React
+
+```tsx
+import React from 'react'
+import { IonAvatar, IonChip, IonItem, IonLabel } from '@ionic/react';
+
+const AvatarExample: React.SFC<{}> = () => (
+  <>
+    <IonAvatar>
+      <img src="https://gravatar.com/avatar/dba6bae8c566f9d4041fb9cd9ada7741?d=identicon&f=y" />
+    </IonAvatar>
+
+    <IonChip>
+      <IonAvatar>
+        <img src="https://gravatar.com/avatar/dba6bae8c566f9d4041fb9cd9ada7741?d=identicon&f=y" />
+      </IonAvatar>
+      <IonLabel>Chip Avatar</IonLabel>
+    </IonChip>
+
+    <IonItem>
+      <IonAvatar slot="start">
+        <img src="https://gravatar.com/avatar/dba6bae8c566f9d4041fb9cd9ada7741?d=identicon&f=y" />
+      </IonAvatar>
+      <IonLabel>Item Avatar</IonLabel>
+    </IonItem>
+  </>
+);
+
+export default AvatarExample;
+```
+
+
 
 ## CSS Custom Properties
 
diff --git a/core/src/components/avatar/usage/react.md b/core/src/components/avatar/usage/react.md
new file mode 100644
index 0000000000..0d28e47068
--- /dev/null
+++ b/core/src/components/avatar/usage/react.md
@@ -0,0 +1,28 @@
+```tsx
+import React from 'react'
+import { IonAvatar, IonChip, IonItem, IonLabel } from '@ionic/react';
+
+const AvatarExample: React.SFC<{}> = () => (
+  <>
+    <IonAvatar>
+      <img src="https://gravatar.com/avatar/dba6bae8c566f9d4041fb9cd9ada7741?d=identicon&f=y" />
+    </IonAvatar>
+
+    <IonChip>
+      <IonAvatar>
+        <img src="https://gravatar.com/avatar/dba6bae8c566f9d4041fb9cd9ada7741?d=identicon&f=y" />
+      </IonAvatar>
+      <IonLabel>Chip Avatar</IonLabel>
+    </IonChip>
+
+    <IonItem>
+      <IonAvatar slot="start">
+        <img src="https://gravatar.com/avatar/dba6bae8c566f9d4041fb9cd9ada7741?d=identicon&f=y" />
+      </IonAvatar>
+      <IonLabel>Item Avatar</IonLabel>
+    </IonItem>
+  </>
+);
+
+export default AvatarExample;
+```
\ 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 0864b10825..acc03dba5b 100644
--- a/core/src/components/back-button/readme.md
+++ b/core/src/components/back-button/readme.md
@@ -115,6 +115,71 @@ To change what is displayed in the back button, use the `text` and `icon` proper
 ```
 
 
+### React
+
+```tsx
+import React from 'react';
+
+import { IonBackButton, IonHeader, IonToolbar, IonButtons, IonMenuButton } from '@ionic/react';
+
+const Example: React.SFC<{}> = () => (
+  <>
+    {/*-- Default back button --*/}
+    <IonHeader>
+      <IonToolbar>
+        <IonButtons slot="start">
+          <IonBackButton goBack={() => {}} />
+        </IonButtons>
+      </IonToolbar>
+    </IonHeader>
+
+    {/*-- Back button with a default href --*/}
+    <IonHeader>
+      <IonToolbar>
+        <IonButtons slot="start">
+          <IonBackButton goBack={() => {}} defaultHref="home" />
+        </IonButtons>
+      </IonToolbar>
+    </IonHeader>
+
+    {/*-- Back button with custom text and icon --*/}
+    <IonHeader>
+      <IonToolbar>
+        <IonButtons slot="start">
+          <IonBackButton
+            goBack={() => {}}
+            text="buttonText"
+            icon="buttonIcon"
+          />
+        </IonButtons>
+      </IonToolbar>
+    </IonHeader>
+
+    {/*-- Back button with no text and custom icon --*/}
+    <IonHeader>
+      <IonToolbar>
+        <IonButtons slot="start">
+          <IonBackButton goBack={() => {}} text="" icon="add" />
+        </IonButtons>
+      </IonToolbar>
+    </IonHeader>
+
+    {/*-- Danger back button next to a menu button --*/}
+    <IonHeader>
+      <IonToolbar>
+        <IonButtons slot="start">
+          <IonMenuButton />
+          <IonBackButton goBack={() => {}} color="danger" />
+        </IonButtons>
+      </IonToolbar>
+    </IonHeader>
+  </>
+);
+
+export default Example;
+```
+
+
 
 ## Properties
 
diff --git a/core/src/components/back-button/usage/react.md b/core/src/components/back-button/usage/react.md
new file mode 100644
index 0000000000..c80a4c67e8
--- /dev/null
+++ b/core/src/components/back-button/usage/react.md
@@ -0,0 +1,61 @@
+```tsx
+import React from 'react';
+
+import { IonBackButton, IonHeader, IonToolbar, IonButtons, IonMenuButton } from '@ionic/react';
+
+const Example: React.SFC<{}> = () => (
+  <>
+    {/*-- Default back button --*/}
+    <IonHeader>
+      <IonToolbar>
+        <IonButtons slot="start">
+          <IonBackButton goBack={() => {}} />
+        </IonButtons>
+      </IonToolbar>
+    </IonHeader>
+
+    {/*-- Back button with a default href --*/}
+    <IonHeader>
+      <IonToolbar>
+        <IonButtons slot="start">
+          <IonBackButton goBack={() => {}} defaultHref="home" />
+        </IonButtons>
+      </IonToolbar>
+    </IonHeader>
+
+    {/*-- Back button with custom text and icon --*/}
+    <IonHeader>
+      <IonToolbar>
+        <IonButtons slot="start">
+          <IonBackButton
+            goBack={() => {}}
+            text="buttonText"
+            icon="buttonIcon"
+          />
+        </IonButtons>
+      </IonToolbar>
+    </IonHeader>
+
+    {/*-- Back button with no text and custom icon --*/}
+    <IonHeader>
+      <IonToolbar>
+        <IonButtons slot="start">
+          <IonBackButton goBack={() => {}} text="" icon="add" />
+        </IonButtons>
+      </IonToolbar>
+    </IonHeader>
+
+    {/*-- Danger back button next to a menu button --*/}
+    <IonHeader>
+      <IonToolbar>
+        <IonButtons slot="start">
+          <IonMenuButton />
+          <IonBackButton goBack={() => {}} color="danger" />
+        </IonButtons>
+      </IonToolbar>
+    </IonHeader>
+  </>
+);
+
+export default Example;
+```
\ No newline at end of file
diff --git a/core/src/components/backdrop/readme.md b/core/src/components/backdrop/readme.md
index 684f23b5d9..85e770afd8 100644
--- a/core/src/components/backdrop/readme.md
+++ b/core/src/components/backdrop/readme.md
@@ -74,6 +74,39 @@ backdrop.stopPropagation = false;
 ```
 
 
+### React
+
+```tsx
+import React from 'react';
+
+import { IonBackdrop } from '@ionic/react';
+
+const Example: React.SFC<{}> = () => (
+  <>
+    {/*-- Default backdrop --*/}
+    <IonBackdrop />
+
+    {/*-- Backdrop that is not tappable --*/}
+    <IonBackdrop tappable={false} />
+
+    {/*-- Backdrop that is not visible --*/}
+    <IonBackdrop visible={false} />
+
+    {/*-- Backdrop with propagation --*/}
+    <IonBackdrop stopPropagation={false} />
+
+    <IonBackdrop
+      tappable={true}
+      visible={true}
+      stopPropagation={true}
+    />
+  </>
+);
+
+export default Example;
+```
+
+
 
 ## Properties
 
diff --git a/core/src/components/backdrop/usage/react.md b/core/src/components/backdrop/usage/react.md
new file mode 100644
index 0000000000..db8b7f5f41
--- /dev/null
+++ b/core/src/components/backdrop/usage/react.md
@@ -0,0 +1,29 @@
+```tsx
+import React from 'react';
+
+import { IonBackdrop } from '@ionic/react';
+
+const Example: React.SFC<{}> = () => (
+  <>
+    {/*-- Default backdrop --*/}
+    <IonBackdrop />
+
+    {/*-- Backdrop that is not tappable --*/}
+    <IonBackdrop tappable={false} />
+
+    {/*-- Backdrop that is not visible --*/}
+    <IonBackdrop visible={false} />
+
+    {/*-- Backdrop with propagation --*/}
+    <IonBackdrop stopPropagation={false} />
+
+    <IonBackdrop
+      tappable={true}
+      visible={true}
+      stopPropagation={true}
+    />
+  </>
+);
+
+export default Example;
+```
diff --git a/core/src/components/badge/readme.md b/core/src/components/badge/readme.md
index 3995d9d096..9ac9a1bf6c 100644
--- a/core/src/components/badge/readme.md
+++ b/core/src/components/badge/readme.md
@@ -34,6 +34,42 @@ Badges are inline block elements that usually appear near another element. Typic
 ```
 
 
+### React
+
+```tsx
+import React from 'react';
+
+import { IonBadge, IonItem, IonLabel } from '@ionic/react';
+
+const Example: React.SFC<{}> = () => (
+  <>
+    {/*-- Default --*/}
+    <IonBadge>99</IonBadge>
+
+    {/*-- Colors --*/}
+    <IonBadge color="primary">11</IonBadge>
+    <IonBadge color="secondary">22</IonBadge>
+    <IonBadge color="tertiary">33</IonBadge>
+    <IonBadge color="success">44</IonBadge>
+    <IonBadge color="warning">55</IonBadge>
+    <IonBadge color="danger">66</IonBadge>
+    <IonBadge color="light">77</IonBadge>
+    <IonBadge color="medium">88</IonBadge>
+    <IonBadge color="dark">99</IonBadge>
+
+    {/*-- Item with badge on left and right --*/}
+    <IonItem>
+      <IonBadge slot="start">11</IonBadge>
+      <IonLabel>My Item</IonLabel>
+      <IonBadge slot="end">22</IonBadge>
+    </IonItem>
+  </>
+);
+
+export default Example;
+```
+
+
 
 ## Properties
 
diff --git a/core/src/components/badge/usage/react.md b/core/src/components/badge/usage/react.md
new file mode 100644
index 0000000000..6539730df6
--- /dev/null
+++ b/core/src/components/badge/usage/react.md
@@ -0,0 +1,32 @@
+```tsx
+import React from 'react';
+
+import { IonBadge, IonItem, IonLabel } from '@ionic/react';
+
+const Example: React.SFC<{}> = () => (
+  <>
+    {/*-- Default --*/}
+    <IonBadge>99</IonBadge>
+
+    {/*-- Colors --*/}
+    <IonBadge color="primary">11</IonBadge>
+    <IonBadge color="secondary">22</IonBadge>
+    <IonBadge color="tertiary">33</IonBadge>
+    <IonBadge color="success">44</IonBadge>
+    <IonBadge color="warning">55</IonBadge>
+    <IonBadge color="danger">66</IonBadge>
+    <IonBadge color="light">77</IonBadge>
+    <IonBadge color="medium">88</IonBadge>
+    <IonBadge color="dark">99</IonBadge>
+
+    {/*-- Item with badge on left and right --*/}
+    <IonItem>
+      <IonBadge slot="start">11</IonBadge>
+      <IonLabel>My Item</IonLabel>
+      <IonBadge slot="end">22</IonBadge>
+    </IonItem>
+  </>
+);
+
+export default Example;
+```
diff --git a/core/src/components/button/readme.md b/core/src/components/button/readme.md
index 33fc3591f6..09a54595c3 100644
--- a/core/src/components/button/readme.md
+++ b/core/src/components/button/readme.md
@@ -91,6 +91,70 @@ This attribute specifies the size of the button. Setting this attribute will cha
 ```
 
 
+### React
+
+```tsx
+import React from 'react';
+
+import { IonButton, IonIcon } from '@ionic/react';
+
+const Example: React.SFC<{}> = () => (
+  <>
+    {/*-- Default --*/}
+    <IonButton>Default</IonButton>
+
+    {/*-- Anchor --*/}
+    <IonButton href="#">Anchor</IonButton>
+
+    {/*-- Colors --*/}
+    <IonButton color="primary">Primary</IonButton>
+    <IonButton color="secondary">Secondary</IonButton>
+    <IonButton color="tertiary">Tertiary</IonButton>
+    <IonButton color="success">Success</IonButton>
+    <IonButton color="warning">Warning</IonButton>
+    <IonButton color="danger">Danger</IonButton>
+    <IonButton color="light">Light</IonButton>
+    <IonButton color="medium">Medium</IonButton>
+    <IonButton color="dark">Dark</IonButton>
+
+    {/*-- Expand --*/}
+    <IonButton expand="full">Full Button</IonButton>
+    <IonButton expand="block">Block Button</IonButton>
+
+    {/*-- Round --*/}
+    <IonButton shape="round">Round Button</IonButton>
+
+    {/*-- Fill --*/}
+    <IonButton expand="full" fill="outline">Outline + Full</IonButton>
+    <IonButton expand="block" fill="outline">Outline + Block</IonButton>
+    <IonButton shape="round" fill="outline">Outline + Round</IonButton>
+
+    {/*-- Icons --*/}
+    <IonButton>
+      <IonIcon slot="start" name="star" />
+      Left Icon
+    </IonButton>
+
+    <IonButton>
+      Right Icon
+      <IonIcon slot="end" name="star" />
+    </IonButton>
+
+    <IonButton>
+      <IonIcon slot="icon-only" name="star" />
+    </IonButton>
+
+    {/*-- Sizes --*/}
+    <IonButton size="large">Large</IonButton>
+    <IonButton>Default</IonButton>
+    <IonButton size="small">Small</IonButton>
+  </>
+);
+
+export default Example;
+```
+
+
 
 ## Properties
 
diff --git a/core/src/components/button/usage/react.md b/core/src/components/button/usage/react.md
new file mode 100644
index 0000000000..ebb20a9cb7
--- /dev/null
+++ b/core/src/components/button/usage/react.md
@@ -0,0 +1,60 @@
+```tsx
+import React from 'react';
+
+import { IonButton, IonIcon } from '@ionic/react';
+
+const Example: React.SFC<{}> = () => (
+  <>
+    {/*-- Default --*/}
+    <IonButton>Default</IonButton>
+
+    {/*-- Anchor --*/}
+    <IonButton href="#">Anchor</IonButton>
+
+    {/*-- Colors --*/}
+    <IonButton color="primary">Primary</IonButton>
+    <IonButton color="secondary">Secondary</IonButton>
+    <IonButton color="tertiary">Tertiary</IonButton>
+    <IonButton color="success">Success</IonButton>
+    <IonButton color="warning">Warning</IonButton>
+    <IonButton color="danger">Danger</IonButton>
+    <IonButton color="light">Light</IonButton>
+    <IonButton color="medium">Medium</IonButton>
+    <IonButton color="dark">Dark</IonButton>
+
+    {/*-- Expand --*/}
+    <IonButton expand="full">Full Button</IonButton>
+    <IonButton expand="block">Block Button</IonButton>
+
+    {/*-- Round --*/}
+    <IonButton shape="round">Round Button</IonButton>
+
+    {/*-- Fill --*/}
+    <IonButton expand="full" fill="outline">Outline + Full</IonButton>
+    <IonButton expand="block" fill="outline">Outline + Block</IonButton>
+    <IonButton shape="round" fill="outline">Outline + Round</IonButton>
+
+    {/*-- Icons --*/}
+    <IonButton>
+      <IonIcon slot="start" name="star" />
+      Left Icon
+    </IonButton>
+
+    <IonButton>
+      Right Icon
+      <IonIcon slot="end" name="star" />
+    </IonButton>
+
+    <IonButton>
+      <IonIcon slot="icon-only" name="star" />
+    </IonButton>
+
+    {/*-- Sizes --*/}
+    <IonButton size="large">Large</IonButton>
+    <IonButton>Default</IonButton>
+    <IonButton size="small">Small</IonButton>
+  </>
+);
+
+export default Example;
+```
diff --git a/core/src/components/buttons/readme.md b/core/src/components/buttons/readme.md
index 675505e594..a444d7674c 100644
--- a/core/src/components/buttons/readme.md
+++ b/core/src/components/buttons/readme.md
@@ -103,6 +103,56 @@ The `<ion-buttons>` element can be positioned inside of the toolbar using a name
 ```
 
 
+### React
+
+```tsx
+import React from 'react';
+
+import { IonButtons, IonToolbar, IonBackButton, IonTitle, IonButton, IonIcon, IonMenuButton } from '@ionic/react';
+
+const Example: React.SFC<{}> = () => (
+  <>
+    <IonToolbar>
+      <IonButtons slot="start">
+        <IonBackButton goBack={() => {}} />
+      </IonButtons>
+      <IonTitle>Back Button</IonTitle>
+    </IonToolbar>
+
+    <IonToolbar>
+      <IonButtons slot="secondary">
+        <IonButton>
+          <IonIcon slot="icon-only" name="contact" />
+        </IonButton>
+        <IonButton> />
+          <IonIcon slot="icon-only" name="search" />
+        </IonButton>
+      </IonButtons>
+      <IonTitle>Default Buttons</IonTitle>
+      <IonButtons slot="primary">
+        <IonButton color="secondary"> />
+          <IonIcon slot="icon-only" name="more" />
+        </IonButton>
+      </IonButtons>
+    </IonToolbar>
+
+    <IonToolbar>
+      <IonButtons slot="primary">
+        <IonButton onClick={() => {}}>
+          <IonIcon slot="icon-only" name="star" />
+        </IonButton>
+      </IonButtons>
+      <IonTitle>Right side menu toggle</IonTitle>
+      <IonButtons slot="end">
+        <IonMenuButton autoHide={false} />
+      </IonButtons>
+    </IonToolbar>
+  </>
+);
+
+export default Example;
+
+
 
 ----------------------------------------------
 
diff --git a/core/src/components/buttons/usage/react.md b/core/src/components/buttons/usage/react.md
new file mode 100644
index 0000000000..421b8a91b8
--- /dev/null
+++ b/core/src/components/buttons/usage/react.md
@@ -0,0 +1,46 @@
+```tsx
+import React from 'react';
+
+import { IonButtons, IonToolbar, IonBackButton, IonTitle, IonButton, IonIcon, IonMenuButton } from '@ionic/react';
+
+const Example: React.SFC<{}> = () => (
+  <>
+    <IonToolbar>
+      <IonButtons slot="start">
+        <IonBackButton goBack={() => {}} />
+      </IonButtons>
+      <IonTitle>Back Button</IonTitle>
+    </IonToolbar>
+
+    <IonToolbar>
+      <IonButtons slot="secondary">
+        <IonButton>
+          <IonIcon slot="icon-only" name="contact" />
+        </IonButton>
+        <IonButton> />
+          <IonIcon slot="icon-only" name="search" />
+        </IonButton>
+      </IonButtons>
+      <IonTitle>Default Buttons</IonTitle>
+      <IonButtons slot="primary">
+        <IonButton color="secondary"> />
+          <IonIcon slot="icon-only" name="more" />
+        </IonButton>
+      </IonButtons>
+    </IonToolbar>
+
+    <IonToolbar>
+      <IonButtons slot="primary">
+        <IonButton onClick={() => {}}>
+          <IonIcon slot="icon-only" name="star" />
+        </IonButton>
+      </IonButtons>
+      <IonTitle>Right side menu toggle</IonTitle>
+      <IonButtons slot="end">
+        <IonMenuButton autoHide={false} />
+      </IonButtons>
+    </IonToolbar>
+  </>
+);
+
+export default Example;
diff --git a/core/src/components/card/readme.md b/core/src/components/card/readme.md
index 2e84bfb69e..0a87e7dcce 100644
--- a/core/src/components/card/readme.md
+++ b/core/src/components/card/readme.md
@@ -63,6 +63,68 @@ sub-components to reflect this. Please see `ion-card-content`,
 ```
 
 
+### React
+
+```tsx
+import React from 'react';
+
+import { IonCard, IonCardHeader, IonCardSubtitle, IonCardTitle, IonCardContent, IonItem, IonIcon, IonLabel, IonButton } from '@ionic/react';
+
+const Example: React.SFC<{}> = () => (
+  <>
+    <IonCard>
+      <IonCardHeader>
+        <IonCardSubtitle>Card Subtitle</IonCardSubtitle>
+        <IonCardTitle>Card Title</IonCardTitle>
+      </IonCardHeader>
+
+      <IonCardContent>
+        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.
+      </IonCardContent>
+    </IonCard>
+
+    <IonCard>
+      <IonItem>
+        <IonIcon name="pin" slot="start" />
+        <IonLabel>ion-item in a card, icon left, button right</IonLabel>
+        <IonButton fill="outline" slot="end">View</IonButton>
+      </IonItem>
+
+      <IonCardContent>
+        This is content, without any paragraph or header tags,
+        within an ion-cardContent element.
+      </IonCardContent>
+    </IonCard>
+
+    <IonCard>
+      <IonItem href="#" class="activated">
+        <IonIcon name="wifi" slot="start" />
+        <IonLabel>Card Link Item 1 .activated</IonLabel>
+      </IonItem>
+
+      <IonItem href="#">
+        <IonIcon name="wine" slot="start" />
+        <IonLabel>Card Link Item 2</IonLabel>
+      </IonItem>
+
+      <IonItem class="activated">
+        <IonIcon name="warning" slot="start" />
+        <IonLabel>Card Button Item 1 .activated</IonLabel>
+      </IonItem>
+
+      <IonItem>
+        <IonIcon name="walk" slot="start" />
+        <IonLabel>Card Button Item 2</IonLabel>
+      </IonItem>
+    </IonCard>
+  </>
+);
+
+export default Example;
+```
+
+
 
 ## Properties
 
diff --git a/core/src/components/card/usage/react.md b/core/src/components/card/usage/react.md
new file mode 100644
index 0000000000..b27cda8f35
--- /dev/null
+++ b/core/src/components/card/usage/react.md
@@ -0,0 +1,58 @@
+```tsx
+import React from 'react';
+
+import { IonCard, IonCardHeader, IonCardSubtitle, IonCardTitle, IonCardContent, IonItem, IonIcon, IonLabel, IonButton } from '@ionic/react';
+
+const Example: React.SFC<{}> = () => (
+  <>
+    <IonCard>
+      <IonCardHeader>
+        <IonCardSubtitle>Card Subtitle</IonCardSubtitle>
+        <IonCardTitle>Card Title</IonCardTitle>
+      </IonCardHeader>
+
+      <IonCardContent>
+        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.
+      </IonCardContent>
+    </IonCard>
+
+    <IonCard>
+      <IonItem>
+        <IonIcon name="pin" slot="start" />
+        <IonLabel>ion-item in a card, icon left, button right</IonLabel>
+        <IonButton fill="outline" slot="end">View</IonButton>
+      </IonItem>
+
+      <IonCardContent>
+        This is content, without any paragraph or header tags,
+        within an ion-cardContent element.
+      </IonCardContent>
+    </IonCard>
+
+    <IonCard>
+      <IonItem href="#" class="activated">
+        <IonIcon name="wifi" slot="start" />
+        <IonLabel>Card Link Item 1 .activated</IonLabel>
+      </IonItem>
+
+      <IonItem href="#">
+        <IonIcon name="wine" slot="start" />
+        <IonLabel>Card Link Item 2</IonLabel>
+      </IonItem>
+
+      <IonItem class="activated">
+        <IonIcon name="warning" slot="start" />
+        <IonLabel>Card Button Item 1 .activated</IonLabel>
+      </IonItem>
+
+      <IonItem>
+        <IonIcon name="walk" slot="start" />
+        <IonLabel>Card Button Item 2</IonLabel>
+      </IonItem>
+    </IonCard>
+  </>
+);
+
+export default Example;
+```
diff --git a/core/src/components/checkbox/readme.md b/core/src/components/checkbox/readme.md
index 502bdac6c3..d5a9960b6f 100644
--- a/core/src/components/checkbox/readme.md
+++ b/core/src/components/checkbox/readme.md
@@ -95,6 +95,52 @@ export class HomePage {
 ```
 
 
+### React
+
+```tsx
+import React from 'react';
+
+import { IonCheckbox, IonList, IonItem, IonLabel } from '@ionic/react';
+
+const form = [
+  { val: 'Pepperoni', isChecked: true },
+  { val: 'Sausage', isChecked: false },
+  { val: 'Mushroom', isChecked: false }
+];
+
+const CheckboxExample: React.SFC<{}> = () => (
+  <>
+    {/*-- Default Checkbox --*/}
+    <IonCheckbox />
+
+    {/*-- Disabled Checkbox --*/}
+    <IonCheckbox disabled={true} />
+
+    {/*-- Checked Checkbox --*/}
+    <IonCheckbox checked={true} />
+
+    {/*-- Checkbox Colors --*/}
+    <IonCheckbox color="primary" />
+    <IonCheckbox color="secondary" />
+    <IonCheckbox color="danger" />
+    <IonCheckbox color="light" />
+    <IonCheckbox color="dark" />
+
+    {/*-- Checkboxes in a List --*/}
+    <IonList>
+      { form.map(({val, isChecked}) => (
+        <IonItem key={val}>
+          <IonLabel>{{val}}</IonLabel>
+          <IonCheckbox slot="end" value={val} checked={isChecked} />
+        </IonItem>
+      )) }
+    </IonList>
+  </>
+);
+
+export default CheckboxExample;
+
+
 
 ## Properties
 
diff --git a/core/src/components/checkbox/usage/react.md b/core/src/components/checkbox/usage/react.md
new file mode 100644
index 0000000000..0041c36107
--- /dev/null
+++ b/core/src/components/checkbox/usage/react.md
@@ -0,0 +1,43 @@
+```tsx
+import React from 'react';
+
+import { IonCheckbox, IonList, IonItem, IonLabel } from '@ionic/react';
+
+const form = [
+  { val: 'Pepperoni', isChecked: true },
+  { val: 'Sausage', isChecked: false },
+  { val: 'Mushroom', isChecked: false }
+];
+
+const CheckboxExample: React.SFC<{}> = () => (
+  <>
+    {/*-- Default Checkbox --*/}
+    <IonCheckbox />
+
+    {/*-- Disabled Checkbox --*/}
+    <IonCheckbox disabled={true} />
+
+    {/*-- Checked Checkbox --*/}
+    <IonCheckbox checked={true} />
+
+    {/*-- Checkbox Colors --*/}
+    <IonCheckbox color="primary" />
+    <IonCheckbox color="secondary" />
+    <IonCheckbox color="danger" />
+    <IonCheckbox color="light" />
+    <IonCheckbox color="dark" />
+
+    {/*-- Checkboxes in a List --*/}
+    <IonList>
+      { form.map(({val, isChecked}) => (
+        <IonItem key={val}>
+          <IonLabel>{{val}}</IonLabel>
+          <IonCheckbox slot="end" value={val} checked={isChecked} />
+        </IonItem>
+      )) }
+    </IonList>
+  </>
+);
+
+export default CheckboxExample;
+
diff --git a/core/src/components/chip/readme.md b/core/src/components/chip/readme.md
index a786897c77..0a54520447 100644
--- a/core/src/components/chip/readme.md
+++ b/core/src/components/chip/readme.md
@@ -53,6 +53,61 @@ Chips represent complex entities in small blocks, such as a contact. A chip can
 ```
 
 
+### React
+
+```tsx
+import React from 'react';
+
+import { IonChip, IonLabel, IonIcon, IonAvatar } from '@ionic/react';
+
+const ChipExample: React.SFC<{}> = () => (
+  <>
+    <IonChip>
+      <IonLabel>Default</IonLabel>
+    </IonChip>
+
+    <IonChip>
+      <IonLabel color="secondary">Secondary Label</IonLabel>
+    </IonChip>
+
+    <IonChip color="secondary">
+      <IonLabel color="dark">Secondary w/ Dark label</IonLabel>
+    </IonChip>
+
+    <IonChip>
+      <IonIcon name="pin" />
+      <IonLabel>Default</IonLabel>
+    </IonChip>
+
+    <IonChip>
+      <IonIcon name="heart" color="dark" />
+      <IonLabel>Default</IonLabel>
+    </IonChip>
+
+    <IonChip>
+      <IonLabel>Button Chip</IonLabel>
+      <IonIcon name="close-circle" />
+    </IonChip>
+
+    <IonChip>
+      <IonIcon name="pin" color="primary" />
+      <IonLabel>Icon Chip</IonLabel>
+      <IonIcon name="close" />
+    </IonChip>
+
+    <IonChip>
+      <IonAvatar>
+        <img src="https://gravatar.com/avatar/dba6bae8c566f9d4041fb9cd9ada7741?d=identicon&f=y" />
+      </IonAvatar>
+      <IonLabel>Avatar Chip</IonLabel>
+      <IonIcon name="close-circle" />
+    </IonChip>
+  </>
+);
+
+export default ChipExample;
+
+
 
 ## Properties
 
diff --git a/core/src/components/chip/usage/react.md b/core/src/components/chip/usage/react.md
new file mode 100644
index 0000000000..e6b89da8a5
--- /dev/null
+++ b/core/src/components/chip/usage/react.md
@@ -0,0 +1,51 @@
+```tsx
+import React from 'react';
+
+import { IonChip, IonLabel, IonIcon, IonAvatar } from '@ionic/react';
+
+const ChipExample: React.SFC<{}> = () => (
+  <>
+    <IonChip>
+      <IonLabel>Default</IonLabel>
+    </IonChip>
+
+    <IonChip>
+      <IonLabel color="secondary">Secondary Label</IonLabel>
+    </IonChip>
+
+    <IonChip color="secondary">
+      <IonLabel color="dark">Secondary w/ Dark label</IonLabel>
+    </IonChip>
+
+    <IonChip>
+      <IonIcon name="pin" />
+      <IonLabel>Default</IonLabel>
+    </IonChip>
+
+    <IonChip>
+      <IonIcon name="heart" color="dark" />
+      <IonLabel>Default</IonLabel>
+    </IonChip>
+
+    <IonChip>
+      <IonLabel>Button Chip</IonLabel>
+      <IonIcon name="close-circle" />
+    </IonChip>
+
+    <IonChip>
+      <IonIcon name="pin" color="primary" />
+      <IonLabel>Icon Chip</IonLabel>
+      <IonIcon name="close" />
+    </IonChip>
+
+    <IonChip>
+      <IonAvatar>
+        <img src="https://gravatar.com/avatar/dba6bae8c566f9d4041fb9cd9ada7741?d=identicon&f=y" />
+      </IonAvatar>
+      <IonLabel>Avatar Chip</IonLabel>
+      <IonIcon name="close-circle" />
+    </IonChip>
+  </>
+);
+
+export default ChipExample;
diff --git a/core/src/components/content/readme.md b/core/src/components/content/readme.md
index d122cf6735..02549e5428 100644
--- a/core/src/components/content/readme.md
+++ b/core/src/components/content/readme.md
@@ -36,6 +36,26 @@ content.addEventListener('ionScrollEnd', () => console.log('scroll end'));
 ```
 
 
+### React
+
+```tsx
+import React from 'react';
+
+import { IonContent } from '@ionic/react';
+
+const Example: React.SFC<{}> = () => (
+  <IonContent
+    scrollEvents={true}
+    onIonScrollStart={() => {}}
+    onIonScroll={() => {}}
+    onIonScrollEnd={() => {}}>
+  </IonContent>
+);
+
+export default Example;
+```
+
+
 
 ## Properties
 
diff --git a/core/src/components/content/usage/react.md b/core/src/components/content/usage/react.md
new file mode 100644
index 0000000000..a3c0f0d280
--- /dev/null
+++ b/core/src/components/content/usage/react.md
@@ -0,0 +1,16 @@
+```tsx
+import React from 'react';
+
+import { IonContent } from '@ionic/react';
+
+const Example: React.SFC<{}> = () => (
+  <IonContent
+    scrollEvents={true}
+    onIonScrollStart={() => {}}
+    onIonScroll={() => {}}
+    onIonScrollEnd={() => {}}>
+  </IonContent>
+);
+
+export default Example;
+```
diff --git a/core/src/components/datetime/readme.md b/core/src/components/datetime/readme.md
index 6578ac2132..d3e36c9205 100644
--- a/core/src/components/datetime/readme.md
+++ b/core/src/components/datetime/readme.md
@@ -430,6 +430,134 @@ customPickerOptions.pickerOptions = customPickerButtons;
 ```
 
 
+### React
+
+```tsx
+import React from 'react';
+
+import { IonItem, IonLabel, IonDatetime } from '@ionic/react';
+
+const customYearValues = [2020, 2016, 2008, 2004, 2000, 1996];
+
+const customDayShortNames = [
+  's\u00f8n',
+  'man',
+  'tir',
+  'ons',
+  'tor',
+  'fre',
+  'l\u00f8r'
+];
+
+const Example: React.SFC<{}> = () => (
+  <>
+    <IonItem>
+      <IonLabel>MMMM</IonLabel>
+      <IonDatetime displayFormat="MMMM" value="2012-12-15T13:47:20.789"></IonDatetime>
+    </IonItem>
+
+    <IonItem>
+      <IonLabel>MM DD YY</IonLabel>
+      <IonDatetime displayFormat="MM DD YY" placeholder="Select Date"></IonDatetime>
+    </IonItem>
+
+    <IonItem>
+      <IonLabel>Disabled</IonLabel>
+      <IonDatetime id="dynamicDisabled" displayFormat="MM DD YY" disabled value="1994-12-15"></IonDatetime>
+    </IonItem>
+
+    <IonItem>
+      <IonLabel>YYYY</IonLabel>
+      <IonDatetime pickerOptions={{
+          buttons: [
+            {
+              text: 'Save',
+              handler: () => console.log('Clicked Save!')
+            }, {
+              text: 'Log',
+              handler: () => {
+                console.log('Clicked Log. Do not Dismiss.');
+                return false;
+              }
+            }
+          ]
+        }}
+        placeholder="Custom Options" displayFormat="YYYY" min="1981" max="2002"></IonDatetime>
+    </IonItem>
+
+    <IonItem>
+      <IonLabel position="stacked">MMMM YY</IonLabel>
+      <IonDatetime displayFormat="MMMM YY" min="1989-06-04" max="2004-08-23" value="1994-12-15T13:47:20.789"></IonDatetime>
+    </IonItem>
+
+    <IonItem>
+      <IonLabel position="floating">MM/DD/YYYY</IonLabel>
+      <IonDatetime displayFormat="MM/DD/YYYY" min="1994-03-14" max="2012-12-09" value="2002-09-23T15:03:46.789"></IonDatetime>
+    </IonItem>
+
+    <IonItem>
+      <IonLabel position="floating">MM/DD/YYYY</IonLabel>
+      <IonDatetime displayFormat="MM/DD/YYYY" min="1994-03-14" max="2012-12-09"></IonDatetime>
+    </IonItem>
+
+    <IonItem>
+      <IonLabel>DDD. MMM DD, YY (custom locale)</IonLabel>
+      <IonDatetime
+        value="1995-04-15"
+        min="1990-02"
+        max="2000"
+        dayShortNames={customDayShortNames}
+        displayFormat="DDD. MMM DD, YY"
+        monthShortNames="jan, feb, mar, apr, mai, jun, jul, aug, sep, okt, nov, des"
+      ></IonDatetime>
+    </IonItem>
+
+    <IonItem>
+      <IonLabel>D MMM YYYY H:mm</IonLabel>
+      <IonDatetime displayFormat="D MMM YYYY H:mm" min="1997" max="2010" value="2005-06-17T11:06Z"></IonDatetime>
+    </IonItem>
+
+    <IonItem>
+      <IonLabel>DDDD MMM D, YYYY</IonLabel>
+      <IonDatetime displayFormat="DDDD MMM D, YYYY" min="2005" max="2016" value="2008-09-02"></IonDatetime>
+    </IonItem>
+
+    <IonItem>
+      <IonLabel>HH:mm</IonLabel>
+      <IonDatetime displayFormat="HH:mm"></IonDatetime>
+    </IonItem>
+
+    <IonItem>
+      <IonLabel>h:mm a</IonLabel>
+      <IonDatetime displayFormat="h:mm a"></IonDatetime>
+    </IonItem>
+
+    <IonItem>
+      <IonLabel>hh:mm A (15 min steps)</IonLabel>
+      <IonDatetime displayFormat="h:mm A" minuteValues="0,15,30,45"></IonDatetime>
+    </IonItem>
+
+    <IonItem>
+      <IonLabel>Leap years, summer months</IonLabel>
+      <IonDatetime displayFormat="MM/YYYY" pickerFormat="MMMM YYYY" monthValues="6,7,8" yearValues={customYearValues}></IonDatetime>
+    </IonItem>
+
+    <IonItem>
+      <IonLabel>Specific days/months/years</IonLabel>
+      <IonDatetime
+        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"
+      ></IonDatetime>
+    </IonItem>
+  </>
+);
+
+export default Example;
+```
+
+
 
 ## Properties
 
diff --git a/core/src/components/datetime/usage/react.md b/core/src/components/datetime/usage/react.md
new file mode 100644
index 0000000000..08608bdd02
--- /dev/null
+++ b/core/src/components/datetime/usage/react.md
@@ -0,0 +1,124 @@
+```tsx
+import React from 'react';
+
+import { IonItem, IonLabel, IonDatetime } from '@ionic/react';
+
+const customYearValues = [2020, 2016, 2008, 2004, 2000, 1996];
+
+const customDayShortNames = [
+  's\u00f8n',
+  'man',
+  'tir',
+  'ons',
+  'tor',
+  'fre',
+  'l\u00f8r'
+];
+
+const Example: React.SFC<{}> = () => (
+  <>
+    <IonItem>
+      <IonLabel>MMMM</IonLabel>
+      <IonDatetime displayFormat="MMMM" value="2012-12-15T13:47:20.789"></IonDatetime>
+    </IonItem>
+
+    <IonItem>
+      <IonLabel>MM DD YY</IonLabel>
+      <IonDatetime displayFormat="MM DD YY" placeholder="Select Date"></IonDatetime>
+    </IonItem>
+
+    <IonItem>
+      <IonLabel>Disabled</IonLabel>
+      <IonDatetime id="dynamicDisabled" displayFormat="MM DD YY" disabled value="1994-12-15"></IonDatetime>
+    </IonItem>
+
+    <IonItem>
+      <IonLabel>YYYY</IonLabel>
+      <IonDatetime pickerOptions={{
+          buttons: [
+            {
+              text: 'Save',
+              handler: () => console.log('Clicked Save!')
+            }, {
+              text: 'Log',
+              handler: () => {
+                console.log('Clicked Log. Do not Dismiss.');
+                return false;
+              }
+            }
+          ]
+        }}
+        placeholder="Custom Options" displayFormat="YYYY" min="1981" max="2002"></IonDatetime>
+    </IonItem>
+
+    <IonItem>
+      <IonLabel position="stacked">MMMM YY</IonLabel>
+      <IonDatetime displayFormat="MMMM YY" min="1989-06-04" max="2004-08-23" value="1994-12-15T13:47:20.789"></IonDatetime>
+    </IonItem>
+
+    <IonItem>
+      <IonLabel position="floating">MM/DD/YYYY</IonLabel>
+      <IonDatetime displayFormat="MM/DD/YYYY" min="1994-03-14" max="2012-12-09" value="2002-09-23T15:03:46.789"></IonDatetime>
+    </IonItem>
+
+    <IonItem>
+      <IonLabel position="floating">MM/DD/YYYY</IonLabel>
+      <IonDatetime displayFormat="MM/DD/YYYY" min="1994-03-14" max="2012-12-09"></IonDatetime>
+    </IonItem>
+
+    <IonItem>
+      <IonLabel>DDD. MMM DD, YY (custom locale)</IonLabel>
+      <IonDatetime
+        value="1995-04-15"
+        min="1990-02"
+        max="2000"
+        dayShortNames={customDayShortNames}
+        displayFormat="DDD. MMM DD, YY"
+        monthShortNames="jan, feb, mar, apr, mai, jun, jul, aug, sep, okt, nov, des"
+      ></IonDatetime>
+    </IonItem>
+
+    <IonItem>
+      <IonLabel>D MMM YYYY H:mm</IonLabel>
+      <IonDatetime displayFormat="D MMM YYYY H:mm" min="1997" max="2010" value="2005-06-17T11:06Z"></IonDatetime>
+    </IonItem>
+
+    <IonItem>
+      <IonLabel>DDDD MMM D, YYYY</IonLabel>
+      <IonDatetime displayFormat="DDDD MMM D, YYYY" min="2005" max="2016" value="2008-09-02"></IonDatetime>
+    </IonItem>
+
+    <IonItem>
+      <IonLabel>HH:mm</IonLabel>
+      <IonDatetime displayFormat="HH:mm"></IonDatetime>
+    </IonItem>
+
+    <IonItem>
+      <IonLabel>h:mm a</IonLabel>
+      <IonDatetime displayFormat="h:mm a"></IonDatetime>
+    </IonItem>
+
+    <IonItem>
+      <IonLabel>hh:mm A (15 min steps)</IonLabel>
+      <IonDatetime displayFormat="h:mm A" minuteValues="0,15,30,45"></IonDatetime>
+    </IonItem>
+
+    <IonItem>
+      <IonLabel>Leap years, summer months</IonLabel>
+      <IonDatetime displayFormat="MM/YYYY" pickerFormat="MMMM YYYY" monthValues="6,7,8" yearValues={customYearValues}></IonDatetime>
+    </IonItem>
+
+    <IonItem>
+      <IonLabel>Specific days/months/years</IonLabel>
+      <IonDatetime
+        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"
+      ></IonDatetime>
+    </IonItem>
+  </>
+);
+
+export default Example;
+```
diff --git a/core/src/components/fab-button/readme.md b/core/src/components/fab-button/readme.md
index 711beb2219..50b9a1793a 100644
--- a/core/src/components/fab-button/readme.md
+++ b/core/src/components/fab-button/readme.md
@@ -36,6 +36,39 @@ If the FAB button is not wrapped with `<ion-fab>`, it will scroll with the conte
 ```
 
 
+### React
+
+```tsx
+import React from 'react';
+
+import { IonContent, IonFab, IonFabButton } from '@ionic/react';
+
+const Example: React.SFC<{}> = () => (
+  <IonContent>
+
+    {/*-- Fixed Floating Action Button that does not scroll with the content --*/}
+    <IonFab>
+      <IonFabButton>Button</IonFabButton>
+    </IonFab>
+
+    {/*-- Default Floating Action Button that scrolls with the content.--*/}
+    <IonFabButton>Default</IonFabButton>
+
+    {/*-- Mini --*/}
+    <IonFabButton size="small">Mini</IonFabButton>
+
+    {/*-- Colors --*/}
+    <IonFabButton color="primary">Primary</IonFabButton>
+    <IonFabButton color="secondary">Secondary</IonFabButton>
+    <IonFabButton color="danger">Danger</IonFabButton>
+    <IonFabButton color="light">Light</IonFabButton>
+    <IonFabButton color="dark">Dark</IonFabButton>
+  </IonContent>
+);
+
+export default Example
+
+
 
 ## Properties
 
diff --git a/core/src/components/fab-button/usage/react.md b/core/src/components/fab-button/usage/react.md
new file mode 100644
index 0000000000..adaeae5b6a
--- /dev/null
+++ b/core/src/components/fab-button/usage/react.md
@@ -0,0 +1,29 @@
+```tsx
+import React from 'react';
+
+import { IonContent, IonFab, IonFabButton } from '@ionic/react';
+
+const Example: React.SFC<{}> = () => (
+  <IonContent>
+
+    {/*-- Fixed Floating Action Button that does not scroll with the content --*/}
+    <IonFab>
+      <IonFabButton>Button</IonFabButton>
+    </IonFab>
+
+    {/*-- Default Floating Action Button that scrolls with the content.--*/}
+    <IonFabButton>Default</IonFabButton>
+
+    {/*-- Mini --*/}
+    <IonFabButton size="small">Mini</IonFabButton>
+
+    {/*-- Colors --*/}
+    <IonFabButton color="primary">Primary</IonFabButton>
+    <IonFabButton color="secondary">Secondary</IonFabButton>
+    <IonFabButton color="danger">Danger</IonFabButton>
+    <IonFabButton color="light">Light</IonFabButton>
+    <IonFabButton color="dark">Dark</IonFabButton>
+  </IonContent>
+);
+
+export default Example
diff --git a/core/src/components/fab-list/readme.md b/core/src/components/fab-list/readme.md
index 611a0e29ad..90b78da0fe 100644
--- a/core/src/components/fab-list/readme.md
+++ b/core/src/components/fab-list/readme.md
@@ -27,6 +27,34 @@ The `ion-fab-list` element is a container for multiple fab buttons. This collect
 ```
 
 
+### React
+
+```tsx
+import React from 'react';
+
+import { IonFab, IonFabButton, IonFabList } from '@ionic/react';
+
+const Example: React.SFC<{}> = () => (
+
+  <IonFab vertical="bottom" horizontal="end">
+    <IonFabButton>Share</IonFabButton>
+
+    <IonFabList side="top">
+      <IonFabButton>Facebook</IonFabButton>
+      <IonFabButton>Twitter</IonFabButton>
+      <IonFabButton>Youtube</IonFabButton>
+    </IonFabList>
+
+    <IonFabList side="start">
+      <IonFabButton>Vimeo</IonFabButton>
+    </IonFabList>
+
+  </IonFab>
+);
+
+export default Example
+
+
 
 ## Properties
 
diff --git a/core/src/components/fab-list/usage/react.md b/core/src/components/fab-list/usage/react.md
new file mode 100644
index 0000000000..e8f102cd51
--- /dev/null
+++ b/core/src/components/fab-list/usage/react.md
@@ -0,0 +1,24 @@
+```tsx
+import React from 'react';
+
+import { IonFab, IonFabButton, IonFabList } from '@ionic/react';
+
+const Example: React.SFC<{}> = () => (
+
+  <IonFab vertical="bottom" horizontal="end">
+    <IonFabButton>Share</IonFabButton>
+
+    <IonFabList side="top">
+      <IonFabButton>Facebook</IonFabButton>
+      <IonFabButton>Twitter</IonFabButton>
+      <IonFabButton>Youtube</IonFabButton>
+    </IonFabList>
+
+    <IonFabList side="start">
+      <IonFabButton>Vimeo</IonFabButton>
+    </IonFabList>
+
+  </IonFab>
+);
+
+export default Example
diff --git a/core/src/components/fab/readme.md b/core/src/components/fab/readme.md
index ec15ada098..545b396a29 100644
--- a/core/src/components/fab/readme.md
+++ b/core/src/components/fab/readme.md
@@ -92,6 +92,100 @@ Fabs are container elements that contain one or more fab buttons. They should be
 ```
 
 
+### React
+
+```tsx
+import React from 'react';
+
+import { IonContent, IonFab, IonFabButton, IonIcon, IonFabList } from '@ionic/react';
+
+const Example: React.SFC<{}> = () => (
+
+  <IonContent>
+    {/*-- fab placed to the top end --*/}
+    <IonFab vertical="top" horizontal="end" slot="fixed">
+      <IonFabButton>
+        <IonIcon name="add" />
+      </IonFabButton>
+    </IonFab>
+
+    {/*-- fab placed to the bottom end --*/}
+    <IonFab vertical="bottom" horizontal="end" slot="fixed">
+      <IonFabButton>
+        <IonIcon name="arrow-dropleft" />
+      </IonFabButton>
+    </IonFab>
+
+    {/*-- fab placed to the top start --*/}
+    <IonFab vertical="top" horizontal="start" slot="fixed">
+      <IonFabButton>
+        <IonIcon name="arrow-dropright" />
+      </IonFabButton>
+    </IonFab>
+
+    {/*-- fab placed to the bottom start --*/}
+    <IonFab vertical="bottom" horizontal="start" slot="fixed">
+      <IonFabButton>
+        <IonIcon name="arrow-dropup" />
+      </IonFabButton>
+    </IonFab>
+
+    {/*-- fab placed to the (vertical) center and start --*/}
+    <IonFab vertical="center" horizontal="start" slot="fixed">
+      <IonFabButton>
+        <IonIcon name="share" />
+      </IonFabButton>
+    </IonFab>
+
+    {/*-- fab placed to the (vertical) center and end --*/}
+    <IonFab vertical="center" horizontal="end" slot="fixed">
+      <IonFabButton>
+        <IonIcon name="add" />
+      </IonFabButton>
+    </IonFab>
+
+    {/*-- fab placed to the top and end and on the top edge of the content overlapping header --*/}
+    <IonFab vertical="top" horizontal="end" edge slot="fixed">
+      <IonFabButton>
+        <IonIcon name="person" />
+      </IonFabButton>
+    </IonFab>
+
+    {/*-- fab placed to the bottom and start and on the bottom edge of the content overlapping footer with a list to the right --*/}
+    <IonFab vertical="bottom" horizontal="start" edge slot="fixed">
+      <IonFabButton>
+        <IonIcon name="settings" />
+      </IonFabButton>
+      <IonFabList side="end">
+        <IonFabButton><IonIcon name="logo-vimeo" /></IonFabButton>
+      </IonFabList>
+    </IonFab>
+
+    {/*-- fab placed in the center of the content with a list on each side --*/}
+    <IonFab vertical="center" horizontal="center" slot="fixed">
+      <IonFabButton>
+        <IonIcon name="share" />
+      </IonFabButton>
+      <IonFabList side="top">
+        <IonFabButton><IonIcon name="logo-vimeo" /></IonFabButton>
+      </IonFabList>
+      <IonFabList side="bottom">
+        <IonFabButton><IonIcon name="logo-facebook" /></IonFabButton>
+      </IonFabList>
+      <IonFabList side="start">
+        <IonFabButton><IonIcon name="logo-instagram" /></IonFabButton>
+      </IonFabList>
+      <IonFabList side="end">
+        <IonFabButton><IonIcon name="logo-twitter" /></IonFabButton>
+      </IonFabList>
+    </IonFab>
+  </IonContent>
+);
+
+export default Example;
+```
+
+
 
 ## Properties
 
diff --git a/core/src/components/fab/usage/react.md b/core/src/components/fab/usage/react.md
new file mode 100644
index 0000000000..1a5d9dfa03
--- /dev/null
+++ b/core/src/components/fab/usage/react.md
@@ -0,0 +1,90 @@
+```tsx
+import React from 'react';
+
+import { IonContent, IonFab, IonFabButton, IonIcon, IonFabList } from '@ionic/react';
+
+const Example: React.SFC<{}> = () => (
+
+  <IonContent>
+    {/*-- fab placed to the top end --*/}
+    <IonFab vertical="top" horizontal="end" slot="fixed">
+      <IonFabButton>
+        <IonIcon name="add" />
+      </IonFabButton>
+    </IonFab>
+
+    {/*-- fab placed to the bottom end --*/}
+    <IonFab vertical="bottom" horizontal="end" slot="fixed">
+      <IonFabButton>
+        <IonIcon name="arrow-dropleft" />
+      </IonFabButton>
+    </IonFab>
+
+    {/*-- fab placed to the top start --*/}
+    <IonFab vertical="top" horizontal="start" slot="fixed">
+      <IonFabButton>
+        <IonIcon name="arrow-dropright" />
+      </IonFabButton>
+    </IonFab>
+
+    {/*-- fab placed to the bottom start --*/}
+    <IonFab vertical="bottom" horizontal="start" slot="fixed">
+      <IonFabButton>
+        <IonIcon name="arrow-dropup" />
+      </IonFabButton>
+    </IonFab>
+
+    {/*-- fab placed to the (vertical) center and start --*/}
+    <IonFab vertical="center" horizontal="start" slot="fixed">
+      <IonFabButton>
+        <IonIcon name="share" />
+      </IonFabButton>
+    </IonFab>
+
+    {/*-- fab placed to the (vertical) center and end --*/}
+    <IonFab vertical="center" horizontal="end" slot="fixed">
+      <IonFabButton>
+        <IonIcon name="add" />
+      </IonFabButton>
+    </IonFab>
+
+    {/*-- fab placed to the top and end and on the top edge of the content overlapping header --*/}
+    <IonFab vertical="top" horizontal="end" edge slot="fixed">
+      <IonFabButton>
+        <IonIcon name="person" />
+      </IonFabButton>
+    </IonFab>
+
+    {/*-- fab placed to the bottom and start and on the bottom edge of the content overlapping footer with a list to the right --*/}
+    <IonFab vertical="bottom" horizontal="start" edge slot="fixed">
+      <IonFabButton>
+        <IonIcon name="settings" />
+      </IonFabButton>
+      <IonFabList side="end">
+        <IonFabButton><IonIcon name="logo-vimeo" /></IonFabButton>
+      </IonFabList>
+    </IonFab>
+
+    {/*-- fab placed in the center of the content with a list on each side --*/}
+    <IonFab vertical="center" horizontal="center" slot="fixed">
+      <IonFabButton>
+        <IonIcon name="share" />
+      </IonFabButton>
+      <IonFabList side="top">
+        <IonFabButton><IonIcon name="logo-vimeo" /></IonFabButton>
+      </IonFabList>
+      <IonFabList side="bottom">
+        <IonFabButton><IonIcon name="logo-facebook" /></IonFabButton>
+      </IonFabList>
+      <IonFabList side="start">
+        <IonFabButton><IonIcon name="logo-instagram" /></IonFabButton>
+      </IonFabList>
+      <IonFabList side="end">
+        <IonFabButton><IonIcon name="logo-twitter" /></IonFabButton>
+      </IonFabList>
+    </IonFab>
+  </IonContent>
+);
+
+export default Example;
+```
diff --git a/core/src/components/footer/readme.md b/core/src/components/footer/readme.md
index 923affa9a5..bf00d5821e 100644
--- a/core/src/components/footer/readme.md
+++ b/core/src/components/footer/readme.md
@@ -21,6 +21,29 @@ Footer can be a wrapper for ion-toolbar to make sure the content area is sized c
 ```
 
 
+### React
+
+```tsx
+import React from 'react';
+
+import { IonContent, IonFooter, IonToolbar, IonTitle } from '@ionic/react';
+
+const Example: React.SFC<{}> = () => (
+  <>
+    <IonContent></IonContent>
+
+    <IonFooter>
+      <IonToolbar>
+        <IonTitle>Footer</IonTitle>
+      </IonToolbar>
+    </IonFooter>
+  </>
+);
+
+export default Example;
+```
+
+
 
 ## Properties
 
diff --git a/core/src/components/footer/usage/react.md b/core/src/components/footer/usage/react.md
new file mode 100644
index 0000000000..531dd19399
--- /dev/null
+++ b/core/src/components/footer/usage/react.md
@@ -0,0 +1,19 @@
+```tsx
+import React from 'react';
+
+import { IonContent, IonFooter, IonToolbar, IonTitle } from '@ionic/react';
+
+const Example: React.SFC<{}> = () => (
+  <>
+    <IonContent></IonContent>
+
+    <IonFooter>
+      <IonToolbar>
+        <IonTitle>Footer</IonTitle>
+      </IonToolbar>
+    </IonFooter>
+  </>
+);
+
+export default Example;
+```
diff --git a/core/src/components/grid/readme.md b/core/src/components/grid/readme.md
index b357c351d6..7f44fad496 100644
--- a/core/src/components/grid/readme.md
+++ b/core/src/components/grid/readme.md
@@ -195,6 +195,197 @@ See [Grid Layout](/docs/layout/grid) for more information.
 ```
 
 
+### React
+
+```tsx
+import React from 'react';
+
+import { IonGrid, IonRow, IonCol } from '@ionic/react';
+
+const Example: React.SFC<{}> = () => (
+  <IonGrid>
+    <IonRow>
+      <IonCol>
+        ion-col
+      </IonCol>
+      <IonCol>
+        ion-col
+      </IonCol>
+      <IonCol>
+        ion-col
+      </IonCol>
+      <IonCol>
+        ion-col
+      </IonCol>
+    </IonRow>
+
+    <IonRow>
+      <IonCol size="6">
+        ion-col size="6"
+      </IonCol>
+      <IonCol>
+        ion-col
+      </IonCol>
+      <IonCol>
+        ion-col
+      </IonCol>
+    </IonRow>
+
+    <IonRow>
+      <IonCol size="3">
+        ion-col size="3"
+      </IonCol>
+      <IonCol>
+        ion-col
+      </IonCol>
+      <IonCol size="3">
+        ion-col size="3"
+      </IonCol>
+    </IonRow>
+
+    <IonRow>
+      <IonCol size="3">
+        ion-col size="3"
+      </IonCol>
+      <IonCol size="3" offset="3">
+        ion-col size="3" offset="3"
+      </IonCol>
+    </IonRow>
+
+    <IonRow>
+      <IonCol>
+        ion-col
+      </IonCol>
+      <IonCol>
+        ion-col
+        <br/>#
+      </IonCol>
+      <IonCol>
+        ion-col
+        <br/>#
+        <br/>#
+      </IonCol>
+      <IonCol>
+        ion-col
+        <br/>#
+        <br/>#
+        <br/>#
+      </IonCol>
+    </IonRow>
+
+    <IonRow>
+      <IonCol align-self-start>
+        ion-col start
+      </IonCol>
+      <IonCol align-self-center>
+        ion-col center
+      </IonCol>
+      <IonCol align-self-end>
+        ion-col end
+      </IonCol>
+      <IonCol>
+        ion-col
+        <br/>#
+        <br/>#
+      </IonCol>
+    </IonRow>
+
+    <IonRow align-items-start>
+      <IonCol>
+        start ion-col
+      </IonCol>
+      <IonCol>
+        start ion-col
+      </IonCol>
+      <IonCol align-self-end>
+        start ion-col end
+      </IonCol>
+      <IonCol>
+        ion-col
+        <br/>#
+        <br/>#
+      </IonCol>
+    </IonRow>
+
+    <IonRow align-items-center>
+      <IonCol>
+        center ion-col
+      </IonCol>
+      <IonCol>
+        center ion-col
+      </IonCol>
+      <IonCol>
+        center ion-col
+      </IonCol>
+      <IonCol>
+        ion-col
+        <br/>#
+        <br/>#
+      </IonCol>
+    </IonRow>
+
+    <IonRow align-items-end>
+      <IonCol>
+        end ion-col
+      </IonCol>
+      <IonCol align-self-start>
+        end ion-col start
+      </IonCol>
+      <IonCol>
+        end ion-col
+      </IonCol>
+      <IonCol>
+        ion-col
+        <br/>#
+        <br/>#
+      </IonCol>
+    </IonRow>
+
+    <IonRow>
+      <IonCol size="12" size-sm>
+        ion-col size="12" size-sm
+      </IonCol>
+      <IonCol size="12" size-sm>
+        ion-col size="12" size-sm
+      </IonCol>
+      <IonCol size="12" size-sm>
+        ion-col size="12" size-sm
+      </IonCol>
+      <IonCol size="12" size-sm>
+        ion-col size="12" size-sm
+      </IonCol>
+    </IonRow>
+
+    <IonRow>
+      <IonCol size="12" size-md>
+        ion-col size="12" size-md
+      </IonCol>
+      <IonCol size="12" size-md>
+        ion-col size="12" size-md
+      </IonCol>
+      <IonCol size="12" size-md>
+        ion-col size="12" size-md
+      </IonCol>
+      <IonCol size="12" size-md>
+        ion-col size="12" size-md
+      </IonCol>
+    </IonRow>
+
+    <IonRow>
+      <IonCol size="6" size-lg offset="3">
+        ion-col size="6" size-lg offset="3"
+      </IonCol>
+      <IonCol size="3" size-lg>
+        ion-col size="3" size-lg
+      </IonCol>
+    </IonRow>
+  </IonGrid>
+);
+
+export default Example;
+```
+
+
 
 ## Properties
 
diff --git a/core/src/components/grid/usage/react.md b/core/src/components/grid/usage/react.md
new file mode 100644
index 0000000000..1af3519ba4
--- /dev/null
+++ b/core/src/components/grid/usage/react.md
@@ -0,0 +1,187 @@
+```tsx
+import React from 'react';
+
+import { IonGrid, IonRow, IonCol } from '@ionic/react';
+
+const Example: React.SFC<{}> = () => (
+  <IonGrid>
+    <IonRow>
+      <IonCol>
+        ion-col
+      </IonCol>
+      <IonCol>
+        ion-col
+      </IonCol>
+      <IonCol>
+        ion-col
+      </IonCol>
+      <IonCol>
+        ion-col
+      </IonCol>
+    </IonRow>
+
+    <IonRow>
+      <IonCol size="6">
+        ion-col size="6"
+      </IonCol>
+      <IonCol>
+        ion-col
+      </IonCol>
+      <IonCol>
+        ion-col
+      </IonCol>
+    </IonRow>
+
+    <IonRow>
+      <IonCol size="3">
+        ion-col size="3"
+      </IonCol>
+      <IonCol>
+        ion-col
+      </IonCol>
+      <IonCol size="3">
+        ion-col size="3"
+      </IonCol>
+    </IonRow>
+
+    <IonRow>
+      <IonCol size="3">
+        ion-col size="3"
+      </IonCol>
+      <IonCol size="3" offset="3">
+        ion-col size="3" offset="3"
+      </IonCol>
+    </IonRow>
+
+    <IonRow>
+      <IonCol>
+        ion-col
+      </IonCol>
+      <IonCol>
+        ion-col
+        <br/>#
+      </IonCol>
+      <IonCol>
+        ion-col
+        <br/>#
+        <br/>#
+      </IonCol>
+      <IonCol>
+        ion-col
+        <br/>#
+        <br/>#
+        <br/>#
+      </IonCol>
+    </IonRow>
+
+    <IonRow>
+      <IonCol align-self-start>
+        ion-col start
+      </IonCol>
+      <IonCol align-self-center>
+        ion-col center
+      </IonCol>
+      <IonCol align-self-end>
+        ion-col end
+      </IonCol>
+      <IonCol>
+        ion-col
+        <br/>#
+        <br/>#
+      </IonCol>
+    </IonRow>
+
+    <IonRow align-items-start>
+      <IonCol>
+        start ion-col
+      </IonCol>
+      <IonCol>
+        start ion-col
+      </IonCol>
+      <IonCol align-self-end>
+        start ion-col end
+      </IonCol>
+      <IonCol>
+        ion-col
+        <br/>#
+        <br/>#
+      </IonCol>
+    </IonRow>
+
+    <IonRow align-items-center>
+      <IonCol>
+        center ion-col
+      </IonCol>
+      <IonCol>
+        center ion-col
+      </IonCol>
+      <IonCol>
+        center ion-col
+      </IonCol>
+      <IonCol>
+        ion-col
+        <br/>#
+        <br/>#
+      </IonCol>
+    </IonRow>
+
+    <IonRow align-items-end>
+      <IonCol>
+        end ion-col
+      </IonCol>
+      <IonCol align-self-start>
+        end ion-col start
+      </IonCol>
+      <IonCol>
+        end ion-col
+      </IonCol>
+      <IonCol>
+        ion-col
+        <br/>#
+        <br/>#
+      </IonCol>
+    </IonRow>
+
+    <IonRow>
+      <IonCol size="12" size-sm>
+        ion-col size="12" size-sm
+      </IonCol>
+      <IonCol size="12" size-sm>
+        ion-col size="12" size-sm
+      </IonCol>
+      <IonCol size="12" size-sm>
+        ion-col size="12" size-sm
+      </IonCol>
+      <IonCol size="12" size-sm>
+        ion-col size="12" size-sm
+      </IonCol>
+    </IonRow>
+
+    <IonRow>
+      <IonCol size="12" size-md>
+        ion-col size="12" size-md
+      </IonCol>
+      <IonCol size="12" size-md>
+        ion-col size="12" size-md
+      </IonCol>
+      <IonCol size="12" size-md>
+        ion-col size="12" size-md
+      </IonCol>
+      <IonCol size="12" size-md>
+        ion-col size="12" size-md
+      </IonCol>
+    </IonRow>
+
+    <IonRow>
+      <IonCol size="6" size-lg offset="3">
+        ion-col size="6" size-lg offset="3"
+      </IonCol>
+      <IonCol size="3" size-lg>
+        ion-col size="3" size-lg
+      </IonCol>
+    </IonRow>
+  </IonGrid>
+);
+
+export default Example;
+```
diff --git a/core/src/components/header/readme.md b/core/src/components/header/readme.md
index 771ac19b87..95b4883b39 100644
--- a/core/src/components/header/readme.md
+++ b/core/src/components/header/readme.md
@@ -30,6 +30,35 @@ It's important to note that ion-header needs to be the one of the three root ele
 ```
 
 
+### React
+
+```tsx
+import React from 'react';
+
+import { IonHeader, IonContent, IonToolbar, IonButtons, IonBackButton, IonTitle } from '@ionic/react';
+
+const Example: React.SFC<{}> = () => (
+  <>
+    <IonHeader>
+      <IonToolbar>
+        <IonButtons slot="start">
+          <IonBackButton goBack={() => {}} />
+        </IonButtons>
+        <IonTitle>My Navigation Bar</IonTitle>
+      </IonToolbar>
+
+      <IonToolbar>
+        <IonTitle>Subheader</IonTitle>
+      </IonToolbar>
+    </IonHeader>
+
+    <IonContent />
+  </>
+);
+
+export default Example
+
+
 
 ## Properties
 
diff --git a/core/src/components/header/usage/react.md b/core/src/components/header/usage/react.md
new file mode 100644
index 0000000000..230ff911c5
--- /dev/null
+++ b/core/src/components/header/usage/react.md
@@ -0,0 +1,25 @@
+```tsx
+import React from 'react';
+
+import { IonHeader, IonContent, IonToolbar, IonButtons, IonBackButton, IonTitle } from '@ionic/react';
+
+const Example: React.SFC<{}> = () => (
+  <>
+    <IonHeader>
+      <IonToolbar>
+        <IonButtons slot="start">
+          <IonBackButton goBack={() => {}} />
+        </IonButtons>
+        <IonTitle>My Navigation Bar</IonTitle>
+      </IonToolbar>
+
+      <IonToolbar>
+        <IonTitle>Subheader</IonTitle>
+      </IonToolbar>
+    </IonHeader>
+
+    <IonContent />
+  </>
+);
+
+export default Example
diff --git a/core/src/components/icon/usage/react.md b/core/src/components/icon/usage/react.md
new file mode 100644
index 0000000000..44ca934205
--- /dev/null
+++ b/core/src/components/icon/usage/react.md
@@ -0,0 +1,28 @@
+```tsx
+import React from 'react';
+
+import { IonIcon } from '@ionic/react';
+
+const Example: React.SFC<{}> = () => (
+  <>
+    {/*-- automatically uses the correct "star" icon depending on the mode --*/}
+    <IonIcon name="star" />
+
+    {/*-- explicitly set the icon for each mode --*/}
+    <IonIcon ios="ios-home" md="md-home" />
+
+    {/*-- always use the same icon, no matter what the mode is --*/}
+    <IonIcon name="ios-clock" />
+    <IonIcon name="logo-twitter" />
+
+    {/*-- use a custom svg icon --*/}
+    <IonIcon src="/path/to/external/file.svg" />
+
+    {/*-- set the icon size --*/}
+    <IonIcon size="small" name="heart" />
+    <IonIcon size="large" name="heart" />
+  </>
+);
+
+export default Example;
+```
diff --git a/core/src/components/img/readme.md b/core/src/components/img/readme.md
index 253cd7f2f2..998cc78b3e 100644
--- a/core/src/components/img/readme.md
+++ b/core/src/components/img/readme.md
@@ -22,6 +22,36 @@ Img is a tag that will lazily load an image when ever the tag is in the viewport
 ```
 
 
+### React
+
+```tsx
+import React from 'react';
+
+import { IonList, IonItem, IonThumbnail, IonImg, IonLabel } from '@ionic/react';
+
+type Item = {
+  src: string;
+  text: string
+};
+const items: Item[] = [];
+
+const Example: React.SFC<{}> = () => (
+
+  <IonList>
+    {items.map(({src, text}) =>
+      <IonItem>
+        <IonThumbnail slot="start">
+          <IonImg src={src}></IonImg>
+        </IonThumbnail>
+        <IonLabel>{text}}</IonLabel>
+      </IonItem>
+    )}
+  </IonList>
+);
+
+export default Example
+
+
 
 ## Properties
 
diff --git a/core/src/components/img/usage/react.md b/core/src/components/img/usage/react.md
new file mode 100644
index 0000000000..dfe0ae39dc
--- /dev/null
+++ b/core/src/components/img/usage/react.md
@@ -0,0 +1,26 @@
+```tsx
+import React from 'react';
+
+import { IonList, IonItem, IonThumbnail, IonImg, IonLabel } from '@ionic/react';
+
+type Item = {
+  src: string;
+  text: string
+};
+const items: Item[] = [];
+
+const Example: React.SFC<{}> = () => (
+
+  <IonList>
+    {items.map(({src, text}) =>
+      <IonItem>
+        <IonThumbnail slot="start">
+          <IonImg src={src}></IonImg>
+        </IonThumbnail>
+        <IonLabel>{text}}</IonLabel>
+      </IonItem>
+    )}
+  </IonList>
+);
+
+export default Example
diff --git a/core/src/components/infinite-scroll-content/readme.md b/core/src/components/infinite-scroll-content/readme.md
index 5cc32ec48f..9a4880bee3 100644
--- a/core/src/components/infinite-scroll-content/readme.md
+++ b/core/src/components/infinite-scroll-content/readme.md
@@ -35,6 +35,28 @@ The `ion-infinite-scroll-content` component is the default child used by the `io
 ```
 
 
+### React
+
+```tsx
+import React from 'react';
+
+import { IonContent, IonInfiniteScroll } from '@ionic/react';
+
+const Example: React.SFC<{}> = () => (
+
+  <IonContent>
+    <IonInfiniteScroll>
+      <IonInfiniteScrollContent
+        loadingSpinner="bubbles"
+        loadingText="Loading more data…">
+      </IonInfiniteScrollContent>
+    </IonInfiniteScroll>
+  </IonContent>
+);
+
+export default Example
+
+
 
 ## Properties
 
diff --git a/core/src/components/infinite-scroll-content/usage/react.md b/core/src/components/infinite-scroll-content/usage/react.md
new file mode 100644
index 0000000000..878ac44f4d
--- /dev/null
+++ b/core/src/components/infinite-scroll-content/usage/react.md
@@ -0,0 +1,18 @@
+```tsx
+import React from 'react';
+
+import { IonContent, IonInfiniteScroll } from '@ionic/react';
+
+const Example: React.SFC<{}> = () => (
+
+  <IonContent>
+    <IonInfiniteScroll>
+      <IonInfiniteScrollContent
+        loadingSpinner="bubbles"
+        loadingText="Loading more data…">
+      </IonInfiniteScrollContent>
+    </IonInfiniteScroll>
+  </IonContent>
+);
+
+export default Example
diff --git a/core/src/components/infinite-scroll/readme.md b/core/src/components/infinite-scroll/readme.md
index 5afc674b76..0bcbe6498f 100644
--- a/core/src/components/infinite-scroll/readme.md
+++ b/core/src/components/infinite-scroll/readme.md
@@ -111,6 +111,69 @@ function toggleInfiniteScroll() {
 ```
 
 
+### React
+
+```tsx
+import React from 'react';
+
+import { IonAvatar } from '@ionic/react';
+
+const Example: React.SFC<{}> = () => (
+
+  <IonContent>
+    <IonButton onClick="toggleInfiniteScroll()" expand="block">
+      Toggle Infinite Scroll
+    </IonButton>
+
+    <IonList></IonList>
+
+    <IonInfinite-scroll threshold="100px" (ionInfinite)="loadData($event)">
+      <IonInfinite-scrollContent
+        loadingSpinner="bubbles"
+        loadingText="Loading more data...">
+      </IonInfinite-scrollContent>
+    </IonInfinite-scroll>
+  </IonContent>
+
+
+
+  import { Component, ViewChild } from '@angular/core';
+  import { IonInfiniteScroll } from '@ionic/angular';
+
+  @Component({
+    selector: 'infinite-scroll-example',
+    templateUrl: 'infinite-scroll-example.html',
+    styleUrls: ['./infinite-scroll-example.css']
+  })
+  export class InfiniteScrollExample {
+    @ViewChild(IonInfiniteScroll) infiniteScroll: IonInfiniteScroll;
+
+    constructor() {}
+
+    loadData(event) {
+      setTimeout(() => {
+        console.log('Done');
+        event.target.complete();
+
+        // App logic to determine if all data is loaded
+        // and disable the infinite scroll
+        if (data.length == 1000) {
+          event.target.disabled = true;
+        }
+      }, 500);
+    }
+
+    toggleInfiniteScroll() {
+      this.infiniteScroll.disabled = !this.infiniteScroll.disabled;
+    }
+  }
+
+
+);
+
+export default Example
+
+
 
 ## Properties
 
diff --git a/core/src/components/infinite-scroll/usage/react.md b/core/src/components/infinite-scroll/usage/react.md
new file mode 100644
index 0000000000..d81ab0c062
--- /dev/null
+++ b/core/src/components/infinite-scroll/usage/react.md
@@ -0,0 +1,59 @@
+```tsx
+import React from 'react';
+
+import { IonAvatar } from '@ionic/react';
+
+const Example: React.SFC<{}> = () => (
+
+  <IonContent>
+    <IonButton onClick="toggleInfiniteScroll()" expand="block">
+      Toggle Infinite Scroll
+    </IonButton>
+
+    <IonList></IonList>
+
+    <IonInfinite-scroll threshold="100px" (ionInfinite)="loadData($event)">
+      <IonInfinite-scrollContent
+        loadingSpinner="bubbles"
+        loadingText="Loading more data...">
+      </IonInfinite-scrollContent>
+    </IonInfinite-scroll>
+  </IonContent>
+
+
+
+  import { Component, ViewChild } from '@angular/core';
+  import { IonInfiniteScroll } from '@ionic/angular';
+
+  @Component({
+    selector: 'infinite-scroll-example',
+    templateUrl: 'infinite-scroll-example.html',
+    styleUrls: ['./infinite-scroll-example.css']
+  })
+  export class InfiniteScrollExample {
+    @ViewChild(IonInfiniteScroll) infiniteScroll: IonInfiniteScroll;
+
+    constructor() {}
+
+    loadData(event) {
+      setTimeout(() => {
+        console.log('Done');
+        event.target.complete();
+
+        // App logic to determine if all data is loaded
+        // and disable the infinite scroll
+        if (data.length == 1000) {
+          event.target.disabled = true;
+        }
+      }, 500);
+    }
+
+    toggleInfiniteScroll() {
+      this.infiniteScroll.disabled = !this.infiniteScroll.disabled;
+    }
+  }
+
+
+);
+
+export default Example
diff --git a/core/src/components/input/readme.md b/core/src/components/input/readme.md
index d5f4369adb..4b11d1d5ab 100644
--- a/core/src/components/input/readme.md
+++ b/core/src/components/input/readme.md
@@ -104,6 +104,62 @@ It is meant for text `type` inputs only, such as `"text"`, `"password"`, `"email
 ```
 
 
+### React
+
+```tsx
+import React from 'react';
+
+import { IonInput, IonItem, IonLabel } from '@ionic/react';
+
+const Example: React.SFC<{}> = () => (
+  <>
+    {/*-- Default Input --*/}
+    <IonInput></IonInput>
+
+    {/*-- Input with value --*/}
+    <IonInput value="custom"></IonInput>
+
+    {/*-- Input with placeholder --*/}
+    <IonInput placeholder="Enter Input"></IonInput>
+
+    {/*-- Input with clear button when there is a value --*/}
+    <IonInput clearInput value="clear me"></IonInput>
+
+    {/*-- Number type input --*/}
+    <IonInput type="number" value="333"></IonInput>
+
+    {/*-- Disabled input --*/}
+    <IonInput value="Disabled" disabled></IonInput>
+
+    {/*-- Readonly input --*/}
+    <IonInput value="Readonly" readonly></IonInput>
+
+    {/*-- Inputs with labels --*/}
+    <IonItem>
+      <IonLabel>Default Label</IonLabel>
+      <IonInput></IonInput>
+    </IonItem>
+
+    <IonItem>
+      <IonLabel position="floating">Floating Label</IonLabel>
+      <IonInput></IonInput>
+    </IonItem>
+
+    <IonItem>
+      <IonLabel position="fixed">Fixed Label</IonLabel>
+      <IonInput></IonInput>
+    </IonItem>
+
+    <IonItem>
+      <IonLabel position="stacked">Stacked Label</IonLabel>
+      <IonInput></IonInput>
+    </IonItem>
+  </>
+);
+
+export default Example
+
+
 
 ## Properties
 
diff --git a/core/src/components/input/usage/react.md b/core/src/components/input/usage/react.md
new file mode 100644
index 0000000000..100964ef74
--- /dev/null
+++ b/core/src/components/input/usage/react.md
@@ -0,0 +1,52 @@
+```tsx
+import React from 'react';
+
+import { IonInput, IonItem, IonLabel } from '@ionic/react';
+
+const Example: React.SFC<{}> = () => (
+  <>
+    {/*-- Default Input --*/}
+    <IonInput></IonInput>
+
+    {/*-- Input with value --*/}
+    <IonInput value="custom"></IonInput>
+
+    {/*-- Input with placeholder --*/}
+    <IonInput placeholder="Enter Input"></IonInput>
+
+    {/*-- Input with clear button when there is a value --*/}
+    <IonInput clearInput value="clear me"></IonInput>
+
+    {/*-- Number type input --*/}
+    <IonInput type="number" value="333"></IonInput>
+
+    {/*-- Disabled input --*/}
+    <IonInput value="Disabled" disabled></IonInput>
+
+    {/*-- Readonly input --*/}
+    <IonInput value="Readonly" readonly></IonInput>
+
+    {/*-- Inputs with labels --*/}
+    <IonItem>
+      <IonLabel>Default Label</IonLabel>
+      <IonInput></IonInput>
+    </IonItem>
+
+    <IonItem>
+      <IonLabel position="floating">Floating Label</IonLabel>
+      <IonInput></IonInput>
+    </IonItem>
+
+    <IonItem>
+      <IonLabel position="fixed">Fixed Label</IonLabel>
+      <IonInput></IonInput>
+    </IonItem>
+
+    <IonItem>
+      <IonLabel position="stacked">Stacked Label</IonLabel>
+      <IonInput></IonInput>
+    </IonItem>
+  </>
+);
+
+export default Example
diff --git a/core/src/components/item-divider/readme.md b/core/src/components/item-divider/readme.md
index 43863db7fe..e74ac227a0 100644
--- a/core/src/components/item-divider/readme.md
+++ b/core/src/components/item-divider/readme.md
@@ -51,6 +51,59 @@ Item Dividers are block elements that can be used to separate items in a list. T
 ```
 
 
+### React
+
+```tsx
+import React from 'react';
+
+import { IonItemDivider, IonLabel, IonList, IonItem } from '@ionic/react';
+
+const Example: React.SFC<{}> = () => (
+  <>
+    <IonItemDivider>
+      <IonLabel>
+        Basic Item Divider
+      </IonLabel>
+    </IonItemDivider>
+
+    <IonItemDivider color="secondary">
+      <IonLabel>
+        Secondary Item Divider
+      </IonLabel>
+    </IonItemDivider>
+
+    {/*-- Item Dividers in a List --*/}
+    <IonList>
+      <IonItemDivider>
+        <IonLabel>
+          Section A
+        </IonLabel>
+      </IonItemDivider>
+
+      <IonItem><IonLabel>A1</IonLabel></IonItem>
+      <IonItem><IonLabel>A2</IonLabel></IonItem>
+      <IonItem><IonLabel>A3</IonLabel></IonItem>
+      <IonItem><IonLabel>A4</IonLabel></IonItem>
+      <IonItem><IonLabel>A5</IonLabel></IonItem>
+
+      <IonItemDivider>
+        <IonLabel>
+          Section B
+        </IonLabel>
+      </IonItemDivider>
+
+      <IonItem><IonLabel>B1</IonLabel></IonItem>
+      <IonItem><IonLabel>B2</IonLabel></IonItem>
+      <IonItem><IonLabel>B3</IonLabel></IonItem>
+      <IonItem><IonLabel>B4</IonLabel></IonItem>
+      <IonItem><IonLabel>B5</IonLabel></IonItem>
+    </IonList>
+  </>
+);
+
+export default Example
+
+
 
 ## Properties
 
diff --git a/core/src/components/item-divider/usage/react.md b/core/src/components/item-divider/usage/react.md
new file mode 100644
index 0000000000..9d7f5c35d8
--- /dev/null
+++ b/core/src/components/item-divider/usage/react.md
@@ -0,0 +1,49 @@
+```tsx
+import React from 'react';
+
+import { IonItemDivider, IonLabel, IonList, IonItem } from '@ionic/react';
+
+const Example: React.SFC<{}> = () => (
+  <>
+    <IonItemDivider>
+      <IonLabel>
+        Basic Item Divider
+      </IonLabel>
+    </IonItemDivider>
+
+    <IonItemDivider color="secondary">
+      <IonLabel>
+        Secondary Item Divider
+      </IonLabel>
+    </IonItemDivider>
+
+    {/*-- Item Dividers in a List --*/}
+    <IonList>
+      <IonItemDivider>
+        <IonLabel>
+          Section A
+        </IonLabel>
+      </IonItemDivider>
+
+      <IonItem><IonLabel>A1</IonLabel></IonItem>
+      <IonItem><IonLabel>A2</IonLabel></IonItem>
+      <IonItem><IonLabel>A3</IonLabel></IonItem>
+      <IonItem><IonLabel>A4</IonLabel></IonItem>
+      <IonItem><IonLabel>A5</IonLabel></IonItem>
+
+      <IonItemDivider>
+        <IonLabel>
+          Section B
+        </IonLabel>
+      </IonItemDivider>
+
+      <IonItem><IonLabel>B1</IonLabel></IonItem>
+      <IonItem><IonLabel>B2</IonLabel></IonItem>
+      <IonItem><IonLabel>B3</IonLabel></IonItem>
+      <IonItem><IonLabel>B4</IonLabel></IonItem>
+      <IonItem><IonLabel>B5</IonLabel></IonItem>
+    </IonList>
+  </>
+);
+
+export default Example
diff --git a/core/src/components/item-group/readme.md b/core/src/components/item-group/readme.md
index 5c4eb3d67c..69c10c5e59 100644
--- a/core/src/components/item-group/readme.md
+++ b/core/src/components/item-group/readme.md
@@ -117,6 +117,123 @@ Item groups are containers that organize similar items together. They can contai
 ```
 
 
+### React
+
+```tsx
+import React from 'react';
+
+import { IonItemGroup, IonItemDivider, IonLabel, IonItem, IonItemSliding, IonItemOptions, IonItemOption } from '@ionic/react';
+
+const Example: React.SFC<{}> = () => (
+  <>
+    <IonItemGroup>
+      <IonItemDivider>
+        <IonLabel>A</IonLabel>
+      </IonItemDivider>
+
+      <IonItem>
+        <IonLabel>Angola</IonLabel>
+      </IonItem>
+      <IonItem>
+        <IonLabel>Argentina</IonLabel>
+      </IonItem>
+      <IonItem>
+        <IonLabel>Armenia</IonLabel>
+      </IonItem>
+    </IonItemGroup>
+
+    <IonItemGroup>
+      <IonItemDivider>
+        <IonLabel>B</IonLabel>
+      </IonItemDivider>
+
+      <IonItem>
+        <IonLabel>Bangladesh</IonLabel>
+      </IonItem>
+      <IonItem>
+        <IonLabel>Belarus</IonLabel>
+      </IonItem>
+      <IonItem>
+        <IonLabel>Belgium</IonLabel>
+      </IonItem>
+    </IonItemGroup>
+
+
+    {/*-- They can also be used to group sliding items --*/}
+    <IonItemGroup>
+      <IonItemDivider>
+        <IonLabel>
+          Fruits
+        </IonLabel>
+      </IonItemDivider>
+
+      <IonItemSliding>
+        <IonItem>
+          <IonLabel>
+            <h3>Grapes</h3>
+          </IonLabel>
+        </IonItem>
+        <IonItemOptions>
+          <IonItemOption>
+            Favorite
+          </IonItemOption>
+        </IonItemOptions>
+      </IonItemSliding>
+
+      <IonItemSliding>
+        <IonItem>
+          <IonLabel>
+            <h3>Apples</h3>
+          </IonLabel>
+        </IonItem>
+        <IonItemOptions>
+          <IonItemOption>
+            Favorite
+          </IonItemOption>
+        </IonItemOptions>
+      </IonItemSliding>
+    </IonItemGroup>
+
+    <IonItemGroup>
+      <IonItemDivider>
+        <IonLabel>
+          Vegetables
+        </IonLabel>
+      </IonItemDivider>
+
+      <IonItemSliding>
+        <IonItem>
+          <IonLabel>
+            <h3>Carrots</h3>
+          </IonLabel>
+        </IonItem>
+        <IonItemOptions>
+          <IonItemOption>
+            Favorite
+          </IonItemOption>
+        </IonItemOptions>
+      </IonItemSliding>
+
+      <IonItemSliding>
+        <IonItem>
+          <IonLabel>
+            <h3>Celery</h3>
+          </IonLabel>
+        </IonItem>
+        <IonItemOptions>
+          <IonItemOption>
+            Favorite
+          </IonItemOption>
+        </IonItemOptions>
+      </IonItemSliding>
+    </IonItemGroup>
+  </>
+);
+
+export default Example;
+```
+
+
 
 ----------------------------------------------
 
diff --git a/core/src/components/item-group/usage/react.md b/core/src/components/item-group/usage/react.md
new file mode 100644
index 0000000000..584e59bb35
--- /dev/null
+++ b/core/src/components/item-group/usage/react.md
@@ -0,0 +1,113 @@
+```tsx
+import React from 'react';
+
+import { IonItemGroup, IonItemDivider, IonLabel, IonItem, IonItemSliding, IonItemOptions, IonItemOption } from '@ionic/react';
+
+const Example: React.SFC<{}> = () => (
+  <>
+    <IonItemGroup>
+      <IonItemDivider>
+        <IonLabel>A</IonLabel>
+      </IonItemDivider>
+
+      <IonItem>
+        <IonLabel>Angola</IonLabel>
+      </IonItem>
+      <IonItem>
+        <IonLabel>Argentina</IonLabel>
+      </IonItem>
+      <IonItem>
+        <IonLabel>Armenia</IonLabel>
+      </IonItem>
+    </IonItemGroup>
+
+    <IonItemGroup>
+      <IonItemDivider>
+        <IonLabel>B</IonLabel>
+      </IonItemDivider>
+
+      <IonItem>
+        <IonLabel>Bangladesh</IonLabel>
+      </IonItem>
+      <IonItem>
+        <IonLabel>Belarus</IonLabel>
+      </IonItem>
+      <IonItem>
+        <IonLabel>Belgium</IonLabel>
+      </IonItem>
+    </IonItemGroup>
+
+
+    {/*-- They can also be used to group sliding items --*/}
+    <IonItemGroup>
+      <IonItemDivider>
+        <IonLabel>
+          Fruits
+        </IonLabel>
+      </IonItemDivider>
+
+      <IonItemSliding>
+        <IonItem>
+          <IonLabel>
+            <h3>Grapes</h3>
+          </IonLabel>
+        </IonItem>
+        <IonItemOptions>
+          <IonItemOption>
+            Favorite
+          </IonItemOption>
+        </IonItemOptions>
+      </IonItemSliding>
+
+      <IonItemSliding>
+        <IonItem>
+          <IonLabel>
+            <h3>Apples</h3>
+          </IonLabel>
+        </IonItem>
+        <IonItemOptions>
+          <IonItemOption>
+            Favorite
+          </IonItemOption>
+        </IonItemOptions>
+      </IonItemSliding>
+    </IonItemGroup>
+
+    <IonItemGroup>
+      <IonItemDivider>
+        <IonLabel>
+          Vegetables
+        </IonLabel>
+      </IonItemDivider>
+
+      <IonItemSliding>
+        <IonItem>
+          <IonLabel>
+            <h3>Carrots</h3>
+          </IonLabel>
+        </IonItem>
+        <IonItemOptions>
+          <IonItemOption>
+            Favorite
+          </IonItemOption>
+        </IonItemOptions>
+      </IonItemSliding>
+
+      <IonItemSliding>
+        <IonItem>
+          <IonLabel>
+            <h3>Celery</h3>
+          </IonLabel>
+        </IonItem>
+        <IonItemOptions>
+          <IonItemOption>
+            Favorite
+          </IonItemOption>
+        </IonItemOptions>
+      </IonItemSliding>
+    </IonItemGroup>
+  </>
+);
+
+export default Example;
+```
diff --git a/core/src/components/item-sliding/readme.md b/core/src/components/item-sliding/readme.md
index c92cce8d7a..169aeeafea 100644
--- a/core/src/components/item-sliding/readme.md
+++ b/core/src/components/item-sliding/readme.md
@@ -73,6 +73,37 @@ Options can be expanded to take up the full width of the item if you swipe past
 ```
 
 
+### React
+
+```tsx
+import React from 'react';
+
+import { IonList, IonItemSliding, IonItem, IonLabel, IonItemOptions, IonItemOption } from '@ionic/react';
+
+const Example: React.SFC<{}> = () => (
+
+<IonList>
+  <IonItemSliding>
+    <IonItem>
+      <IonLabel>Item</IonLabel>
+    </IonItem>
+    <IonItemOptions side="start">
+      <IonItemOption onClick={() => {}}>Favorite</IonItemOption>
+      <IonItemOption color="danger" onClick={() => {}}>Share</IonItemOption>
+    </IonItemOptions>
+
+    <IonItemOptions side="end">
+      <IonItemOption onClick={() => {}}>Unread</IonItemOption>
+    </IonItemOptions>
+  </IonItemSliding>
+</IonList>
+
+);
+
+export default Example;
+```
+
+
 
 ## Properties
 
diff --git a/core/src/components/item-sliding/usage/react.md b/core/src/components/item-sliding/usage/react.md
new file mode 100644
index 0000000000..fdaab9a922
--- /dev/null
+++ b/core/src/components/item-sliding/usage/react.md
@@ -0,0 +1,27 @@
+```tsx
+import React from 'react';
+
+import { IonList, IonItemSliding, IonItem, IonLabel, IonItemOptions, IonItemOption } from '@ionic/react';
+
+const Example: React.SFC<{}> = () => (
+
+<IonList>
+  <IonItemSliding>
+    <IonItem>
+      <IonLabel>Item</IonLabel>
+    </IonItem>
+    <IonItemOptions side="start">
+      <IonItemOption onClick={() => {}}>Favorite</IonItemOption>
+      <IonItemOption color="danger" onClick={() => {}}>Share</IonItemOption>
+    </IonItemOptions>
+
+    <IonItemOptions side="end">
+      <IonItemOption onClick={() => {}}>Unread</IonItemOption>
+    </IonItemOptions>
+  </IonItemSliding>
+</IonList>
+
+);
+
+export default Example;
+```
diff --git a/core/src/components/item/readme.md b/core/src/components/item/readme.md
index 99133f29c7..7c1ee81588 100644
--- a/core/src/components/item/readme.md
+++ b/core/src/components/item/readme.md
@@ -704,6 +704,320 @@ Item Inputs
 ```
 
 
+### React
+
+```tsx
+import React from 'react';
+
+import { IonItem, IonLabel, IonList, IonText, IonAvatar, IonThumbnail, IonButton, IonIcon, IonSelect, IonSelectOption, IonDatetime, IonToggle, IonInput, IonCheckbox, IonRange } from '@ionic/react';
+
+const Example: React.SFC<{}> = () => (
+  <>
+    {/*-- Default Item --*/}
+    <IonItem>
+      <IonLabel>
+        Item
+      </IonLabel>
+    </IonItem>
+
+    {/*-- Item as a Button --*/}
+    <IonItem onClick={() => {}}>
+      <IonLabel>
+        Button Item
+      </IonLabel>
+    </IonItem>
+
+    {/*-- Item as an Anchor --*/}
+    <IonItem href="https://www.ionicframework.com">
+      <IonLabel>
+        Anchor Item
+      </IonLabel>
+    </IonItem>
+
+    <IonItem color="secondary">
+      <IonLabel>
+        Secondary Color Item
+      </IonLabel>
+    </IonItem>
+
+    {/*-- Detail Arrows --*/}
+
+    <IonItem detail>
+      <IonLabel>
+        Standard Item with Detail Arrow
+      </IonLabel>
+    </IonItem>
+
+    <IonItem onClick={() => {}} detail>
+      <IonLabel>
+        Button Item with Detail Arrow
+      </IonLabel>
+    </IonItem>
+
+    <IonItem detail={false} href="https://www.ionicframework.com">
+      <IonLabel>
+        Anchor Item with no Detail Arrow
+      </IonLabel>
+    </IonItem>
+
+
+    <IonList>
+      <IonItem>
+        <IonLabel>
+          Item
+        </IonLabel>
+      </IonItem>
+
+      <IonItem lines="none">
+        <IonLabel>
+          No Lines Item
+        </IonLabel>
+      </IonItem>
+
+      <IonItem>
+        <IonLabel text-wrap>
+        Multiline text that should wrap when it is too long
+        to fit on one line in the item.
+        </IonLabel>
+      </IonItem>
+
+      <IonItem>
+        <IonLabel text-wrap>
+          <IonText color="primary">
+            <h3>H3 Primary Title</h3>
+          </IonText>
+          <p>Paragraph line 1</p>
+          <IonText color="secondary">
+            <p>Paragraph line 2 secondary</p>
+          </IonText>
+        </IonLabel>
+      </IonItem>
+
+      <IonItem lines="full">
+        <IonLabel>
+          Item with Full Lines
+        </IonLabel>
+      </IonItem>
+
+    </IonList>
+
+
+    {/*-- Item Inset Lines --*/}
+    <IonItem lines="inset">
+      <IonLabel>Item Lines Inset</IonLabel>
+    </IonItem>
+
+    {/*-- Item Full Lines --*/}
+    <IonItem lines="full">
+      <IonLabel>Item Lines Full</IonLabel>
+    </IonItem>
+
+    {/*-- Item None Lines --*/}
+    <IonItem lines="none">
+      <IonLabel>Item Lines None</IonLabel>
+    </IonItem>
+
+    {/*-- List Full Lines --*/}
+    <IonList lines="full">
+      <IonItem>
+        <IonLabel>Full Lines Item 1</IonLabel>
+      </IonItem>
+
+      <IonItem>
+        <IonLabel>Full Lines Item 2</IonLabel>
+      </IonItem>
+    </IonList>
+
+    {/*-- List Inset Lines --*/}
+    <IonList lines="inset">
+      <IonItem>
+        <IonLabel>Inset Lines Item 1</IonLabel>
+      </IonItem>
+
+      <IonItem>
+        <IonLabel>Inset Lines Item 2</IonLabel>
+      </IonItem>
+    </IonList>
+
+    {/*-- List No Lines --*/}
+    <IonList lines="none">
+      <IonItem>
+        <IonLabel>No lines Item 1</IonLabel>
+      </IonItem>
+
+      <IonItem>
+        <IonLabel>No lines Item 2</IonLabel>
+      </IonItem>
+
+      <IonItem>
+        <IonLabel>No lines Item 3</IonLabel>
+      </IonItem>
+    </IonList>
+
+
+
+    <IonItem onClick={() => {}}>
+      <IonAvatar slot="start">
+        <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==" />
+      </IonAvatar>
+      <IonLabel>
+        Avatar Start, Button Item
+      </IonLabel>
+    </IonItem>
+
+    <IonItem href="#">
+      <IonLabel>
+        Thumbnail End, Anchor Item
+      </IonLabel>
+      <IonThumbnail slot="end">
+        <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==" />
+      </IonThumbnail>
+    </IonItem>
+
+    <IonItem>
+      <IonThumbnail slot="start">
+        <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==" />
+      </IonThumbnail>
+      <IonLabel>
+        <h2>H2 Title Text</h2>
+        <p>Button on right</p>
+      </IonLabel>
+      <IonButton fill="outline" slot="end">View</IonButton>
+    </IonItem>
+
+    <IonItem onClick={() => {}}>
+      <IonThumbnail slot="start">
+        <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==" />
+      </IonThumbnail>
+      <IonLabel>
+        <h3>H3 Title Text</h3>
+        <p>Icon on right</p>
+      </IonLabel>
+      <IonIcon name="close-circle" slot="end" />
+    </IonItem>
+
+
+    Buttons in Items
+
+
+    <IonItem>
+      <IonButton slot="start">
+        Start
+      </IonButton>
+      <IonLabel>Button Start/End</IonLabel>
+      <IonButton slot="end">
+        End
+      </IonButton>
+    </IonItem>
+
+    <IonItem>
+      <IonButton slot="start">
+        Start Icon
+        <IonIcon name="home" slot="end" />
+      </IonButton>
+      <IonLabel>Buttons with Icons</IonLabel>
+      <IonButton slot="end">
+        <IonIcon name="star" slot="end" />
+        End Icon
+      </IonButton>
+    </IonItem>
+
+    <IonItem>
+      <IonButton slot="start">
+        <IonIcon slot="icon-only" name="navigate" />
+      </IonButton>
+      <IonLabel>Icon only Buttons</IonLabel>
+      <IonButton slot="end">
+        <IonIcon slot="icon-only" name="star" />
+      </IonButton>
+    </IonItem>
+
+
+    <IonItem>
+      <IonLabel>
+        Icon End
+      </IonLabel>
+      <IonIcon name="information-circle" slot="end" />
+    </IonItem>
+
+    <IonItem>
+      <IonLabel>
+        Large Icon End
+      </IonLabel>
+      <IonIcon name="information-circle" size="large" slot="end" />
+    </IonItem>
+
+    <IonItem>
+      <IonLabel>
+        Small Icon End
+      </IonLabel>
+      <IonIcon name="information-circle" size="small" slot="end" />
+    </IonItem>
+
+    <IonItem>
+      <IonIcon name="star" slot="start" />
+      <IonLabel>
+        Icon Start
+      </IonLabel>
+    </IonItem>
+
+    <IonItem>
+      <IonLabel>
+        Two Icons End
+      </IonLabel>
+      <IonIcon name="checkmark-circle" slot="end" />
+      <IonIcon name="shuffle" slot="end" />
+    </IonItem>
+
+    <IonItem>
+      <IonLabel position="floating">Datetime</IonLabel>
+      <IonDatetime></IonDatetime>
+    </IonItem>
+
+    <IonItem>
+      <IonLabel position="floating">Select</IonLabel>
+      <IonSelect>
+        <IonSelectOption value="">No Game Console</IonSelectOption>
+        <IonSelectOption value="nes">NES</IonSelectOption>
+        <IonSelectOption value="n64" selected>Nintendo64</IonSelectOption>
+        <IonSelectOption value="ps">PlayStation</IonSelectOption>
+        <IonSelectOption value="genesis">Sega Genesis</IonSelectOption>
+        <IonSelectOption value="saturn">Sega Saturn</IonSelectOption>
+        <IonSelectOption value="snes">SNES</IonSelectOption>
+      </IonSelect>
+    </IonItem>
+
+    <IonItem>
+      <IonLabel>Toggle</IonLabel>
+      <IonToggle slot="end"></IonToggle>
+    </IonItem>
+
+    <IonItem>
+      <IonLabel position="floating">Floating Input</IonLabel>
+      <IonInput></IonInput>
+    </IonItem>
+
+    <IonItem>
+      <IonLabel>Input (placeholder)</IonLabel>
+      <IonInput placeholder="Placeholder"></IonInput>
+    </IonItem>
+
+    <IonItem>
+      <IonLabel>Checkbox</IonLabel>
+      <IonCheckbox slot="start" />
+    </IonItem>
+
+    <IonItem>
+      <IonLabel>Range</IonLabel>
+      <IonRange></IonRange>
+    </IonItem>
+  </>
+);
+
+export default Example;
+```
+
+
 
 ## Properties
 
diff --git a/core/src/components/item/usage/react.md b/core/src/components/item/usage/react.md
new file mode 100644
index 0000000000..5eec59d598
--- /dev/null
+++ b/core/src/components/item/usage/react.md
@@ -0,0 +1,310 @@
+```tsx
+import React from 'react';
+
+import { IonItem, IonLabel, IonList, IonText, IonAvatar, IonThumbnail, IonButton, IonIcon, IonSelect, IonSelectOption, IonDatetime, IonToggle, IonInput, IonCheckbox, IonRange } from '@ionic/react';
+
+const Example: React.SFC<{}> = () => (
+  <>
+    {/*-- Default Item --*/}
+    <IonItem>
+      <IonLabel>
+        Item
+      </IonLabel>
+    </IonItem>
+
+    {/*-- Item as a Button --*/}
+    <IonItem onClick={() => {}}>
+      <IonLabel>
+        Button Item
+      </IonLabel>
+    </IonItem>
+
+    {/*-- Item as an Anchor --*/}
+    <IonItem href="https://www.ionicframework.com">
+      <IonLabel>
+        Anchor Item
+      </IonLabel>
+    </IonItem>
+
+    <IonItem color="secondary">
+      <IonLabel>
+        Secondary Color Item
+      </IonLabel>
+    </IonItem>
+
+    {/*-- Detail Arrows --*/}
+
+    <IonItem detail>
+      <IonLabel>
+        Standard Item with Detail Arrow
+      </IonLabel>
+    </IonItem>
+
+    <IonItem onClick={() => {}} detail>
+      <IonLabel>
+        Button Item with Detail Arrow
+      </IonLabel>
+    </IonItem>
+
+    <IonItem detail={false} href="https://www.ionicframework.com">
+      <IonLabel>
+        Anchor Item with no Detail Arrow
+      </IonLabel>
+    </IonItem>
+
+
+    <IonList>
+      <IonItem>
+        <IonLabel>
+          Item
+        </IonLabel>
+      </IonItem>
+
+      <IonItem lines="none">
+        <IonLabel>
+          No Lines Item
+        </IonLabel>
+      </IonItem>
+
+      <IonItem>
+        <IonLabel text-wrap>
+        Multiline text that should wrap when it is too long
+        to fit on one line in the item.
+        </IonLabel>
+      </IonItem>
+
+      <IonItem>
+        <IonLabel text-wrap>
+          <IonText color="primary">
+            <h3>H3 Primary Title</h3>
+          </IonText>
+          <p>Paragraph line 1</p>
+          <IonText color="secondary">
+            <p>Paragraph line 2 secondary</p>
+          </IonText>
+        </IonLabel>
+      </IonItem>
+
+      <IonItem lines="full">
+        <IonLabel>
+          Item with Full Lines
+        </IonLabel>
+      </IonItem>
+
+    </IonList>
+
+
+    {/*-- Item Inset Lines --*/}
+    <IonItem lines="inset">
+      <IonLabel>Item Lines Inset</IonLabel>
+    </IonItem>
+
+    {/*-- Item Full Lines --*/}
+    <IonItem lines="full">
+      <IonLabel>Item Lines Full</IonLabel>
+    </IonItem>
+
+    {/*-- Item None Lines --*/}
+    <IonItem lines="none">
+      <IonLabel>Item Lines None</IonLabel>
+    </IonItem>
+
+    {/*-- List Full Lines --*/}
+    <IonList lines="full">
+      <IonItem>
+        <IonLabel>Full Lines Item 1</IonLabel>
+      </IonItem>
+
+      <IonItem>
+        <IonLabel>Full Lines Item 2</IonLabel>
+      </IonItem>
+    </IonList>
+
+    {/*-- List Inset Lines --*/}
+    <IonList lines="inset">
+      <IonItem>
+        <IonLabel>Inset Lines Item 1</IonLabel>
+      </IonItem>
+
+      <IonItem>
+        <IonLabel>Inset Lines Item 2</IonLabel>
+      </IonItem>
+    </IonList>
+
+    {/*-- List No Lines --*/}
+    <IonList lines="none">
+      <IonItem>
+        <IonLabel>No lines Item 1</IonLabel>
+      </IonItem>
+
+      <IonItem>
+        <IonLabel>No lines Item 2</IonLabel>
+      </IonItem>
+
+      <IonItem>
+        <IonLabel>No lines Item 3</IonLabel>
+      </IonItem>
+    </IonList>
+
+
+
+    <IonItem onClick={() => {}}>
+      <IonAvatar slot="start">
+        <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==" />
+      </IonAvatar>
+      <IonLabel>
+        Avatar Start, Button Item
+      </IonLabel>
+    </IonItem>
+
+    <IonItem href="#">
+      <IonLabel>
+        Thumbnail End, Anchor Item
+      </IonLabel>
+      <IonThumbnail slot="end">
+        <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==" />
+      </IonThumbnail>
+    </IonItem>
+
+    <IonItem>
+      <IonThumbnail slot="start">
+        <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==" />
+      </IonThumbnail>
+      <IonLabel>
+        <h2>H2 Title Text</h2>
+        <p>Button on right</p>
+      </IonLabel>
+      <IonButton fill="outline" slot="end">View</IonButton>
+    </IonItem>
+
+    <IonItem onClick={() => {}}>
+      <IonThumbnail slot="start">
+        <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==" />
+      </IonThumbnail>
+      <IonLabel>
+        <h3>H3 Title Text</h3>
+        <p>Icon on right</p>
+      </IonLabel>
+      <IonIcon name="close-circle" slot="end" />
+    </IonItem>
+
+
+    Buttons in Items
+
+
+    <IonItem>
+      <IonButton slot="start">
+        Start
+      </IonButton>
+      <IonLabel>Button Start/End</IonLabel>
+      <IonButton slot="end">
+        End
+      </IonButton>
+    </IonItem>
+
+    <IonItem>
+      <IonButton slot="start">
+        Start Icon
+        <IonIcon name="home" slot="end" />
+      </IonButton>
+      <IonLabel>Buttons with Icons</IonLabel>
+      <IonButton slot="end">
+        <IonIcon name="star" slot="end" />
+        End Icon
+      </IonButton>
+    </IonItem>
+
+    <IonItem>
+      <IonButton slot="start">
+        <IonIcon slot="icon-only" name="navigate" />
+      </IonButton>
+      <IonLabel>Icon only Buttons</IonLabel>
+      <IonButton slot="end">
+        <IonIcon slot="icon-only" name="star" />
+      </IonButton>
+    </IonItem>
+
+
+    <IonItem>
+      <IonLabel>
+        Icon End
+      </IonLabel>
+      <IonIcon name="information-circle" slot="end" />
+    </IonItem>
+
+    <IonItem>
+      <IonLabel>
+        Large Icon End
+      </IonLabel>
+      <IonIcon name="information-circle" size="large" slot="end" />
+    </IonItem>
+
+    <IonItem>
+      <IonLabel>
+        Small Icon End
+      </IonLabel>
+      <IonIcon name="information-circle" size="small" slot="end" />
+    </IonItem>
+
+    <IonItem>
+      <IonIcon name="star" slot="start" />
+      <IonLabel>
+        Icon Start
+      </IonLabel>
+    </IonItem>
+
+    <IonItem>
+      <IonLabel>
+        Two Icons End
+      </IonLabel>
+      <IonIcon name="checkmark-circle" slot="end" />
+      <IonIcon name="shuffle" slot="end" />
+    </IonItem>
+
+    <IonItem>
+      <IonLabel position="floating">Datetime</IonLabel>
+      <IonDatetime></IonDatetime>
+    </IonItem>
+
+    <IonItem>
+      <IonLabel position="floating">Select</IonLabel>
+      <IonSelect>
+        <IonSelectOption value="">No Game Console</IonSelectOption>
+        <IonSelectOption value="nes">NES</IonSelectOption>
+        <IonSelectOption value="n64" selected>Nintendo64</IonSelectOption>
+        <IonSelectOption value="ps">PlayStation</IonSelectOption>
+        <IonSelectOption value="genesis">Sega Genesis</IonSelectOption>
+        <IonSelectOption value="saturn">Sega Saturn</IonSelectOption>
+        <IonSelectOption value="snes">SNES</IonSelectOption>
+      </IonSelect>
+    </IonItem>
+
+    <IonItem>
+      <IonLabel>Toggle</IonLabel>
+      <IonToggle slot="end"></IonToggle>
+    </IonItem>
+
+    <IonItem>
+      <IonLabel position="floating">Floating Input</IonLabel>
+      <IonInput></IonInput>
+    </IonItem>
+
+    <IonItem>
+      <IonLabel>Input (placeholder)</IonLabel>
+      <IonInput placeholder="Placeholder"></IonInput>
+    </IonItem>
+
+    <IonItem>
+      <IonLabel>Checkbox</IonLabel>
+      <IonCheckbox slot="start" />
+    </IonItem>
+
+    <IonItem>
+      <IonLabel>Range</IonLabel>
+      <IonRange></IonRange>
+    </IonItem>
+  </>
+);
+
+export default Example;
+```
diff --git a/core/src/components/label/readme.md b/core/src/components/label/readme.md
index d79479df4c..e4e5ac746b 100644
--- a/core/src/components/label/readme.md
+++ b/core/src/components/label/readme.md
@@ -66,6 +66,74 @@ Label is a wrapper element that can be used in combination with `ion-item`, `ion
 ```
 
 
+### React
+
+```tsx
+import React from 'react';
+
+import { IonLabel, IonItem, IonInput, IonToggle, IonCheckbox } from '@ionic/react';
+
+const Example: React.SFC<{}> = () => (
+  <>
+    {/*-- Default Label --*/}
+    <IonLabel>Label</IonLabel>
+
+    {/*-- Label Colors --*/}
+    <IonLabel color="primary">Primary Label</IonLabel>
+    <IonLabel color="secondary">Secondary Label</IonLabel>
+    <IonLabel color="danger">Danger Label</IonLabel>
+    <IonLabel color="light">Light Label</IonLabel>
+    <IonLabel color="dark">Dark Label</IonLabel>
+
+    {/*-- Item Labels --*/}
+    <IonItem>
+      <IonLabel>Default Item</IonLabel>
+    </IonItem>
+
+    <IonItem text-wrap>
+      <IonLabel>
+        Multi-line text that should wrap when it is too long
+        to fit on one line in the item.
+      </IonLabel>
+    </IonItem>
+
+    {/*-- Input Labels --*/}
+    <IonItem>
+      <IonLabel>Default Input</IonLabel>
+      <IonInput></IonInput>
+    </IonItem>
+
+    <IonItem>
+      <IonLabel position="fixed">Fixed</IonLabel>
+      <IonInput></IonInput>
+    </IonItem>
+
+    <IonItem>
+      <IonLabel position="floating">Floating</IonLabel>
+      <IonInput></IonInput>
+    </IonItem>
+
+    <IonItem>
+      <IonLabel position="stacked">Stacked</IonLabel>
+      <IonInput></IonInput>
+    </IonItem>
+
+    <IonItem>
+      <IonLabel>Toggle</IonLabel>
+      <IonToggle slot="end" checked></IonToggle>
+    </IonItem>
+
+    <IonItem>
+      <IonCheckbox slot="start" checked />
+      <IonLabel>Checkbox</IonLabel>
+    </IonItem>
+  </>
+);
+
+export default Example;
+```
+
+
 
 ## Properties
 
diff --git a/core/src/components/label/usage/react.md b/core/src/components/label/usage/react.md
new file mode 100644
index 0000000000..ec8a48fea5
--- /dev/null
+++ b/core/src/components/label/usage/react.md
@@ -0,0 +1,64 @@
+```tsx
+import React from 'react';
+
+import { IonLabel, IonItem, IonInput, IonToggle, IonCheckbox } from '@ionic/react';
+
+const Example: React.SFC<{}> = () => (
+  <>
+    {/*-- Default Label --*/}
+    <IonLabel>Label</IonLabel>
+
+    {/*-- Label Colors --*/}
+    <IonLabel color="primary">Primary Label</IonLabel>
+    <IonLabel color="secondary">Secondary Label</IonLabel>
+    <IonLabel color="danger">Danger Label</IonLabel>
+    <IonLabel color="light">Light Label</IonLabel>
+    <IonLabel color="dark">Dark Label</IonLabel>
+
+    {/*-- Item Labels --*/}
+    <IonItem>
+      <IonLabel>Default Item</IonLabel>
+    </IonItem>
+
+    <IonItem text-wrap>
+      <IonLabel>
+        Multi-line text that should wrap when it is too long
+        to fit on one line in the item.
+      </IonLabel>
+    </IonItem>
+
+    {/*-- Input Labels --*/}
+    <IonItem>
+      <IonLabel>Default Input</IonLabel>
+      <IonInput></IonInput>
+    </IonItem>
+
+    <IonItem>
+      <IonLabel position="fixed">Fixed</IonLabel>
+      <IonInput></IonInput>
+    </IonItem>
+
+    <IonItem>
+      <IonLabel position="floating">Floating</IonLabel>
+      <IonInput></IonInput>
+    </IonItem>
+
+    <IonItem>
+      <IonLabel position="stacked">Stacked</IonLabel>
+      <IonInput></IonInput>
+    </IonItem>
+
+    <IonItem>
+      <IonLabel>Toggle</IonLabel>
+      <IonToggle slot="end" checked></IonToggle>
+    </IonItem>
+
+    <IonItem>
+      <IonCheckbox slot="start" checked />
+      <IonLabel>Checkbox</IonLabel>
+    </IonItem>
+  </>
+);
+
+export default Example;
+```
diff --git a/core/src/components/list/readme.md b/core/src/components/list/readme.md
index 4613c50e61..3981793f26 100644
--- a/core/src/components/list/readme.md
+++ b/core/src/components/list/readme.md
@@ -141,6 +141,81 @@ Lists support several interactions including swiping items to reveal options, dr
 ```
 
 
+### React
+
+```tsx
+import React from 'react';
+
+import { IonList, IonItem, IonLabel, IonInput, IonToggle, IonRadio, IonCheckbox, IonItemSliding, IonItemOption, IonItemOptions } from '@ionic/react';
+
+const Example: React.SFC<{}> = () => (
+  <>
+    {/*-- List of Text Items --*/}
+    <IonList>
+      <IonItem>
+        <IonLabel>Pokémon Yellow</IonLabel>
+      </IonItem>
+      <IonItem>
+        <IonLabel>Mega Man X</IonLabel>
+      </IonItem>
+      <IonItem>
+        <IonLabel>The Legend of Zelda</IonLabel>
+      </IonItem>
+      <IonItem>
+        <IonLabel>Pac-Man</IonLabel>
+      </IonItem>
+      <IonItem>
+        <IonLabel>Super Mario World</IonLabel>
+      </IonItem>
+    </IonList>
+
+    {/*-- List of Input Items --*/}
+    <IonList>
+      <IonItem>
+        <IonLabel>Input</IonLabel>
+        <IonInput></IonInput>
+      </IonItem>
+      <IonItem>
+        <IonLabel>Toggle</IonLabel>
+        <IonToggle slot="end"></IonToggle>
+      </IonItem>
+      <IonItem>
+        <IonLabel>Radio</IonLabel>
+        <IonRadio slot="end"></IonRadio>
+      </IonItem>
+      <IonItem>
+        <IonLabel>Checkbox</IonLabel>
+        <IonCheckbox slot="start" />
+      </IonItem>
+    </IonList>
+
+    {/*-- List of Sliding Items --*/}
+    <IonList>
+      <IonItemSliding>
+        <IonItem>
+          <IonLabel>Item</IonLabel>
+        </IonItem>
+        <IonItemOptions side="end">
+          <IonItemOption onClick={() => {}}>Unread</IonItemOption>
+        </IonItemOptions>
+      </IonItemSliding>
+
+      <IonItemSliding>
+        <IonItem>
+          <IonLabel>Item</IonLabel>
+        </IonItem>
+        <IonItemOptions side="end">
+          <IonItemOption onClick={() => {}}>Unread</IonItemOption>
+        </IonItemOptions>
+      </IonItemSliding>
+    </IonList>
+  </>
+);
+
+export default Example;
+```
+
+
 
 ## Properties
 
diff --git a/core/src/components/list/usage/react.md b/core/src/components/list/usage/react.md
new file mode 100644
index 0000000000..4c5f7427b2
--- /dev/null
+++ b/core/src/components/list/usage/react.md
@@ -0,0 +1,71 @@
+```tsx
+import React from 'react';
+
+import { IonList, IonItem, IonLabel, IonInput, IonToggle, IonRadio, IonCheckbox, IonItemSliding, IonItemOption, IonItemOptions } from '@ionic/react';
+
+const Example: React.SFC<{}> = () => (
+  <>
+    {/*-- List of Text Items --*/}
+    <IonList>
+      <IonItem>
+        <IonLabel>Pokémon Yellow</IonLabel>
+      </IonItem>
+      <IonItem>
+        <IonLabel>Mega Man X</IonLabel>
+      </IonItem>
+      <IonItem>
+        <IonLabel>The Legend of Zelda</IonLabel>
+      </IonItem>
+      <IonItem>
+        <IonLabel>Pac-Man</IonLabel>
+      </IonItem>
+      <IonItem>
+        <IonLabel>Super Mario World</IonLabel>
+      </IonItem>
+    </IonList>
+
+    {/*-- List of Input Items --*/}
+    <IonList>
+      <IonItem>
+        <IonLabel>Input</IonLabel>
+        <IonInput></IonInput>
+      </IonItem>
+      <IonItem>
+        <IonLabel>Toggle</IonLabel>
+        <IonToggle slot="end"></IonToggle>
+      </IonItem>
+      <IonItem>
+        <IonLabel>Radio</IonLabel>
+        <IonRadio slot="end"></IonRadio>
+      </IonItem>
+      <IonItem>
+        <IonLabel>Checkbox</IonLabel>
+        <IonCheckbox slot="start" />
+      </IonItem>
+    </IonList>
+
+    {/*-- List of Sliding Items --*/}
+    <IonList>
+      <IonItemSliding>
+        <IonItem>
+          <IonLabel>Item</IonLabel>
+        </IonItem>
+        <IonItemOptions side="end">
+          <IonItemOption onClick={() => {}}>Unread</IonItemOption>
+        </IonItemOptions>
+      </IonItemSliding>
+
+      <IonItemSliding>
+        <IonItem>
+          <IonLabel>Item</IonLabel>
+        </IonItem>
+        <IonItemOptions side="end">
+          <IonItemOption onClick={() => {}}>Unread</IonItemOption>
+        </IonItemOptions>
+      </IonItemSliding>
+    </IonList>
+  </>
+);
+
+export default Example;
+```
diff --git a/core/src/components/loading/readme.md b/core/src/components/loading/readme.md
index 713d9f4c3c..8bfa8acc90 100644
--- a/core/src/components/loading/readme.md
+++ b/core/src/components/loading/readme.md
@@ -93,6 +93,55 @@ async function presentLoadingWithOptions() {
 ```
 
 
+### React
+
+```tsx
+import React, { Component } from 'react'
+import { IonLoading } from '@ionic/react';
+
+type Props = {}
+type State = {
+  showLoading1: boolean
+  showLoading2: boolean
+}
+
+export class LoadingExample extends Component<Props, State> {
+
+  constructor(props: Props) {
+    super(props);
+    this.state = {
+      showLoading1: false
+      showLoading2: false
+    };
+  }
+
+  render() {
+    return (
+      <IonLoading
+        isOpen={this.state.showLoading1}
+        onDidDismiss={() => this.setState(() => ({ showLoading1: false }))}
+        message={'Hellooo'}
+        duration={200}
+      >
+      </IonLoading>
+
+      <IonLoading
+        isOpen={this.state.showLoading2}
+        onDidDismiss={() => this.setState(() => ({ showLoading2: false }))}
+        spinner={null}
+        duration={5000}
+        message='Please wait...'}
+        translucent={true}
+        cssClass='custom-class custom-loading'
+      >
+      </IonLoading>
+    );
+  }
+}
+
+```
+
+
 
 ## Properties
 
diff --git a/core/src/components/loading/usage/react.md b/core/src/components/loading/usage/react.md
new file mode 100644
index 0000000000..5497631c52
--- /dev/null
+++ b/core/src/components/loading/usage/react.md
@@ -0,0 +1,45 @@
+```tsx
+import React, { Component } from 'react'
+import { IonLoading } from '@ionic/react';
+
+type Props = {}
+type State = {
+  showLoading1: boolean
+  showLoading2: boolean
+}
+
+export class LoadingExample extends Component<Props, State> {
+
+  constructor(props: Props) {
+    super(props);
+    this.state = {
+      showLoading1: false
+      showLoading2: false
+    };
+  }
+
+  render() {
+    return (
+      <IonLoading
+        isOpen={this.state.showLoading1}
+        onDidDismiss={() => this.setState(() => ({ showLoading1: false }))}
+        message={'Hellooo'}
+        duration={200}
+      >
+      </IonLoading>
+
+      <IonLoading
+        isOpen={this.state.showLoading2}
+        onDidDismiss={() => this.setState(() => ({ showLoading2: false }))}
+        spinner={null}
+        duration={5000}
+        message='Please wait...'}
+        translucent={true}
+        cssClass='custom-class custom-loading'
+      >
+      </IonLoading>
+    );
+  }
+}
+
+```
diff --git a/core/src/components/menu/readme.md b/core/src/components/menu/readme.md
index bd1f35a5ad..be054cfe13 100644
--- a/core/src/components/menu/readme.md
+++ b/core/src/components/menu/readme.md
@@ -203,6 +203,73 @@ function openCustom() {
 ```
 
 
+### React
+
+```tsx
+import React from 'react';
+
+import { IonMenu, IonHeader, IonToolbar, IonTitle, IonContent, IonList, IonItem, IonRouterOutlet } from '@ionic/react';
+
+const Example: React.SFC<{}> = () => (
+  <>
+    <IonMenu side="start" menuId="first">
+      <IonHeader>
+        <IonToolbar color="primary">
+          <IonTitle>Start Menu</IonTitle>
+        </IonToolbar>
+      </IonHeader>
+      <IonContent>
+        <IonList>
+          <IonItem>Menu Item</IonItem>
+          <IonItem>Menu Item</IonItem>
+          <IonItem>Menu Item</IonItem>
+          <IonItem>Menu Item</IonItem>
+          <IonItem>Menu Item</IonItem>
+        </IonList>
+      </IonContent>
+    </IonMenu>
+
+    <IonMenu side="start" menuId="custom" class="my-custom-menu">
+      <IonHeader>
+        <IonToolbar color="tertiary">
+          <IonTitle>Custom Menu</IonTitle>
+        </IonToolbar>
+      </IonHeader>
+      <IonContent>
+        <IonList>
+          <IonItem>Menu Item</IonItem>
+          <IonItem>Menu Item</IonItem>
+          <IonItem>Menu Item</IonItem>
+          <IonItem>Menu Item</IonItem>
+          <IonItem>Menu Item</IonItem>
+        </IonList>
+      </IonContent>
+    </IonMenu>
+
+    <IonMenu side="end" type="push">
+      <IonHeader>
+        <IonToolbar color="danger">
+          <IonTitle>End Menu</IonTitle>
+        </IonToolbar>
+      </IonHeader>
+      <IonContent>
+        <IonList>
+          <IonItem>Menu Item</IonItem>
+          <IonItem>Menu Item</IonItem>
+          <IonItem>Menu Item</IonItem>
+          <IonItem>Menu Item</IonItem>
+          <IonItem>Menu Item</IonItem>
+        </IonList>
+      </IonContent>
+    </IonMenu>
+    <IonRouterOutlet></IonRouterOutlet>
+  </>
+);
+
+export default Example;
+```
+
+
 
 ## Properties
 
diff --git a/core/src/components/menu/usage/react.md b/core/src/components/menu/usage/react.md
new file mode 100644
index 0000000000..3d3a93a599
--- /dev/null
+++ b/core/src/components/menu/usage/react.md
@@ -0,0 +1,63 @@
+```tsx
+import React from 'react';
+
+import { IonMenu, IonHeader, IonToolbar, IonTitle, IonContent, IonList, IonItem, IonRouterOutlet } from '@ionic/react';
+
+const Example: React.SFC<{}> = () => (
+  <>
+    <IonMenu side="start" menuId="first">
+      <IonHeader>
+        <IonToolbar color="primary">
+          <IonTitle>Start Menu</IonTitle>
+        </IonToolbar>
+      </IonHeader>
+      <IonContent>
+        <IonList>
+          <IonItem>Menu Item</IonItem>
+          <IonItem>Menu Item</IonItem>
+          <IonItem>Menu Item</IonItem>
+          <IonItem>Menu Item</IonItem>
+          <IonItem>Menu Item</IonItem>
+        </IonList>
+      </IonContent>
+    </IonMenu>
+
+    <IonMenu side="start" menuId="custom" class="my-custom-menu">
+      <IonHeader>
+        <IonToolbar color="tertiary">
+          <IonTitle>Custom Menu</IonTitle>
+        </IonToolbar>
+      </IonHeader>
+      <IonContent>
+        <IonList>
+          <IonItem>Menu Item</IonItem>
+          <IonItem>Menu Item</IonItem>
+          <IonItem>Menu Item</IonItem>
+          <IonItem>Menu Item</IonItem>
+          <IonItem>Menu Item</IonItem>
+        </IonList>
+      </IonContent>
+    </IonMenu>
+
+    <IonMenu side="end" type="push">
+      <IonHeader>
+        <IonToolbar color="danger">
+          <IonTitle>End Menu</IonTitle>
+        </IonToolbar>
+      </IonHeader>
+      <IonContent>
+        <IonList>
+          <IonItem>Menu Item</IonItem>
+          <IonItem>Menu Item</IonItem>
+          <IonItem>Menu Item</IonItem>
+          <IonItem>Menu Item</IonItem>
+          <IonItem>Menu Item</IonItem>
+        </IonList>
+      </IonContent>
+    </IonMenu>
+    <IonRouterOutlet></IonRouterOutlet>
+  </>
+);
+
+export default Example;
+```
diff --git a/core/src/components/modal/readme.md b/core/src/components/modal/readme.md
index 9830a856c9..35766d528b 100644
--- a/core/src/components/modal/readme.md
+++ b/core/src/components/modal/readme.md
@@ -140,6 +140,44 @@ async function presentModal() {
 ```
 
 
+### React
+
+```tsx
+import React, { Component } from 'react'
+import { IonModal } from '@ionic/react';
+
+type Props = {}
+type State = {
+  showModal: boolean
+}
+
+export class ModalExample extends Component<Props, State> {
+
+  constructor(props: Props) {
+    super(props);
+    this.state = {
+      showModal: false
+    };
+  }
+
+  render() {
+    return (
+      <IonModal
+        isOpen={this.state.showModal}
+        onDidDismiss={() => this.setState(() => ({ showModal: false }))}
+      >
+        <p>This is modal content</p>
+        <IonButton onClick={() => this.setState(() => ({ showModal: false }))}>
+          Close Modal
+        </IonButton>
+      </IonModal>
+    );
+  }
+}
+
+```
+
+
 
 ## Properties
 
diff --git a/core/src/components/modal/usage/react.md b/core/src/components/modal/usage/react.md
new file mode 100644
index 0000000000..bca49bf5bc
--- /dev/null
+++ b/core/src/components/modal/usage/react.md
@@ -0,0 +1,34 @@
+```tsx
+import React, { Component } from 'react'
+import { IonModal } from '@ionic/react';
+
+type Props = {}
+type State = {
+  showModal: boolean
+}
+
+export class ModalExample extends Component<Props, State> {
+
+  constructor(props: Props) {
+    super(props);
+    this.state = {
+      showModal: false
+    };
+  }
+
+  render() {
+    return (
+      <IonModal
+        isOpen={this.state.showModal}
+        onDidDismiss={() => this.setState(() => ({ showModal: false }))}
+      >
+        <p>This is modal content</p>
+        <IonButton onClick={() => this.setState(() => ({ showModal: false }))}>
+          Close Modal
+        </IonButton>
+      </IonModal>
+    );
+  }
+}
+
+```
diff --git a/core/src/components/note/readme.md b/core/src/components/note/readme.md
index 82fda1ee2d..111ee5f920 100644
--- a/core/src/components/note/readme.md
+++ b/core/src/components/note/readme.md
@@ -36,6 +36,43 @@ Notes are text elements generally used as subtitles that provide more informatio
 ```
 
 
+### React
+
+```tsx
+import React from 'react';
+
+import { IonNote, IonList, IonItem, IonLabel } from '@ionic/react';
+
+const Example: React.SFC<{}> = () => (
+  <>
+    {/*-- Default Note --*/}
+    <IonNote>Default Note</IonNote>
+
+    {/*-- Note Colors --*/}
+    <IonNote color="primary">Primary Note</IonNote>
+    <IonNote color="secondary">Secondary Note</IonNote>
+    <IonNote color="danger">Danger Note</IonNote>
+    <IonNote color="light">Light Note</IonNote>
+    <IonNote color="dark">Dark Note</IonNote>
+
+    {/*-- Notes in a List --*/}
+    <IonList>
+      <IonItem>
+        <IonLabel>Note (End)</IonLabel>
+        <IonNote slot="end">On</IonNote>
+      </IonItem>
+
+      <IonItem>
+        <IonNote slot="start">Off</IonNote>
+        <IonLabel>Note (Start)</IonLabel>
+      </IonItem>
+    </IonList>
+  </>
+);
+
+export default Example
+
+
 
 ## Properties
 
diff --git a/core/src/components/note/usage/react.md b/core/src/components/note/usage/react.md
new file mode 100644
index 0000000000..4868c08fae
--- /dev/null
+++ b/core/src/components/note/usage/react.md
@@ -0,0 +1,33 @@
+```tsx
+import React from 'react';
+
+import { IonNote, IonList, IonItem, IonLabel } from '@ionic/react';
+
+const Example: React.SFC<{}> = () => (
+  <>
+    {/*-- Default Note --*/}
+    <IonNote>Default Note</IonNote>
+
+    {/*-- Note Colors --*/}
+    <IonNote color="primary">Primary Note</IonNote>
+    <IonNote color="secondary">Secondary Note</IonNote>
+    <IonNote color="danger">Danger Note</IonNote>
+    <IonNote color="light">Light Note</IonNote>
+    <IonNote color="dark">Dark Note</IonNote>
+
+    {/*-- Notes in a List --*/}
+    <IonList>
+      <IonItem>
+        <IonLabel>Note (End)</IonLabel>
+        <IonNote slot="end">On</IonNote>
+      </IonItem>
+
+      <IonItem>
+        <IonNote slot="start">Off</IonNote>
+        <IonLabel>Note (Start)</IonLabel>
+      </IonItem>
+    </IonList>
+  </>
+);
+
+export default Example
diff --git a/core/src/components/popover/readme.md b/core/src/components/popover/readme.md
index 48c5c9e57c..13cecb1fcb 100644
--- a/core/src/components/popover/readme.md
+++ b/core/src/components/popover/readme.md
@@ -60,6 +60,41 @@ async function presentPopover(ev) {
 ```
 
 
+### React
+
+```tsx
+import React, { Component } from 'react'
+import { IonPopover } from '@ionic/react';
+
+type Props = {}
+type State = {
+  showPopover: boolean
+}
+
+export class PopoverExample extends Component<Props, State> {
+
+  constructor(props: Props) {
+    super(props);
+    this.state = {
+      showPopover: false
+    };
+  }
+
+  render() {
+    return (
+      <IonPopover
+        isOpen={this.state.showPopover}
+        onDidDismiss={() => this.setState(() => ({ showPopover: false }))}
+      >
+        <p>This is popover content</p>
+      </IonPopover>
+    );
+  }
+}
+
+```
+
+
 
 ## Properties
 
diff --git a/core/src/components/popover/usage/react.md b/core/src/components/popover/usage/react.md
new file mode 100644
index 0000000000..f8bcdf692e
--- /dev/null
+++ b/core/src/components/popover/usage/react.md
@@ -0,0 +1,31 @@
+```tsx
+import React, { Component } from 'react'
+import { IonPopover } from '@ionic/react';
+
+type Props = {}
+type State = {
+  showPopover: boolean
+}
+
+export class PopoverExample extends Component<Props, State> {
+
+  constructor(props: Props) {
+    super(props);
+    this.state = {
+      showPopover: false
+    };
+  }
+
+  render() {
+    return (
+      <IonPopover
+        isOpen={this.state.showPopover}
+        onDidDismiss={() => this.setState(() => ({ showPopover: false }))}
+      >
+        <p>This is popover content</p>
+      </IonPopover>
+    );
+  }
+}
+
+```
diff --git a/core/src/components/progress-bar/readme.md b/core/src/components/progress-bar/readme.md
index 9368069339..42d53c9e5f 100644
--- a/core/src/components/progress-bar/readme.md
+++ b/core/src/components/progress-bar/readme.md
@@ -41,6 +41,36 @@ If you add `reversed="true"`, you receive a query which is used to indicate pre-
 ```
 
 
+### React
+
+```tsx
+import React from 'react';
+
+import { IonProgressBar } from '@ionic/react';
+
+const Example: React.SFC<{}> = () => (
+  <>
+    {/*-- Default Progressbar --*/}
+    <IonProgressBar></IonProgressBar>
+
+    {/*-- Default Progressbar with 50 percent --*/}
+    <IonProgressBar value={0.5}></IonProgressBar>
+
+    {/*-- Colorize Progressbar --*/}
+    <IonProgressBar color="primary" value={0.5}></IonProgressBar>
+    <IonProgressBar color="secondary" value={0.5}></IonProgressBar>
+
+    {/*-- Other types --*/}
+    <IonProgressBar value={0.25} buffer={0.5}></IonProgressBar>
+    <IonProgressBar type="indeterminate"></IonProgressBar>
+    <IonProgressBar type="indeterminate" reversed={true}></IonProgressBar>
+  </>
+);
+
+export default Example;
+```
+
+
 
 ## Properties
 
diff --git a/core/src/components/progress-bar/usage/react.md b/core/src/components/progress-bar/usage/react.md
new file mode 100644
index 0000000000..8ddac409c2
--- /dev/null
+++ b/core/src/components/progress-bar/usage/react.md
@@ -0,0 +1,26 @@
+```tsx
+import React from 'react';
+
+import { IonProgressBar } from '@ionic/react';
+
+const Example: React.SFC<{}> = () => (
+  <>
+    {/*-- Default Progressbar --*/}
+    <IonProgressBar></IonProgressBar>
+
+    {/*-- Default Progressbar with 50 percent --*/}
+    <IonProgressBar value={0.5}></IonProgressBar>
+
+    {/*-- Colorize Progressbar --*/}
+    <IonProgressBar color="primary" value={0.5}></IonProgressBar>
+    <IonProgressBar color="secondary" value={0.5}></IonProgressBar>
+
+    {/*-- Other types --*/}
+    <IonProgressBar value={0.25} buffer={0.5}></IonProgressBar>
+    <IonProgressBar type="indeterminate"></IonProgressBar>
+    <IonProgressBar type="indeterminate" reversed={true}></IonProgressBar>
+  </>
+);
+
+export default Example;
+```
diff --git a/core/src/components/radio-group/readme.md b/core/src/components/radio-group/readme.md
index 506bdde20f..00f14185ba 100644
--- a/core/src/components/radio-group/readme.md
+++ b/core/src/components/radio-group/readme.md
@@ -51,6 +51,52 @@ radio button within the same group.
 ```
 
 
+### React
+
+```tsx
+import React from 'react';
+
+import { IonList, IonRadioGroup, IonListHeader, IonLabel, IonRadio, IonItem } from '@ionic/react';
+
+const Example: React.SFC<{}> = () => (
+
+  <IonList>
+    <IonRadioGroup>
+      <IonListHeader>
+        Auto Manufacturers
+      </IonListHeader>
+
+      <IonItem>
+        <IonLabel>Cord</IonLabel>
+        <IonRadio value="cord"></IonRadio>
+      </IonItem>
+
+      <IonItem>
+        <IonLabel>Duesenberg</IonLabel>
+        <IonRadio value="duesenberg"></IonRadio>
+      </IonItem>
+
+      <IonItem>
+        <IonLabel>Hudson</IonLabel>
+        <IonRadio value="hudson"></IonRadio>
+      </IonItem>
+
+      <IonItem>
+        <IonLabel>Packard</IonLabel>
+        <IonRadio value="packard"></IonRadio>
+      </IonItem>
+
+      <IonItem>
+        <IonLabel>Studebaker</IonLabel>
+        <IonRadio value="studebaker"></IonRadio>
+      </IonItem>
+    </IonRadioGroup>
+  </IonList>
+);
+
+export default Example
+
+
 
 ## Properties
 
diff --git a/core/src/components/radio-group/usage/react.md b/core/src/components/radio-group/usage/react.md
new file mode 100644
index 0000000000..79f4ba2de1
--- /dev/null
+++ b/core/src/components/radio-group/usage/react.md
@@ -0,0 +1,42 @@
+```tsx
+import React from 'react';
+
+import { IonList, IonRadioGroup, IonListHeader, IonLabel, IonRadio, IonItem } from '@ionic/react';
+
+const Example: React.SFC<{}> = () => (
+
+  <IonList>
+    <IonRadioGroup>
+      <IonListHeader>
+        Auto Manufacturers
+      </IonListHeader>
+
+      <IonItem>
+        <IonLabel>Cord</IonLabel>
+        <IonRadio value="cord"></IonRadio>
+      </IonItem>
+
+      <IonItem>
+        <IonLabel>Duesenberg</IonLabel>
+        <IonRadio value="duesenberg"></IonRadio>
+      </IonItem>
+
+      <IonItem>
+        <IonLabel>Hudson</IonLabel>
+        <IonRadio value="hudson"></IonRadio>
+      </IonItem>
+
+      <IonItem>
+        <IonLabel>Packard</IonLabel>
+        <IonRadio value="packard"></IonRadio>
+      </IonItem>
+
+      <IonItem>
+        <IonLabel>Studebaker</IonLabel>
+        <IonRadio value="studebaker"></IonRadio>
+      </IonItem>
+    </IonRadioGroup>
+  </IonList>
+);
+
+export default Example
diff --git a/core/src/components/radio/readme.md b/core/src/components/radio/readme.md
index a3ff4b87c9..d751718c6a 100644
--- a/core/src/components/radio/readme.md
+++ b/core/src/components/radio/readme.md
@@ -40,6 +40,42 @@ An `ion-radio-group` can be used to group a set of radios. When radios are insid
 ```
 
 
+### React
+
+```tsx
+import React from 'react';
+
+import { IonList, IonRadioGroup, IonListHeader, IonLabel, IonItem, IonRadio } from '@ionic/react';
+
+const Example: React.SFC<{}> = () => (
+
+  <IonList>
+    <IonRadioGroup>
+      <IonListHeader>
+        <IonLabel>Name</IonLabel>
+      </IonListHeader>
+
+      <IonItem>
+        <IonLabel>Biff</IonLabel>
+        <IonRadio slot="start" value="biff" checked></IonRadio>
+      </IonItem>
+
+      <IonItem>
+        <IonLabel>Griff</IonLabel>
+        <IonRadio slot="start" value="griff"></IonRadio>
+      </IonItem>
+
+      <IonItem>
+        <IonLabel>Buford</IonLabel>
+        <IonRadio slot="start" value="buford"></IonRadio>
+      </IonItem>
+    </IonRadioGroup>
+  </IonList>
+);
+
+export default Example
+
+
 
 ## Properties
 
diff --git a/core/src/components/radio/usage/react.md b/core/src/components/radio/usage/react.md
new file mode 100644
index 0000000000..6b4a692d37
--- /dev/null
+++ b/core/src/components/radio/usage/react.md
@@ -0,0 +1,32 @@
+```tsx
+import React from 'react';
+
+import { IonList, IonRadioGroup, IonListHeader, IonLabel, IonItem, IonRadio } from '@ionic/react';
+
+const Example: React.SFC<{}> = () => (
+
+  <IonList>
+    <IonRadioGroup>
+      <IonListHeader>
+        <IonLabel>Name</IonLabel>
+      </IonListHeader>
+
+      <IonItem>
+        <IonLabel>Biff</IonLabel>
+        <IonRadio slot="start" value="biff" checked></IonRadio>
+      </IonItem>
+
+      <IonItem>
+        <IonLabel>Griff</IonLabel>
+        <IonRadio slot="start" value="griff"></IonRadio>
+      </IonItem>
+
+      <IonItem>
+        <IonLabel>Buford</IonLabel>
+        <IonRadio slot="start" value="buford"></IonRadio>
+      </IonItem>
+    </IonRadioGroup>
+  </IonList>
+);
+
+export default Example
diff --git a/core/src/components/range/readme.md b/core/src/components/range/readme.md
index ca9655cb49..90a9a428d3 100644
--- a/core/src/components/range/readme.md
+++ b/core/src/components/range/readme.md
@@ -83,6 +83,48 @@ left or right of the range.
 ```
 
 
+### React
+
+```tsx
+import React from 'react';
+
+import { IonList, IonItem, IonRange, IonLabel, IonIcon } from '@ionic/react';
+
+const Example: React.SFC<{}> = () => (
+
+  <IonList>
+    <IonItem>
+      <IonRange color="danger" pin={true}></IonRange>
+    </IonItem>
+
+    <IonItem>
+      <IonRange min={-200} max={200} color="secondary">
+        <IonLabel slot="start">-200</IonLabel>
+        <IonLabel slot="end">200</IonLabel>
+      </IonRange>
+    </IonItem>
+
+   <IonItem>
+     <IonRange min={20} max={80} step={2}>
+       <IonIcon size="small" slot="start" name="sunny" />
+       <IonIcon slot="end" name="sunny" />
+     </IonRange>
+   </IonItem>
+
+    <IonItem>
+      <IonRange min={1000} max={2000} step={100} snaps={true} color="secondary"></IonRange>
+    </IonItem>
+
+    <IonItem>
+      <IonRange dualKnobs={true} min={21} max={72} step={3} snaps={true}></IonRange>
+    </IonItem>
+  </IonList>
+);
+
+export default Example;
+```
+
+
 
 ## Properties
 
diff --git a/core/src/components/range/usage/react.md b/core/src/components/range/usage/react.md
new file mode 100644
index 0000000000..c9580037f4
--- /dev/null
+++ b/core/src/components/range/usage/react.md
@@ -0,0 +1,38 @@
+```tsx
+import React from 'react';
+
+import { IonList, IonItem, IonRange, IonLabel, IonIcon } from '@ionic/react';
+
+const Example: React.SFC<{}> = () => (
+
+  <IonList>
+    <IonItem>
+      <IonRange color="danger" pin={true}></IonRange>
+    </IonItem>
+
+    <IonItem>
+      <IonRange min={-200} max={200} color="secondary">
+        <IonLabel slot="start">-200</IonLabel>
+        <IonLabel slot="end">200</IonLabel>
+      </IonRange>
+    </IonItem>
+
+   <IonItem>
+     <IonRange min={20} max={80} step={2}>
+       <IonIcon size="small" slot="start" name="sunny" />
+       <IonIcon slot="end" name="sunny" />
+     </IonRange>
+   </IonItem>
+
+    <IonItem>
+      <IonRange min={1000} max={2000} step={100} snaps={true} color="secondary"></IonRange>
+    </IonItem>
+
+    <IonItem>
+      <IonRange dualKnobs={true} min={21} max={72} step={3} snaps={true}></IonRange>
+    </IonItem>
+  </IonList>
+);
+
+export default Example;
+```
diff --git a/core/src/components/refresher/readme.md b/core/src/components/refresher/readme.md
index 722d64903a..954ee8a17b 100644
--- a/core/src/components/refresher/readme.md
+++ b/core/src/components/refresher/readme.md
@@ -85,6 +85,52 @@ export class RefresherExample {
 ```
 
 
+### React
+
+```tsx
+import React from 'react';
+
+import { IonContent, IonRefresher, IonRefresherContent } from '@ionic/react';
+
+function doRefresh(event: CustomEvent) {
+  console.log('Begin async operation');
+
+  setTimeout(() => {
+    console.log('Async operation has ended');
+    event.target.complete();
+  }, 2000);
+}
+
+const Example: React.SFC<{}> = () => (
+  <>
+    {/*-- Default Refresher --*/}
+    <IonContent>
+      <IonRefresher slot="fixed" onIonRefresh={doRefresh}>
+        <IonRefresherContent></IonRefresherContent>
+      </IonRefresher>
+    </IonContent>
+
+    {/*-- Custom Refresher Content --*/}
+    <IonContent>
+      <IonRefresher slot="fixed" onIonRefresh={doRefresh}>
+        <IonRefresherContent
+          pullingIcon="arrow-dropdown"
+          pullingText="Pull to refresh"
+          refreshingSpinner="circles"
+          refreshingText="Refreshing...">
+        </IonRefresherContent>
+      </IonRefresher>
+    </IonContent>
+  </>
+
+  }
+
+
+);
+
+export default Example
+
+
 
 ## Properties
 
diff --git a/core/src/components/refresher/usage/react.md b/core/src/components/refresher/usage/react.md
new file mode 100644
index 0000000000..e8bd3308b7
--- /dev/null
+++ b/core/src/components/refresher/usage/react.md
@@ -0,0 +1,42 @@
+```tsx
+import React from 'react';
+
+import { IonContent, IonRefresher, IonRefresherContent } from '@ionic/react';
+
+function doRefresh(event: CustomEvent) {
+  console.log('Begin async operation');
+
+  setTimeout(() => {
+    console.log('Async operation has ended');
+    event.target.complete();
+  }, 2000);
+}
+
+const Example: React.SFC<{}> = () => (
+  <>
+    {/*-- Default Refresher --*/}
+    <IonContent>
+      <IonRefresher slot="fixed" onIonRefresh={doRefresh}>
+        <IonRefresherContent></IonRefresherContent>
+      </IonRefresher>
+    </IonContent>
+
+    {/*-- Custom Refresher Content --*/}
+    <IonContent>
+      <IonRefresher slot="fixed" onIonRefresh={doRefresh}>
+        <IonRefresherContent
+          pullingIcon="arrow-dropdown"
+          pullingText="Pull to refresh"
+          refreshingSpinner="circles"
+          refreshingText="Refreshing...">
+        </IonRefresherContent>
+      </IonRefresher>
+    </IonContent>
+  </>
+
+  }
+
+
+);
+
+export default Example
diff --git a/core/src/components/reorder-group/readme.md b/core/src/components/reorder-group/readme.md
index d6e683e973..4ed45fd7ef 100644
--- a/core/src/components/reorder-group/readme.md
+++ b/core/src/components/reorder-group/readme.md
@@ -164,6 +164,67 @@ reorderGroup.addEventListener('ionItemReorder', ({detail}) => {
 ```
 
 
+### React
+
+```tsx
+import React from 'react';
+
+import { IonContent, IonList, IonItem, IonLabel, IonReorder, IonReorderGroup, IonIcon } from '@ionic/react';
+
+const Example: React.SFC<{}> = () => (
+
+  <IonContent>
+    <IonList>
+      <IonReorderGroup>
+
+        <IonItem>
+          <IonLabel>
+            Item 1
+          </IonLabel>
+          <IonReorder slot="end"></IonReorder>
+        </IonItem>
+
+        <IonItem>
+          <IonLabel>
+            Item 2 (default ion-reorder slot="start")
+          </IonLabel>
+          <IonReorder slot="start"></IonReorder>
+        </IonItem>
+
+        <IonItem>
+          <IonLabel>
+            Item 3 (custom ion-reorder)
+          </IonLabel>
+          <IonReorder slot="end">
+            <IonIcon name="pizza" />
+          </IonReorder>
+        </IonItem>
+
+        <IonItem>
+          <IonLabel>
+            Item 4 (custom ion-reorder slot="start")
+          </IonLabel>
+          <IonReorder slot="start">
+            <IonIcon name="pizza" />
+          </IonReorder>
+        </IonItem>
+
+        <IonReorder>
+          <IonItem>
+            <IonLabel>
+              Item 5 (the whole item can be dragged)
+            </IonLabel>
+            </IonItem>
+        </IonReorder>
+
+      </IonReorderGroup>
+    </IonList>
+  </IonContent>
+);
+
+export default Example
+
+
 
 ## Properties
 
diff --git a/core/src/components/reorder-group/usage/react.md b/core/src/components/reorder-group/usage/react.md
new file mode 100644
index 0000000000..4dbe998621
--- /dev/null
+++ b/core/src/components/reorder-group/usage/react.md
@@ -0,0 +1,57 @@
+```tsx
+import React from 'react';
+
+import { IonContent, IonList, IonItem, IonLabel, IonReorder, IonReorderGroup, IonIcon } from '@ionic/react';
+
+const Example: React.SFC<{}> = () => (
+
+  <IonContent>
+    <IonList>
+      <IonReorderGroup>
+
+        <IonItem>
+          <IonLabel>
+            Item 1
+          </IonLabel>
+          <IonReorder slot="end"></IonReorder>
+        </IonItem>
+
+        <IonItem>
+          <IonLabel>
+            Item 2 (default ion-reorder slot="start")
+          </IonLabel>
+          <IonReorder slot="start"></IonReorder>
+        </IonItem>
+
+        <IonItem>
+          <IonLabel>
+            Item 3 (custom ion-reorder)
+          </IonLabel>
+          <IonReorder slot="end">
+            <IonIcon name="pizza" />
+          </IonReorder>
+        </IonItem>
+
+        <IonItem>
+          <IonLabel>
+            Item 4 (custom ion-reorder slot="start")
+          </IonLabel>
+          <IonReorder slot="start">
+            <IonIcon name="pizza" />
+          </IonReorder>
+        </IonItem>
+
+        <IonReorder>
+          <IonItem>
+            <IonLabel>
+              Item 5 (the whole item can be dragged)
+            </IonLabel>
+            </IonItem>
+        </IonReorder>
+
+      </IonReorderGroup>
+    </IonList>
+  </IonContent>
+);
+
+export default Example
diff --git a/core/src/components/searchbar/readme.md b/core/src/components/searchbar/readme.md
index 1e20614de4..769a421113 100644
--- a/core/src/components/searchbar/readme.md
+++ b/core/src/components/searchbar/readme.md
@@ -79,6 +79,50 @@ A Searchbar should be used instead of an input to search lists. A clear button i
 ```
 
 
+### React
+
+```tsx
+import React from 'react';
+
+import { IonSearchbar, IonToolbar } from '@ionic/react';
+
+const Example: React.SFC<{}> = () => (
+  <>
+    {/*-- Default Searchbar --*/}
+    <IonSearchbar></IonSearchbar>
+
+    {/*-- Searchbar with danger color --*/}
+    <IonSearchbar color="danger"></IonSearchbar>
+
+    {/*-- Searchbar with value --*/}
+    <IonSearchbar value="Ionic"></IonSearchbar>
+
+    {/*-- Searchbar with telephone type --*/}
+    <IonSearchbar type="tel"></IonSearchbar>
+
+    {/*-- Searchbar with a cancel button and custom cancel button text --*/}
+    <IonSearchbar showCancelButton cancelButtonText="Custom Cancel"></IonSearchbar>
+
+    {/*-- Searchbar with a custom debounce --*/}
+    <IonSearchbar debounce={500}></IonSearchbar>
+
+    {/*-- Animated Searchbar --*/}
+    <IonSearchbar animated></IonSearchbar>
+
+    {/*-- Searchbar with a placeholder --*/}
+    <IonSearchbar placeholder="Filter Schedules"></IonSearchbar>
+
+    {/*-- Searchbar in a Toolbar --*/}
+    <IonToolbar>
+      <IonSearchbar></IonSearchbar>
+    </IonToolbar>
+  </>
+);
+
+export default Example;
+```
+
+
 
 ## Properties
 
diff --git a/core/src/components/searchbar/usage/react.md b/core/src/components/searchbar/usage/react.md
new file mode 100644
index 0000000000..6101b9034b
--- /dev/null
+++ b/core/src/components/searchbar/usage/react.md
@@ -0,0 +1,40 @@
+```tsx
+import React from 'react';
+
+import { IonSearchbar, IonToolbar } from '@ionic/react';
+
+const Example: React.SFC<{}> = () => (
+  <>
+    {/*-- Default Searchbar --*/}
+    <IonSearchbar></IonSearchbar>
+
+    {/*-- Searchbar with danger color --*/}
+    <IonSearchbar color="danger"></IonSearchbar>
+
+    {/*-- Searchbar with value --*/}
+    <IonSearchbar value="Ionic"></IonSearchbar>
+
+    {/*-- Searchbar with telephone type --*/}
+    <IonSearchbar type="tel"></IonSearchbar>
+
+    {/*-- Searchbar with a cancel button and custom cancel button text --*/}
+    <IonSearchbar showCancelButton cancelButtonText="Custom Cancel"></IonSearchbar>
+
+    {/*-- Searchbar with a custom debounce --*/}
+    <IonSearchbar debounce={500}></IonSearchbar>
+
+    {/*-- Animated Searchbar --*/}
+    <IonSearchbar animated></IonSearchbar>
+
+    {/*-- Searchbar with a placeholder --*/}
+    <IonSearchbar placeholder="Filter Schedules"></IonSearchbar>
+
+    {/*-- Searchbar in a Toolbar --*/}
+    <IonToolbar>
+      <IonSearchbar></IonSearchbar>
+    </IonToolbar>
+  </>
+);
+
+export default Example;
+```
diff --git a/core/src/components/segment-button/readme.md b/core/src/components/segment-button/readme.md
index f3055aeb1f..5d0b951794 100644
--- a/core/src/components/segment-button/readme.md
+++ b/core/src/components/segment-button/readme.md
@@ -315,6 +315,157 @@ for (let i = 0; i < segmentButtons.length; i++) {
 ```
 
 
+### React
+
+```tsx
+import React from 'react';
+
+import { IonSegment, IonSegmentButton, IonLabel, IonIcon } from '@ionic/react';
+
+const Example: React.SFC<{}> = () => (
+  <>
+    {/*-- Segment buttons with text and click listeners --*/}
+    <IonSegment>
+      <IonSegmentButton onIonSelect={() => console.log('Friends segment selected')}>
+        <IonLabel>Friends</IonLabel>
+      </IonSegmentButton>
+      <IonSegmentButton onIonSelect={() => console.log('Enemies segment selected')}>
+        <IonLabel>Enemies</IonLabel>
+      </IonSegmentButton>
+    </IonSegment>
+
+    {/*-- Segment buttons with the first checked and the last disabled --*/}
+    <IonSegment>
+      <IonSegmentButton checked>
+        <IonLabel>Paid</IonLabel>
+      </IonSegmentButton>
+      <IonSegmentButton>
+        <IonLabel>Free</IonLabel>
+      </IonSegmentButton>
+      <IonSegmentButton disabled>
+        <IonLabel>Top</IonLabel>
+      </IonSegmentButton>
+    </IonSegment>
+
+    {/*-- Segment buttons with values and icons --*/}
+    <IonSegment>
+      <IonSegmentButton value="camera">
+        <IonIcon name="camera" />
+      </IonSegmentButton>
+      <IonSegmentButton value="bookmark">
+        <IonIcon name="bookmark" />
+      </IonSegmentButton>
+    </IonSegment>
+
+    {/*-- Segment with a value that checks the last button --*/}
+    <IonSegment value="shared">
+      <IonSegmentButton value="bookmarks">
+        <IonLabel>Bookmarks</IonLabel>
+      </IonSegmentButton>
+      <IonSegmentButton value="reading">
+        <IonLabel>Reading List</IonLabel>
+      </IonSegmentButton>
+      <IonSegmentButton value="shared">
+        <IonLabel>Shared Links</IonLabel>
+      </IonSegmentButton>
+    </IonSegment>
+
+    {/*-- Label only --*/}
+    <IonSegment>
+      <IonSegmentButton checked>
+        <IonLabel>Item One</IonLabel>
+      </IonSegmentButton>
+      <IonSegmentButton>
+        <IonLabel>Item Two</IonLabel>
+      </IonSegmentButton>
+      <IonSegmentButton>
+        <IonLabel>Item Three</IonLabel>
+      </IonSegmentButton>
+    </IonSegment>
+
+    {/*-- Icon only --*/}
+    <IonSegment>
+      <IonSegmentButton>
+        <IonIcon name="call" />
+      </IonSegmentButton>
+      <IonSegmentButton checked>
+        <IonIcon name="heart" />
+      </IonSegmentButton>
+      <IonSegmentButton>
+        <IonIcon name="pin" />
+      </IonSegmentButton>
+    </IonSegment>
+
+    {/*-- Icon top --*/}
+    <IonSegment>
+      <IonSegmentButton>
+        <IonLabel>Item One</IonLabel>
+        <IonIcon name="call" />
+      </IonSegmentButton>
+      <IonSegmentButton checked>
+        <IonLabel>Item Two</IonLabel>
+        <IonIcon name="heart" />
+      </IonSegmentButton>
+      <IonSegmentButton>
+        <IonLabel>Item Three</IonLabel>
+        <IonIcon name="pin" />
+      </IonSegmentButton>
+    </IonSegment>
+
+    {/*-- Icon bottom --*/}
+    <IonSegment>
+      <IonSegmentButton checked layout="icon-bottom">
+        <IonIcon name="call" />
+        <IonLabel>Item One</IonLabel>
+      </IonSegmentButton>
+      <IonSegmentButton layout="icon-bottom">
+        <IonIcon name="heart" />
+        <IonLabel>Item Two</IonLabel>
+      </IonSegmentButton>
+      <IonSegmentButton layout="icon-bottom">
+        <IonIcon name="pin" />
+        <IonLabel>Item Three</IonLabel>
+      </IonSegmentButton>
+    </IonSegment>
+
+    {/*-- Icon start --*/}
+    <IonSegment>
+      <IonSegmentButton checked layout="icon-start">
+        <IonLabel>Item One</IonLabel>
+        <IonIcon name="call" />
+      </IonSegmentButton>
+      <IonSegmentButton layout="icon-start">
+        <IonLabel>Item Two</IonLabel>
+        <IonIcon name="heart" />
+      </IonSegmentButton>
+      <IonSegmentButton layout="icon-start">
+        <IonLabel>Item Three</IonLabel>
+        <IonIcon name="pin" />
+      </IonSegmentButton>
+    </IonSegment>
+
+    {/*-- Icon end --*/}
+    <IonSegment>
+      <IonSegmentButton checked layout="icon-end">
+        <IonIcon name="call" />
+        <IonLabel>Item One</IonLabel>
+      </IonSegmentButton>
+      <IonSegmentButton disabled layout="icon-end">
+        <IonIcon name="heart" />
+        <IonLabel>Item Two</IonLabel>
+      </IonSegmentButton>
+      <IonSegmentButton layout="icon-end">
+        <IonIcon name="pin" />
+        <IonLabel>Item Three</IonLabel>
+      </IonSegmentButton>
+    </IonSegment>
+  </>
+);
+
+export default Example;
+```
+
+
 
 ## Properties
 
diff --git a/core/src/components/segment-button/usage/react.md b/core/src/components/segment-button/usage/react.md
new file mode 100644
index 0000000000..be55e938ca
--- /dev/null
+++ b/core/src/components/segment-button/usage/react.md
@@ -0,0 +1,147 @@
+```tsx
+import React from 'react';
+
+import { IonSegment, IonSegmentButton, IonLabel, IonIcon } from '@ionic/react';
+
+const Example: React.SFC<{}> = () => (
+  <>
+    {/*-- Segment buttons with text and click listeners --*/}
+    <IonSegment>
+      <IonSegmentButton onIonSelect={() => console.log('Friends segment selected')}>
+        <IonLabel>Friends</IonLabel>
+      </IonSegmentButton>
+      <IonSegmentButton onIonSelect={() => console.log('Enemies segment selected')}>
+        <IonLabel>Enemies</IonLabel>
+      </IonSegmentButton>
+    </IonSegment>
+
+    {/*-- Segment buttons with the first checked and the last disabled --*/}
+    <IonSegment>
+      <IonSegmentButton checked>
+        <IonLabel>Paid</IonLabel>
+      </IonSegmentButton>
+      <IonSegmentButton>
+        <IonLabel>Free</IonLabel>
+      </IonSegmentButton>
+      <IonSegmentButton disabled>
+        <IonLabel>Top</IonLabel>
+      </IonSegmentButton>
+    </IonSegment>
+
+    {/*-- Segment buttons with values and icons --*/}
+    <IonSegment>
+      <IonSegmentButton value="camera">
+        <IonIcon name="camera" />
+      </IonSegmentButton>
+      <IonSegmentButton value="bookmark">
+        <IonIcon name="bookmark" />
+      </IonSegmentButton>
+    </IonSegment>
+
+    {/*-- Segment with a value that checks the last button --*/}
+    <IonSegment value="shared">
+      <IonSegmentButton value="bookmarks">
+        <IonLabel>Bookmarks</IonLabel>
+      </IonSegmentButton>
+      <IonSegmentButton value="reading">
+        <IonLabel>Reading List</IonLabel>
+      </IonSegmentButton>
+      <IonSegmentButton value="shared">
+        <IonLabel>Shared Links</IonLabel>
+      </IonSegmentButton>
+    </IonSegment>
+
+    {/*-- Label only --*/}
+    <IonSegment>
+      <IonSegmentButton checked>
+        <IonLabel>Item One</IonLabel>
+      </IonSegmentButton>
+      <IonSegmentButton>
+        <IonLabel>Item Two</IonLabel>
+      </IonSegmentButton>
+      <IonSegmentButton>
+        <IonLabel>Item Three</IonLabel>
+      </IonSegmentButton>
+    </IonSegment>
+
+    {/*-- Icon only --*/}
+    <IonSegment>
+      <IonSegmentButton>
+        <IonIcon name="call" />
+      </IonSegmentButton>
+      <IonSegmentButton checked>
+        <IonIcon name="heart" />
+      </IonSegmentButton>
+      <IonSegmentButton>
+        <IonIcon name="pin" />
+      </IonSegmentButton>
+    </IonSegment>
+
+    {/*-- Icon top --*/}
+    <IonSegment>
+      <IonSegmentButton>
+        <IonLabel>Item One</IonLabel>
+        <IonIcon name="call" />
+      </IonSegmentButton>
+      <IonSegmentButton checked>
+        <IonLabel>Item Two</IonLabel>
+        <IonIcon name="heart" />
+      </IonSegmentButton>
+      <IonSegmentButton>
+        <IonLabel>Item Three</IonLabel>
+        <IonIcon name="pin" />
+      </IonSegmentButton>
+    </IonSegment>
+
+    {/*-- Icon bottom --*/}
+    <IonSegment>
+      <IonSegmentButton checked layout="icon-bottom">
+        <IonIcon name="call" />
+        <IonLabel>Item One</IonLabel>
+      </IonSegmentButton>
+      <IonSegmentButton layout="icon-bottom">
+        <IonIcon name="heart" />
+        <IonLabel>Item Two</IonLabel>
+      </IonSegmentButton>
+      <IonSegmentButton layout="icon-bottom">
+        <IonIcon name="pin" />
+        <IonLabel>Item Three</IonLabel>
+      </IonSegmentButton>
+    </IonSegment>
+
+    {/*-- Icon start --*/}
+    <IonSegment>
+      <IonSegmentButton checked layout="icon-start">
+        <IonLabel>Item One</IonLabel>
+        <IonIcon name="call" />
+      </IonSegmentButton>
+      <IonSegmentButton layout="icon-start">
+        <IonLabel>Item Two</IonLabel>
+        <IonIcon name="heart" />
+      </IonSegmentButton>
+      <IonSegmentButton layout="icon-start">
+        <IonLabel>Item Three</IonLabel>
+        <IonIcon name="pin" />
+      </IonSegmentButton>
+    </IonSegment>
+
+    {/*-- Icon end --*/}
+    <IonSegment>
+      <IonSegmentButton checked layout="icon-end">
+        <IonIcon name="call" />
+        <IonLabel>Item One</IonLabel>
+      </IonSegmentButton>
+      <IonSegmentButton disabled layout="icon-end">
+        <IonIcon name="heart" />
+        <IonLabel>Item Two</IonLabel>
+      </IonSegmentButton>
+      <IonSegmentButton layout="icon-end">
+        <IonIcon name="pin" />
+        <IonLabel>Item Three</IonLabel>
+      </IonSegmentButton>
+    </IonSegment>
+  </>
+);
+
+export default Example;
+```
diff --git a/core/src/components/segment/readme.md b/core/src/components/segment/readme.md
index d5f535b0a6..4e60c2982d 100644
--- a/core/src/components/segment/readme.md
+++ b/core/src/components/segment/readme.md
@@ -225,6 +225,111 @@ for (let i = 0; i < segments.length; i++) {
 ```
 
 
+### React
+
+```tsx
+import React from 'react';
+
+import { IonSegment, IonSegmentButton, IonLabel, IonIcon, IonToolbar } from '@ionic/react';
+
+const Example: React.SFC<{}> = () => (
+  <>
+    {/*-- Default Segment --*/}
+    <IonSegment onIonChange={(e) => console.log('Segment selected', e.detail.value)}>
+      <IonSegmentButton value="friends">
+        <IonLabel>Friends</IonLabel>
+      </IonSegmentButton>
+      <IonSegmentButton value="enemies">
+        <IonLabel>Enemies</IonLabel>
+      </IonSegmentButton>
+    </IonSegment>
+
+    {/*-- Disabled Segment --*/}
+    <IonSegment onIonChange={(e) => console.log('Segment selected', e.detail.value)} disabled>
+      <IonSegmentButton value="sunny" checked>
+        <IonLabel>Sunny</IonLabel>
+      </IonSegmentButton>
+      <IonSegmentButton value="rainy">
+        <IonLabel>Rainy</IonLabel>
+      </IonSegmentButton>
+    </IonSegment>
+
+    {/*-- Segment with anchors --*/}
+    <IonSegment onIonChange={(e) => console.log('Segment selected', e.detail.value)}>
+      <IonSegmentButton value="dogs">
+        <IonLabel>Dogs</IonLabel>
+      </IonSegmentButton>
+      <IonSegmentButton value="cats">
+        <IonLabel>Cats</IonLabel>
+      </IonSegmentButton>
+    </IonSegment>
+
+    {/*-- Scrollable Segment --*/}
+    <IonSegment scrollable>
+      <IonSegmentButton>
+        <IonIcon name="home" />
+      </IonSegmentButton>
+      <IonSegmentButton checked>
+        <IonIcon name="heart" />
+      </IonSegmentButton>
+      <IonSegmentButton>
+        <IonIcon name="pin" />
+      </IonSegmentButton>
+      <IonSegmentButton>
+        <IonIcon name="star" />
+      </IonSegmentButton>
+      <IonSegmentButton>
+        <IonIcon name="call" />
+      </IonSegmentButton>
+      <IonSegmentButton>
+        <IonIcon name="globe" />
+      </IonSegmentButton>
+      <IonSegmentButton>
+        <IonIcon name="basket" />
+      </IonSegmentButton>
+    </IonSegment>
+
+    {/*-- Segment with secondary color --*/}
+    <IonSegment onIonChange={(e) => console.log('Segment selected', e.detail.value)} color="secondary">
+      <IonSegmentButton value="standard">
+        <IonLabel>Standard</IonLabel>
+      </IonSegmentButton>
+      <IonSegmentButton value="hybrid">
+        <IonLabel>Hybrid</IonLabel>
+      </IonSegmentButton>
+      <IonSegmentButton value="sat">
+        <IonLabel>Satellite</IonLabel>
+      </IonSegmentButton>
+    </IonSegment>
+
+    {/*-- Segment in a toolbar --*/}
+    <IonToolbar>
+      <IonSegment  onIonChange={(e) => console.log('Segment selected', e.detail.value)}>
+        <IonSegmentButton value="camera">
+          <IonIcon name="camera" />
+        </IonSegmentButton>
+        <IonSegmentButton value="bookmark">
+          <IonIcon name="bookmark" />
+        </IonSegmentButton>
+      </IonSegment>
+    </IonToolbar>
+
+    {/*-- Segment with default selection --*/}
+    <IonSegment onIonChange={(e) => console.log('Segment selected', e.detail.value)} value="javascript">
+      <IonSegmentButton value="python">
+        <IonLabel>Python</IonLabel>
+      </IonSegmentButton>
+      <IonSegmentButton value="javascript">
+        <IonLabel>Javascript</IonLabel>
+      </IonSegmentButton>
+    </IonSegment>
+  </>
+);
+
+export default Example;
+```
+
+
 
 ## Properties
 
diff --git a/core/src/components/segment/usage/react.md b/core/src/components/segment/usage/react.md
new file mode 100644
index 0000000000..a5278373ba
--- /dev/null
+++ b/core/src/components/segment/usage/react.md
@@ -0,0 +1,101 @@
+```tsx
+import React from 'react';
+
+import { IonSegment, IonSegmentButton, IonLabel, IonIcon, IonToolbar } from '@ionic/react';
+
+const Example: React.SFC<{}> = () => (
+  <>
+    {/*-- Default Segment --*/}
+    <IonSegment onIonChange={(e) => console.log('Segment selected', e.detail.value)}>
+      <IonSegmentButton value="friends">
+        <IonLabel>Friends</IonLabel>
+      </IonSegmentButton>
+      <IonSegmentButton value="enemies">
+        <IonLabel>Enemies</IonLabel>
+      </IonSegmentButton>
+    </IonSegment>
+
+    {/*-- Disabled Segment --*/}
+    <IonSegment onIonChange={(e) => console.log('Segment selected', e.detail.value)} disabled>
+      <IonSegmentButton value="sunny" checked>
+        <IonLabel>Sunny</IonLabel>
+      </IonSegmentButton>
+      <IonSegmentButton value="rainy">
+        <IonLabel>Rainy</IonLabel>
+      </IonSegmentButton>
+    </IonSegment>
+
+    {/*-- Segment with anchors --*/}
+    <IonSegment onIonChange={(e) => console.log('Segment selected', e.detail.value)}>
+      <IonSegmentButton value="dogs">
+        <IonLabel>Dogs</IonLabel>
+      </IonSegmentButton>
+      <IonSegmentButton value="cats">
+        <IonLabel>Cats</IonLabel>
+      </IonSegmentButton>
+    </IonSegment>
+
+    {/*-- Scrollable Segment --*/}
+    <IonSegment scrollable>
+      <IonSegmentButton>
+        <IonIcon name="home" />
+      </IonSegmentButton>
+      <IonSegmentButton checked>
+        <IonIcon name="heart" />
+      </IonSegmentButton>
+      <IonSegmentButton>
+        <IonIcon name="pin" />
+      </IonSegmentButton>
+      <IonSegmentButton>
+        <IonIcon name="star" />
+      </IonSegmentButton>
+      <IonSegmentButton>
+        <IonIcon name="call" />
+      </IonSegmentButton>
+      <IonSegmentButton>
+        <IonIcon name="globe" />
+      </IonSegmentButton>
+      <IonSegmentButton>
+        <IonIcon name="basket" />
+      </IonSegmentButton>
+    </IonSegment>
+
+    {/*-- Segment with secondary color --*/}
+    <IonSegment onIonChange={(e) => console.log('Segment selected', e.detail.value)} color="secondary">
+      <IonSegmentButton value="standard">
+        <IonLabel>Standard</IonLabel>
+      </IonSegmentButton>
+      <IonSegmentButton value="hybrid">
+        <IonLabel>Hybrid</IonLabel>
+      </IonSegmentButton>
+      <IonSegmentButton value="sat">
+        <IonLabel>Satellite</IonLabel>
+      </IonSegmentButton>
+    </IonSegment>
+
+    {/*-- Segment in a toolbar --*/}
+    <IonToolbar>
+      <IonSegment  onIonChange={(e) => console.log('Segment selected', e.detail.value)}>
+        <IonSegmentButton value="camera">
+          <IonIcon name="camera" />
+        </IonSegmentButton>
+        <IonSegmentButton value="bookmark">
+          <IonIcon name="bookmark" />
+        </IonSegmentButton>
+      </IonSegment>
+    </IonToolbar>
+
+    {/*-- Segment with default selection --*/}
+    <IonSegment onIonChange={(e) => console.log('Segment selected', e.detail.value)} value="javascript">
+      <IonSegmentButton value="python">
+        <IonLabel>Python</IonLabel>
+      </IonSegmentButton>
+      <IonSegmentButton value="javascript">
+        <IonLabel>Javascript</IonLabel>
+      </IonSegmentButton>
+    </IonSegment>
+  </>
+);
+
+export default Example;
+```
diff --git a/core/src/components/select/readme.md b/core/src/components/select/readme.md
index ec80faa500..cca9f9ad2f 100644
--- a/core/src/components/select/readme.md
+++ b/core/src/components/select/readme.md
@@ -316,6 +316,143 @@ customActionSheetSelect.interfaceOptions = customActionSheetOptions;
 ```
 
 
+### React
+
+```tsx
+import React from 'react';
+
+import { IonList, IonListHeader, IonItem, IonLabel, IonSelect, IonSelectOption } from '@ionic/react';
+
+const customAlertOptions = {
+  header: 'Pizza Toppings',
+  subHeader: 'Select your toppings',
+  message: '$1.00 per topping',
+  translucent: true
+};
+
+const customPopoverOptions = {
+  header: 'Hair Color',
+  subHeader: 'Select your hair color',
+  message: 'Only select your dominant hair color'
+};
+
+const customActionSheetOptions = {
+  header: 'Colors',
+  subHeader: 'Select your favorite color'
+};
+
+const Example: React.SFC<{}> = () => (
+  <>
+    ## Single Selection
+
+
+    <IonList>
+      <IonListHeader>Single Selection</IonListHeader>
+
+      <IonItem>
+        <IonLabel>Gender</IonLabel>
+        <IonSelect placeholder="Select One">
+          <IonSelectOption value="f">Female</IonSelectOption>
+          <IonSelectOption value="m">Male</IonSelectOption>
+        </IonSelect>
+      </IonItem>
+
+      <IonItem>
+        <IonLabel>Hair Color</IonLabel>
+        <IonSelect value="brown" okText="Okay" cancelText="Dismiss">
+          <IonSelectOption value="brown">Brown</IonSelectOption>
+          <IonSelectOption value="blonde">Blonde</IonSelectOption>
+          <IonSelectOption value="black">Black</IonSelectOption>
+          <IonSelectOption value="red">Red</IonSelectOption>
+        </IonSelect>
+      </IonItem>
+    </IonList>
+
+
+    ## Multiple Selection
+
+
+    <IonList>
+      <IonListHeader>Multiple Selection</IonListHeader>
+
+      <IonItem>
+        <IonLabel>Toppings</IonLabel>
+        <IonSelect multiple={true} cancelText="Nah" okText="Okay!">
+          <IonSelectOption value="bacon">Bacon</IonSelectOption>
+          <IonSelectOption value="olives">Black Olives</IonSelectOption>
+          <IonSelectOption value="xcheese">Extra Cheese</IonSelectOption>
+          <IonSelectOption value="peppers">Green Peppers</IonSelectOption>
+          <IonSelectOption value="mushrooms">Mushrooms</IonSelectOption>
+          <IonSelectOption value="onions">Onions</IonSelectOption>
+          <IonSelectOption value="pepperoni">Pepperoni</IonSelectOption>
+          <IonSelectOption value="pineapple">Pineapple</IonSelectOption>
+          <IonSelectOption value="sausage">Sausage</IonSelectOption>
+          <IonSelectOption value="Spinach">Spinach</IonSelectOption>
+        </IonSelect>
+      </IonItem>
+
+      <IonItem>
+        <IonLabel>Pets</IonLabel>
+        <IonSelect multiple={true}>
+          <IonSelectOption value="bird" selected>Bird</IonSelectOption>
+          <IonSelectOption value="cat">Cat</IonSelectOption>
+          <IonSelectOption value="dog" selected>Dog</IonSelectOption>
+          <IonSelectOption value="honeybadger">Honey Badger</IonSelectOption>
+        </IonSelect>
+      </IonItem>
+    </IonList>
+
+
+    ## Interface Options
+
+
+    <IonList>
+      <IonListHeader>Interface Options</IonListHeader>
+
+      <IonItem>
+        <IonLabel>Alert</IonLabel>
+        <IonSelect interfaceOptions={customAlertOptions} interface="alert" multiple={true} placeholder="Select One">
+          <IonSelectOption value="bacon">Bacon</IonSelectOption>
+          <IonSelectOption value="olives">Black Olives</IonSelectOption>
+          <IonSelectOption value="xcheese">Extra Cheese</IonSelectOption>
+          <IonSelectOption value="peppers">Green Peppers</IonSelectOption>
+          <IonSelectOption value="mushrooms">Mushrooms</IonSelectOption>
+          <IonSelectOption value="onions">Onions</IonSelectOption>
+          <IonSelectOption value="pepperoni">Pepperoni</IonSelectOption>
+          <IonSelectOption value="pineapple">Pineapple</IonSelectOption>
+          <IonSelectOption value="sausage">Sausage</IonSelectOption>
+          <IonSelectOption value="Spinach">Spinach</IonSelectOption>
+        </IonSelect>
+      </IonItem>
+
+      <IonItem>
+        <IonLabel>Popover</IonLabel>
+        <IonSelect interfaceOptions={customPopoverOptions} interface="popover" placeholder="Select One">
+          <IonSelectOption value="brown">Brown</IonSelectOption>
+          <IonSelectOption value="blonde">Blonde</IonSelectOption>
+          <IonSelectOption value="black">Black</IonSelectOption>
+          <IonSelectOption value="red">Red</IonSelectOption>
+        </IonSelect>
+      </IonItem>
+
+      <IonItem>
+        <IonLabel>Action Sheet</IonLabel>
+        <IonSelect interfaceOptions={customActionSheetOptions} interface="action-sheet" placeholder="Select One">
+          <IonSelectOption value="red">Red</IonSelectOption>
+          <IonSelectOption value="purple">Purple</IonSelectOption>
+          <IonSelectOption value="yellow">Yellow</IonSelectOption>
+          <IonSelectOption value="orange">Orange</IonSelectOption>
+          <IonSelectOption value="green">Green</IonSelectOption>
+        </IonSelect>
+      </IonItem>
+    </IonList>
+  </>
+);
+
+export default Example;
+```
+
+
 
 ## Properties
 
diff --git a/core/src/components/select/usage/react.md b/core/src/components/select/usage/react.md
new file mode 100644
index 0000000000..a376f8be84
--- /dev/null
+++ b/core/src/components/select/usage/react.md
@@ -0,0 +1,133 @@
+```tsx
+import React from 'react';
+
+import { IonList, IonListHeader, IonItem, IonLabel, IonSelect, IonSelectOption } from '@ionic/react';
+
+const customAlertOptions = {
+  header: 'Pizza Toppings',
+  subHeader: 'Select your toppings',
+  message: '$1.00 per topping',
+  translucent: true
+};
+
+const customPopoverOptions = {
+  header: 'Hair Color',
+  subHeader: 'Select your hair color',
+  message: 'Only select your dominant hair color'
+};
+
+const customActionSheetOptions = {
+  header: 'Colors',
+  subHeader: 'Select your favorite color'
+};
+
+const Example: React.SFC<{}> = () => (
+  <>
+    ## Single Selection
+
+
+    <IonList>
+      <IonListHeader>Single Selection</IonListHeader>
+
+      <IonItem>
+        <IonLabel>Gender</IonLabel>
+        <IonSelect placeholder="Select One">
+          <IonSelectOption value="f">Female</IonSelectOption>
+          <IonSelectOption value="m">Male</IonSelectOption>
+        </IonSelect>
+      </IonItem>
+
+      <IonItem>
+        <IonLabel>Hair Color</IonLabel>
+        <IonSelect value="brown" okText="Okay" cancelText="Dismiss">
+          <IonSelectOption value="brown">Brown</IonSelectOption>
+          <IonSelectOption value="blonde">Blonde</IonSelectOption>
+          <IonSelectOption value="black">Black</IonSelectOption>
+          <IonSelectOption value="red">Red</IonSelectOption>
+        </IonSelect>
+      </IonItem>
+    </IonList>
+
+
+    ## Multiple Selection
+
+
+    <IonList>
+      <IonListHeader>Multiple Selection</IonListHeader>
+
+      <IonItem>
+        <IonLabel>Toppings</IonLabel>
+        <IonSelect multiple={true} cancelText="Nah" okText="Okay!">
+          <IonSelectOption value="bacon">Bacon</IonSelectOption>
+          <IonSelectOption value="olives">Black Olives</IonSelectOption>
+          <IonSelectOption value="xcheese">Extra Cheese</IonSelectOption>
+          <IonSelectOption value="peppers">Green Peppers</IonSelectOption>
+          <IonSelectOption value="mushrooms">Mushrooms</IonSelectOption>
+          <IonSelectOption value="onions">Onions</IonSelectOption>
+          <IonSelectOption value="pepperoni">Pepperoni</IonSelectOption>
+          <IonSelectOption value="pineapple">Pineapple</IonSelectOption>
+          <IonSelectOption value="sausage">Sausage</IonSelectOption>
+          <IonSelectOption value="Spinach">Spinach</IonSelectOption>
+        </IonSelect>
+      </IonItem>
+
+      <IonItem>
+        <IonLabel>Pets</IonLabel>
+        <IonSelect multiple={true}>
+          <IonSelectOption value="bird" selected>Bird</IonSelectOption>
+          <IonSelectOption value="cat">Cat</IonSelectOption>
+          <IonSelectOption value="dog" selected>Dog</IonSelectOption>
+          <IonSelectOption value="honeybadger">Honey Badger</IonSelectOption>
+        </IonSelect>
+      </IonItem>
+    </IonList>
+
+
+    ## Interface Options
+
+
+    <IonList>
+      <IonListHeader>Interface Options</IonListHeader>
+
+      <IonItem>
+        <IonLabel>Alert</IonLabel>
+        <IonSelect interfaceOptions={customAlertOptions} interface="alert" multiple={true} placeholder="Select One">
+          <IonSelectOption value="bacon">Bacon</IonSelectOption>
+          <IonSelectOption value="olives">Black Olives</IonSelectOption>
+          <IonSelectOption value="xcheese">Extra Cheese</IonSelectOption>
+          <IonSelectOption value="peppers">Green Peppers</IonSelectOption>
+          <IonSelectOption value="mushrooms">Mushrooms</IonSelectOption>
+          <IonSelectOption value="onions">Onions</IonSelectOption>
+          <IonSelectOption value="pepperoni">Pepperoni</IonSelectOption>
+          <IonSelectOption value="pineapple">Pineapple</IonSelectOption>
+          <IonSelectOption value="sausage">Sausage</IonSelectOption>
+          <IonSelectOption value="Spinach">Spinach</IonSelectOption>
+        </IonSelect>
+      </IonItem>
+
+      <IonItem>
+        <IonLabel>Popover</IonLabel>
+        <IonSelect interfaceOptions={customPopoverOptions} interface="popover" placeholder="Select One">
+          <IonSelectOption value="brown">Brown</IonSelectOption>
+          <IonSelectOption value="blonde">Blonde</IonSelectOption>
+          <IonSelectOption value="black">Black</IonSelectOption>
+          <IonSelectOption value="red">Red</IonSelectOption>
+        </IonSelect>
+      </IonItem>
+
+      <IonItem>
+        <IonLabel>Action Sheet</IonLabel>
+        <IonSelect interfaceOptions={customActionSheetOptions} interface="action-sheet" placeholder="Select One">
+          <IonSelectOption value="red">Red</IonSelectOption>
+          <IonSelectOption value="purple">Purple</IonSelectOption>
+          <IonSelectOption value="yellow">Yellow</IonSelectOption>
+          <IonSelectOption value="orange">Orange</IonSelectOption>
+          <IonSelectOption value="green">Green</IonSelectOption>
+        </IonSelect>
+      </IonItem>
+    </IonList>
+  </>
+);
+
+export default Example;
+```
diff --git a/core/src/components/slides/readme.md b/core/src/components/slides/readme.md
index c4b6b1a8a0..55bfe5071e 100644
--- a/core/src/components/slides/readme.md
+++ b/core/src/components/slides/readme.md
@@ -78,6 +78,35 @@ slides.options = {
 ```
 
 
+### React
+
+```tsx
+import React from 'react';
+
+import { IonSlides, IonSlide } from '@ionic/react';
+
+const slideOpts = {
+  effect: 'flip'
+};
+
+const Example: React.SFC<{}> = () => (
+  <IonSlides pager={true} options={slideOpts}>
+    <IonSlide>
+      <h1>Slide 1</h1>
+    </IonSlide>
+    <IonSlide>
+      <h1>Slide 2</h1>
+    </IonSlide>
+    <IonSlide>
+      <h1>Slide 3</h1>
+    </IonSlide>
+  </IonSlides>
+);
+
+export default Example;
+```
+
+
 
 ## Properties
 
diff --git a/core/src/components/slides/usage/react.md b/core/src/components/slides/usage/react.md
new file mode 100644
index 0000000000..9d11433768
--- /dev/null
+++ b/core/src/components/slides/usage/react.md
@@ -0,0 +1,25 @@
+```tsx
+import React from 'react';
+
+import { IonSlides, IonSlide } from '@ionic/react';
+
+const slideOpts = {
+  effect: 'flip'
+};
+
+const Example: React.SFC<{}> = () => (
+  <IonSlides pager={true} options={slideOpts}>
+    <IonSlide>
+      <h1>Slide 1</h1>
+    </IonSlide>
+    <IonSlide>
+      <h1>Slide 2</h1>
+    </IonSlide>
+    <IonSlide>
+      <h1>Slide 3</h1>
+    </IonSlide>
+  </IonSlides>
+);
+
+export default Example;
+```
diff --git a/core/src/components/spinner/readme.md b/core/src/components/spinner/readme.md
index 63e7e1a067..cbce4b1b78 100644
--- a/core/src/components/spinner/readme.md
+++ b/core/src/components/spinner/readme.md
@@ -40,6 +40,45 @@ The default spinner to use is based on the platform. The default spinner for `io
 ```
 
 
+### React
+
+```tsx
+import React from 'react';
+
+import { IonSpinner } from '@ionic/react';
+
+const Example: React.SFC<{}> = () => (
+  <>
+    {/*-- Default Spinner --*/}
+    <IonSpinner></IonSpinner>
+
+    {/*-- Lines --*/}
+    <IonSpinner name="lines"></IonSpinner>
+
+    {/*-- Lines Small --*/}
+    <IonSpinner name="lines-small"></IonSpinner>
+
+    {/*-- Dots --*/}
+    <IonSpinner name="dots"></IonSpinner>
+
+    {/*-- Bubbles --*/}
+    <IonSpinner name="bubbles"></IonSpinner>
+
+    {/*-- Circles --*/}
+    <IonSpinner name="circles"></IonSpinner>
+
+    {/*-- Crescent --*/}
+    <IonSpinner name="crescent"></IonSpinner>
+
+    {/*-- Paused Default Spinner --*/}
+    <IonSpinner paused></IonSpinner>
+  </>
+);
+
+export default Example;
+```
+
+
 
 ## Properties
 
diff --git a/core/src/components/spinner/usage/react.md b/core/src/components/spinner/usage/react.md
new file mode 100644
index 0000000000..3949397b3f
--- /dev/null
+++ b/core/src/components/spinner/usage/react.md
@@ -0,0 +1,35 @@
+```tsx
+import React from 'react';
+
+import { IonSpinner } from '@ionic/react';
+
+const Example: React.SFC<{}> = () => (
+  <>
+    {/*-- Default Spinner --*/}
+    <IonSpinner></IonSpinner>
+
+    {/*-- Lines --*/}
+    <IonSpinner name="lines"></IonSpinner>
+
+    {/*-- Lines Small --*/}
+    <IonSpinner name="lines-small"></IonSpinner>
+
+    {/*-- Dots --*/}
+    <IonSpinner name="dots"></IonSpinner>
+
+    {/*-- Bubbles --*/}
+    <IonSpinner name="bubbles"></IonSpinner>
+
+    {/*-- Circles --*/}
+    <IonSpinner name="circles"></IonSpinner>
+
+    {/*-- Crescent --*/}
+    <IonSpinner name="crescent"></IonSpinner>
+
+    {/*-- Paused Default Spinner --*/}
+    <IonSpinner paused></IonSpinner>
+  </>
+);
+
+export default Example;
+```
diff --git a/core/src/components/split-pane/readme.md b/core/src/components/split-pane/readme.md
index f404caec89..6345da8537 100644
--- a/core/src/components/split-pane/readme.md
+++ b/core/src/components/split-pane/readme.md
@@ -82,6 +82,34 @@ SplitPane also provides some predefined media queries that can be used.
 ```
 
 
+### React
+
+```tsx
+import React from 'react';
+
+import { IonSplitPane, IonMenu, IonHeader, IonToolbar, IonTitle, IonRouterOutlet } from '@ionic/react';
+
+const Example: React.SFC<{}> = () => (
+
+  <IonSplitPane contentId="menuContent">
+    {/*--  our side menu  --*/}
+    <IonMenu contentId="menuContent">
+      <IonHeader>
+        <IonToolbar>
+          <IonTitle>Menu</IonTitle>
+        </IonToolbar>
+      </IonHeader>
+    </IonMenu>
+
+    {/*-- the main content --*/}
+    <IonRouterOutlet></IonRouterOutlet>
+  </IonSplitPane>
+);
+
+export default Example;
+```
+
+
 
 ## Properties
 
diff --git a/core/src/components/split-pane/usage/react.md b/core/src/components/split-pane/usage/react.md
new file mode 100644
index 0000000000..ea3ef85797
--- /dev/null
+++ b/core/src/components/split-pane/usage/react.md
@@ -0,0 +1,24 @@
+```tsx
+import React from 'react';
+
+import { IonSplitPane, IonMenu, IonHeader, IonToolbar, IonTitle, IonRouterOutlet } from '@ionic/react';
+
+const Example: React.SFC<{}> = () => (
+
+  <IonSplitPane contentId="menuContent">
+    {/*--  our side menu  --*/}
+    <IonMenu contentId="menuContent">
+      <IonHeader>
+        <IonToolbar>
+          <IonTitle>Menu</IonTitle>
+        </IonToolbar>
+      </IonHeader>
+    </IonMenu>
+
+    {/*-- the main content --*/}
+    <IonRouterOutlet></IonRouterOutlet>
+  </IonSplitPane>
+);
+
+export default Example;
+```
diff --git a/core/src/components/tab-bar/readme.md b/core/src/components/tab-bar/readme.md
index 35ce13a6de..9a1302bd19 100644
--- a/core/src/components/tab-bar/readme.md
+++ b/core/src/components/tab-bar/readme.md
@@ -53,6 +53,35 @@ The tab bar is a UI component that contains a set of [tab buttons](../tab-button
 ```
 
 
+### React
+
+```tsx
+import React from 'react';
+
+import { IonTabs, IonTabBar, IonTabButton, IonIcon } from '@ionic/react';
+
+const Example: React.SFC<{}> = () => (
+
+  <IonTabs>
+    {/*-- Tab bar --*/}
+    <IonTabBar slot="bottom">
+      <IonTabButton tab="account">
+        <IonIcon name="person" />
+      </IonTabButton>
+      <IonTabButton tab="contact">
+        <IonIcon name="call" />
+      </IonTabButton>
+      <IonTabButton tab="settings">
+        <IonIcon name="settings" />
+      </IonTabButton>
+    </IonTabBar>
+  </IonTabs>
+);
+
+export default Example;
+```
+
+
 
 ## Properties
 
diff --git a/core/src/components/tab-bar/usage/react.md b/core/src/components/tab-bar/usage/react.md
new file mode 100644
index 0000000000..a98a5558d8
--- /dev/null
+++ b/core/src/components/tab-bar/usage/react.md
@@ -0,0 +1,25 @@
+```tsx
+import React from 'react';
+
+import { IonTabs, IonTabBar, IonTabButton, IonIcon } from '@ionic/react';
+
+const Example: React.SFC<{}> = () => (
+
+  <IonTabs>
+    {/*-- Tab bar --*/}
+    <IonTabBar slot="bottom">
+      <IonTabButton tab="account">
+        <IonIcon name="person" />
+      </IonTabButton>
+      <IonTabButton tab="contact">
+        <IonIcon name="call" />
+      </IonTabButton>
+      <IonTabButton tab="settings">
+        <IonIcon name="settings" />
+      </IonTabButton>
+    </IonTabBar>
+  </IonTabs>
+);
+
+export default Example;
+```
diff --git a/core/src/components/tab-button/readme.md b/core/src/components/tab-button/readme.md
index c7f57447b6..f0e0a05e58 100644
--- a/core/src/components/tab-button/readme.md
+++ b/core/src/components/tab-button/readme.md
@@ -88,6 +88,46 @@ See the [tabs documentation](../tabs) for more details on configuring tabs.
 ```
 
 
+### React
+
+```tsx
+import React from 'react';
+
+import { IonTabs, IonTabBar, IonTabButton, IonIcon, IonLabel } from '@ionic/react';
+
+const Example: React.SFC<{}> = () => (
+
+  <IonTabs>
+
+    <IonTabBar slot="bottom">
+      <IonTabButton tab="schedule">
+        <IonIcon name="calendar" />
+        <IonLabel>Schedule</IonLabel>
+      </IonTabButton>
+
+      <IonTabButton tab="speakers">
+        <IonIcon name="contacts" />
+        <IonLabel>Speakers</IonLabel>
+      </IonTabButton>
+
+      <IonTabButton tab="map">
+        <IonIcon name="map" />
+        <IonLabel>Map</IonLabel>
+      </IonTabButton>
+
+      <IonTabButton tab="about">
+        <IonIcon name="information-circle" />
+        <IonLabel>About</IonLabel>
+      </IonTabButton>
+    </IonTabBar>
+
+  </IonTabs>
+);
+
+export default Example;
+```
+
+
 
 ## Properties
 
diff --git a/core/src/components/tab-button/usage/react.md b/core/src/components/tab-button/usage/react.md
new file mode 100644
index 0000000000..40601558d1
--- /dev/null
+++ b/core/src/components/tab-button/usage/react.md
@@ -0,0 +1,36 @@
+```tsx
+import React from 'react';
+
+import { IonTabs, IonTabBar, IonTabButton, IonIcon, IonLabel } from '@ionic/react';
+
+const Example: React.SFC<{}> = () => (
+
+  <IonTabs>
+
+    <IonTabBar slot="bottom">
+      <IonTabButton tab="schedule">
+        <IonIcon name="calendar" />
+        <IonLabel>Schedule</IonLabel>
+      </IonTabButton>
+
+      <IonTabButton tab="speakers">
+        <IonIcon name="contacts" />
+        <IonLabel>Speakers</IonLabel>
+      </IonTabButton>
+
+      <IonTabButton tab="map">
+        <IonIcon name="map" />
+        <IonLabel>Map</IonLabel>
+      </IonTabButton>
+
+      <IonTabButton tab="about">
+        <IonIcon name="information-circle" />
+        <IonLabel>About</IonLabel>
+      </IonTabButton>
+    </IonTabBar>
+
+  </IonTabs>
+);
+
+export default Example;
+```
diff --git a/core/src/components/tabs/readme.md b/core/src/components/tabs/readme.md
index 4fb59d565a..88a41a3c99 100644
--- a/core/src/components/tabs/readme.md
+++ b/core/src/components/tabs/readme.md
@@ -163,6 +163,45 @@ Using tabs with Angular's router is fairly straight forward. Here you only need
 ```
 
 
+### React
+
+```tsx
+import React from 'react';
+
+import { IonTabs, IonTabBar, IonTabButton, IonIcon, IonLabel, IonBadge } from '@ionic/react';
+
+const Example: React.SFC<{}> = () => (
+
+  <IonTabs>
+    <IonTabBar slot="bottom">
+      <IonTabButton tab="schedule">
+        <IonIcon name="calendar" />
+        <IonLabel>Schedule</IonLabel>
+        <IonBadge>6</IonBadge>
+      </IonTabButton>
+
+      <IonTabButton tab="speakers">
+        <IonIcon name="contacts" />
+        <IonLabel>Speakers</IonLabel>
+      </IonTabButton>
+
+      <IonTabButton tab="map">
+        <IonIcon name="map" />
+        <IonLabel>Map</IonLabel>
+      </IonTabButton>
+
+      <IonTabButton tab="about">
+        <IonIcon name="information-circle" />
+        <IonLabel>About</IonLabel>
+      </IonTabButton>
+    </IonTabBar>
+  </IonTabs>
+);
+
+export default Example;
+```
+
+
 
 ## Events
 
diff --git a/core/src/components/tabs/usage/react.md b/core/src/components/tabs/usage/react.md
new file mode 100644
index 0000000000..9dc4dd37d0
--- /dev/null
+++ b/core/src/components/tabs/usage/react.md
@@ -0,0 +1,35 @@
+```tsx
+import React from 'react';
+
+import { IonTabs, IonTabBar, IonTabButton, IonIcon, IonLabel, IonBadge } from '@ionic/react';
+
+const Example: React.SFC<{}> = () => (
+
+  <IonTabs>
+    <IonTabBar slot="bottom">
+      <IonTabButton tab="schedule">
+        <IonIcon name="calendar" />
+        <IonLabel>Schedule</IonLabel>
+        <IonBadge>6</IonBadge>
+      </IonTabButton>
+
+      <IonTabButton tab="speakers">
+        <IonIcon name="contacts" />
+        <IonLabel>Speakers</IonLabel>
+      </IonTabButton>
+
+      <IonTabButton tab="map">
+        <IonIcon name="map" />
+        <IonLabel>Map</IonLabel>
+      </IonTabButton>
+
+      <IonTabButton tab="about">
+        <IonIcon name="information-circle" />
+        <IonLabel>About</IonLabel>
+      </IonTabButton>
+    </IonTabBar>
+  </IonTabs>
+);
+
+export default Example;
+```
diff --git a/core/src/components/textarea/readme.md b/core/src/components/textarea/readme.md
index 6866a638fb..1ccf8dbc2e 100644
--- a/core/src/components/textarea/readme.md
+++ b/core/src/components/textarea/readme.md
@@ -95,6 +95,57 @@ The textarea component accepts the [native textarea attributes](https://develope
 ```
 
 
+### React
+
+```tsx
+import React from 'react';
+
+import { IonTextarea, IonItem, IonLabel } from '@ionic/react';
+
+const Example: React.SFC<{}> = () => (
+  <>
+    {/*-- Default textarea --*/}
+    <IonTextarea></IonTextarea>
+
+    {/*-- Textarea in an item with a placeholder --*/}
+    <IonItem>
+      <IonTextarea placeholder="Enter more information here..."></IonTextarea>
+    </IonItem>
+
+    {/*-- Textarea in an item with a floating label --*/}
+    <IonItem>
+      <IonLabel position="floating">Description</IonLabel>
+      <IonTextarea></IonTextarea>
+    </IonItem>
+
+    {/*-- Disabled and readonly textarea in an item with a stacked label --*/}
+    <IonItem>
+      <IonLabel position="stacked">Summary</IonLabel>
+      <IonTextarea
+        disabled
+        readonly
+        value="Ionic enables developers to build performant, high-quality mobile apps.">
+      </IonTextarea>
+    </IonItem>
+
+    {/*-- Textarea that clears the value on edit --*/}
+    <IonItem>
+      <IonLabel>Comment</IonLabel>
+      <IonTextarea clearOnEdit={true}></IonTextarea>
+    </IonItem>
+
+    {/*-- Textarea with custom number of rows and cols --*/}
+    <IonItem>
+      <IonLabel>Notes</IonLabel>
+      <IonTextarea rows={6} cols={20} placeholder="Enter any notes here..."></IonTextarea>
+    </IonItem>
+  </>
+);
+
+export default Example;
+```
+
+
 
 ## Properties
 
diff --git a/core/src/components/textarea/usage/react.md b/core/src/components/textarea/usage/react.md
new file mode 100644
index 0000000000..63cbac172f
--- /dev/null
+++ b/core/src/components/textarea/usage/react.md
@@ -0,0 +1,47 @@
+```tsx
+import React from 'react';
+
+import { IonTextarea, IonItem, IonLabel } from '@ionic/react';
+
+const Example: React.SFC<{}> = () => (
+  <>
+    {/*-- Default textarea --*/}
+    <IonTextarea></IonTextarea>
+
+    {/*-- Textarea in an item with a placeholder --*/}
+    <IonItem>
+      <IonTextarea placeholder="Enter more information here..."></IonTextarea>
+    </IonItem>
+
+    {/*-- Textarea in an item with a floating label --*/}
+    <IonItem>
+      <IonLabel position="floating">Description</IonLabel>
+      <IonTextarea></IonTextarea>
+    </IonItem>
+
+    {/*-- Disabled and readonly textarea in an item with a stacked label --*/}
+    <IonItem>
+      <IonLabel position="stacked">Summary</IonLabel>
+      <IonTextarea
+        disabled
+        readonly
+        value="Ionic enables developers to build performant, high-quality mobile apps.">
+      </IonTextarea>
+    </IonItem>
+
+    {/*-- Textarea that clears the value on edit --*/}
+    <IonItem>
+      <IonLabel>Comment</IonLabel>
+      <IonTextarea clearOnEdit={true}></IonTextarea>
+    </IonItem>
+
+    {/*-- Textarea with custom number of rows and cols --*/}
+    <IonItem>
+      <IonLabel>Notes</IonLabel>
+      <IonTextarea rows={6} cols={20} placeholder="Enter any notes here..."></IonTextarea>
+    </IonItem>
+  </>
+);
+
+export default Example;
+```
diff --git a/core/src/components/thumbnail/readme.md b/core/src/components/thumbnail/readme.md
index b44e868e59..ff7f4e5d76 100644
--- a/core/src/components/thumbnail/readme.md
+++ b/core/src/components/thumbnail/readme.md
@@ -26,6 +26,32 @@ Thumbnails can be used by themselves or inside of any element. If placed inside
 ```
 
 
+### React
+
+```tsx
+import React from 'react';
+
+import { IonThumbnail, IonItem, IonLabel } from '@ionic/react';
+
+const Example: React.SFC<{}> = () => (
+  <>
+    <IonThumbnail>
+      <img src="https://gravatar.com/avatar/dba6bae8c566f9d4041fb9cd9ada7741?d=identicon&f=y" />
+    </IonThumbnail>
+
+    <IonItem>
+      <IonThumbnail slot="start">
+        <img src="https://gravatar.com/avatar/dba6bae8c566f9d4041fb9cd9ada7741?d=identicon&f=y" />
+      </IonThumbnail>
+      <IonLabel>Item Thumbnail</IonLabel>
+    </IonItem>
+  </>
+);
+
+export default Example;
+```
+
+
 
 ## CSS Custom Properties
 
diff --git a/core/src/components/thumbnail/usage/react.md b/core/src/components/thumbnail/usage/react.md
new file mode 100644
index 0000000000..323e913470
--- /dev/null
+++ b/core/src/components/thumbnail/usage/react.md
@@ -0,0 +1,22 @@
+```tsx
+import React from 'react';
+
+import { IonThumbnail, IonItem, IonLabel } from '@ionic/react';
+
+const Example: React.SFC<{}> = () => (
+  <>
+    <IonThumbnail>
+      <img src="https://gravatar.com/avatar/dba6bae8c566f9d4041fb9cd9ada7741?d=identicon&f=y" />
+    </IonThumbnail>
+
+    <IonItem>
+      <IonThumbnail slot="start">
+        <img src="https://gravatar.com/avatar/dba6bae8c566f9d4041fb9cd9ada7741?d=identicon&f=y" />
+      </IonThumbnail>
+      <IonLabel>Item Thumbnail</IonLabel>
+    </IonItem>
+  </>
+);
+
+export default Example;
+```
diff --git a/core/src/components/toast/readme.md b/core/src/components/toast/readme.md
index 0e41ee2cb1..091a3f7c0e 100644
--- a/core/src/components/toast/readme.md
+++ b/core/src/components/toast/readme.md
@@ -86,6 +86,54 @@ async function presentToastWithOptions() {
 ```
 
 
+### React
+
+```tsx
+import React, { Component } from 'react'
+import { IonToast } from '@ionic/react';
+
+type Props = {}
+type State = {
+  showToast1: boolean
+  showToast2: boolean
+}
+
+export class Toast extends Component<Props, State> {
+
+  constructor(props: Props) {
+    super(props);
+    this.state = {
+      showToast1: false
+      showToast2: false
+    };
+  }
+
+  render() {
+    return (
+      <IonToast
+        isOpen={this.state.showToast1}
+        onDidDismiss={() => this.setState(() => ({ showToast1: false }))}
+        message='Your settings have been saved.'
+        duration={200}
+      >
+      </IonToast>
+
+      <IonToast
+        isOpen={this.state.showToast2}
+        onDidDismiss={() => this.setState(() => ({ showToast2: false }))}
+        message='Click to Close'
+        showCloseButton={true}
+        position='top'
+        closeButtonText='Done'
+      >
+      </IonToast>
+    );
+  }
+}
+
+```
+
+
 
 ## Properties
 
diff --git a/core/src/components/toast/usage/react.md b/core/src/components/toast/usage/react.md
new file mode 100644
index 0000000000..eced288429
--- /dev/null
+++ b/core/src/components/toast/usage/react.md
@@ -0,0 +1,44 @@
+```tsx
+import React, { Component } from 'react'
+import { IonToast } from '@ionic/react';
+
+type Props = {}
+type State = {
+  showToast1: boolean
+  showToast2: boolean
+}
+
+export class Toast extends Component<Props, State> {
+
+  constructor(props: Props) {
+    super(props);
+    this.state = {
+      showToast1: false
+      showToast2: false
+    };
+  }
+
+  render() {
+    return (
+      <IonToast
+        isOpen={this.state.showToast1}
+        onDidDismiss={() => this.setState(() => ({ showToast1: false }))}
+        message='Your settings have been saved.'
+        duration={200}
+      >
+      </IonToast>
+
+      <IonToast
+        isOpen={this.state.showToast2}
+        onDidDismiss={() => this.setState(() => ({ showToast2: false }))}
+        message='Click to Close'
+        showCloseButton={true}
+        position='top'
+        closeButtonText='Done'
+      >
+      </IonToast>
+    );
+  }
+}
+
+```
diff --git a/core/src/components/toggle/readme.md b/core/src/components/toggle/readme.md
index 0a2ce182f0..83bfc12acd 100644
--- a/core/src/components/toggle/readme.md
+++ b/core/src/components/toggle/readme.md
@@ -87,6 +87,55 @@ Toggles change the state of a single option. Toggles can be switched on or off b
 ```
 
 
+### React
+
+```tsx
+import React from 'react';
+
+import { IonToggle, IonList, IonItem, IonLabel } from '@ionic/react';
+
+const Example: React.SFC<{}> = () => (
+  <>
+    {/*-- Default Toggle --*/}
+    <IonToggle></IonToggle>
+
+    {/*-- Disabled Toggle --*/}
+    <IonToggle disabled></IonToggle>
+
+    {/*-- Checked Toggle --*/}
+    <IonToggle checked></IonToggle>
+
+    {/*-- Toggle Colors --*/}
+    <IonToggle color="primary"></IonToggle>
+    <IonToggle color="secondary"></IonToggle>
+    <IonToggle color="danger"></IonToggle>
+    <IonToggle color="light"></IonToggle>
+    <IonToggle color="dark"></IonToggle>
+
+    {/*-- Toggles in a List --*/}
+    <IonList>
+      <IonItem>
+        <IonLabel>Pepperoni</IonLabel>
+        <IonToggle value="pepperoni" onChange={() => {}}></IonToggle>
+      </IonItem>
+
+      <IonItem>
+        <IonLabel>Sausage</IonLabel>
+        <IonToggle value="sausage" onChange={() => {}} disabled={true}></IonToggle>
+      </IonItem>
+
+      <IonItem>
+        <IonLabel>Mushrooms</IonLabel>
+        <IonToggle value="mushrooms" onChange={() => {}}></IonToggle>
+      </IonItem>
+    </IonList>
+  </>
+);
+
+export default Example;
+```
+
+
 
 ## Properties
 
diff --git a/core/src/components/toggle/usage/react.md b/core/src/components/toggle/usage/react.md
new file mode 100644
index 0000000000..c5031d11cb
--- /dev/null
+++ b/core/src/components/toggle/usage/react.md
@@ -0,0 +1,45 @@
+```tsx
+import React from 'react';
+
+import { IonToggle, IonList, IonItem, IonLabel } from '@ionic/react';
+
+const Example: React.SFC<{}> = () => (
+  <>
+    {/*-- Default Toggle --*/}
+    <IonToggle></IonToggle>
+
+    {/*-- Disabled Toggle --*/}
+    <IonToggle disabled></IonToggle>
+
+    {/*-- Checked Toggle --*/}
+    <IonToggle checked></IonToggle>
+
+    {/*-- Toggle Colors --*/}
+    <IonToggle color="primary"></IonToggle>
+    <IonToggle color="secondary"></IonToggle>
+    <IonToggle color="danger"></IonToggle>
+    <IonToggle color="light"></IonToggle>
+    <IonToggle color="dark"></IonToggle>
+
+    {/*-- Toggles in a List --*/}
+    <IonList>
+      <IonItem>
+        <IonLabel>Pepperoni</IonLabel>
+        <IonToggle value="pepperoni" onChange={() => {}}></IonToggle>
+      </IonItem>
+
+      <IonItem>
+        <IonLabel>Sausage</IonLabel>
+        <IonToggle value="sausage" onChange={() => {}} disabled={true}></IonToggle>
+      </IonItem>
+
+      <IonItem>
+        <IonLabel>Mushrooms</IonLabel>
+        <IonToggle value="mushrooms" onChange={() => {}}></IonToggle>
+      </IonItem>
+    </IonList>
+  </>
+);
+
+export default Example;
+```
diff --git a/core/src/components/toolbar/readme.md b/core/src/components/toolbar/readme.md
index 40f4087ee6..0ad26bea2d 100644
--- a/core/src/components/toolbar/readme.md
+++ b/core/src/components/toolbar/readme.md
@@ -342,6 +342,175 @@ In `md` mode, the `<ion-header>` will receive a box-shadow on the bottom, and th
 ```
 
 
+### React
+
+```tsx
+import React from 'react';
+
+import { IonToolbar, IonTitle, IonButtons, IonBackButton, IonButton, IonIcon, IonMenuButton, IonSearchbar, IonSegment, IonSegmentButton } from '@ionic/react';
+
+const Example: React.SFC<{}> = () => (
+  <>
+  <IonToolbar>
+    <IonTitle>Title Only</IonTitle>
+  </IonToolbar>
+
+  <IonToolbar>
+    <IonButtons slot="start">
+      <IonBackButton goBack={() => {}} />
+    </IonButtons>
+    <IonTitle>Back Button</IonTitle>
+  </IonToolbar>
+
+  <IonToolbar>
+    <IonButtons slot="secondary">
+      <IonButton>
+        <IonIcon slot="icon-only" name="contact" />
+      </IonButton>
+      <IonButton>
+        <IonIcon slot="icon-only" name="search" />
+      </IonButton>
+    </IonButtons>
+    <IonButtons slot="primary">
+      <IonButton color="secondary">
+        <IonIcon slot="icon-only" name="more" />
+      </IonButton>
+    </IonButtons>
+    <IonTitle>Default Buttons</IonTitle>
+  </IonToolbar>
+
+  <IonToolbar>
+    <IonButtons slot="secondary">
+      <IonButton fill="solid">
+        <IonIcon slot="start" name="contact" />
+        Contact
+      </IonButton>
+    </IonButtons>
+    <IonTitle>Solid Buttons</IonTitle>
+    <IonButtons slot="primary">
+      <IonButton fill="solid" color="secondary">
+        Help
+        <IonIcon slot="end" name="help-circle" />
+      </IonButton>
+    </IonButtons>
+  </IonToolbar>
+
+  <IonToolbar>
+    <IonButtons slot="secondary">
+      <IonButton fill="outline">
+        <IonIcon slot="start" name="star" />
+        Star
+      </IonButton>
+    </IonButtons>
+    <IonTitle>Outline Buttons</IonTitle>
+    <IonButtons slot="primary">
+      <IonButton color="danger" fill="outline">
+        Edit
+        <IonIcon slot="end" name="create" />
+      </IonButton>
+    </IonButtons>
+  </IonToolbar>
+
+  <IonToolbar>
+    <IonButtons slot="secondary">
+      <IonButton>
+        Account
+      </IonButton>
+    </IonButtons>
+    <IonButtons slot="primary">
+      <IonButton color="danger">
+        Edit
+      </IonButton>
+    </IonButtons>
+    <IonTitle>Text Only Buttons</IonTitle>
+  </IonToolbar>
+
+  <IonToolbar>
+    <IonButtons slot="start">
+      <IonMenuButton autoHide={false}></IonMenuButton>
+
+    </IonButtons>
+    <IonButtons slot="secondary">
+      <IonButton>
+        <IonIcon slot="icon-only" name="star" />
+      </IonButton>
+    </IonButtons>
+    <IonTitle>Left side menu toggle</IonTitle>
+  </IonToolbar>
+
+  <IonToolbar>
+    <IonButtons slot="primary">
+      <IonButton onClick={() => {}}>
+        <IonIcon slot="icon-only" name="star" />
+      </IonButton>
+    </IonButtons>
+    <IonTitle>Right side menu toggle</IonTitle>
+    <IonButtons slot="end">
+      <IonMenuButton autoHide={false}></IonMenuButton>
+
+    </IonButtons>
+  </IonToolbar>
+
+  <IonToolbar>
+    <IonButtons slot="primary">
+      <IonButton onClick={() => {}}>
+        <IonIcon slot="icon-only" name="search" />
+      </IonButton>
+    </IonButtons>
+    <IonSearchbar placeholder="Search Favorites"></IonSearchbar>
+  </IonToolbar>
+
+  <IonToolbar>
+    <IonSegment>
+      <IonSegmentButton value="all" checked>
+        All
+      </IonSegmentButton>
+      <IonSegmentButton value="favorites">
+        Favorites
+      </IonSegmentButton>
+    </IonSegment>
+  </IonToolbar>
+
+  <IonToolbar color="secondary">
+    <IonButtons slot="secondary">
+      <IonButton>
+        <IonIcon slot="icon-only" name="contact" />
+      </IonButton>
+      <IonButton>
+        <IonIcon slot="icon-only" name="search" />
+      </IonButton>
+    </IonButtons>
+    <IonButtons slot="primary">
+      <IonButton color="primary">
+        <IonIcon slot="icon-only" name="more" />
+      </IonButton>
+    </IonButtons>
+    <IonTitle>Secondary Toolbar</IonTitle>
+  </IonToolbar>
+
+  <IonToolbar color="dark">
+    <IonButtons slot="secondary">
+      <IonButton>
+        <IonIcon slot="icon-only" name="contact" />
+      </IonButton>
+      <IonButton>
+        <IonIcon slot="icon-only" name="search" />
+      </IonButton>
+    </IonButtons>
+    <IonButtons slot="primary">
+      <IonButton color="danger">
+        <IonIcon slot="icon-only" name="more" />
+      </IonButton>
+    </IonButtons>
+    <IonTitle>Dark Toolbar</IonTitle>
+  </IonToolbar>
+  </>
+);
+
+export default Example;
+```
+
+
 
 ## Properties
 
diff --git a/core/src/components/toolbar/usage/react.md b/core/src/components/toolbar/usage/react.md
new file mode 100644
index 0000000000..4e49133e6e
--- /dev/null
+++ b/core/src/components/toolbar/usage/react.md
@@ -0,0 +1,165 @@
+```tsx
+import React from 'react';
+
+import { IonToolbar, IonTitle, IonButtons, IonBackButton, IonButton, IonIcon, IonMenuButton, IonSearchbar, IonSegment, IonSegmentButton } from '@ionic/react';
+
+const Example: React.SFC<{}> = () => (
+  <>
+  <IonToolbar>
+    <IonTitle>Title Only</IonTitle>
+  </IonToolbar>
+
+  <IonToolbar>
+    <IonButtons slot="start">
+      <IonBackButton goBack={() => {}} />
+    </IonButtons>
+    <IonTitle>Back Button</IonTitle>
+  </IonToolbar>
+
+  <IonToolbar>
+    <IonButtons slot="secondary">
+      <IonButton>
+        <IonIcon slot="icon-only" name="contact" />
+      </IonButton>
+      <IonButton>
+        <IonIcon slot="icon-only" name="search" />
+      </IonButton>
+    </IonButtons>
+    <IonButtons slot="primary">
+      <IonButton color="secondary">
+        <IonIcon slot="icon-only" name="more" />
+      </IonButton>
+    </IonButtons>
+    <IonTitle>Default Buttons</IonTitle>
+  </IonToolbar>
+
+  <IonToolbar>
+    <IonButtons slot="secondary">
+      <IonButton fill="solid">
+        <IonIcon slot="start" name="contact" />
+        Contact
+      </IonButton>
+    </IonButtons>
+    <IonTitle>Solid Buttons</IonTitle>
+    <IonButtons slot="primary">
+      <IonButton fill="solid" color="secondary">
+        Help
+        <IonIcon slot="end" name="help-circle" />
+      </IonButton>
+    </IonButtons>
+  </IonToolbar>
+
+  <IonToolbar>
+    <IonButtons slot="secondary">
+      <IonButton fill="outline">
+        <IonIcon slot="start" name="star" />
+        Star
+      </IonButton>
+    </IonButtons>
+    <IonTitle>Outline Buttons</IonTitle>
+    <IonButtons slot="primary">
+      <IonButton color="danger" fill="outline">
+        Edit
+        <IonIcon slot="end" name="create" />
+      </IonButton>
+    </IonButtons>
+  </IonToolbar>
+
+  <IonToolbar>
+    <IonButtons slot="secondary">
+      <IonButton>
+        Account
+      </IonButton>
+    </IonButtons>
+    <IonButtons slot="primary">
+      <IonButton color="danger">
+        Edit
+      </IonButton>
+    </IonButtons>
+    <IonTitle>Text Only Buttons</IonTitle>
+  </IonToolbar>
+
+  <IonToolbar>
+    <IonButtons slot="start">
+      <IonMenuButton autoHide={false}></IonMenuButton>
+
+    </IonButtons>
+    <IonButtons slot="secondary">
+      <IonButton>
+        <IonIcon slot="icon-only" name="star" />
+      </IonButton>
+    </IonButtons>
+    <IonTitle>Left side menu toggle</IonTitle>
+  </IonToolbar>
+
+  <IonToolbar>
+    <IonButtons slot="primary">
+      <IonButton onClick={() => {}}>
+        <IonIcon slot="icon-only" name="star" />
+      </IonButton>
+    </IonButtons>
+    <IonTitle>Right side menu toggle</IonTitle>
+    <IonButtons slot="end">
+      <IonMenuButton autoHide={false}></IonMenuButton>
+
+    </IonButtons>
+  </IonToolbar>
+
+  <IonToolbar>
+    <IonButtons slot="primary">
+      <IonButton onClick={() => {}}>
+        <IonIcon slot="icon-only" name="search" />
+      </IonButton>
+    </IonButtons>
+    <IonSearchbar placeholder="Search Favorites"></IonSearchbar>
+  </IonToolbar>
+
+  <IonToolbar>
+    <IonSegment>
+      <IonSegmentButton value="all" checked>
+        All
+      </IonSegmentButton>
+      <IonSegmentButton value="favorites">
+        Favorites
+      </IonSegmentButton>
+    </IonSegment>
+  </IonToolbar>
+
+  <IonToolbar color="secondary">
+    <IonButtons slot="secondary">
+      <IonButton>
+        <IonIcon slot="icon-only" name="contact" />
+      </IonButton>
+      <IonButton>
+        <IonIcon slot="icon-only" name="search" />
+      </IonButton>
+    </IonButtons>
+    <IonButtons slot="primary">
+      <IonButton color="primary">
+        <IonIcon slot="icon-only" name="more" />
+      </IonButton>
+    </IonButtons>
+    <IonTitle>Secondary Toolbar</IonTitle>
+  </IonToolbar>
+
+  <IonToolbar color="dark">
+    <IonButtons slot="secondary">
+      <IonButton>
+        <IonIcon slot="icon-only" name="contact" />
+      </IonButton>
+      <IonButton>
+        <IonIcon slot="icon-only" name="search" />
+      </IonButton>
+    </IonButtons>
+    <IonButtons slot="primary">
+      <IonButton color="danger">
+        <IonIcon slot="icon-only" name="more" />
+      </IonButton>
+    </IonButtons>
+    <IonTitle>Dark Toolbar</IonTitle>
+  </IonToolbar>
+  </>
+);
+
+export default Example;
+```
diff --git a/core/src/components/virtual-scroll/readme.md b/core/src/components/virtual-scroll/readme.md
index f40429a56c..679cdb942d 100644
--- a/core/src/components/virtual-scroll/readme.md
+++ b/core/src/components/virtual-scroll/readme.md
@@ -251,6 +251,76 @@ let rotateImg = 0;
 ```
 
 
+### React
+
+```tsx
+import React from 'react';
+
+import { IonContent, IonCard, IonCardHeader, IonCardTitle, IonVirtualScroll } from '@ionic/react';
+
+let rotateImg = 0;
+const lorem = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, seddo eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.';
+
+const images = [
+  'bandit',
+  'batmobile',
+  'blues-brothers',
+  'bueller',
+  'delorean',
+  'eleanor',
+  'general-lee',
+  'ghostbusters',
+  'knight-rider',
+  'mirth-mobile'
+];
+
+function getImgSrc() {
+  const src = 'https://dummyimage.com/600x400/${Math.round( Math.random() * 99999)}/fff.png';
+  rotateImg++;
+  if (rotateImg === images.length) {
+    rotateImg = 0;
+  }
+  return src;
+}
+
+const items: any[] = [];
+
+for (let i = 0; i < 1000; i++) {
+  items.push({
+    name: i + ' - ' + images[rotateImg],
+    imgSrc: getImgSrc(),
+    avatarSrc: getImgSrc(),
+    imgHeight: Math.floor(Math.random() * 50 + 150),
+    content: lorem.substring(0, Math.random() * (lorem.length - 100) + 100)
+  });
+
+  rotateImg++;
+  if (rotateImg === images.length) {
+    rotateImg = 0;
+  }
+}
+
+const Example: React.SFC<{}> = () => (
+
+  <IonContent>
+    <IonVirtualScroll items="items" approxItemHeight="320px">
+      <IonCard virtualItem="let item; let itemBounds = bounds;">
+        <div>
+          <img src="item.imgSrc" height="item.imgHeight" alt="item.name" />
+        </div>
+        <IonCardHeader>
+          <IonCardTitle>{{ name }}</IonCardTitle>
+        </IonCardHeader>
+        <IonCardContent>{{ content }}</IonCardContent>
+      </IonCard>
+    </IonVirtualScroll>
+  </IonContent>
+);
+
+export default Example;
+```
+
+
 
 ## Properties
 
diff --git a/core/src/components/virtual-scroll/usage/react.md b/core/src/components/virtual-scroll/usage/react.md
new file mode 100644
index 0000000000..8c8b596751
--- /dev/null
+++ b/core/src/components/virtual-scroll/usage/react.md
@@ -0,0 +1,66 @@
+```tsx
+import React from 'react';
+
+import { IonContent, IonCard, IonCardHeader, IonCardTitle, IonVirtualScroll } from '@ionic/react';
+
+let rotateImg = 0;
+const lorem = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, seddo eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.';
+
+const images = [
+  'bandit',
+  'batmobile',
+  'blues-brothers',
+  'bueller',
+  'delorean',
+  'eleanor',
+  'general-lee',
+  'ghostbusters',
+  'knight-rider',
+  'mirth-mobile'
+];
+
+function getImgSrc() {
+  const src = 'https://dummyimage.com/600x400/${Math.round( Math.random() * 99999)}/fff.png';
+  rotateImg++;
+  if (rotateImg === images.length) {
+    rotateImg = 0;
+  }
+  return src;
+}
+
+const items: any[] = [];
+
+for (let i = 0; i < 1000; i++) {
+  items.push({
+    name: i + ' - ' + images[rotateImg],
+    imgSrc: getImgSrc(),
+    avatarSrc: getImgSrc(),
+    imgHeight: Math.floor(Math.random() * 50 + 150),
+    content: lorem.substring(0, Math.random() * (lorem.length - 100) + 100)
+  });
+
+  rotateImg++;
+  if (rotateImg === images.length) {
+    rotateImg = 0;
+  }
+}
+
+const Example: React.SFC<{}> = () => (
+
+  <IonContent>
+    <IonVirtualScroll items="items" approxItemHeight="320px">
+      <IonCard virtualItem="let item; let itemBounds = bounds;">
+        <div>
+          <img src="item.imgSrc" height="item.imgHeight" alt="item.name" />
+        </div>
+        <IonCardHeader>
+          <IonCardTitle>{{ name }}</IonCardTitle>
+        </IonCardHeader>
+        <IonCardContent>{{ content }}</IonCardContent>
+      </IonCard>
+    </IonVirtualScroll>
+  </IonContent>
+);
+
+export default Example;
+```