diff --git a/packages/docs/package.json b/packages/docs/package.json
index 13e4d9d..3b79e72 100644
--- a/packages/docs/package.json
+++ b/packages/docs/package.json
@@ -20,6 +20,7 @@
"prismjs": "^1.19.0",
"react": "^16.8.9",
"react-dom": "^16.8.9",
+ "react-helmet": "^6.0.0",
"react-scripts": "^3.4.0",
"react-twitter-embed": "^3.0.3",
"react-ui": "1.0.0-beta.26",
diff --git a/packages/docs/src/components/head.js b/packages/docs/src/components/head.js
new file mode 100644
index 0000000..c88acd8
--- /dev/null
+++ b/packages/docs/src/components/head.js
@@ -0,0 +1,33 @@
+import React from "react";
+import { Helmet } from "react-helmet";
+import PropTypes from 'prop-types';
+
+export const Head = ({title='React-UI', description='React UI comes with a set of components that are accessible, responsive and customisable.'}) =>{
+ return(
+
+
+ {title}
+
+
+ {/* twitter */}
+
+
+
+
+
+
+
+ {/* facebook */}
+
+
+
+
+
+
+ )
+}
+
+Head.propTypes = {
+ description: PropTypes.string,
+ title: PropTypes.string,
+ };
\ No newline at end of file
diff --git a/packages/docs/src/components/index.js b/packages/docs/src/components/index.js
index c9da0c0..4a218f6 100644
--- a/packages/docs/src/components/index.js
+++ b/packages/docs/src/components/index.js
@@ -7,3 +7,4 @@ export * from '../components/page'
export * from '../components/section'
export * from '../components/list'
export * from '../components/divider'
+export * from '../components/head'
diff --git a/packages/docs/src/components/page.js b/packages/docs/src/components/page.js
index 7c08e26..f85dd51 100644
--- a/packages/docs/src/components/page.js
+++ b/packages/docs/src/components/page.js
@@ -2,19 +2,26 @@ import React from 'react'
import { Stack, calc } from 'react-ui'
import { Heading, Tagline } from './typography'
+import { Head } from './head'
-export const Page = ({ title, tagline, badges, ...props }) => (
-
- {title ? (
-
-
- {title}
+export const Page = ({ title, tagline, badges, ...props }) => {
+ return (
+ <>
+
+
+ {title ? (
+
+
+ {title}
- {badges || null}
-
- {tagline}
+ {badges || null}
+
+ {tagline}
+
+ ) : null}
+ {props.children}
- ) : null}
- {props.children}
-
-)
+
+
+ )
+}
diff --git a/yarn.lock b/yarn.lock
index 369f06e..b489657 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -13930,6 +13930,16 @@ react-helmet-async@^1.0.2:
react-fast-compare "^2.0.4"
shallowequal "^1.1.0"
+react-helmet@^6.0.0:
+ version "6.0.0"
+ resolved "https://registry.yarnpkg.com/react-helmet/-/react-helmet-6.0.0.tgz#fcb93ebaca3ba562a686eb2f1f9d46093d83b5f8"
+ integrity sha512-My6S4sa0uHN/IuVUn0HFmasW5xj9clTkB9qmMngscVycQ5vVG51Qp44BEvLJ4lixupTwDlU9qX1/sCrMN4AEPg==
+ dependencies:
+ object-assign "^4.1.1"
+ prop-types "^15.7.2"
+ react-fast-compare "^2.0.4"
+ react-side-effect "^2.1.0"
+
react-hotkeys@2.0.0:
version "2.0.0"
resolved "https://registry.yarnpkg.com/react-hotkeys/-/react-hotkeys-2.0.0.tgz#a7719c7340cbba888b0e9184f806a9ec0ac2c53f"
@@ -14096,6 +14106,11 @@ react-scripts@^3.4.0:
optionalDependencies:
fsevents "2.1.2"
+react-side-effect@^2.1.0:
+ version "2.1.0"
+ resolved "https://registry.yarnpkg.com/react-side-effect/-/react-side-effect-2.1.0.tgz#1ce4a8b4445168c487ed24dab886421f74d380d3"
+ integrity sha512-IgmcegOSi5SNX+2Snh1vqmF0Vg/CbkycU9XZbOHJlZ6kMzTmi3yc254oB1WCkgA7OQtIAoLmcSFuHTc/tlcqXg==
+
react-sizeme@^2.6.7:
version "2.6.12"
resolved "https://registry.yarnpkg.com/react-sizeme/-/react-sizeme-2.6.12.tgz#ed207be5476f4a85bf364e92042520499455453e"