diff --git a/src/webui/components/UpLinks/index.js b/src/webui/components/UpLinks/index.js
new file mode 100644
index 000000000..6491bb15a
--- /dev/null
+++ b/src/webui/components/UpLinks/index.js
@@ -0,0 +1,43 @@
+/**
+ * @prettier
+ * @flow
+ */
+
+import { DetailContextConsumer } from '../../pages/version/index';
+import { Heading, ListItem, CardContent } from './styles';
+import List from '@material-ui/core/List';
+import Chip from '@material-ui/core/Chip';
+import Card from '@material-ui/core/Card';
+
+import React from 'react';
+
+class UpLinks extends React.PureComponent {
+ render() {
+ return {({ packageMeta }) => this.renderContent(packageMeta._uplinks)};
+ }
+
+ renderList = (uplinks: object) => (
+
+ {Object.keys(uplinks)
+ .reverse()
+ .map(name => (
+
+
+
+ ))}
+
+ );
+
+ // $FlowFixMe
+ renderContent = uplinks =>
+ uplinks && (
+
+
+ {'UpLinks'}
+ {this.renderList(uplinks)}
+
+
+ );
+}
+
+export default UpLinks;
diff --git a/src/webui/components/UpLinks/styles.js b/src/webui/components/UpLinks/styles.js
new file mode 100644
index 000000000..5ab4c6147
--- /dev/null
+++ b/src/webui/components/UpLinks/styles.js
@@ -0,0 +1,23 @@
+import styled from 'react-emotion';
+import Typography from '@material-ui/core/Typography';
+import { default as MuiListItem } from '@material-ui/core/ListItem';
+import { default as MuiCardContent } from '@material-ui/core/CardContent';
+
+export const Heading = styled(Typography)`
+ && {
+ font-weight: 700;
+ }
+`;
+
+export const ListItem = styled(MuiListItem)`
+ && {
+ padding-left: 0;
+ padding-right: 0;
+ }
+`;
+
+export const CardContent = styled(MuiCardContent)`
+ && {
+ padding-bottom: 0;
+ }
+`;
diff --git a/src/webui/components/UpLinks/types.js b/src/webui/components/UpLinks/types.js
new file mode 100644
index 000000000..2c6bf3ee3
--- /dev/null
+++ b/src/webui/components/UpLinks/types.js
@@ -0,0 +1,6 @@
+/**
+ * @prettier
+ * @flow
+ */
+
+export interface IProps {}