diff --git a/tools/ui-components/src/index.ts b/tools/ui-components/src/index.ts
index 346caa9d144a22..3adb1653e3b2ac 100644
--- a/tools/ui-components/src/index.ts
+++ b/tools/ui-components/src/index.ts
@@ -2,3 +2,4 @@
export { Button } from './button';
export { Alert } from './alert';
export { Image } from './image';
+export { Table } from './table';
diff --git a/tools/ui-components/src/table/index.ts b/tools/ui-components/src/table/index.ts
new file mode 100644
index 00000000000000..083de52f9917a9
--- /dev/null
+++ b/tools/ui-components/src/table/index.ts
@@ -0,0 +1,2 @@
+export { Table } from './table';
+export type { TableProps } from './types';
diff --git a/tools/ui-components/src/table/table.stories.tsx b/tools/ui-components/src/table/table.stories.tsx
new file mode 100644
index 00000000000000..f955b620a65fa9
--- /dev/null
+++ b/tools/ui-components/src/table/table.stories.tsx
@@ -0,0 +1,83 @@
+import React from 'react';
+import { Story } from '@storybook/react';
+import { Table, TableProps } from '.';
+const exampleTable = (
+ <>
+
+
+ # |
+ First Name |
+ Last Name |
+ Username |
+
+
+
+
+ 1 |
+ Mark |
+ Otto |
+ @mdo |
+
+
+ 2 |
+ John |
+ Loos |
+ @mlos |
+
+
+ 3 |
+ Joe |
+ Kot |
+ @mko |
+
+
+ >
+);
+
+const story = {
+ title: 'Example/Table',
+ component: Table,
+ parameters: {
+ controls: {
+ include: [
+ 'variant',
+ 'size',
+ 'bordered',
+ 'borderless',
+ 'hover',
+ 'striped',
+ 'condensed',
+ 'responsive'
+ ]
+ }
+ },
+ argTypes: {
+ striped: {
+ options: [true, false],
+ control: { type: 'radio' }
+ },
+ condensed: {
+ options: [true, false],
+ control: { type: 'radio' }
+ }
+ }
+};
+
+const Template: Story = args => (
+
+);
+export const Default = Template.bind({});
+Default.args = {
+ condensed: false,
+ striped: false
+};
+export const Condensed = Template.bind({});
+Condensed.args = {
+ condensed: true
+};
+export const Striped = Template.bind({});
+Striped.args = {
+ striped: true
+};
+
+export default story;
diff --git a/tools/ui-components/src/table/table.tsx b/tools/ui-components/src/table/table.tsx
new file mode 100644
index 00000000000000..2bb717cea57212
--- /dev/null
+++ b/tools/ui-components/src/table/table.tsx
@@ -0,0 +1,45 @@
+import React from 'react';
+
+import { TableProps } from './types';
+
+const defaultClassNames = [
+ 'table',
+ 'table-auto',
+ 'w-full',
+ 'max-w-full',
+ 'border-collapse',
+ 'text-left',
+ 'text-foreground-tertiary',
+ '[&_th]:font-normal'
+];
+
+const computeClassNames = ({
+ condensed,
+ striped
+}: {
+ condensed: boolean;
+ striped: boolean;
+}) => {
+ const classNames = [...defaultClassNames];
+ if (condensed) classNames.push('[&_td]:p-1 [&_th]:p-1');
+ else classNames.push('[&_td]:p-2 [&_th]:p-2');
+ if (striped)
+ classNames.push('[&>tbody>tr:nth-of-type(odd)]:bg-background-tertiary');
+
+ return classNames.join(' ');
+};
+
+export const Table = React.forwardRef(
+ ({ striped = false, condensed = false, ...props }, ref) => {
+ const classNames = React.useMemo(
+ () => computeClassNames({ condensed, striped }),
+ [condensed, striped]
+ );
+
+ const table = ;
+
+ return table;
+ }
+);
+
+Table.displayName = 'Table';
diff --git a/tools/ui-components/src/table/types.ts b/tools/ui-components/src/table/types.ts
new file mode 100644
index 00000000000000..c8d8f56d0b667f
--- /dev/null
+++ b/tools/ui-components/src/table/types.ts
@@ -0,0 +1,7 @@
+import React from 'react';
+
+export interface TableProps
+ extends React.TableHTMLAttributes {
+ condensed?: boolean;
+ striped?: boolean;
+}