Current state of the library and what's next.
All originally planned phases (0–10+) are closed. The library currently ships 70+ components: ~60 atomic, 7 patterns, 4 layouts, 4 chart primitives, plus 10 composables and an i18n provider.
- Vite library mode + TypeScript
- ESLint flat config + Prettier
- Storybook 8 + addons (
essentials,a11y,themes) - Vitest + jsdom +
@vue/test-utils - Changesets + GitHub Actions release pipeline
- Storybook deploy to GitHub Pages
- Design tokens: colors, typography, spacing, radius, shadow, motion, z-index
- Semantic tokens + themes (
:root[data-theme='light' | 'dark']) - Reset and
global.css -
useTheme()— toggle theme + subscribe toprefers-color-scheme - Icons —
lucide-vue-next+UidIcon+@dskripchenko/ui/iconssub-export
- Forms: Button, Input, Textarea, Checkbox, Radio, Switch, Label, FormField
- Feedback: Spinner, Skeleton, Badge, Alert, Progress, Toast
- Overlays: Modal, Drawer, Tooltip, Popover, Menu
- Navigation: Tabs, Breadcrumb, Link, Pagination (+ Cursor/LoadMore/InfiniteScroll/PageSize)
- Data: Card, Avatar, Tag, Divider, Accordion, Table
- Layout helpers: Stack, Grid, Container
- Header, Footer, Sidebar (+ Item, Group, Divider)
- PageHeader, EmptyState, ErrorState, Result
- Stepper, Wizard, WizardStep +
useWizard()
- SimpleLayout, SidebarLayout, AuthLayout, WizardLayout +
useSidebar()
- Select, DatePicker, Slider, ColorPicker, Command, VirtualList
Round 1 — forms & data (v0.2.0): NumberInput, TimePicker, DateRangePicker, TagsInput, Combobox, TreeView, Timeline, FileUpload, Code
Round 2 — medium priority (v0.3.0): Rating, Splitter, Stat, DescriptionList, Result (pattern)
Round 3 — low priority (v0.4.0): BackTop, Affix, Anchor, Watermark, Tour, Mention, TreeSelect
Round 4 — niche (v0.5.0): Calendar, Carousel, Cascader, Transfer, NotificationBadge
- Bundle visualizer (
pnpm build:analyze) - A11y audit (roving tabindex, keyboard nav, ARIA)
- i18n —
UidLocaleProvider+useLocale+ru/enbuilt-in locales - Charts — Sparkline, ProgressRing, Gauge, Heatmap (SVG, no runtime deps)
- Multi-language documentation (en/ru/de/zh)
In order of decreasing usefulness:
- Dual range slider with two thumbs
- TimePicker with seconds support and 24-hour AM/PM hybrid
- Tree-grid (table whose rows expand into trees)
- Visual regression tests (Chromatic / Percy)
- Bundle-size budget enforced in CI
- Build for what's needed now. Don't build for hypotheticals.
- Every new component ships with
.vue+.css+.spec.ts+.stories.ts+index.ts, exported fromsrc/index.ts. - If a component is harder than it looks (Calendar, Cascader), consider a headless library as a peer-dep instead of a custom build.