From 062a0706ef63f320316f42d302eeb1ac54de7fa7 Mon Sep 17 00:00:00 2001
From: Jeton Korenica <jetonkorenica@gmail.com>
Date: Mon, 13 Jul 2026 18:08:43 +0200
Subject: [PATCH] feat: add Table, Stepper, and Navigation Menu components

Three new COSS-styled component families with demos, views, routes and
Home nav entries:

- Table: plain HTML table primitives (Table/Header/Body/Footer/Row/Head/
  Cell/Caption) with 2 demos (basic + badges/footer/caption)
- Stepper: Reka UI Stepper primitives (Root/Item/Trigger/Indicator/Title/
  Description/Separator) with 2 demos (indicator-only + controlled w/ buttons)
- Navigation Menu: Reka UI NavigationMenu primitives with viewport, before-
  highlight surface and animated flyout; 2 demos (flyout + simple links)

All use COSS tokens (rounded-lg, opacity-64, before-highlight surfaces).
type-check, lint and build pass; verified visually in-browser.
---
 README.md                                     |  3 +
 .../navigation-menus/NavigationMenu01.vue     | 45 ++++++++++++++
 .../navigation-menus/NavigationMenu02.vue     | 23 ++++++++
 src/components/steppers/Stepper01.vue         | 33 +++++++++++
 src/components/steppers/Stepper02.vue         | 59 +++++++++++++++++++
 src/components/tables/Table01.vue             | 40 +++++++++++++
 src/components/tables/Table02.vue             | 50 ++++++++++++++++
 .../ui/NavigationMenu/NavigationMenu.vue      | 30 ++++++++++
 .../NavigationMenu/NavigationMenuContent.vue  | 31 ++++++++++
 .../NavigationMenuIndicator.vue               | 26 ++++++++
 .../ui/NavigationMenu/NavigationMenuItem.vue  | 16 +++++
 .../ui/NavigationMenu/NavigationMenuLink.vue  | 31 ++++++++++
 .../ui/NavigationMenu/NavigationMenuList.vue  | 19 ++++++
 .../NavigationMenu/NavigationMenuTrigger.vue  | 25 ++++++++
 .../NavigationMenu/NavigationMenuViewport.vue | 24 ++++++++
 src/components/ui/NavigationMenu/index.ts     |  9 +++
 src/components/ui/NavigationMenu/style.ts     |  5 ++
 src/components/ui/Stepper/Stepper.vue         | 23 ++++++++
 .../ui/Stepper/StepperDescription.vue         | 19 ++++++
 .../ui/Stepper/StepperIndicator.vue           | 24 ++++++++
 src/components/ui/Stepper/StepperItem.vue     | 24 ++++++++
 .../ui/Stepper/StepperSeparator.vue           | 22 +++++++
 src/components/ui/Stepper/StepperTitle.vue    | 19 ++++++
 src/components/ui/Stepper/StepperTrigger.vue  | 24 ++++++++
 src/components/ui/Stepper/index.ts            |  7 +++
 src/components/ui/Table/Table.vue             | 14 +++++
 src/components/ui/Table/TableBody.vue         | 12 ++++
 src/components/ui/Table/TableCaption.vue      | 12 ++++
 src/components/ui/Table/TableCell.vue         | 14 +++++
 src/components/ui/Table/TableFooter.vue       | 14 +++++
 src/components/ui/Table/TableHead.vue         | 19 ++++++
 src/components/ui/Table/TableHeader.vue       | 12 ++++
 src/components/ui/Table/TableRow.vue          | 19 ++++++
 src/components/ui/Table/index.ts              |  8 +++
 src/router/index.ts                           | 18 ++++++
 src/views/Home.vue                            |  5 +-
 src/views/NavigationMenus.vue                 | 39 ++++++++++++
 src/views/Steppers.vue                        | 39 ++++++++++++
 src/views/Tables.vue                          | 39 ++++++++++++
 39 files changed, 894 insertions(+), 1 deletion(-)
 create mode 100644 src/components/navigation-menus/NavigationMenu01.vue
 create mode 100644 src/components/navigation-menus/NavigationMenu02.vue
 create mode 100644 src/components/steppers/Stepper01.vue
 create mode 100644 src/components/steppers/Stepper02.vue
 create mode 100644 src/components/tables/Table01.vue
 create mode 100644 src/components/tables/Table02.vue
 create mode 100644 src/components/ui/NavigationMenu/NavigationMenu.vue
 create mode 100644 src/components/ui/NavigationMenu/NavigationMenuContent.vue
 create mode 100644 src/components/ui/NavigationMenu/NavigationMenuIndicator.vue
 create mode 100644 src/components/ui/NavigationMenu/NavigationMenuItem.vue
 create mode 100644 src/components/ui/NavigationMenu/NavigationMenuLink.vue
 create mode 100644 src/components/ui/NavigationMenu/NavigationMenuList.vue
 create mode 100644 src/components/ui/NavigationMenu/NavigationMenuTrigger.vue
 create mode 100644 src/components/ui/NavigationMenu/NavigationMenuViewport.vue
 create mode 100644 src/components/ui/NavigationMenu/index.ts
 create mode 100644 src/components/ui/NavigationMenu/style.ts
 create mode 100644 src/components/ui/Stepper/Stepper.vue
 create mode 100644 src/components/ui/Stepper/StepperDescription.vue
 create mode 100644 src/components/ui/Stepper/StepperIndicator.vue
 create mode 100644 src/components/ui/Stepper/StepperItem.vue
 create mode 100644 src/components/ui/Stepper/StepperSeparator.vue
 create mode 100644 src/components/ui/Stepper/StepperTitle.vue
 create mode 100644 src/components/ui/Stepper/StepperTrigger.vue
 create mode 100644 src/components/ui/Stepper/index.ts
 create mode 100644 src/components/ui/Table/Table.vue
 create mode 100644 src/components/ui/Table/TableBody.vue
 create mode 100644 src/components/ui/Table/TableCaption.vue
 create mode 100644 src/components/ui/Table/TableCell.vue
 create mode 100644 src/components/ui/Table/TableFooter.vue
 create mode 100644 src/components/ui/Table/TableHead.vue
 create mode 100644 src/components/ui/Table/TableHeader.vue
 create mode 100644 src/components/ui/Table/TableRow.vue
 create mode 100644 src/components/ui/Table/index.ts
 create mode 100644 src/views/NavigationMenus.vue
 create mode 100644 src/views/Steppers.vue
 create mode 100644 src/views/Tables.vue

