WebEdge UI design system

204 Vue 3 components on Tailwind v4 — a blocks catalogue and playground shared across every interface.

Vue 3TailwindReka UI

Dev-story

Challenge

The same buttons, dialogs and tables were being rebuilt per project, and colours, spacing and states drifted apart.

What we did

A Vue 3 + Tailwind v4 library: 204 `W*` components, 93 blocks and 9 templates, with Reka UI for headless overlay/menu/dialog primitives and TanStack Table for the data grid, themed through `--we-*` tokens. A searchable showcase lists every component with copyable source.

Result

New interfaces draw from one library with consistent theming and accessibility, and the showcase (webedge-ui.pages.dev) is both the catalogue and the copy-paste source.

Dev-story article

WebEdge UI design system: how the project was built

Every WebEdge product — admin panels, marketing sites, calendar, fitness, CMS — was reinventing the same buttons, tables and forms slightly differently, so the same 'card' looked and behaved three ways across three apps. The answer was one library the whole org pulls from, with a living catalogue that proves each component works before anyone imports it. The hard part was covering everything from a tiny brochure site to a data-heavy admin screen without forcing small sites to ship the weight of the big ones.

Sections

Modules

Stack

Vue 3 + Tailwind

Why the project exists

The same buttons, dialogs and tables were being rebuilt per project, and colours, spacing and states drifted apart.

What was built

A Vue 3 + Tailwind v4 library of 204 public W-prefixed components, plus 93 UI blocks and 9 page templates, all driven by theme tokens on --we-* CSS variables and data-theme scopes. It ships with a Storybook-style playground deployed as a static site: a searchable category → subcategory → component tree with live previews, copyable source, props tables and deep links like ?component=card&tab=props.

Main modules and user path

M01

Grouped entrypoints (core, forms, overlay, navigation, data-display, charts, admin, calendar, cms, blocks, templates) so a brochure site imports only primitives while admin pages reuse the richer compositions — small sites stay small

M02

Complex controls built the headless way: Reka UI primitives for overlays, menus and dialogs and TanStack Table for the advanced table engine, with WebEdge visuals layered on top instead of hand-rolled a11y

M03

Dependency-free in-house ports of the full VueUse core and math composable set (212 → 229 demos), each with a plain-language caption and live input→output demo, so the showcase covers the surface without pulling external packages

M04

A dependency-free EN/LT/RU i18n for the playground shell itself (reactive locale + t() with {n} interpolation and ?lang= persistence), replacing placeholder language pickers that changed nothing

M05

A deep-linkable, Ctrl+K-searchable catalogue that reports live collection counts and stays in sync with entry exports and Storybook mappings via inventory checks in CI

Architecture and technology decisions

Built with Vue 3, Tailwind, Reka UI.

Vue 3 SFCs with TypeScript, Tailwind v4 tokens and Reka UI / TanStack Table under the hood; verified on every change with vue-tsc, a 700+ test suite, a package build and a visual-smoke pass of ~1833 screenshots, and shipped as a static playground on Cloudflare Pages.

Result and lessons

New interfaces draw from one library with consistent theming and accessibility, and the showcase (webedge-ui.pages.dev) is both the catalogue and the copy-paste source.

One source of truth now backs every WebEdge interface — 204 components, 93 blocks and 9 templates with a searchable catalogue — so a component is verified once and reused everywhere instead of drifting per app.