diff --git a/angular/src/directives/proxies-list.txt b/angular/src/directives/proxies-list.txt
index 827390d133..7d1d1a34bb 100644
--- a/angular/src/directives/proxies-list.txt
+++ b/angular/src/directives/proxies-list.txt
@@ -27,7 +27,6 @@ export const DIRECTIVES = [
   d.Footer,
   d.Grid,
   d.Header,
-  d.HideWhen,
   d.Icon,
   d.Img,
   d.InfiniteScroll,
@@ -65,7 +64,6 @@ export const DIRECTIVES = [
   d.Select,
   d.SelectOption,
   d.SelectPopover,
-  d.ShowWhen,
   d.SkeletonText,
   d.Slide,
   d.Slides,
diff --git a/angular/src/directives/proxies.ts b/angular/src/directives/proxies.ts
index a3d0670ae7..eed5677668 100644
--- a/angular/src/directives/proxies.ts
+++ b/angular/src/directives/proxies.ts
@@ -291,16 +291,6 @@ export class Header {
   }
 }
 
-export declare interface HideWhen extends StencilComponents<'IonHideWhen'> {}
-@Component({ selector: 'ion-hide-when', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: '<ng-content></ng-content>', inputs: ['modes', 'orientation', 'mediaQuery', 'size', 'platform', 'or'] })
-export class HideWhen {
-
-  constructor(r: ElementRef) {
-    const el = r.nativeElement;
-    proxyInputs(this, el, ['modes', 'orientation', 'mediaQuery', 'size', 'platform', 'or']);
-  }
-}
-
 export declare interface Icon extends StencilComponents<'IonIcon'> {}
 @Component({ selector: 'ion-icon', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: '<ng-content></ng-content>', inputs: ['ariaLabel', 'color', 'icon', 'ios', 'lazy', 'md', 'mode', 'name', 'size', 'src'] })
 export class Icon {
@@ -730,16 +720,6 @@ export class SelectPopover {
   }
 }
 
-export declare interface ShowWhen extends StencilComponents<'IonShowWhen'> {}
-@Component({ selector: 'ion-show-when', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: '<ng-content></ng-content>', inputs: ['modes', 'orientation', 'mediaQuery', 'size', 'platform', 'or'] })
-export class ShowWhen {
-
-  constructor(r: ElementRef) {
-    const el = r.nativeElement;
-    proxyInputs(this, el, ['modes', 'orientation', 'mediaQuery', 'size', 'platform', 'or']);
-  }
-}
-
 export declare interface SkeletonText extends StencilComponents<'IonSkeletonText'> {}
 @Component({ selector: 'ion-skeleton-text', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: '<ng-content></ng-content>', inputs: ['width'] })
 export class SkeletonText {
diff --git a/angular/src/ionic-module.ts b/angular/src/ionic-module.ts
index 8f3f28ba05..0d4e2bd5a6 100644
--- a/angular/src/ionic-module.ts
+++ b/angular/src/ionic-module.ts
@@ -36,7 +36,6 @@ const DECLARATIONS = [
   d.Footer,
   d.Grid,
   d.Header,
-  d.HideWhen,
   d.Icon,
   d.Img,
   d.InfiniteScroll,
@@ -74,7 +73,6 @@ const DECLARATIONS = [
   d.Select,
   d.SelectOption,
   d.SelectPopover,
-  d.ShowWhen,
   d.SkeletonText,
   d.Slide,
   d.Slides,
diff --git a/core/src/components.d.ts b/core/src/components.d.ts
index 2c35dff1b5..d5e41c63e1 100644
--- a/core/src/components.d.ts
+++ b/core/src/components.d.ts
@@ -1595,59 +1595,6 @@ export namespace Components {
     'translucent'?: boolean;
   }
 
-  interface IonHideWhen {
-    /**
-    * If the current media query matches this value, the element will hide.
-    */
-    'mediaQuery'?: string;
-    /**
-    * If the current platform matches the given value, the element will hide. Accepts a comma separated list of modes to match against.
-    */
-    'modes': string;
-    /**
-    * If `false`, and two or more conditions are set, the element will hide when all are true. If `true`, and two or more conditions are set, the element will hide when at least one is true.
-    */
-    'or': boolean;
-    /**
-    * If the current orientation matches this value, the element will hide.
-    */
-    'orientation'?: string;
-    /**
-    * If the current platform matches the given value, the element will hide. Accepts a comma separated list of platforms to match against.
-    */
-    'platform'?: string;
-    /**
-    * If the current screen width matches the given size, the element will hide. Uses the build in sizes of xs, sm, md, lg, xl.
-    */
-    'size'?: string;
-  }
-  interface IonHideWhenAttributes extends StencilHTMLAttributes {
-    /**
-    * If the current media query matches this value, the element will hide.
-    */
-    'mediaQuery'?: string;
-    /**
-    * If the current platform matches the given value, the element will hide. Accepts a comma separated list of modes to match against.
-    */
-    'modes'?: string;
-    /**
-    * If `false`, and two or more conditions are set, the element will hide when all are true. If `true`, and two or more conditions are set, the element will hide when at least one is true.
-    */
-    'or'?: boolean;
-    /**
-    * If the current orientation matches this value, the element will hide.
-    */
-    'orientation'?: string;
-    /**
-    * If the current platform matches the given value, the element will hide. Accepts a comma separated list of platforms to match against.
-    */
-    'platform'?: string;
-    /**
-    * If the current screen width matches the given size, the element will hide. Uses the build in sizes of xs, sm, md, lg, xl.
-    */
-    'size'?: string;
-  }
-
   interface IonImg {
     /**
     * This attribute defines the alternative text describing the image. Users will see this text displayed if the image URL is wrong, the image is not in one of the supported formats, or if the image is not yet downloaded.
@@ -4238,59 +4185,6 @@ export namespace Components {
     'value'?: any | null;
   }
 
-  interface IonShowWhen {
-    /**
-    * If the current media query matches this value, the element will show.
-    */
-    'mediaQuery'?: string;
-    /**
-    * If the current platform matches the given value, the element will show. Accepts a comma separated list of modes to match against.
-    */
-    'modes': string;
-    /**
-    * If `false`, and two or more conditions are set, the element will show when all are true. If `true`, and two or more conditions are set, the element will show when at least one is true.
-    */
-    'or': boolean;
-    /**
-    * If the current orientation matches this value, the element will show.
-    */
-    'orientation'?: string;
-    /**
-    * If the current platform matches the given value, the element will show. Accepts a comma separated list of platform to match against.
-    */
-    'platform'?: string;
-    /**
-    * If the current screen width matches the given size, the element will show. Uses the build in sizes of xs, sm, md, lg, xl.
-    */
-    'size'?: string;
-  }
-  interface IonShowWhenAttributes extends StencilHTMLAttributes {
-    /**
-    * If the current media query matches this value, the element will show.
-    */
-    'mediaQuery'?: string;
-    /**
-    * If the current platform matches the given value, the element will show. Accepts a comma separated list of modes to match against.
-    */
-    'modes'?: string;
-    /**
-    * If `false`, and two or more conditions are set, the element will show when all are true. If `true`, and two or more conditions are set, the element will show when at least one is true.
-    */
-    'or'?: boolean;
-    /**
-    * If the current orientation matches this value, the element will show.
-    */
-    'orientation'?: string;
-    /**
-    * If the current platform matches the given value, the element will show. Accepts a comma separated list of platform to match against.
-    */
-    'platform'?: string;
-    /**
-    * If the current screen width matches the given size, the element will show. Uses the build in sizes of xs, sm, md, lg, xl.
-    */
-    'size'?: string;
-  }
-
   interface IonSkeletonText {
     /**
     * Width for the element to render at. Default is 100%
@@ -5315,7 +5209,6 @@ declare global {
     'IonFooter': Components.IonFooter;
     'IonGrid': Components.IonGrid;
     'IonHeader': Components.IonHeader;
-    'IonHideWhen': Components.IonHideWhen;
     'IonImg': Components.IonImg;
     'IonInfiniteScrollContent': Components.IonInfiniteScrollContent;
     'IonInfiniteScroll': Components.IonInfiniteScroll;
@@ -5366,7 +5259,6 @@ declare global {
     'IonSelectOption': Components.IonSelectOption;
     'IonSelectPopover': Components.IonSelectPopover;
     'IonSelect': Components.IonSelect;
-    'IonShowWhen': Components.IonShowWhen;
     'IonSkeletonText': Components.IonSkeletonText;
     'IonSlide': Components.IonSlide;
     'IonSlides': Components.IonSlides;
@@ -5419,7 +5311,6 @@ declare global {
     'ion-footer': Components.IonFooterAttributes;
     'ion-grid': Components.IonGridAttributes;
     'ion-header': Components.IonHeaderAttributes;
-    'ion-hide-when': Components.IonHideWhenAttributes;
     'ion-img': Components.IonImgAttributes;
     'ion-infinite-scroll-content': Components.IonInfiniteScrollContentAttributes;
     'ion-infinite-scroll': Components.IonInfiniteScrollAttributes;
@@ -5470,7 +5361,6 @@ declare global {
     'ion-select-option': Components.IonSelectOptionAttributes;
     'ion-select-popover': Components.IonSelectPopoverAttributes;
     'ion-select': Components.IonSelectAttributes;
-    'ion-show-when': Components.IonShowWhenAttributes;
     'ion-skeleton-text': Components.IonSkeletonTextAttributes;
     'ion-slide': Components.IonSlideAttributes;
     'ion-slides': Components.IonSlidesAttributes;
@@ -5678,12 +5568,6 @@ declare global {
     new (): HTMLIonHeaderElement;
   };
 
-  interface HTMLIonHideWhenElement extends Components.IonHideWhen, HTMLStencilElement {}
-  var HTMLIonHideWhenElement: {
-    prototype: HTMLIonHideWhenElement;
-    new (): HTMLIonHideWhenElement;
-  };
-
   interface HTMLIonImgElement extends Components.IonImg, HTMLStencilElement {}
   var HTMLIonImgElement: {
     prototype: HTMLIonImgElement;
@@ -5984,12 +5868,6 @@ declare global {
     new (): HTMLIonSelectElement;
   };
 
-  interface HTMLIonShowWhenElement extends Components.IonShowWhen, HTMLStencilElement {}
-  var HTMLIonShowWhenElement: {
-    prototype: HTMLIonShowWhenElement;
-    new (): HTMLIonShowWhenElement;
-  };
-
   interface HTMLIonSkeletonTextElement extends Components.IonSkeletonText, HTMLStencilElement {}
   var HTMLIonSkeletonTextElement: {
     prototype: HTMLIonSkeletonTextElement;
@@ -6130,7 +6008,6 @@ declare global {
     'ion-footer': HTMLIonFooterElement
     'ion-grid': HTMLIonGridElement
     'ion-header': HTMLIonHeaderElement
-    'ion-hide-when': HTMLIonHideWhenElement
     'ion-img': HTMLIonImgElement
     'ion-infinite-scroll-content': HTMLIonInfiniteScrollContentElement
     'ion-infinite-scroll': HTMLIonInfiniteScrollElement
@@ -6181,7 +6058,6 @@ declare global {
     'ion-select-option': HTMLIonSelectOptionElement
     'ion-select-popover': HTMLIonSelectPopoverElement
     'ion-select': HTMLIonSelectElement
-    'ion-show-when': HTMLIonShowWhenElement
     'ion-skeleton-text': HTMLIonSkeletonTextElement
     'ion-slide': HTMLIonSlideElement
     'ion-slides': HTMLIonSlidesElement
@@ -6234,7 +6110,6 @@ declare global {
     'ion-footer': HTMLIonFooterElement;
     'ion-grid': HTMLIonGridElement;
     'ion-header': HTMLIonHeaderElement;
-    'ion-hide-when': HTMLIonHideWhenElement;
     'ion-img': HTMLIonImgElement;
     'ion-infinite-scroll-content': HTMLIonInfiniteScrollContentElement;
     'ion-infinite-scroll': HTMLIonInfiniteScrollElement;
@@ -6285,7 +6160,6 @@ declare global {
     'ion-select-option': HTMLIonSelectOptionElement;
     'ion-select-popover': HTMLIonSelectPopoverElement;
     'ion-select': HTMLIonSelectElement;
-    'ion-show-when': HTMLIonShowWhenElement;
     'ion-skeleton-text': HTMLIonSkeletonTextElement;
     'ion-slide': HTMLIonSlideElement;
     'ion-slides': HTMLIonSlidesElement;
diff --git a/core/src/components/hide-when/hide-when.scss b/core/src/components/hide-when/hide-when.scss
deleted file mode 100644
index 680be5e3d9..0000000000
--- a/core/src/components/hide-when/hide-when.scss
+++ /dev/null
@@ -1,7 +0,0 @@
-:host {
-  display: block;
-}
-
-:host(.hide-content) {
-  display: none;
-}
diff --git a/core/src/components/hide-when/hide-when.tsx b/core/src/components/hide-when/hide-when.tsx
deleted file mode 100644
index 4da2da01ca..0000000000
--- a/core/src/components/hide-when/hide-when.tsx
+++ /dev/null
@@ -1,73 +0,0 @@
-import { Component, ComponentInterface, Element, Listen, Prop, State } from '@stencil/core';
-
-import { Config } from '../../interface';
-import { DisplayWhen, getTestResult } from '../../utils/show-hide-when-utils';
-
-@Component({
-  tag: 'ion-hide-when',
-  styleUrl: './hide-when.scss',
-  shadow: true
-})
-export class HideWhen implements ComponentInterface, DisplayWhen {
-
-  @Element() element!: HTMLElement;
-  @Prop({ context: 'config' }) config!: Config;
-  @Prop({ context: 'window' }) win!: Window;
-
-  /**
-   * If the current platform matches the given value, the element will hide.
-   * Accepts a comma separated list of modes to match against.
-   */
-  @Prop() modes!: string;
-
-  /**
-   * If the current orientation matches this value, the element will hide.
-   */
-  @Prop() orientation?: string;
-
-  /**
-   * If the current media query matches this value, the element will hide.
-   */
-  @Prop() mediaQuery?: string;
-
-  /**
-   * If the current screen width matches the given size, the element will hide.
-   * Uses the build in sizes of xs, sm, md, lg, xl.
-   */
-  @Prop() size?: string;
-
-  /**
-   * If the current platform matches the given value, the element will hide.
-   * Accepts a comma separated list of platforms to match against.
-   */
-  @Prop() platform?: string;
-
-  /**
-   * If `false`, and two or more conditions are set, the element will hide when all are true.
-   * If `true`, and two or more conditions are set, the element will hide when at least one is true.
-   */
-  @Prop() or = false;
-
-  @State() passesTest = false;
-
-  componentWillLoad() {
-    this.onResize();
-  }
-
-  @Listen('window:resize')
-  onResize() {
-    this.passesTest = getTestResult(this);
-  }
-
-  hostData() {
-    return {
-      class: {
-        'hide-content': this.passesTest
-      }
-    };
-  }
-
-  render() {
-    return <slot></slot>;
-  }
-}
diff --git a/core/src/components/hide-when/readme.md b/core/src/components/hide-when/readme.md
deleted file mode 100644
index cee98cda89..0000000000
--- a/core/src/components/hide-when/readme.md
+++ /dev/null
@@ -1,23 +0,0 @@
-# ion-hide-when
-
-`HideWhen` is a component that will automatically hide itself and any child content when a property evaluates to true.
-
-
-<!-- Auto Generated Below -->
-
-
-## Properties
-
-| Property      | Attribute     | Description                                                                                                                                                                              | Type                  |
-| ------------- | ------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------- |
-| `mediaQuery`  | `media-query` | If the current media query matches this value, the element will hide.                                                                                                                    | `string \| undefined` |
-| `modes`       | `modes`       | If the current platform matches the given value, the element will hide. Accepts a comma separated list of modes to match against.                                                        | `string`              |
-| `or`          | `or`          | If `false`, and two or more conditions are set, the element will hide when all are true. If `true`, and two or more conditions are set, the element will hide when at least one is true. | `boolean`             |
-| `orientation` | `orientation` | If the current orientation matches this value, the element will hide.                                                                                                                    | `string \| undefined` |
-| `platform`    | `platform`    | If the current platform matches the given value, the element will hide. Accepts a comma separated list of platforms to match against.                                                    | `string \| undefined` |
-| `size`        | `size`        | If the current screen width matches the given size, the element will hide. Uses the build in sizes of xs, sm, md, lg, xl.                                                                | `string \| undefined` |
-
-
-----------------------------------------------
-
-*Built with [StencilJS](https://stenciljs.com/)*
diff --git a/core/src/components/hide-when/test/basic/index.html b/core/src/components/hide-when/test/basic/index.html
deleted file mode 100644
index e95d5ad83a..0000000000
--- a/core/src/components/hide-when/test/basic/index.html
+++ /dev/null
@@ -1,107 +0,0 @@
-<!DOCTYPE html>
-<html dir="ltr">
-
-<head>
-  <meta charset="UTF-8">
-  <title>Hide When - Basic</title>
-  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
-  <link href="../../../../../css/ionic.bundle.css" rel="stylesheet">
-  <link href="../../../../../scripts/testing/styles.css" rel="stylesheet">
-  <script src="../../../../../dist/ionic.js"></script>
-</head>
-
-<body>
-  <ion-app>
-
-    <ion-header>
-      <ion-toolbar>
-        <ion-title>Hide when - Basic</ion-title>
-      </ion-toolbar>
-    </ion-header>
-
-    <ion-content padding>
-
-      <h2>Mode Tests</h2>
-      <ion-hide-when modes="md, ios">
-        <div>Hides on MD, iOS</div>
-      </ion-hide-when>
-
-      <ion-hide-when modes="md">
-        <div>Hides on MD only</div>
-      </ion-hide-when>
-
-      <ion-hide-when modes="ios">
-        <div>Hides on iOS only</div>
-      </ion-hide-when>
-
-      <h2>Orientation Tests</h2>
-      <ion-hide-when orientation="portrait">
-        <div>Hides on portrait orientation</div>
-      </ion-hide-when>
-
-      <ion-hide-when orientation="landscape">
-        <div>Hides on landscape orientation</div>
-      </ion-hide-when>
-
-      <h2>Platform Tests</h2>
-
-      <ion-hide-when platform="android,ios">
-        <div>Hides on Android and iOS</div>
-      </ion-hide-when>
-
-      <ion-hide-when platform="ios">
-        <div>Only hide on iOS</div>
-      </ion-hide-when>
-
-      <ion-hide-when platform="android">
-        <div>Only hide on Android</div>
-      </ion-hide-when>
-
-      <ion-hide-when platform="ipad">
-        <div>Only hide on ipad</div>
-      </ion-hide-when>
-
-      <ion-hide-when platform="phablet">
-        <div>Only hide on phablet</div>
-      </ion-hide-when>
-
-      <ion-hide-when platform="iphone">
-        <div>Only hide on phone</div>
-      </ion-hide-when>
-
-      <h2>Size Tests</h2>
-      <ion-hide-when size="xs">
-        <div>Only hide on xs</div>
-      </ion-hide-when>
-
-      <ion-hide-when size="sm">
-        <div>Only hide on sm</div>
-      </ion-hide-when>
-
-      <ion-hide-when size="md">
-        <div>Only hide on md</div>
-      </ion-hide-when>
-
-      <ion-hide-when size="lg">
-        <div>Only hide on lg</div>
-      </ion-hide-when>
-
-      <ion-hide-when size="xl">
-        <div>Only hide on xl</div>
-      </ion-hide-when>
-
-      <ion-hide-when size="xs, m">
-        <div>Only hide on XS or m</div>
-      </ion-hide-when>
-
-    </ion-content>
-
-
-  </ion-app>
-
-  <script>
-
-  </script>
-</body>
-
-</html>
diff --git a/core/src/components/hide-when/test/preview/index.html b/core/src/components/hide-when/test/preview/index.html
deleted file mode 100644
index f7f92b757d..0000000000
--- a/core/src/components/hide-when/test/preview/index.html
+++ /dev/null
@@ -1,107 +0,0 @@
-<!DOCTYPE html>
-<html dir="ltr">
-
-<head>
-  <meta charset="UTF-8">
-  <title>Hide When</title>
-  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
-  <link href="../../../../../css/ionic.bundle.css" rel="stylesheet">
-  <link href="../../../../../scripts/testing/styles.css" rel="stylesheet">
-  <script src="../../../../../dist/ionic.js"></script>
-</head>
-
-<body>
-  <ion-app>
-
-    <ion-header translucent>
-      <ion-toolbar>
-        <ion-title>Hide when</ion-title>
-      </ion-toolbar>
-    </ion-header>
-
-    <ion-content padding fullscreen>
-
-      <h2>Mode Tests</h2>
-      <ion-hide-when modes="md, ios">
-        <div>Hides on MD, iOS</div>
-      </ion-hide-when>
-
-      <ion-hide-when modes="md">
-        <div>Hides on MD only</div>
-      </ion-hide-when>
-
-      <ion-hide-when modes="ios">
-        <div>Hides on iOS only</div>
-      </ion-hide-when>
-
-      <h2>Orientation Tests</h2>
-      <ion-hide-when orientation="portrait">
-        <div>Hides on portrait orientation</div>
-      </ion-hide-when>
-
-      <ion-hide-when orientation="landscape">
-        <div>Hides on landscape orientation</div>
-      </ion-hide-when>
-
-      <h2>Platform Tests</h2>
-
-      <ion-hide-when platform="android,ios">
-        <div>Hides on Android and iOS</div>
-      </ion-hide-when>
-
-      <ion-hide-when platform="ios">
-        <div>Only hide on iOS</div>
-      </ion-hide-when>
-
-      <ion-hide-when platform="android">
-        <div>Only hide on Android</div>
-      </ion-hide-when>
-
-      <ion-hide-when platform="ipad">
-        <div>Only hide on ipad</div>
-      </ion-hide-when>
-
-      <ion-hide-when platform="phablet">
-        <div>Only hide on phablet</div>
-      </ion-hide-when>
-
-      <ion-hide-when platform="iphone">
-        <div>Only hide on phone</div>
-      </ion-hide-when>
-
-      <h2>Size Tests</h2>
-      <ion-hide-when size="xs">
-        <div>Only hide on xs</div>
-      </ion-hide-when>
-
-      <ion-hide-when size="sm">
-        <div>Only hide on sm</div>
-      </ion-hide-when>
-
-      <ion-hide-when size="md">
-        <div>Only hide on md</div>
-      </ion-hide-when>
-
-      <ion-hide-when size="lg">
-        <div>Only hide on lg</div>
-      </ion-hide-when>
-
-      <ion-hide-when size="xl">
-        <div>Only hide on xl</div>
-      </ion-hide-when>
-
-      <ion-hide-when size="xs, m">
-        <div>Only hide on XS or m</div>
-      </ion-hide-when>
-
-    </ion-content>
-
-    <style>
-      ion-toolbar {
-        --background: white;
-      }
-    </style>
-  </ion-app>
-</body>
-
-</html>
diff --git a/core/src/components/hide-when/usage/javascript.md b/core/src/components/hide-when/usage/javascript.md
deleted file mode 100644
index bc6a2f9afc..0000000000
--- a/core/src/components/hide-when/usage/javascript.md
+++ /dev/null
@@ -1,78 +0,0 @@
-```html
-<ion-content padding>
-
-  <h2>Mode Tests</h2>
-  <ion-hide-when modes="md, ios">
-    <div>Hides on MD, iOS</div>
-  </ion-hide-when>
-
-  <ion-hide-when modes="md">
-    <div>Hides on MD only</div>
-  </ion-hide-when>
-
-  <ion-hide-when modes="ios">
-    <div>Hides on iOS only</div>
-  </ion-hide-when>
-
-  <h2>Orientation Tests</h2>
-  <ion-hide-when orientation="portrait">
-    <div>Hides on portrait orientation</div>
-  </ion-hide-when>
-
-  <ion-hide-when orientation="landscape">
-    <div>Hides on landscape orientation</div>
-  </ion-hide-when>
-
-  <h2>Platform Tests</h2>
-
-  <ion-hide-when platform="android,ios">
-    <div>Hides on Android and iOS</div>
-  </ion-hide-when>
-
-  <ion-hide-when platform="ios">
-    <div>Only hide on iOS</div>
-  </ion-hide-when>
-
-  <ion-hide-when platform="android">
-    <div>Only hide on Android</div>
-  </ion-hide-when>
-
-  <ion-hide-when platform="ipad">
-    <div>Only hide on ipad</div>
-  </ion-hide-when>
-
-  <ion-hide-when platform="phablet">
-    <div>Only hide on phablet</div>
-  </ion-hide-when>
-
-  <ion-hide-when platform="iphone">
-    <div>Only hide on phone</div>
-  </ion-hide-when>
-
-  <h2>Size Tests</h2>
-  <ion-hide-when size="xs">
-    <div>Only hide on xs</div>
-  </ion-hide-when>
-
-  <ion-hide-when size="sm">
-    <div>Only hide on sm</div>
-  </ion-hide-when>
-
-  <ion-hide-when size="md">
-    <div>Only hide on md</div>
-  </ion-hide-when>
-
-  <ion-hide-when size="lg">
-    <div>Only hide on lg</div>
-  </ion-hide-when>
-
-  <ion-hide-when size="xl">
-    <div>Only hide on xl</div>
-  </ion-hide-when>
-
-  <ion-hide-when size="xs, m">
-    <div>Only hide on XS or m</div>
-  </ion-hide-when>
-
-</ion-content>
-```
diff --git a/core/src/components/show-when/readme.md b/core/src/components/show-when/readme.md
deleted file mode 100644
index c719612ae3..0000000000
--- a/core/src/components/show-when/readme.md
+++ /dev/null
@@ -1,24 +0,0 @@
-# ion-show-when
-
-ShowWhen is a component that will automatically show it's child contents when a query evaluates to true.
-ShowWhen can watch for platform changes, mode changes, css media queries, and device orientation.
-
-
-<!-- Auto Generated Below -->
-
-
-## Properties
-
-| Property      | Attribute     | Description                                                                                                                                                                              | Type                  |
-| ------------- | ------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------- |
-| `mediaQuery`  | `media-query` | If the current media query matches this value, the element will show.                                                                                                                    | `string \| undefined` |
-| `modes`       | `modes`       | If the current platform matches the given value, the element will show. Accepts a comma separated list of modes to match against.                                                        | `string`              |
-| `or`          | `or`          | If `false`, and two or more conditions are set, the element will show when all are true. If `true`, and two or more conditions are set, the element will show when at least one is true. | `boolean`             |
-| `orientation` | `orientation` | If the current orientation matches this value, the element will show.                                                                                                                    | `string \| undefined` |
-| `platform`    | `platform`    | If the current platform matches the given value, the element will show. Accepts a comma separated list of platform to match against.                                                     | `string \| undefined` |
-| `size`        | `size`        | If the current screen width matches the given size, the element will show. Uses the build in sizes of xs, sm, md, lg, xl.                                                                | `string \| undefined` |
-
-
-----------------------------------------------
-
-*Built with [StencilJS](https://stenciljs.com/)*
diff --git a/core/src/components/show-when/show-when.scss b/core/src/components/show-when/show-when.scss
deleted file mode 100644
index b1fd2396e8..0000000000
--- a/core/src/components/show-when/show-when.scss
+++ /dev/null
@@ -1,7 +0,0 @@
-:host {
-  display: none;
-}
-
-:host(.show-content) {
-  display: block;
-}
diff --git a/core/src/components/show-when/show-when.tsx b/core/src/components/show-when/show-when.tsx
deleted file mode 100644
index a655a1a30e..0000000000
--- a/core/src/components/show-when/show-when.tsx
+++ /dev/null
@@ -1,74 +0,0 @@
-import { Component, ComponentInterface, Element, Listen, Prop, State } from '@stencil/core';
-
-import { Config } from '../../interface';
-import { DisplayWhen, getTestResult } from '../../utils/show-hide-when-utils';
-
-@Component({
-  tag: 'ion-show-when',
-  styleUrl: 'show-when.scss',
-  shadow: true
-})
-export class ShowWhen implements ComponentInterface, DisplayWhen {
-
-  @Element() element?: HTMLElement;
-
-  @Prop({ context: 'config' }) config!: Config;
-  @Prop({ context: 'window' }) win!: Window;
-
-  /**
-   * If the current platform matches the given value, the element will show.
-   * Accepts a comma separated list of modes to match against.
-   */
-  @Prop() modes!: string;
-
-  /**
-   * If the current orientation matches this value, the element will show.
-   */
-  @Prop() orientation?: string;
-
-  /**
-   * If the current media query matches this value, the element will show.
-   */
-  @Prop() mediaQuery?: string;
-
-  /**
-   * If the current screen width matches the given size, the element will show.
-   * Uses the build in sizes of xs, sm, md, lg, xl.
-   */
-  @Prop() size?: string;
-
-  /**
-   * If the current platform matches the given value, the element will show.
-   * Accepts a comma separated list of platform to match against.
-   */
-  @Prop() platform?: string;
-
-  /**
-   * If `false`, and two or more conditions are set, the element will show when all are true.
-   * If `true`, and two or more conditions are set, the element will show when at least one is true.
-   */
-  @Prop() or = false;
-
-  @State() passesTest = false;
-
-  componentWillLoad() {
-    this.onResize();
-  }
-
-  @Listen('window:resize')
-  onResize() {
-    this.passesTest = getTestResult(this);
-  }
-
-  hostData() {
-    return {
-      class: {
-        'show-content': this.passesTest,
-      }
-    };
-  }
-
-  render() {
-    return <slot></slot>;
-  }
-}
diff --git a/core/src/components/show-when/test/basic/index.html b/core/src/components/show-when/test/basic/index.html
deleted file mode 100644
index 119ae2a05d..0000000000
--- a/core/src/components/show-when/test/basic/index.html
+++ /dev/null
@@ -1,107 +0,0 @@
-<!DOCTYPE html>
-<html dir="ltr">
-
-<head>
-  <meta charset="UTF-8">
-  <title>Show When - Basic</title>
-  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
-  <link href="../../../../../css/ionic.bundle.css" rel="stylesheet">
-  <link href="../../../../../scripts/testing/styles.css" rel="stylesheet">
-  <script src="../../../../../dist/ionic.js"></script>
-</head>
-
-<body>
-  <ion-app>
-
-    <ion-header>
-      <ion-toolbar>
-        <ion-title>Show when - Basic</ion-title>
-      </ion-toolbar>
-    </ion-header>
-
-    <ion-content padding>
-
-      <h2>Mode Tests</h2>
-      <ion-show-when modes="md, ios">
-        <div>Shows on MD, iOS</div>
-      </ion-show-when>
-
-      <ion-show-when modes="md">
-        <div>Shows on MD only</div>
-      </ion-show-when>
-
-      <ion-show-when modes="ios">
-        <div>Shows on iOS only</div>
-      </ion-show-when>
-
-      <h2>Orientation Tests</h2>
-      <ion-show-when orientation="portrait">
-        <div>Shows on portrait orientation</div>
-      </ion-show-when>
-
-      <ion-show-when orientation="landscape">
-        <div>Shows on landscape orientation</div>
-      </ion-show-when>
-
-      <h2>Platform Tests</h2>
-
-      <ion-show-when platform="android,ios">
-        <div>Render on Android and iOS</div>
-      </ion-show-when>
-
-      <ion-show-when platform="ios">
-        <div>Only render on iOS</div>
-      </ion-show-when>
-
-      <ion-show-when platform="android">
-        <div>Only render on Android</div>
-      </ion-show-when>
-
-      <ion-show-when platform="ipad">
-        <div>Only render on ipad</div>
-      </ion-show-when>
-
-      <ion-show-when platform="phablet">
-        <div>Only render on phablet</div>
-      </ion-show-when>
-
-      <ion-show-when platform="iphone">
-        <div>Only render on phone</div>
-      </ion-show-when>
-
-      <h2>Size Tests</h2>
-      <ion-show-when size="xs">
-        <div>Only render on xs</div>
-      </ion-show-when>
-
-      <ion-show-when size="sm">
-        <div>Only render on sm</div>
-      </ion-show-when>
-
-      <ion-show-when size="md">
-        <div>Only render on md</div>
-      </ion-show-when>
-
-      <ion-show-when size="lg">
-        <div>Only render on lg</div>
-      </ion-show-when>
-
-      <ion-show-when size="xl">
-        <div>Only render on xl</div>
-      </ion-show-when>
-
-      <ion-show-when size="xs, m">
-        <div>Only render on XS or m</div>
-      </ion-show-when>
-
-    </ion-content>
-
-
-  </ion-app>
-
-  <script>
-
-  </script>
-</body>
-
-</html>
diff --git a/core/src/components/show-when/test/preview/index.html b/core/src/components/show-when/test/preview/index.html
deleted file mode 100644
index 60e41b35c8..0000000000
--- a/core/src/components/show-when/test/preview/index.html
+++ /dev/null
@@ -1,109 +0,0 @@
-<!DOCTYPE html>
-<html dir="ltr">
-
-<head>
-  <meta charset="UTF-8">
-  <title>Show When</title>
-  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
-  <link href="../../../../../css/ionic.bundle.css" rel="stylesheet">
-  <link href="../../../../../scripts/testing/styles.css" rel="stylesheet">
-  <script src="../../../../../dist/ionic.js"></script>
-</head>
-
-<body>
-  <ion-app>
-
-    <ion-header translucent>
-      <ion-toolbar>
-        <ion-title>Show when</ion-title>
-      </ion-toolbar>
-    </ion-header>
-
-    <ion-content padding fullscreen>
-
-      <h2>Mode Tests</h2>
-      <ion-show-when modes="md, ios">
-        <div>Shows on MD, iOS</div>
-      </ion-show-when>
-
-      <ion-show-when modes="md">
-        <div>Shows on MD only</div>
-      </ion-show-when>
-
-      <ion-show-when modes="ios">
-        <div>Shows on iOS only</div>
-      </ion-show-when>
-
-      <h2>Orientation Tests</h2>
-      <ion-show-when orientation="portrait">
-        <div>Shows on portrait orientation</div>
-      </ion-show-when>
-
-      <ion-show-when orientation="landscape">
-        <div>Shows on landscape orientation</div>
-      </ion-show-when>
-
-      <h2>Platform Tests</h2>
-
-      <ion-show-when platform="android,ios">
-        <div>Render on Android and iOS</div>
-      </ion-show-when>
-
-      <ion-show-when platform="ios">
-        <div>Only render on iOS</div>
-      </ion-show-when>
-
-      <ion-show-when platform="android">
-        <div>Only render on Android</div>
-      </ion-show-when>
-
-      <ion-show-when platform="ipad">
-        <div>Only render on ipad</div>
-      </ion-show-when>
-
-      <ion-show-when platform="phablet">
-        <div>Only render on phablet</div>
-      </ion-show-when>
-
-      <ion-show-when platform="iphone">
-        <div>Only render on phone</div>
-      </ion-show-when>
-
-      <h2>Size Tests</h2>
-      <ion-show-when size="xs">
-        <div>Only render on xs</div>
-      </ion-show-when>
-
-      <ion-show-when size="sm">
-        <div>Only render on sm</div>
-      </ion-show-when>
-
-      <ion-show-when size="md">
-        <div>Only render on md</div>
-      </ion-show-when>
-
-      <ion-show-when size="lg">
-        <div>Only render on lg</div>
-      </ion-show-when>
-
-      <ion-show-when size="xl">
-        <div>Only render on xl</div>
-      </ion-show-when>
-
-      <ion-show-when size="xs, m">
-        <div>Only render on XS or m</div>
-      </ion-show-when>
-
-    </ion-content>
-
-
-  </ion-app>
-
-  <style>
-    ion-toolbar {
-      --background: white;
-    }
-  </style>
-</body>
-
-</html>
diff --git a/core/src/utils/show-hide-when-utils.ts b/core/src/utils/show-hide-when-utils.ts
deleted file mode 100644
index bcaea5191c..0000000000
--- a/core/src/utils/show-hide-when-utils.ts
+++ /dev/null
@@ -1,78 +0,0 @@
-import { Config } from '../interface';
-
-import { matchBreakpoint } from './media';
-import { isPlatform } from './platform';
-
-export interface DisplayWhen {
-  config: Config;
-  win: Window;
-  mediaQuery?: string;
-  modes?: string;
-  or: boolean;
-  orientation?: string;
-  platform?: string;
-  size?: string;
-}
-
-function isPlatformMatch(win: Window, multiPlatformString: string) {
-  const platforms = split(multiPlatformString);
-  return platforms.some(p => isPlatform(win, p as any));
-}
-
-function isModeMatch(config: Config, multiModeString: string) {
-  const modes = split(multiModeString);
-  const currentMode = config.get('mode');
-  return modes.includes(currentMode);
-}
-
-function isSizeMatch(win: Window, multiSizeString: string) {
-  const sizes = split(multiSizeString);
-  return sizes.some(s => matchBreakpoint(win, s));
-}
-
-function split(multiOptions: string): string[] {
-  return multiOptions.replace(/\s/g, '').split(',');
-}
-
-export function getTestResult(displayWhen: DisplayWhen) {
-  const results: boolean[] = [];
-  if (displayWhen.mediaQuery !== undefined) {
-    results.push(matchMedia(displayWhen.win, displayWhen.mediaQuery));
-  }
-  if (displayWhen.size !== undefined) {
-    results.push(isSizeMatch(displayWhen.win, displayWhen.size));
-  }
-  if (displayWhen.modes !== undefined) {
-    results.push(isModeMatch(displayWhen.config, displayWhen.modes));
-  }
-  if (displayWhen.platform !== undefined) {
-    results.push(isPlatformMatch(displayWhen.win, displayWhen.platform));
-  }
-  if (displayWhen.orientation !== undefined) {
-    results.push(isOrientationMatch(displayWhen.win, displayWhen.orientation));
-  }
-
-  if (displayWhen.or) {
-    return results.some(r => r);
-  } else {
-    return results.every(r => r);
-  }
-}
-
-function isOrientationMatch(win: Window, orientation: string) {
-  if (orientation === 'portrait') {
-    return isPortrait(win);
-  } else if (orientation === 'landscape') {
-    return !isPortrait(win);
-  }
-  // it's an invalid orientation, so just return it
-  return false;
-}
-
-function isPortrait(win: Window): boolean {
-  return matchMedia(win, '(orientation: portrait)');
-}
-
-function matchMedia(win: Window, query: string): boolean {
-  return win.matchMedia(query).matches;
-}
diff --git a/core/stencil.config.ts b/core/stencil.config.ts
index 6116f727af..3c5201e68d 100644
--- a/core/stencil.config.ts
+++ b/core/stencil.config.ts
@@ -18,7 +18,6 @@ export const config: Config = {
     { components: ['ion-datetime', 'ion-picker', 'ion-picker-column', 'ion-picker-controller'] },
     { components: ['ion-fab', 'ion-fab-button', 'ion-fab-list'] },
     { components: ['ion-grid', 'ion-row', 'ion-col'] },
-    { components: ['ion-hide-when', 'ion-show-when'] },
     { components: ['ion-infinite-scroll', 'ion-infinite-scroll-content'] },
     { components: ['ion-input'] },
     { components: ['ion-textarea'] },