diff --git a/components/__design__/table.stories.tsx b/components/__design__/table.stories.tsx
new file mode 100644
index 0000000000000..fc8e24a6e4d1e
--- /dev/null
+++ b/components/__design__/table.stories.tsx
@@ -0,0 +1,58 @@
+import type { Meta as MetaObj, StoryObj } from '@storybook/react';
+
+export const Table: StoryObj = {
+ render: () => (
+
+
+
+ | Column 1 |
+ Column 2 |
+ Column 3 |
+
+
+
+
+ | Data 1 |
+ Data 2 |
+ Data 3 |
+
+
+ | Data 1 |
+ Data 2 |
+ Data 3 |
+
+
+ | Data 1 |
+ Data 2 |
+ Data 3 |
+
+
+
+ ),
+};
+
+export const HeadlessTable: StoryObj = {
+ render: () => (
+
+
+
+ | Data 1 |
+ Data 2 |
+ Data 3 |
+
+
+ | Data 1 |
+ Data 2 |
+ Data 3 |
+
+
+ | Data 1 |
+ Data 2 |
+ Data 3 |
+
+
+
+ ),
+};
+
+export default { title: 'Design System' } as MetaObj;
diff --git a/styles/new/base.css b/styles/new/base.css
index 89c5546e99cd0..77b226a748aec 100644
--- a/styles/new/base.css
+++ b/styles/new/base.css
@@ -41,3 +41,41 @@ ol {
text-neutral-900
dark:text-white;
}
+
+table {
+ @apply w-full
+ border-separate
+ border-spacing-0
+ rounded
+ border
+ border-neutral-200
+ text-left
+ text-sm
+ dark:border-neutral-800;
+
+ th,
+ td {
+ @apply border
+ border-r-0
+ border-t-0
+ border-neutral-200
+ px-4
+ py-2
+ text-neutral-900
+ dark:border-neutral-800
+ dark:text-white;
+ }
+
+ th {
+ @apply font-semibold;
+ }
+
+ tr:last-child td {
+ @apply border-b-0;
+ }
+
+ td:first-child,
+ th:first-child {
+ @apply border-l-0;
+ }
+}