@prosync_solutions/ui

@prosync_solutions/ui · Prosync Design System

Vue 3 component library and design token system — 22 production-ready components, comprehensive design tokens, and interactive documentation.

📖 View Live Storybook → Browse all components, design tokens, usage guidelines, and interactive examples.

Installation

npm install @prosync_solutions/ui @phosphor-icons/vue

Peer dependencies: vue >=3.3.0 · @phosphor-icons/vue >=2.0.0

Requirements

Tailwind CSS v4 Setup

This library uses Tailwind CSS v4 internally. Your consumer project must also have Tailwind v4 configured, or you will see this build error:

@layer base is used but no matching @tailwind base directive is present.

Install Tailwind v4:

npm install -D tailwindcss @tailwindcss/vite

Add to vite.config.ts:

import tailwindcss from "@tailwindcss/vite";

export default defineConfig({
  plugins: [vue(), tailwindcss()],
});

Add to your main CSS file (e.g. src/style.css):

@import "tailwindcss";

ℹ️ Tailwind v4 does not use tailwind.config.js or postcss.config.js. Configuration is handled entirely through the Vite plugin and your CSS file.

Quick Start

// main.ts
import { createApp } from "vue";
import "@prosync_solutions/ui/style.css"; // design tokens + Tailwind utilities
import App from "./App.vue";

createApp(App).mount("#app");

<!-- Any component -->
<script setup>
import { ProButton, ProInput, ProTag, ProTable } from "@prosync_solutions/ui";
</script>

<template>
  <ProInput v-model="name" label="Full Name" placeholder="Enter name" />
  <ProButton variant="primary">Submit</ProButton>
  <ProTag variant="success">Active</ProTag>
</template>

Global Registration (optional)

import ProsyncUI from "@prosync_solutions/ui";
import "@prosync_solutions/ui/style.css";

app.use(ProsyncUI);

Components

All components ship from a single import path: @prosync_solutions/ui.

Form & Input

Display & Feedback

Layout & Navigation

Data

Icons

PDS uses Phosphor Icons as the standard icon set (1,000+ icons × 6 weights).

import { PhEye, PhPencilSimple, PhTrash } from "@phosphor-icons/vue";

See the Design Tokens / ⑨ Icons page in Storybook for the full reference.

Design Tokens

Tokens are available as CSS custom properties.

Key Token Reference

Full token reference: src/styles/tokens.json

Package Exports

Development

npm install          # install dependencies
npm run storybook    # component preview at http://localhost:6006
npm run build        # build the library to dist/

🌐 Hosted Storybook: https://prosync-ui-kit-7139f.web.app/

License

MIT © Prosync