diff --git a/client/src/templates/Guide/components/example/Component/index.js b/client/src/templates/Guide/components/example/Component/index.js
new file mode 100644
index 0000000000..8509750c93
--- /dev/null
+++ b/client/src/templates/Guide/components/example/Component/index.js
@@ -0,0 +1,80 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import PropTypes from 'prop-types';
+import { graphql } from 'gatsby';
+
+import ArticleLayout from '../../ArticleLayout';
+
+const propTypes = {
+ data: PropTypes.object
+};
+
+class CustomClickCounter extends React.Component {
+ state = {
+ init: false,
+ span: null,
+ div: null,
+ counter: 0
+ };
+
+ initComponent() {
+ const span = document.getElementById('example-component_span');
+ const div = document.getElementById('example-component_div');
+ this.setState({ init: true, span, div });
+ }
+
+ handleClick = () => {
+ this.setState(state => ({ counter: state.counter + 1 }));
+ };
+
+ componentDidMount() {
+ this.initComponent();
+ }
+
+ render() {
+ if (!this.state.init) {
+ return null;
+ }
+ return (
+
+ {ReactDOM.createPortal(this.state.counter, this.state.span)}
+ {ReactDOM.createPortal(
+ ,
+ this.state.div
+ )}
+
+ );
+ }
+}
+
+const ExampleComponent = props => {
+ const {
+ data: {
+ markdownRemark: { html }
+ }
+ } = props;
+ return (
+
+
+
+
+ );
+};
+
+ExampleComponent.displayName = 'ExampleComponent';
+ExampleComponent.propTypes = propTypes;
+export default ExampleComponent;
+
+export const pageQuery = graphql`
+ query ExampleComponent($id: String!) {
+ markdownRemark(id: { eq: $id }) {
+ html
+ ...ArticleLayout
+ }
+ }
+`;
diff --git a/mock-guide/english/components/example/index.md b/mock-guide/english/components/example/index.md
new file mode 100644
index 0000000000..6e92521fc5
--- /dev/null
+++ b/mock-guide/english/components/example/index.md
@@ -0,0 +1,8 @@
+---
+title: Example component
+component: example/Component/index.js
+---
+## Example component
+
+We can place inline component: .
+Or place block component:
diff --git a/mock-guide/english/components/index.md b/mock-guide/english/components/index.md
new file mode 100644
index 0000000000..b7cf819e95
--- /dev/null
+++ b/mock-guide/english/components/index.md
@@ -0,0 +1,14 @@
+---
+title: Components
+---
+
+## Components
+
+We can use custom components for guide articles. Add
+
+```yml
+component: path/to/component
+```
+
+to an article frontmatter to use your component. Your component should be
+located in `client/src/templates/Guide/components/path/to/component`.