diff --git a/tools/ui-components/src/row/index.ts b/tools/ui-components/src/row/index.ts
new file mode 100644
index 00000000000..12b23aebfb5
--- /dev/null
+++ b/tools/ui-components/src/row/index.ts
@@ -0,0 +1,2 @@
+export { Row } from './row';
+export type { RowProps } from './types';
diff --git a/tools/ui-components/src/row/row.stories.tsx b/tools/ui-components/src/row/row.stories.tsx
new file mode 100644
index 00000000000..0205b5c5104
--- /dev/null
+++ b/tools/ui-components/src/row/row.stories.tsx
@@ -0,0 +1,19 @@
+import React from 'react';
+import { Story } from '@storybook/react';
+import { Row, RowProps } from '.';
+
+const story = {
+  title: 'Example/Row',
+  component: Row
+};
+
+const Template: Story<RowProps> = args => {
+  return <Row {...args} />;
+};
+
+export const Default = Template.bind({});
+Default.args = {
+  children: <p>Random text to test the element width</p>
+};
+
+export default story;
diff --git a/tools/ui-components/src/row/row.test.tsx b/tools/ui-components/src/row/row.test.tsx
new file mode 100644
index 00000000000..7897bcae93c
--- /dev/null
+++ b/tools/ui-components/src/row/row.test.tsx
@@ -0,0 +1,13 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+
+import { Row } from '.';
+
+describe('<Row />', () => {
+  it('Row can accept className', () => {
+    render(<Row className='h-full'>Learn to code for free.</Row>);
+    expect(screen.getByText('Learn to code for free.')).toHaveClass(
+      'mx-[-15px] h-full'
+    );
+  });
+});
diff --git a/tools/ui-components/src/row/row.tsx b/tools/ui-components/src/row/row.tsx
new file mode 100644
index 00000000000..34703b0c0e4
--- /dev/null
+++ b/tools/ui-components/src/row/row.tsx
@@ -0,0 +1,11 @@
+import React from 'react';
+
+import { RowProps } from './types';
+
+export const Row = ({ className, children, ...rest }: RowProps) => {
+  return (
+    <div className={`mx-[-15px] ${className ?? ''}`} {...rest}>
+      {children}
+    </div>
+  );
+};
diff --git a/tools/ui-components/src/row/types.ts b/tools/ui-components/src/row/types.ts
new file mode 100644
index 00000000000..cfe0a0b95df
--- /dev/null
+++ b/tools/ui-components/src/row/types.ts
@@ -0,0 +1,4 @@
+export interface RowProps extends React.HTMLAttributes<HTMLDivElement> {
+  className?: string;
+  children?: React.ReactNode;
+}