🎨 UI KIT

A Vue 3 UI component library for internal and external web applications. Includes ready‑to‑use UI elements (buttons, inputs, selects, tables, modals, etc.), utilities, and styles.

⚡️ Quick start

• 📦 Install with yarn

yarn add @dv.net/ui-kit

• 💻 Use in a Vue 3 (Vite) app

<script setup lang="ts">
import { UiButton, UiInput } from "@dv.net/ui-kit";
</script>

<template>
  <UiButton>Submit</UiButton>
  <UiInput v-model="value" placeholder="Enter text" />
</template>

<style>
@import "@dv.net/ui-kit/dist/style.css";
</style>

📘 Demo / component catalog

You can run a local demo app with examples of all components.

# development mode
yarn run dev

# build demo (static files)
yarn run build-demo

🧰 Scripts

• 🚀 dev — run the demo app with Vite
• 🏗️ build — type check (tsc) + build the component library
• 🧱 build-only — build the library without tsc
• 🧪 build-demo — build the demo app (--mode demo)
• ✨ lint — ESLint + Stylelint with auto‑fix
• 🖼️ generate-svg-list — generate an SVG icon list based on src/lib/assets/icons

🛠️ Tech stack

• ⚙️ Vue 3 (^3.5) with <script setup>
• ⚡️ Vite (^7) + @vitejs/plugin-vue
• 🧩 TypeScript (^5.8), d.ts generation via vite-plugin-dts
• 🎨 SCSS: shared styles and variables in src/lib/assets/scss
• 🧹 ESLint + Stylelint + Prettier
• 📦 @floating-ui/vue, @vueuse/core, dayjs, maska, vue3-lottie, vue-virtual-scroller
• 🖼️ SVG loading via vite-svg-loader (SVGO with removeViewBox: false, prefixIds)

🗂️ Project structure (main)

src/
  lib/                # component library (sources)
    assets/           # icons, animations, scss, shared style.scss
    components/       # components: UiButton, UiInput, UiSelect, ...
    index.ts          # public exports of the library
  pages/              # demo pages with examples
  router/             # demo app router
  main.ts             # demo app entry
  App.vue             # demo root component
vite.config.ts        # library and demo build config

🧑‍💻 Development

1. 📦 Install dependencies

yarn install

2. ▶️ Start the demo

yarn dev

3. ✏️ Make changes in src/lib/** — the demo will hot‑reload.

🔍 Code quality checks:

yarn lint

🖼️ Generate icon list (when SVG set changes):

yarn generate-svg-list

📦 Library build

yarn build

The output will be in dist/:

• dist/index.js — ES module bundle
• dist/index.d.ts — TypeScript types
• dist/style.css — shared library styles

⚙️ Environment requirements

• 🖥️ Node.js ^20.19.0 or >=22.12.0
• 🧩 Consumer project: vue >= 3.5.0, vue-router >= 4.4.0

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

Made with ❤️ for the developer community