Дизайн-система WebEdge UI

204 Vue 3 компонента на Tailwind v4 — каталог блоков и playground, общие для всех интерфейсов.

Vue 3TailwindReka UI

Dev-story

Задача

Одни и те же кнопки, диалоги и таблицы переписывались в каждом проекте, а цвета, отступы и состояния расходились.

Что делали

Библиотека на Vue 3 + Tailwind v4: 204 компонента `W*`, 93 блока и 9 шаблонов; Reka UI для headless-примитивов overlay/menu/dialog и TanStack Table для грида, темизация через токены `--we-*`. Витрина с поиском показывает каждый компонент с копируемым кодом.

Результат

Новые интерфейсы берут из одной библиотеки с единой темизацией и accessibility, а витрина (webedge-ui.pages.dev) — это и каталог, и источник кода для копирования.

Dev-story статья

Дизайн-система WebEdge UI: как создавался проект

Каждый продукт WebEdge — админ-панели, маркетинговые сайты, календарь, фитнес, CMS — заново изобретал те же кнопки, таблицы и формы чуть по-своему, из-за чего одна и та же «карточка» в трёх приложениях выглядела и вела себя тремя способами. Решением стала одна библиотека, из которой черпает вся организация, с живым каталогом, доказывающим работоспособность компонента ещё до импорта. Сложнее всего было охватить всё — от крохотного сайта-визитки до насыщенного данными экрана админки — не заставляя маленькие сайты тащить вес больших.

Разделы

Модули

Стек

Vue 3 + Tailwind

Почему появился проект

Что было создано

Библиотека на Vue 3 + Tailwind v4 из 204 публичных компонентов с префиксом W, а также 93 UI-блоков и 9 шаблонов страниц, управляемых токенами тем через CSS-переменные --we-* и области data-theme. В комплекте — площадка в стиле Storybook как статический сайт: дерево категория → подкатегория → компонент с поиском, живыми превью, копируемым исходником, таблицами пропсов и глубокими ссылками вида ?component=card&tab=props.

Основные модули и путь пользователя

M01

Сгруппированные точки входа (core, forms, overlay, navigation, data-display, charts, admin, calendar, cms, blocks, templates), чтобы сайт-визитка импортировал только примитивы, а страницы админки переиспользовали более сложные композиции — маленькие сайты остаются маленькими

M02

Сложные контролы сделаны по «headless»-принципу: примитивы Reka UI для оверлеев, меню и диалогов и TanStack Table для продвинутого движка таблиц, с визуалом WebEdge поверх вместо рукописной доступности

M03

Свободные от зависимостей внутренние порты полного набора композаблов VueUse core и математики (212 → 229 демо), каждый с понятной подписью и живой демонстрацией вход→выход, чтобы каталог покрывал поверхность, не подтягивая внешние пакеты

M04

Свободный от зависимостей i18n EN/LT/RU для самой оболочки площадки (реактивный locale + t() с интерполяцией {n} и сохранением ?lang=), заменивший бутафорские переключатели языка, которые ничего не меняли

M05

Каталог с глубокими ссылками и поиском по Ctrl+K, показывающий живые счётчики коллекций и синхронизированный с экспортами точек входа и маппингами Storybook через инвентарные проверки в CI

Архитектура и технологические решения

Сделано на Vue 3, Tailwind, Reka UI.

Vue 3 SFC на TypeScript, токены Tailwind v4 и Reka UI / TanStack Table под капотом; каждое изменение проверяется через vue-tsc, набор из 700+ тестов, сборку пакета и визуальный smoke-прогон из ~1833 скриншотов, а результат поставляется как статическая площадка на Cloudflare Pages.

Результат и выводы

Единый источник истины теперь стоит за каждым интерфейсом WebEdge — 204 компонента, 93 блока и 9 шаблонов с каталогом с поиском — поэтому компонент проверяется один раз и переиспользуется везде, а не расходится в каждом приложении по-своему.