Skip to content

getting-started.md

Latest commit

 

History

History
93 lines (65 loc) · 2.54 KB

getting-started.md

File metadata and controls

93 lines (65 loc) · 2.54 KB
Raw

Getting started

Install

pnpm add @dskripchenko/ui
# or npm install @dskripchenko/ui

Vue 3.4+ is a peer dependency. Lucide icons come bundled.

Set up styles

Import the kit's stylesheets at your app entry point:

// main.ts
import { createApp } from 'vue'
import App from './App.vue'

import '@dskripchenko/ui/styles/tokens.css'   // primitive design tokens
import '@dskripchenko/ui/styles/themes.css'   // light + dark semantic tokens
import '@dskripchenko/ui/styles/reset.css'    // optional minimal reset

createApp(App).mount('#app')

You can skip reset.css if your app already has a CSS reset. tokens.css and themes.css are required.

First component

<script setup lang="ts">
import { UidButton, UidIcon } from '@dskripchenko/ui'
import { Check } from '@dskripchenko/ui/icons'
</script>

<template>
  <UidButton variant="primary">
    <UidIcon :icon="Check" /> Save
  </UidButton>
</template>

That's it — no global registration, no plugin install. Each component is a standalone Vue component.

Theme

The kit ships with light and dark themes, switched via the data-theme attribute on <html> (or any ancestor):

<html data-theme="dark">

Without the attribute, the light theme applies. See theming for theme switching, custom themes, and useTheme().

Locale

By default, all built-in component strings are in Russian. To switch to English (or another locale), wrap your app in UidLocaleProvider:

<script setup lang="ts">
import { UidLocaleProvider, en } from '@dskripchenko/ui'
</script>

<template>
  <UidLocaleProvider :locale="en">
    <App />
  </UidLocaleProvider>
</template>

See i18n for partial overrides and custom locales.

Forms

The kit has a tiny built-in validator (useField, useForm) so you don't need a separate form library for simple cases. See validation.

<UidInput v-model="email" rules="required|email" label="Email" />

What's next

  • Theming — colors, themes, custom palettes
  • Tokens — design tokens reference (spacing, typography, radii…)
  • Icons — UidIcon and 1500+ Lucide icons
  • Patterns & Layouts — Header, Sidebar, Wizard, page templates
  • Validation — form validation
  • Charts — Sparkline, ProgressRing, Gauge, Heatmap
  • i18n — multi-language support

A live catalog is available at the Storybook site.