diff --git a/ui_framework/doc_site/src/services/routes/routes.js b/ui_framework/doc_site/src/services/routes/routes.js
index 6369a6eaec700..388598bba61b2 100644
--- a/ui_framework/doc_site/src/services/routes/routes.js
+++ b/ui_framework/doc_site/src/services/routes/routes.js
@@ -51,6 +51,7 @@ const components = [{
 }, {
   name: 'Link',
   component: LinkExample,
+  hasReact: true,
 }, {
   name: 'Modal',
   component: ModalExample,
diff --git a/ui_framework/doc_site/src/views/link/link.html b/ui_framework/doc_site/src/views/link/link.html
deleted file mode 100644
index 2556423026f53..0000000000000
--- a/ui_framework/doc_site/src/views/link/link.html
+++ /dev/null
@@ -1 +0,0 @@
-<a class="kuiLink" href="#">More info</a>
diff --git a/ui_framework/doc_site/src/views/link/link.js b/ui_framework/doc_site/src/views/link/link.js
new file mode 100644
index 0000000000000..c4f8ec8adc6ab
--- /dev/null
+++ b/ui_framework/doc_site/src/views/link/link.js
@@ -0,0 +1,21 @@
+import React from 'react';
+
+import {
+  KuiLink,
+  KuiText,
+} from '../../../../components';
+
+export default () => (
+  <KuiText>
+    <p>
+      Open the {(
+        <KuiLink
+          href="http://www.elastic.co"
+          target="_blank"
+        >
+          Elastic website
+        </KuiLink>
+      )} in a new tab.
+    </p>
+  </KuiText>
+);
diff --git a/ui_framework/doc_site/src/views/link/link_example.js b/ui_framework/doc_site/src/views/link/link_example.js
index b18364ba0f737..5fdf691a5235f 100644
--- a/ui_framework/doc_site/src/views/link/link_example.js
+++ b/ui_framework/doc_site/src/views/link/link_example.js
@@ -1,5 +1,7 @@
 import React from 'react';
 
+import { renderToHtml } from '../../services';
+
 import {
   GuideDemo,
   GuidePage,
@@ -7,20 +9,25 @@ import {
   GuideSectionTypes,
 } from '../../components';
 
-const linkHtml = require('./link.html');
+import Link from './link';
+const linkSource = require('!!raw!./link');
+const linkHtml = renderToHtml(Link);
 
 export default props => (
   <GuidePage title={props.route.name}>
     <GuideSection
       title="Link"
       source={[{
+        type: GuideSectionTypes.JS,
+        code: linkSource,
+      }, {
         type: GuideSectionTypes.HTML,
         code: linkHtml,
       }]}
     >
-      <GuideDemo
-        html={linkHtml}
-      />
+      <GuideDemo>
+        <Link />
+      </GuideDemo>
     </GuideSection>
   </GuidePage>
 );
diff --git a/ui_framework/doc_site/src/views/page/page.js b/ui_framework/doc_site/src/views/page/page.js
index 957d69d2c9e9d..457500a12933b 100644
--- a/ui_framework/doc_site/src/views/page/page.js
+++ b/ui_framework/doc_site/src/views/page/page.js
@@ -14,7 +14,6 @@ import {
 } from '../../../../components';
 
 export default () => (
-
   <KuiPage>
     <KuiPageHeader>
       <KuiPageHeaderSection>
diff --git a/ui_framework/src/components/index.js b/ui_framework/src/components/index.js
index d9f32403595f4..aefb0475e971c 100644
--- a/ui_framework/src/components/index.js
+++ b/ui_framework/src/components/index.js
@@ -23,6 +23,10 @@ export {
   KuiKeyPadMenuItemButton,
 } from './key_pad_menu';
 
+export {
+  KuiLink,
+} from './link';
+
 export {
   KUI_MODAL_CANCEL_BUTTON,
   KUI_MODAL_CONFIRM_BUTTON,
diff --git a/ui_framework/src/components/link/__snapshots__/link.test.js.snap b/ui_framework/src/components/link/__snapshots__/link.test.js.snap
new file mode 100644
index 0000000000000..34cbf7d1f798b
--- /dev/null
+++ b/ui_framework/src/components/link/__snapshots__/link.test.js.snap
@@ -0,0 +1,11 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`KuiLink is rendered 1`] = `
+<a
+  aria-label="aria-label"
+  class="kuiLink testClass1 testClass2"
+  data-test-subj="test subject string"
+  href="#"
+  target="_blank"
+/>
+`;
diff --git a/ui_framework/src/components/link/index.js b/ui_framework/src/components/link/index.js
new file mode 100644
index 0000000000000..35a3d5f7531ae
--- /dev/null
+++ b/ui_framework/src/components/link/index.js
@@ -0,0 +1,3 @@
+export {
+  KuiLink,
+} from './link';
diff --git a/ui_framework/src/components/link/link.js b/ui_framework/src/components/link/link.js
new file mode 100644
index 0000000000000..7f89e6848a98d
--- /dev/null
+++ b/ui_framework/src/components/link/link.js
@@ -0,0 +1,15 @@
+import React from 'react';
+import classNames from 'classnames';
+
+export const KuiLink = ({ children, className, ...rest }) => {
+  const classes = classNames('kuiLink', className);
+
+  return (
+    <a
+      className={classes}
+      {...rest}
+    >
+      {children}
+    </a>
+  );
+};
diff --git a/ui_framework/src/components/link/link.test.js b/ui_framework/src/components/link/link.test.js
new file mode 100644
index 0000000000000..6eadca1487ae3
--- /dev/null
+++ b/ui_framework/src/components/link/link.test.js
@@ -0,0 +1,20 @@
+import React from 'react';
+import { render } from 'enzyme';
+import { requiredProps } from '../../test/required_props';
+
+import { KuiLink } from './link';
+
+describe('KuiLink', () => {
+  test('is rendered', () => {
+    const component = render(
+      <KuiLink
+        href="#"
+        target="_blank"
+        {...requiredProps}
+      />
+    );
+
+    expect(component)
+      .toMatchSnapshot();
+  });
+});