diff --git a/README.md b/README.md
index 7029de0..c4e40c4 100644
--- a/README.md
+++ b/README.md
@@ -168,6 +168,9 @@ If you want to use the helpers used in some components you need to copy the `src
 - Progress
 - Pagination
 - Dropdown Menu
+- Table
+- Stepper
+- Navigation Menu
 - (More components coming soon)
 
 ## Contributing
diff --git a/src/components/navigation-menus/NavigationMenu01.vue b/src/components/navigation-menus/NavigationMenu01.vue
new file mode 100644
index 0000000..eb549e2
--- /dev/null
+++ b/src/components/navigation-menus/NavigationMenu01.vue
@@ -0,0 +1,45 @@
+<script setup lang="ts">
+import {
+  NavigationMenu,
+  NavigationMenuContent,
+  NavigationMenuItem,
+  NavigationMenuLink,
+  NavigationMenuList,
+  NavigationMenuTrigger,
+  navigationMenuTriggerStyle
+} from '@/components/ui/NavigationMenu'
+
+const components = [
+  { title: 'Alert Dialog', description: 'A modal dialog that interrupts the user with content.' },
+  { title: 'Hover Card', description: 'For sighted users to preview content behind a link.' },
+  { title: 'Progress', description: 'Displays an indicator showing completion progress.' },
+  { title: 'Tabs', description: 'Layered sections of content shown one at a time.' }
+]
+</script>
+
+<template>
+  <NavigationMenu>
+    <NavigationMenuList>
+      <NavigationMenuItem>
+        <NavigationMenuTrigger>Components</NavigationMenuTrigger>
+        <NavigationMenuContent>
+          <ul class="grid w-[340px] gap-1 p-2 md:grid-cols-2">
+            <li v-for="component in components" :key="component.title">
+              <NavigationMenuLink href="#">
+                <div class="text-sm font-medium text-foreground">{{ component.title }}</div>
+                <p class="line-clamp-2 text-xs text-muted-foreground">
+                  {{ component.description }}
+                </p>
+              </NavigationMenuLink>
+            </li>
+          </ul>
+        </NavigationMenuContent>
+      </NavigationMenuItem>
+      <NavigationMenuItem>
+        <NavigationMenuLink :class="navigationMenuTriggerStyle()" href="#">
+          Documentation
+        </NavigationMenuLink>
+      </NavigationMenuItem>
+    </NavigationMenuList>
+  </NavigationMenu>
+</template>
diff --git a/src/components/navigation-menus/NavigationMenu02.vue b/src/components/navigation-menus/NavigationMenu02.vue
new file mode 100644
index 0000000..ba64af9
--- /dev/null
+++ b/src/components/navigation-menus/NavigationMenu02.vue
@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import {
+  NavigationMenu,
+  NavigationMenuItem,
+  NavigationMenuLink,
+  NavigationMenuList,
+  navigationMenuTriggerStyle
+} from '@/components/ui/NavigationMenu'
+
+const links = ['Home', 'Features', 'Pricing', 'About']
+</script>
+
+<template>
+  <NavigationMenu>
+    <NavigationMenuList>
+      <NavigationMenuItem v-for="link in links" :key="link">
+        <NavigationMenuLink :class="navigationMenuTriggerStyle()" href="#">
+          {{ link }}
+        </NavigationMenuLink>
+      </NavigationMenuItem>
+    </NavigationMenuList>
+  </NavigationMenu>
+</template>
diff --git a/src/components/steppers/Stepper01.vue b/src/components/steppers/Stepper01.vue
new file mode 100644
index 0000000..546ef09
--- /dev/null
+++ b/src/components/steppers/Stepper01.vue
@@ -0,0 +1,33 @@
+<script setup lang="ts">
+import {
+  Stepper,
+  StepperItem,
+  StepperIndicator,
+  StepperSeparator,
+  StepperTrigger
+} from '@/components/ui/Stepper'
+import { Check as CheckIcon } from 'lucide-vue-next'
+
+const steps = [1, 2, 3, 4]
+</script>
+
+<template>
+  <Stepper :default-value="2" class="w-full max-w-xs">
+    <StepperItem
+      v-for="step in steps"
+      :key="step"
+      :step="step"
+      class="flex-1 last:flex-initial"
+    >
+      <StepperTrigger>
+        <StepperIndicator>
+          <CheckIcon
+            class="hidden size-4 group-data-[state=completed]/step:block"
+          />
+          <span class="group-data-[state=completed]/step:hidden">{{ step }}</span>
+        </StepperIndicator>
+      </StepperTrigger>
+      <StepperSeparator v-if="step !== steps.length" />
+    </StepperItem>
+  </Stepper>
+</template>
diff --git a/src/components/steppers/Stepper02.vue b/src/components/steppers/Stepper02.vue
new file mode 100644
index 0000000..48bf78d
--- /dev/null
+++ b/src/components/steppers/Stepper02.vue
@@ -0,0 +1,59 @@
+<script setup lang="ts">
+import {
+  Stepper,
+  StepperItem,
+  StepperIndicator,
+  StepperSeparator,
+  StepperTitle,
+  StepperTrigger
+} from '@/components/ui/Stepper'
+import Button from '@/components/ui/Button.vue'
+import { Check as CheckIcon } from 'lucide-vue-next'
+import { ref } from 'vue'
+
+const steps = [
+  { step: 1, title: 'Account' },
+  { step: 2, title: 'Profile' },
+  { step: 3, title: 'Confirm' }
+]
+
+const current = ref(1)
+</script>
+
+<template>
+  <div class="flex w-full max-w-md flex-col gap-6">
+    <Stepper v-model="current">
+      <StepperItem
+        v-for="item in steps"
+        :key="item.step"
+        :step="item.step"
+        class="flex-1 last:flex-initial"
+      >
+        <StepperTrigger>
+          <StepperIndicator>
+            <CheckIcon class="hidden size-4 group-data-[state=completed]/step:block" />
+            <span class="group-data-[state=completed]/step:hidden">{{ item.step }}</span>
+          </StepperIndicator>
+          <StepperTitle class="hidden sm:block">{{ item.title }}</StepperTitle>
+        </StepperTrigger>
+        <StepperSeparator v-if="item.step !== steps.length" />
+      </StepperItem>
+    </Stepper>
+
+    <div class="flex justify-between gap-2">
+      <Button
+        variant="outline"
+        :disabled="current === 1"
+        @click="current = Math.max(1, current - 1)"
+      >
+        Previous
+      </Button>
+      <Button
+        :disabled="current === steps.length"
+        @click="current = Math.min(steps.length, current + 1)"
+      >
+        Next
+      </Button>
+    </div>
+  </div>
+</template>
diff --git a/src/components/tables/Table01.vue b/src/components/tables/Table01.vue
new file mode 100644
index 0000000..0c6f327
--- /dev/null
+++ b/src/components/tables/Table01.vue
@@ -0,0 +1,40 @@
+<script setup lang="ts">
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow
+} from '@/components/ui/Table'
+
+const invoices = [
+  { invoice: 'INV001', status: 'Paid', method: 'Credit Card', amount: '$250.00' },
+  { invoice: 'INV002', status: 'Pending', method: 'PayPal', amount: '$150.00' },
+  { invoice: 'INV003', status: 'Unpaid', method: 'Bank Transfer', amount: '$350.00' },
+  { invoice: 'INV004', status: 'Paid', method: 'Credit Card', amount: '$450.00' }
+]
+</script>
+
+<template>
+  <div class="w-full max-w-md">
+    <Table>
+      <TableHeader>
+        <TableRow>
+          <TableHead>Invoice</TableHead>
+          <TableHead>Status</TableHead>
+          <TableHead>Method</TableHead>
+          <TableHead class="text-right">Amount</TableHead>
+        </TableRow>
+      </TableHeader>
+      <TableBody>
+        <TableRow v-for="invoice in invoices" :key="invoice.invoice">
+          <TableCell class="font-medium">{{ invoice.invoice }}</TableCell>
+          <TableCell>{{ invoice.status }}</TableCell>
+          <TableCell>{{ invoice.method }}</TableCell>
+          <TableCell class="text-right">{{ invoice.amount }}</TableCell>
+        </TableRow>
+      </TableBody>
+    </Table>
+  </div>
+</template>
diff --git a/src/components/tables/Table02.vue b/src/components/tables/Table02.vue
new file mode 100644
index 0000000..6586300
--- /dev/null
+++ b/src/components/tables/Table02.vue
@@ -0,0 +1,50 @@
+<script setup lang="ts">
+import {
+  Table,
+  TableBody,
+  TableCaption,
+  TableCell,
+  TableFooter,
+  TableHead,
+  TableHeader,
+  TableRow
+} from '@/components/ui/Table'
+import Badge from '@/components/ui/Badge.vue'
+
+const invoices = [
+  { invoice: 'INV001', status: 'success', label: 'Paid', amount: '$250.00' },
+  { invoice: 'INV002', status: 'warning', label: 'Pending', amount: '$150.00' },
+  { invoice: 'INV003', status: 'error', label: 'Unpaid', amount: '$350.00' },
+  { invoice: 'INV004', status: 'success', label: 'Paid', amount: '$450.00' }
+] as const
+</script>
+
+<template>
+  <div class="w-full max-w-lg">
+    <Table>
+      <TableCaption>A list of your recent invoices.</TableCaption>
+      <TableHeader>
+        <TableRow>
+          <TableHead>Invoice</TableHead>
+          <TableHead>Status</TableHead>
+          <TableHead class="text-right">Amount</TableHead>
+        </TableRow>
+      </TableHeader>
+      <TableBody>
+        <TableRow v-for="invoice in invoices" :key="invoice.invoice">
+          <TableCell class="font-medium">{{ invoice.invoice }}</TableCell>
+          <TableCell>
+            <Badge :variant="invoice.status">{{ invoice.label }}</Badge>
+          </TableCell>
+          <TableCell class="text-right">{{ invoice.amount }}</TableCell>
+        </TableRow>
+      </TableBody>
+      <TableFooter>
+        <TableRow>
+          <TableCell colspan="2">Total</TableCell>
+          <TableCell class="text-right">$1,200.00</TableCell>
+        </TableRow>
+      </TableFooter>
+    </Table>
+  </div>
+</template>
diff --git a/src/components/ui/NavigationMenu/NavigationMenu.vue b/src/components/ui/NavigationMenu/NavigationMenu.vue
new file mode 100644
index 0000000..67fbb20
--- /dev/null
+++ b/src/components/ui/NavigationMenu/NavigationMenu.vue
@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import { cn } from '@/lib/utils'
+import { reactiveOmit } from '@vueuse/core'
+import {
+  NavigationMenuRoot,
+  type NavigationMenuRootEmits,
+  type NavigationMenuRootProps,
+  useForwardPropsEmits
+} from 'reka-ui'
+import type { HTMLAttributes } from 'vue'
+import NavigationMenuViewport from './NavigationMenuViewport.vue'
+
+const props = defineProps<NavigationMenuRootProps & { class?: HTMLAttributes['class'] }>()
+const emits = defineEmits<NavigationMenuRootEmits>()
+
+const delegatedProps = reactiveOmit(props, 'class')
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <NavigationMenuRoot
+    v-bind="forwarded"
+    :class="
+      cn('relative z-10 flex max-w-max flex-1 items-center justify-center', props.class)
+    "
+  >
+    <slot />
+    <NavigationMenuViewport />
+  </NavigationMenuRoot>
+</template>
diff --git a/src/components/ui/NavigationMenu/NavigationMenuContent.vue b/src/components/ui/NavigationMenu/NavigationMenuContent.vue
new file mode 100644
index 0000000..66a4482
--- /dev/null
+++ b/src/components/ui/NavigationMenu/NavigationMenuContent.vue
@@ -0,0 +1,31 @@
+<script setup lang="ts">
+import { cn } from '@/lib/utils'
+import { reactiveOmit } from '@vueuse/core'
+import {
+  NavigationMenuContent,
+  type NavigationMenuContentEmits,
+  type NavigationMenuContentProps,
+  useForwardPropsEmits
+} from 'reka-ui'
+import type { HTMLAttributes } from 'vue'
+
+const props = defineProps<NavigationMenuContentProps & { class?: HTMLAttributes['class'] }>()
+const emits = defineEmits<NavigationMenuContentEmits>()
+
+const delegatedProps = reactiveOmit(props, 'class')
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <NavigationMenuContent
+    v-bind="forwarded"
+    :class="
+      cn(
+        'left-0 top-0 w-full data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 md:absolute md:w-auto',
+        props.class
+      )
+    "
+  >
+    <slot />
+  </NavigationMenuContent>
+</template>
diff --git a/src/components/ui/NavigationMenu/NavigationMenuIndicator.vue b/src/components/ui/NavigationMenu/NavigationMenuIndicator.vue
new file mode 100644
index 0000000..1ccd77f
--- /dev/null
+++ b/src/components/ui/NavigationMenu/NavigationMenuIndicator.vue
@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import { cn } from '@/lib/utils'
+import { reactiveOmit } from '@vueuse/core'
+import { NavigationMenuIndicator, type NavigationMenuIndicatorProps } from 'reka-ui'
+import type { HTMLAttributes } from 'vue'
+
+const props = defineProps<NavigationMenuIndicatorProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = reactiveOmit(props, 'class')
+</script>
+
+<template>
+  <NavigationMenuIndicator
+    v-bind="delegatedProps"
+    :class="
+      cn(
+        'top-full z-[1] flex h-1.5 items-end justify-center overflow-hidden data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:fade-in',
+        props.class
+      )
+    "
+  >
+    <div
+      class="relative top-[60%] size-2 rotate-45 rounded-tl-sm bg-border shadow-md"
+    />
+  </NavigationMenuIndicator>
+</template>
diff --git a/src/components/ui/NavigationMenu/NavigationMenuItem.vue b/src/components/ui/NavigationMenu/NavigationMenuItem.vue
new file mode 100644
index 0000000..d0da682
--- /dev/null
+++ b/src/components/ui/NavigationMenu/NavigationMenuItem.vue
@@ -0,0 +1,16 @@
+<script setup lang="ts">
+import { cn } from '@/lib/utils'
+import { reactiveOmit } from '@vueuse/core'
+import { NavigationMenuItem, type NavigationMenuItemProps } from 'reka-ui'
+import type { HTMLAttributes } from 'vue'
+
+const props = defineProps<NavigationMenuItemProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = reactiveOmit(props, 'class')
+</script>
+
+<template>
+  <NavigationMenuItem v-bind="delegatedProps" :class="cn('relative', props.class)">
+    <slot />
+  </NavigationMenuItem>
+</template>
diff --git a/src/components/ui/NavigationMenu/NavigationMenuLink.vue b/src/components/ui/NavigationMenu/NavigationMenuLink.vue
new file mode 100644
index 0000000..51f1257
--- /dev/null
+++ b/src/components/ui/NavigationMenu/NavigationMenuLink.vue
@@ -0,0 +1,31 @@
+<script setup lang="ts">
+import { cn } from '@/lib/utils'
+import { reactiveOmit } from '@vueuse/core'
+import {
+  NavigationMenuLink,
+  type NavigationMenuLinkEmits,
+  type NavigationMenuLinkProps,
+  useForwardPropsEmits
+} from 'reka-ui'
+import type { HTMLAttributes } from 'vue'
+
+const props = defineProps<NavigationMenuLinkProps & { class?: HTMLAttributes['class'] }>()
+const emits = defineEmits<NavigationMenuLinkEmits>()
+
+const delegatedProps = reactiveOmit(props, 'class')
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <NavigationMenuLink
+    v-bind="forwarded"
+    :class="
+      cn(
+        'block select-none space-y-1 rounded-md p-3 leading-none no-underline outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground',
+        props.class
+      )
+    "
+  >
+    <slot />
+  </NavigationMenuLink>
+</template>
diff --git a/src/components/ui/NavigationMenu/NavigationMenuList.vue b/src/components/ui/NavigationMenu/NavigationMenuList.vue
new file mode 100644
index 0000000..270918b
--- /dev/null
+++ b/src/components/ui/NavigationMenu/NavigationMenuList.vue
@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import { cn } from '@/lib/utils'
+import { reactiveOmit } from '@vueuse/core'
+import { NavigationMenuList, type NavigationMenuListProps } from 'reka-ui'
+import type { HTMLAttributes } from 'vue'
+
+const props = defineProps<NavigationMenuListProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = reactiveOmit(props, 'class')
+</script>
+
+<template>
+  <NavigationMenuList
+    v-bind="delegatedProps"
+    :class="cn('group flex flex-1 list-none items-center justify-center gap-1', props.class)"
+  >
+    <slot />
+  </NavigationMenuList>
+</template>
diff --git a/src/components/ui/NavigationMenu/NavigationMenuTrigger.vue b/src/components/ui/NavigationMenu/NavigationMenuTrigger.vue
new file mode 100644
index 0000000..8433b5c
--- /dev/null
+++ b/src/components/ui/NavigationMenu/NavigationMenuTrigger.vue
@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import { cn } from '@/lib/utils'
+import { reactiveOmit } from '@vueuse/core'
+import { NavigationMenuTrigger, type NavigationMenuTriggerProps } from 'reka-ui'
+import { ChevronDown as ChevronDownIcon } from 'lucide-vue-next'
+import type { HTMLAttributes } from 'vue'
+import { navigationMenuTriggerStyle } from './style'
+
+const props = defineProps<NavigationMenuTriggerProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = reactiveOmit(props, 'class')
+</script>
+
+<template>
+  <NavigationMenuTrigger
+    v-bind="delegatedProps"
+    :class="cn(navigationMenuTriggerStyle(), 'gap-1', props.class)"
+  >
+    <slot />
+    <ChevronDownIcon
+      class="relative top-px size-3.5 text-muted-foreground transition-transform duration-200 group-data-[state=open]:rotate-180"
+      aria-hidden="true"
+    />
+  </NavigationMenuTrigger>
+</template>
diff --git a/src/components/ui/NavigationMenu/NavigationMenuViewport.vue b/src/components/ui/NavigationMenu/NavigationMenuViewport.vue
new file mode 100644
index 0000000..0f21561
--- /dev/null
+++ b/src/components/ui/NavigationMenu/NavigationMenuViewport.vue
@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import { cn } from '@/lib/utils'
+import { reactiveOmit } from '@vueuse/core'
+import { NavigationMenuViewport, type NavigationMenuViewportProps } from 'reka-ui'
+import type { HTMLAttributes } from 'vue'
+
+const props = defineProps<NavigationMenuViewportProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = reactiveOmit(props, 'class')
+</script>
+
+<template>
+  <div class="absolute left-0 top-full flex justify-center">
+    <NavigationMenuViewport
+      v-bind="delegatedProps"
+      :class="
+        cn(
+          'relative mt-1.5 h-[var(--reka-navigation-menu-viewport-height)] w-full origin-top-center overflow-hidden rounded-lg border border-border bg-popover text-popover-foreground shadow-lg before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-lg)-1px)] before:shadow-[0_1px_rgba(0,0,0,0.04)] dark:before:shadow-[0_-1px_rgba(255,255,255,0.06)] data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 md:w-[var(--reka-navigation-menu-viewport-width)]',
+          props.class
+        )
+      "
+    />
+  </div>
+</template>
diff --git a/src/components/ui/NavigationMenu/index.ts b/src/components/ui/NavigationMenu/index.ts
new file mode 100644
index 0000000..3ac8345
--- /dev/null
+++ b/src/components/ui/NavigationMenu/index.ts
@@ -0,0 +1,9 @@
+export { default as NavigationMenu } from './NavigationMenu.vue'
+export { default as NavigationMenuList } from './NavigationMenuList.vue'
+export { default as NavigationMenuItem } from './NavigationMenuItem.vue'
+export { default as NavigationMenuTrigger } from './NavigationMenuTrigger.vue'
+export { default as NavigationMenuContent } from './NavigationMenuContent.vue'
+export { default as NavigationMenuLink } from './NavigationMenuLink.vue'
+export { default as NavigationMenuIndicator } from './NavigationMenuIndicator.vue'
+export { default as NavigationMenuViewport } from './NavigationMenuViewport.vue'
+export { navigationMenuTriggerStyle } from './style'
diff --git a/src/components/ui/NavigationMenu/style.ts b/src/components/ui/NavigationMenu/style.ts
new file mode 100644
index 0000000..0ecb781
--- /dev/null
+++ b/src/components/ui/NavigationMenu/style.ts
@@ -0,0 +1,5 @@
+import { cva } from 'class-variance-authority'
+
+export const navigationMenuTriggerStyle = cva(
+  'group inline-flex h-9 w-max items-center justify-center rounded-lg bg-background px-4 py-2 text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus:outline-none disabled:pointer-events-none disabled:opacity-64 data-[state=open]:bg-accent/50 data-[active]:bg-accent/50'
+)
diff --git a/src/components/ui/Stepper/Stepper.vue b/src/components/ui/Stepper/Stepper.vue
new file mode 100644
index 0000000..abdb3c0
--- /dev/null
+++ b/src/components/ui/Stepper/Stepper.vue
@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import { cn } from '@/lib/utils'
+import { reactiveOmit } from '@vueuse/core'
+import {
+  StepperRoot,
+  type StepperRootEmits,
+  type StepperRootProps,
+  useForwardPropsEmits
+} from 'reka-ui'
+import type { HTMLAttributes } from 'vue'
+
+const props = defineProps<StepperRootProps & { class?: HTMLAttributes['class'] }>()
+const emits = defineEmits<StepperRootEmits>()
+
+const delegatedProps = reactiveOmit(props, 'class')
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <StepperRoot v-bind="forwarded" :class="cn('flex gap-2', props.class)">
+    <slot />
+  </StepperRoot>
+</template>
diff --git a/src/components/ui/Stepper/StepperDescription.vue b/src/components/ui/Stepper/StepperDescription.vue
new file mode 100644
index 0000000..52158e5
--- /dev/null
+++ b/src/components/ui/Stepper/StepperDescription.vue
@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import { cn } from '@/lib/utils'
+import { reactiveOmit } from '@vueuse/core'
+import { StepperDescription, type StepperDescriptionProps } from 'reka-ui'
+import type { HTMLAttributes } from 'vue'
+
+const props = defineProps<StepperDescriptionProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = reactiveOmit(props, 'class')
+</script>
+
+<template>
+  <StepperDescription
+    v-bind="delegatedProps"
+    :class="cn('text-xs text-muted-foreground', props.class)"
+  >
+    <slot />
+  </StepperDescription>
+</template>
diff --git a/src/components/ui/Stepper/StepperIndicator.vue b/src/components/ui/Stepper/StepperIndicator.vue
new file mode 100644
index 0000000..45e1622
--- /dev/null
+++ b/src/components/ui/Stepper/StepperIndicator.vue
@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import { cn } from '@/lib/utils'
+import { reactiveOmit } from '@vueuse/core'
+import { StepperIndicator, type StepperIndicatorProps } from 'reka-ui'
+import type { HTMLAttributes } from 'vue'
+
+const props = defineProps<StepperIndicatorProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = reactiveOmit(props, 'class')
+</script>
+
+<template>
+  <StepperIndicator
+    v-bind="delegatedProps"
+    :class="
+      cn(
+        'relative flex size-8 shrink-0 items-center justify-center rounded-full border border-border bg-background text-sm font-medium text-muted-foreground transition-colors group-data-[state=active]/step:border-primary group-data-[state=active]/step:bg-primary group-data-[state=active]/step:text-primary-foreground group-data-[state=completed]/step:border-primary group-data-[state=completed]/step:bg-primary group-data-[state=completed]/step:text-primary-foreground',
+        props.class
+      )
+    "
+  >
+    <slot />
+  </StepperIndicator>
+</template>
diff --git a/src/components/ui/Stepper/StepperItem.vue b/src/components/ui/Stepper/StepperItem.vue
new file mode 100644
index 0000000..9f63d08
--- /dev/null
+++ b/src/components/ui/Stepper/StepperItem.vue
@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import { cn } from '@/lib/utils'
+import { reactiveOmit } from '@vueuse/core'
+import { StepperItem, type StepperItemProps } from 'reka-ui'
+import type { HTMLAttributes } from 'vue'
+
+const props = defineProps<StepperItemProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = reactiveOmit(props, 'class')
+</script>
+
+<template>
+  <StepperItem
+    v-bind="delegatedProps"
+    :class="
+      cn(
+        'group/step flex items-center gap-3 data-[disabled]:pointer-events-none data-[disabled]:opacity-64',
+        props.class
+      )
+    "
+  >
+    <slot />
+  </StepperItem>
+</template>
diff --git a/src/components/ui/Stepper/StepperSeparator.vue b/src/components/ui/Stepper/StepperSeparator.vue
new file mode 100644
index 0000000..a136188
--- /dev/null
+++ b/src/components/ui/Stepper/StepperSeparator.vue
@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import { cn } from '@/lib/utils'
+import { reactiveOmit } from '@vueuse/core'
+import { StepperSeparator, type StepperSeparatorProps } from 'reka-ui'
+import type { HTMLAttributes } from 'vue'
+
+const props = defineProps<StepperSeparatorProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = reactiveOmit(props, 'class')
+</script>
+
+<template>
+  <StepperSeparator
+    v-bind="delegatedProps"
+    :class="
+      cn(
+        'h-px flex-1 bg-border transition-colors group-data-[state=completed]/step:bg-primary',
+        props.class
+      )
+    "
+  />
+</template>
diff --git a/src/components/ui/Stepper/StepperTitle.vue b/src/components/ui/Stepper/StepperTitle.vue
new file mode 100644
index 0000000..3a9bf1f
--- /dev/null
+++ b/src/components/ui/Stepper/StepperTitle.vue
@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import { cn } from '@/lib/utils'
+import { reactiveOmit } from '@vueuse/core'
+import { StepperTitle, type StepperTitleProps } from 'reka-ui'
+import type { HTMLAttributes } from 'vue'
+
+const props = defineProps<StepperTitleProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = reactiveOmit(props, 'class')
+</script>
+
+<template>
+  <StepperTitle
+    v-bind="delegatedProps"
+    :class="cn('text-sm font-medium text-foreground', props.class)"
+  >
+    <slot />
+  </StepperTitle>
+</template>
diff --git a/src/components/ui/Stepper/StepperTrigger.vue b/src/components/ui/Stepper/StepperTrigger.vue
new file mode 100644
index 0000000..bd6b858
--- /dev/null
+++ b/src/components/ui/Stepper/StepperTrigger.vue
@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import { cn } from '@/lib/utils'
+import { reactiveOmit } from '@vueuse/core'
+import { StepperTrigger, type StepperTriggerProps } from 'reka-ui'
+import type { HTMLAttributes } from 'vue'
+
+const props = defineProps<StepperTriggerProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = reactiveOmit(props, 'class')
+</script>
+
+<template>
+  <StepperTrigger
+    v-bind="delegatedProps"
+    :class="
+      cn(
+        'inline-flex items-center gap-3 rounded-lg text-left outline-none focus-visible:ring-2 focus-visible:ring-ring/70 focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:pointer-events-none',
+        props.class
+      )
+    "
+  >
+    <slot />
+  </StepperTrigger>
+</template>
diff --git a/src/components/ui/Stepper/index.ts b/src/components/ui/Stepper/index.ts
new file mode 100644
index 0000000..e17c112
--- /dev/null
+++ b/src/components/ui/Stepper/index.ts
@@ -0,0 +1,7 @@
+export { default as Stepper } from './Stepper.vue'
+export { default as StepperItem } from './StepperItem.vue'
+export { default as StepperTrigger } from './StepperTrigger.vue'
+export { default as StepperIndicator } from './StepperIndicator.vue'
+export { default as StepperTitle } from './StepperTitle.vue'
+export { default as StepperDescription } from './StepperDescription.vue'
+export { default as StepperSeparator } from './StepperSeparator.vue'
diff --git a/src/components/ui/Table/Table.vue b/src/components/ui/Table/Table.vue
new file mode 100644
index 0000000..f579d5f
--- /dev/null
+++ b/src/components/ui/Table/Table.vue
@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import { cn } from '@/lib/utils'
+import type { HTMLAttributes } from 'vue'
+
+const props = defineProps<{ class?: HTMLAttributes['class'] }>()
+</script>
+
+<template>
+  <div class="relative w-full overflow-x-auto">
+    <table :class="cn('w-full caption-bottom text-sm', props.class)">
+      <slot />
+    </table>
+  </div>
+</template>
diff --git a/src/components/ui/Table/TableBody.vue b/src/components/ui/Table/TableBody.vue
new file mode 100644
index 0000000..8c41111
--- /dev/null
+++ b/src/components/ui/Table/TableBody.vue
@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import { cn } from '@/lib/utils'
+import type { HTMLAttributes } from 'vue'
+
+const props = defineProps<{ class?: HTMLAttributes['class'] }>()
+</script>
+
+<template>
+  <tbody :class="cn('[&_tr:last-child]:border-0', props.class)">
+    <slot />
+  </tbody>
+</template>
diff --git a/src/components/ui/Table/TableCaption.vue b/src/components/ui/Table/TableCaption.vue
new file mode 100644
index 0000000..84354a8
--- /dev/null
+++ b/src/components/ui/Table/TableCaption.vue
@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import { cn } from '@/lib/utils'
+import type { HTMLAttributes } from 'vue'
+
+const props = defineProps<{ class?: HTMLAttributes['class'] }>()
+</script>
+
+<template>
+  <caption :class="cn('mt-4 text-sm text-muted-foreground', props.class)">
+    <slot />
+  </caption>
+</template>
diff --git a/src/components/ui/Table/TableCell.vue b/src/components/ui/Table/TableCell.vue
new file mode 100644
index 0000000..44a3177
--- /dev/null
+++ b/src/components/ui/Table/TableCell.vue
@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import { cn } from '@/lib/utils'
+import type { HTMLAttributes } from 'vue'
+
+const props = defineProps<{ class?: HTMLAttributes['class'] }>()
+</script>
+
+<template>
+  <td
+    :class="cn('p-3 align-middle [&:has([role=checkbox])]:pe-0', props.class)"
+  >
+    <slot />
+  </td>
+</template>
diff --git a/src/components/ui/Table/TableFooter.vue b/src/components/ui/Table/TableFooter.vue
new file mode 100644
index 0000000..bacc122
--- /dev/null
+++ b/src/components/ui/Table/TableFooter.vue
@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import { cn } from '@/lib/utils'
+import type { HTMLAttributes } from 'vue'
+
+const props = defineProps<{ class?: HTMLAttributes['class'] }>()
+</script>
+
+<template>
+  <tfoot
+    :class="cn('border-t bg-muted/50 font-medium [&>tr]:last:border-b-0', props.class)"
+  >
+    <slot />
+  </tfoot>
+</template>
diff --git a/src/components/ui/Table/TableHead.vue b/src/components/ui/Table/TableHead.vue
new file mode 100644
index 0000000..e234ce5
--- /dev/null
+++ b/src/components/ui/Table/TableHead.vue
@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import { cn } from '@/lib/utils'
+import type { HTMLAttributes } from 'vue'
+
+const props = defineProps<{ class?: HTMLAttributes['class'] }>()
+</script>
+
+<template>
+  <th
+    :class="
+      cn(
+        'h-10 px-3 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pe-0',
+        props.class
+      )
+    "
+  >
+    <slot />
+  </th>
+</template>
diff --git a/src/components/ui/Table/TableHeader.vue b/src/components/ui/Table/TableHeader.vue
new file mode 100644
index 0000000..57b39d9
--- /dev/null
+++ b/src/components/ui/Table/TableHeader.vue
@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import { cn } from '@/lib/utils'
+import type { HTMLAttributes } from 'vue'
+
+const props = defineProps<{ class?: HTMLAttributes['class'] }>()
+</script>
+
+<template>
+  <thead :class="cn('[&_tr]:border-b', props.class)">
+    <slot />
+  </thead>
+</template>
diff --git a/src/components/ui/Table/TableRow.vue b/src/components/ui/Table/TableRow.vue
new file mode 100644
index 0000000..d7e196e
--- /dev/null
+++ b/src/components/ui/Table/TableRow.vue
@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import { cn } from '@/lib/utils'
+import type { HTMLAttributes } from 'vue'
+
+const props = defineProps<{ class?: HTMLAttributes['class'] }>()
+</script>
+
+<template>
+  <tr
+    :class="
+      cn(
+        'border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted',
+        props.class
+      )
+    "
+  >
+    <slot />
+  </tr>
+</template>
diff --git a/src/components/ui/Table/index.ts b/src/components/ui/Table/index.ts
new file mode 100644
index 0000000..d4e4fdd
--- /dev/null
+++ b/src/components/ui/Table/index.ts
@@ -0,0 +1,8 @@
+export { default as Table } from './Table.vue'
+export { default as TableHeader } from './TableHeader.vue'
+export { default as TableBody } from './TableBody.vue'
+export { default as TableFooter } from './TableFooter.vue'
+export { default as TableRow } from './TableRow.vue'
+export { default as TableHead } from './TableHead.vue'
+export { default as TableCell } from './TableCell.vue'
+export { default as TableCaption } from './TableCaption.vue'
diff --git a/src/router/index.ts b/src/router/index.ts
index 80d3d66..dcf1e0b 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -104,6 +104,24 @@ const router = createRouter({
       name: 'dropdowns',
       component: () => import('@/views/Dropdowns.vue'),
       meta: { title: 'coss-ui-vue/dropdowns' }
+    },
+    {
+      path: '/tables',
+      name: 'tables',
+      component: () => import('@/views/Tables.vue'),
+      meta: { title: 'coss-ui-vue/tables' }
+    },
+    {
+      path: '/steppers',
+      name: 'steppers',
+      component: () => import('@/views/Steppers.vue'),
+      meta: { title: 'coss-ui-vue/steppers' }
+    },
+    {
+      path: '/navigation-menus',
+      name: 'navigation-menus',
+      component: () => import('@/views/NavigationMenus.vue'),
+      meta: { title: 'coss-ui-vue/navigation-menus' }
     }
   ]
 })
diff --git a/src/views/Home.vue b/src/views/Home.vue
index 932d8c5..9b5721e 100644
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@@ -80,7 +80,10 @@ const availableComponents = [
   { name: 'Breadcrumb', path: '/breadcrumbs' },
   { name: 'Progress', path: '/progress' },
   { name: 'Pagination', path: '/pagination' },
-  { name: 'Dropdown Menu', path: '/dropdowns' }
+  { name: 'Dropdown Menu', path: '/dropdowns' },
+  { name: 'Table', path: '/tables' },
+  { name: 'Stepper', path: '/steppers' },
+  { name: 'Navigation Menu', path: '/navigation-menus' }
 ]
 
 useHead({
diff --git a/src/views/NavigationMenus.vue b/src/views/NavigationMenus.vue
new file mode 100644
index 0000000..60510ea
--- /dev/null
+++ b/src/views/NavigationMenus.vue
@@ -0,0 +1,39 @@
+<template>
+  <main>
+    <div class="px-4 sm:px-6">
+      <div class="mx-auto w-full max-w-6xl">
+        <PageHeader
+          title="Navigation Menu Components - COSS UI"
+          heading="Navigation Menu"
+          description="A growing collection of navigation menu components built with Vue and TailwindCSS."
+        >
+          A growing collection of {{ totalComponents }} navigation menu components built with
+          <span class="text-vue">Vue</span> and TailwindCSS.
+        </PageHeader>
+
+        <div
+          class="-m-px grid grid-cols-12 *:px-1 *:py-12 *:not-first:-ms-px *:not-first:-mt-px sm:*:px-8 xl:*:px-12 overflow-hidden *:before:absolute *:before:bg-border/70 *:before:[block-size:100vh] *:before:[inline-size:1px] *:before:[inset-block-start:0] *:before:[inset-inline-start:-1px] *:after:absolute *:after:bg-border/70 *:after:[block-size:1px] *:after:[inline-size:100vw] *:after:[inset-block-start:-1px] *:after:[inset-inline-start:0]"
+        >
+          <DemoComponent
+            v-for="component in navigationMenuFiles"
+            :key="component"
+            class="group/item relative col-span-12 flex min-h-52 items-start justify-center pt-4"
+            :directory="navigationMenuDirectory"
+            :componentName="component"
+          />
+        </div>
+      </div>
+    </div>
+  </main>
+</template>
+
+<script setup lang="ts">
+import DemoComponent from '@/demo/DemoComponent.vue'
+import PageHeader from '@/demo/PageHeader.vue'
+import { computed, ref } from 'vue'
+
+const navigationMenuFiles = ref(['NavigationMenu01', 'NavigationMenu02'])
+const navigationMenuDirectory = 'navigation-menus'
+
+const totalComponents = computed(() => navigationMenuFiles.value.length)
+</script>
diff --git a/src/views/Steppers.vue b/src/views/Steppers.vue
new file mode 100644
index 0000000..9063117
--- /dev/null
+++ b/src/views/Steppers.vue
@@ -0,0 +1,39 @@
+<template>
+  <main>
+    <div class="px-4 sm:px-6">
+      <div class="mx-auto w-full max-w-6xl">
+        <PageHeader
+          title="Stepper Components - COSS UI"
+          heading="Stepper"
+          description="A growing collection of stepper components built with Vue and TailwindCSS."
+        >
+          A growing collection of {{ totalComponents }} stepper components built with
+          <span class="text-vue">Vue</span> and TailwindCSS.
+        </PageHeader>
+
+        <div
+          class="-m-px grid grid-cols-12 *:px-1 *:py-12 *:not-first:-ms-px *:not-first:-mt-px sm:*:px-8 xl:*:px-12 overflow-hidden *:before:absolute *:before:bg-border/70 *:before:[block-size:100vh] *:before:[inline-size:1px] *:before:[inset-block-start:0] *:before:[inset-inline-start:-1px] *:after:absolute *:after:bg-border/70 *:after:[block-size:1px] *:after:[inline-size:100vw] *:after:[inset-block-start:-1px] *:after:[inset-inline-start:0]"
+        >
+          <DemoComponent
+            v-for="component in stepperFiles"
+            :key="component"
+            class="group/item relative col-span-12 flex items-center justify-center sm:col-span-6"
+            :directory="stepperDirectory"
+            :componentName="component"
+          />
+        </div>
+      </div>
+    </div>
+  </main>
+</template>
+
+<script setup lang="ts">
+import DemoComponent from '@/demo/DemoComponent.vue'
+import PageHeader from '@/demo/PageHeader.vue'
+import { computed, ref } from 'vue'
+
+const stepperFiles = ref(['Stepper01', 'Stepper02'])
+const stepperDirectory = 'steppers'
+
+const totalComponents = computed(() => stepperFiles.value.length)
+</script>
diff --git a/src/views/Tables.vue b/src/views/Tables.vue
new file mode 100644
index 0000000..781cb5a
--- /dev/null
+++ b/src/views/Tables.vue
@@ -0,0 +1,39 @@
+<template>
+  <main>
+    <div class="px-4 sm:px-6">
+      <div class="mx-auto w-full max-w-6xl">
+        <PageHeader
+          title="Table Components - COSS UI"
+          heading="Table"
+          description="A growing collection of table components built with Vue and TailwindCSS."
+        >
+          A growing collection of {{ totalComponents }} table components built with
+          <span class="text-vue">Vue</span> and TailwindCSS.
+        </PageHeader>
+
+        <div
+          class="-m-px grid grid-cols-12 *:px-1 *:py-12 *:not-first:-ms-px *:not-first:-mt-px sm:*:px-8 xl:*:px-12 overflow-hidden *:before:absolute *:before:bg-border/70 *:before:[block-size:100vh] *:before:[inline-size:1px] *:before:[inset-block-start:0] *:before:[inset-inline-start:-1px] *:after:absolute *:after:bg-border/70 *:after:[block-size:1px] *:after:[inline-size:100vw] *:after:[inset-block-start:-1px] *:after:[inset-inline-start:0]"
+        >
+          <DemoComponent
+            v-for="component in tableFiles"
+            :key="component"
+            class="group/item relative col-span-12 flex items-center justify-center"
+            :directory="tableDirectory"
+            :componentName="component"
+          />
+        </div>
+      </div>
+    </div>
+  </main>
+</template>
+
+<script setup lang="ts">
+import DemoComponent from '@/demo/DemoComponent.vue'
+import PageHeader from '@/demo/PageHeader.vue'
+import { computed, ref } from 'vue'
+
+const tableFiles = ref(['Table01', 'Table02'])
+const tableDirectory = 'tables'
+
+const totalComponents = computed(() => tableFiles.value.length)
+</script>