A Vue 3 component, token, and theme library on CSS custom properties.
English · Русский · Deutsch · 中文
Status: stable. SemVer guarantees apply — breaking changes only on a major bump.
📖 Storybook: dskripchenko.github.io/ui
- 70+ components — forms, navigation, overlays, data display, charts, patterns, layouts
- Vue 3 + TypeScript — Composition API,
<script setup>, fully typed - CSS custom properties — no CSS-in-JS, no Tailwind, no preprocessors; everything is variables
- Light / Dark themes — toggled via
data-themeon:root, easy to override - Tree-shakable — per-component imports, ESM + CJS builds
- A11y —
:focus-visible, ARIA attributes, keyboard navigation across every interactive component - i18n — built-in
ru+enlocales,UidLocaleProviderfor partial overrides or custom locales - ~1500 icons —
lucide-vue-nextunder the hood +@dskripchenko/ui/iconssub-export - Zero runtime chart deps — built-in SVG primitives (Sparkline, ProgressRing, Gauge, Heatmap)
pnpm add @dskripchenko/ui
# or
npm install @dskripchenko/ui// main.ts
import { createApp } from 'vue'
import App from './App.vue'
// Everything in one line: tokens + themes + reset + base typography + components.
import '@dskripchenko/ui/styles/all.css'
createApp(App).mount('#app')Prefer granular imports? Use the per-file entries instead — order matters (tokens → themes → component styles):
import '@dskripchenko/ui/styles/tokens.css' // primitives (colors, spacing, radius…)
import '@dskripchenko/ui/styles/themes.css' // :root[data-theme="light|dark"] + semantic aliases
import '@dskripchenko/ui/styles/reset.css' // optional: minimal HTML reset
import '@dskripchenko/ui/styles/global.css' // optional: :root font-family + base typography
import '@dskripchenko/ui/styles/index.css' // component styles<!-- App.vue -->
<script setup lang="ts">
import { UidButton, UidIcon, UidLocaleProvider, en } from '@dskripchenko/ui'
import { Check } from '@dskripchenko/ui/icons'
</script>
<template>
<UidLocaleProvider :locale="en">
<UidButton variant="primary">
<UidIcon :icon="Check" /> Save
</UidButton>
</UidLocaleProvider>
</template>Switch theme by attribute on <html>:
<html data-theme="dark">A short selection — the full catalog is in Storybook.
Forms & input: Button, Input, Textarea, NumberInput, Checkbox, Radio, Switch, Label, FormField, Select, Combobox, TagsInput, DatePicker, DateRangePicker, TimePicker, ColorPicker, Slider, Rating, FileUpload, Mention, TreeSelect, Cascader
Feedback: Spinner, Skeleton, Badge, Alert, Progress, Toast, Tour
Overlays: Modal, Drawer, Tooltip, Popover, Menu, Command
Navigation: Tabs, Breadcrumb, Link, Pagination (+ Cursor / LoadMore / InfiniteScroll / PageSize), BackTop, Affix, Anchor
Data display: Card, Avatar, AvatarGroup, Tag, Divider, Accordion, Table, VirtualList, Stat, DescriptionList, Timeline, TreeView, Code, Watermark, Carousel, Calendar, NotificationBadge
Layout helpers: Stack, Grid, Container, Splitter
Charts: Sparkline, ProgressRing, Gauge, Heatmap
Wizards: Stepper, Wizard, WizardStep
Patterns: Header, Footer, Sidebar, PageHeader, EmptyState, ErrorState, Result
Layouts: SimpleLayout, SidebarLayout, AuthLayout, WizardLayout
Composables: useTheme, useLocale, useField, useToast, useWizard, useSidebar, useCommandPalette, useFocusTrap, useScrollLock, usePopover
User docs are translated into four languages — pick yours:
- 🇬🇧 English (default): getting-started, theming, tokens, icons, patterns, validation, charts, i18n
- 🇷🇺 Русский: docs/ru/
- 🇩🇪 Deutsch: docs/de/
- 🇨🇳 中文: docs/zh/
Contributor docs (English only): Architecture, Component guidelines, Contributing, Roadmap.
Every colour, spacing, and font is a CSS variable. Override the theme by setting tokens on :root or on a container:
:root[data-theme='dark'] {
--uid-color-primary: #8b5cf6;
--uid-color-bg: #0a0a0a;
}See theming and tokens for details.
The @dskripchenko/ui/icons sub-export re-exports all ~1500 Lucide icons:
import { UidIcon } from '@dskripchenko/ui'
import { Heart, Star } from '@dskripchenko/ui/icons'See icons.
pnpm install
pnpm dev # Storybook on :6006
pnpm test # Vitest
pnpm build # Library build
pnpm build-storybook # Storybook → storybook-static
pnpm build:analyze # Bundle visualizer
pnpm changeset # Describe a change for the next releaseMIT