diff --git a/README.md b/README.md
index 0cc9676..2f74a80 100644
--- a/README.md
+++ b/README.md
@@ -47,6 +47,7 @@ One way to ensure all dependencies are loaded is to use the [`@wordpress/depende
- [`FileControls`](src/components/FileControls)
- [`ImageControl`](src/components/ImageControl)
- [`InnerBlockSlider`](src/components/InnerBlockSlider)
+- [`LinkControl`](src/components/LinkControl)
- [`LinkToolbar`](src/components/LinkToolbar)
- [`PlainTextWithLimit`](src/components/PlainTextWithLimit)
- [`PostPicker`](src/components/PostPicker)
diff --git a/src/components/LinkControl/README.md b/src/components/LinkControl/README.md
new file mode 100644
index 0000000..d0f3a73
--- /dev/null
+++ b/src/components/LinkControl/README.md
@@ -0,0 +1,22 @@
+# LinkControl
+
+The `LinkControl` component allows for adding a link. It is intended for use within the block settings UI that appears in the sidebar.
+
+The link control is just a wrapper for the core URL input component. The only difference is the visual appearance and API is more aligned with other sidebar controls such as the TextControl.
+
+## Usage
+
+```js
+const { InspectorControls } = wp.blocks;
+const { LinkControl } = hm.controls;
+const { attributes, setAttributes } = props;
+
+
+ setAttributes( { link } ) }
+ />
+
+```
diff --git a/src/components/LinkControl/index.js b/src/components/LinkControl/index.js
new file mode 100644
index 0000000..3e3a2cd
--- /dev/null
+++ b/src/components/LinkControl/index.js
@@ -0,0 +1,75 @@
+import PropTypes from 'prop-types';
+import React, { useEffect } from 'react';
+
+import { URLInput } from '@wordpress/block-editor';
+import { BaseControl } from '@wordpress/components';
+
+/**
+ * InspectorControl for image upload.
+ *
+ * @param {object} props - Component properties.
+ * @param {string} props.label - The label for the control.
+ * @param {string} props.id - The id for the control.
+ * @param {string} props.help - Help text for the control.
+ * @param {Function} props.onChange - Function to call when the value changes.
+ * @param {string} props.value - The current value of the control.
+ * @returns {React.ReactNode} Component.
+ */
+function LinkControl( {
+ label,
+ id,
+ help,
+ onChange,
+ value,
+} ) {
+ const className = 'hm-block-editor-components-link-control';
+
+ // Need to inject Style tag into the head in order to override the styles within URLInput component without a CSS file.
+ useEffect( () => {
+ const style = document.createElement( 'style' );
+ style.innerHTML = `
+ .${ className } {
+ width: 100%;
+ }
+
+ .${ className } .block-editor-url-input {
+ min-width: 0;
+ max-width: none;
+ position: relative;
+ }
+
+ .${ className } .components-base-control__field,
+ .${ className } .components-input-control {
+ margin-bottom: 0;
+ }
+ `;
+ document.head.appendChild( style );
+ return () => {
+ document.head.removeChild( style );
+ };
+ }, [ className ] );
+
+ return (
+
+
+
+ );
+}
+
+LinkControl.propTypes = {
+ label: PropTypes.string.isRequired,
+ help: PropTypes.string,
+ id: PropTypes.string,
+ onChange: PropTypes.func.isRequired,
+ value: PropTypes.string,
+};
+
+export default LinkControl;
diff --git a/src/index.js b/src/index.js
index 05a7ba4..7785825 100644
--- a/src/index.js
+++ b/src/index.js
@@ -6,6 +6,7 @@ export { default as DateTimeControl } from './components/DateTimeControl';
export { default as ImageControl } from './components/ImageControl';
export { default as InnerBlockSlider } from './components/InnerBlockSlider';
export { default as InnerBlocksDisplaySingle } from './components/InnerBlockSlider/inner-block-single-display';
+export { default as LinkControl } from './components/LinkControl';
export { default as LinkToolbar } from './components/LinkToolbar';
export { default as PlainTextWithLimit } from './components/PlainTextWithLimit';
export { default as PostTitleControl } from './components/PostTitleControl';