diff --git a/app/components/UI/Panel.js b/app/components/UI/Panel.js
new file mode 100644
index 00000000..ea4494c2
--- /dev/null
+++ b/app/components/UI/Panel.js
@@ -0,0 +1,43 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import { Box, Flex } from 'rebass'
+import { Text } from 'components/UI'
+
+const PanelHeader = ({ children, ...rest }) => (
+
+ {children}
+
+)
+PanelHeader.propTypes = { children: PropTypes.node }
+
+const PanelBody = ({ children, ...rest }) => (
+
+ {children}
+
+)
+PanelBody.propTypes = { children: PropTypes.node }
+
+const PanelFooter = ({ children, ...rest }) => (
+
+ {children}
+
+)
+PanelFooter.propTypes = { children: PropTypes.node }
+
+class Panel extends React.Component {
+ static Header = PanelHeader
+ static Body = PanelBody
+ static Footer = PanelFooter
+
+ render() {
+ const { children, ...rest } = this.props
+ return (
+
+ {children}
+
+ )
+ }
+}
+
+export default Panel
+export { PanelHeader, PanelBody, PanelFooter }
diff --git a/app/components/UI/index.js b/app/components/UI/index.js
index 3e5ad280..aaa91eb1 100644
--- a/app/components/UI/index.js
+++ b/app/components/UI/index.js
@@ -19,6 +19,7 @@ export MenuItem from './MenuItem'
export MenuItemGroup from './MenuItemGroup'
export Modal from './Modal'
export Notification from './Notification'
+export Panel, { PanelHeader, PanelBody, PanelFooter } from './Panel'
export Page from './Page'
export QRCode from './QRCode'
export Range from './Range'
diff --git a/stories/components/panel.stories.js b/stories/components/panel.stories.js
new file mode 100644
index 00000000..d7c6a935
--- /dev/null
+++ b/stories/components/panel.stories.js
@@ -0,0 +1,11 @@
+import React from 'react'
+import { storiesOf } from '@storybook/react'
+import { Panel } from 'components/UI'
+
+storiesOf('Components.Panel', module).add('Panel', () => (
+
+ Header here
+ Body here
+ Footer here
+
+))
diff --git a/test/unit/components/UI/Panel.spec.js b/test/unit/components/UI/Panel.spec.js
new file mode 100644
index 00000000..633a9dfa
--- /dev/null
+++ b/test/unit/components/UI/Panel.spec.js
@@ -0,0 +1,18 @@
+import React from 'react'
+import renderer from 'react-test-renderer'
+import { Panel } from 'components/UI'
+
+describe('component.UI.Panel', () => {
+ it('should render correctly', () => {
+ const tree = renderer
+ .create(
+
+ Header here
+ Body here
+ Footer here
+
+ )
+ .toJSON()
+ expect(tree).toMatchSnapshot()
+ })
+})
diff --git a/test/unit/components/UI/__snapshots__/Panel.spec.js.snap b/test/unit/components/UI/__snapshots__/Panel.spec.js.snap
new file mode 100644
index 00000000..96cf212f
--- /dev/null
+++ b/test/unit/components/UI/__snapshots__/Panel.spec.js.snap
@@ -0,0 +1,62 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`component.UI.Panel should render correctly 1`] = `
+.c2 {
+ padding-top: 16px;
+ padding-bottom: 16px;
+ -webkit-flex: 1;
+ -ms-flex: 1;
+ flex: 1;
+}
+
+.c0 {
+ height: 100%;
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-flex-direction: column;
+ -ms-flex-direction: column;
+ flex-direction: column;
+}
+
+.c1 {
+ padding-bottom: 16px;
+ font-size: m;
+ color: primaryText;
+ text-align: center;
+ line-height: 1.4;
+}
+
+.c3 {
+ padding-top: auto;
+ font-size: m;
+ color: primaryText;
+ text-align: center;
+ line-height: 1.4;
+}
+
+
+
+
+
+
+`;