diff --git a/source/_cookbook/custom_panel_using_react.markdown b/source/_cookbook/custom_panel_using_react.markdown
index 687e6a00933..552eff7c219 100644
--- a/source/_cookbook/custom_panel_using_react.markdown
+++ b/source/_cookbook/custom_panel_using_react.markdown
@@ -20,11 +20,17 @@ This is a [React](https://facebook.github.io/react/) implementation of [TodoMVC]
 
 All you need is available as a [custom component](https://github.com/home-assistant/home-assistant/tree/dev/config/custom_components/react_panel).
 
-Create a entry for the panel in your `configuration.yaml` file to enable it. Set a title if you like.
+Create a entry for the panel in your `configuration.yaml` file to enable it.
 
 ```yaml
-react_panel:
-  title: 'React'
+panel_custom:
+  - name: todomvc
+    sidebar_title: TodoMVC
+    sidebar_icon: mdi:work
+    url_path: my-todomvc
+    webcomponent_path: <config dir>/panels/<component name>.html
+    config:
+      hello: world
 ```
 
 This video shows the example in action.
diff --git a/source/developers/frontend_creating_custom_panels.markdown b/source/developers/frontend_creating_custom_panels.markdown
index 34fc4c0bd97..0c1e82da327 100644
--- a/source/developers/frontend_creating_custom_panels.markdown
+++ b/source/developers/frontend_creating_custom_panels.markdown
@@ -11,30 +11,9 @@ footer: true
 
 Any component has the possibility to add a panel to the frontend. Panels will be rendered full screen and have real-time access to the Home Assistant object via JavaScript. Examples of this in the app are map, logbook and history.
 
-Adding a custom panel to your component is easy. For this example we're assuming your component is in `hello_panel.py`. Start by converting your panel to a folder. Create a folder called `hello_panel` and move `hello_panel.py` to `hello_panel/__init__.py`. In that same folder, create a file `panel.html`.
+Create a file called `hello.html` in your <config dir>/panels/.
 
-Your component should register the panel. The minimum required code for your component is:
-
-```python
-"""A minimal custom panel example."""
-import os
-
-from homeassistant.components.frontend import register_panel
-
-DOMAIN = 'hello_panel'
-DEPENDENCIES = ['frontend']
-
-PANEL_PATH = os.path.join(os.path.dirname(__file__), 'panel.html')
-
-
-def setup(hass, config):
-    """Initialize a minimal custom panel."""
-    register_panel(hass, 'hello', PANEL_PATH, title='Hello World',
-                   icon='mdi:appnet', config=config.get(DOMAIN, {}))
-    return True
-```
-
-The `panel.html` contains the needed building blocks to create the elements inside the view.
+The `hello.html` contains the needed building blocks to create the elements inside the view.
 
 ```javascript
 <dom-module id='ha-panel-hello'>
@@ -87,8 +66,12 @@ Polymer({
 Create an entry for the new panel in your `configuration.yaml` file:
 
 ```yaml
-hello_panel:
-  who: 'You'
+panel_custom:
+  - name: hello_world
+    sidebar_title: Hello World
+    sidebar_icon: mdi:hand-pointing-right
+    url_path: hello_world
+    webcomponent_path: <config dir>/panels/hello.html
 ```
 
 For more examples, see the [Custom panel Examples](/cookbook#custom-panel-examples) on our examples page.