diff --git a/tools/ui-components/src/helpblock/helpblock.stories.tsx b/tools/ui-components/src/helpblock/helpblock.stories.tsx
new file mode 100644
index 0000000000..5a52cdf0b5
--- /dev/null
+++ b/tools/ui-components/src/helpblock/helpblock.stories.tsx
@@ -0,0 +1,25 @@
+import React from 'react';
+import { Story } from '@storybook/react';
+import { HelpBlock } from './helpblock';
+import { HelpBlockProps } from './types';
+
+const story = {
+  title: 'Example/HelpBlock',
+  component: HelpBlock,
+  parameters: {
+    controls: {
+      include: ['className', 'children']
+    }
+  }
+};
+
+const Template: Story<HelpBlockProps> = args => {
+  return <HelpBlock {...args} />;
+};
+
+export const Default = Template.bind({});
+Default.args = {
+  children: 'This is a HelpBlock'
+};
+
+export default story;
diff --git a/tools/ui-components/src/helpblock/helpblock.test.tsx b/tools/ui-components/src/helpblock/helpblock.test.tsx
new file mode 100644
index 0000000000..b995f6f0ab
--- /dev/null
+++ b/tools/ui-components/src/helpblock/helpblock.test.tsx
@@ -0,0 +1,14 @@
+import { render, screen } from '@testing-library/react';
+import React from 'react';
+import { HelpBlock } from './helpblock';
+
+describe('Render the helpblock component', () => {
+  it('should render the helpblock component', () => {
+    render(<HelpBlock />);
+    expect(screen.getByTestId('help-block')).toBeInTheDocument();
+    expect(screen.getByTestId('help-block')).toHaveClass(
+      'block mt-1 mb-2 text-default-foreground-quaternary',
+      { exact: true }
+    );
+  });
+});
diff --git a/tools/ui-components/src/helpblock/helpblock.tsx b/tools/ui-components/src/helpblock/helpblock.tsx
new file mode 100644
index 0000000000..363c37449b
--- /dev/null
+++ b/tools/ui-components/src/helpblock/helpblock.tsx
@@ -0,0 +1,16 @@
+import React from 'react';
+import { HelpBlockProps } from './types';
+
+export const HelpBlock = React.forwardRef<HTMLSpanElement, HelpBlockProps>(
+  ({ className, children }, ref): JSX.Element => {
+    const defaultClasses = 'block mt-1 mb-2 text-default-foreground-quaternary';
+    const classes = [defaultClasses, className].join(' ');
+    return (
+      <span ref={ref} data-testid='help-block' className={classes}>
+        {children}
+      </span>
+    );
+  }
+);
+
+HelpBlock.displayName = 'HelpBlock';
diff --git a/tools/ui-components/src/helpblock/index.ts b/tools/ui-components/src/helpblock/index.ts
new file mode 100644
index 0000000000..fc35a74a42
--- /dev/null
+++ b/tools/ui-components/src/helpblock/index.ts
@@ -0,0 +1,2 @@
+export { HelpBlock } from './helpblock';
+export type { HelpBlockProps } from './types';
diff --git a/tools/ui-components/src/helpblock/types.ts b/tools/ui-components/src/helpblock/types.ts
new file mode 100644
index 0000000000..755dabfe4c
--- /dev/null
+++ b/tools/ui-components/src/helpblock/types.ts
@@ -0,0 +1,4 @@
+export interface HelpBlockProps {
+  className?: string;
+  children?: React.ReactNode;
+}