Skip to content

feat: add Table, Stepper, and Navigation Menu components - #33

Merged
Jettonn merged 1 commit into
mainfrom
feat/coss-table-stepper-nav
Jul 13, 2026
Merged

feat: add Table, Stepper, and Navigation Menu components#33
Jettonn merged 1 commit into
mainfrom
feat/coss-table-stepper-nav

Conversation

@Jettonn

@Jettonn Jettonn commented Jul 13, 2026

Copy link
Copy Markdown
Owner

Adds three new COSS-styled component families, each with headless UI components, demos, a view page, a route, a Home nav entry, and a README mention.

Components

Table

Plain HTML <table> primitives: Table, TableHeader, TableBody, TableFooter, TableRow, TableHead, TableCell, TableCaption.

  • Table01 — basic invoice table
  • Table02 — status Badges, footer total, caption

Stepper

Built on Reka UI Stepper primitives: Stepper, StepperItem, StepperTrigger, StepperIndicator, StepperTitle, StepperDescription, StepperSeparator.

  • Stepper01 — indicator-only, check on completed steps
  • Stepper02 — controlled with Previous/Next buttons and titles

Navigation Menu

Built on Reka UI NavigationMenu primitives with viewport: NavigationMenu, NavigationMenuList, NavigationMenuItem, NavigationMenuTrigger, NavigationMenuContent, NavigationMenuLink, NavigationMenuIndicator, NavigationMenuViewport, plus navigationMenuTriggerStyle.

  • NavigationMenu01 — dropdown flyout with a grid of links + a plain link
  • NavigationMenu02 — simple horizontal link bar

Design

All use COSS tokens: rounded-lg, opacity-64 disabled convention, before-pseudo highlight surfaces on the nav-menu viewport, primary-filled active/completed stepper indicators.

Verification

  • ✅ type-check
  • ✅ eslint
  • ✅ build
  • ✅ visually verified in-browser (table, stepper interactivity, nav-menu flyout open)

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.
@cloudflare-workers-and-pages

Copy link
Copy Markdown

Deploying originui-vue with  Cloudflare Pages  Cloudflare Pages

Latest commit: 062a070
Status: ✅  Deploy successful!
Preview URL: https://39b250a0.originui-vue.pages.dev
Branch Preview URL: https://feat-coss-table-stepper-nav.originui-vue.pages.dev

View logs

@Jettonn
Jettonn merged commit 7521200 into main Jul 13, 2026
3 checks passed
@Jettonn
Jettonn deleted the feat/coss-table-stepper-nav branch July 13, 2026 16:10
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant