@derekshen/vinsty-ui-vue

v0.1.4

Published

a month ago

Vue 3 UI/UX template library based on shadcn-vue and Tailwind CSS

0High
0Medium
0Low

derekshen

vue ui components shadcn tailwind dashboard

VinstyUI Vue

Vue 3 UI/UX template library based on shadcn-vue and Tailwind CSS.

Features

Complete UI Component Library: 48+ UI components following shadcn-vue patterns
Chart Components: 8+ chart components using vue-chartjs
Layout Components: AppLayout, ModernSidebar, ModernTopbar
Page Components: 14+ page components including Dashboard, Messages, Orders, etc.
Shared Components: KPICard, DateRangePicker, AccountFilter, etc.
Color Themes: Violet (default), Emerald Green, and Dodger Blue color palettes
Dark/Light Mode: Full light/dark theme support with CSS variables
Border Radius Control: Global corner roundness adjustment via --vinst-radius-scale
Internationalization: Support for multiple languages using vue-i18n
State Management: Pinia store for global state
Routing: Vue Router configuration
Utilities: Chart configuration, mock data generator, class merging utility

Installation

npm install @derekshen/vinsty-ui-vue

Dependencies

VinstyUI Vue requires the following dependencies:

vue ^3.5.13
vue-router ^4.5.0
pinia ^3.0.1
reka-ui ^2.2.0
class-variance-authority ^0.7.1
clsx ^2.1.1
tailwind-merge ^3.0.2
lucide-vue-next ^0.487.0
vue-i18n ^11.1.2
vue-chartjs ^5.3.2
chart.js ^4.4.8
vue-sonner ^1.3.0
embla-carousel-vue ^8.6.0
splitpanes ^4.0.3
tw-animate-css ^1.3.8

Quick Start

1. Import Styles

// main.ts
import 'vinsty-ui-vue/dist/index.css'
import './styles/globals.css' // Your custom styles

2. Setup Pinia and Vue Router

// main.ts
import { createApp } from 'vue'
import { createPinia } from 'pinia'
import App from './App.vue'
import router from './router'
import { i18n } from 'vinsty-ui-vue'

const app = createApp(App)
app.use(createPinia())
app.use(router)
app.use(i18n)
app.mount('#app')

3. Use Components

<template>
  <div>
    <Button variant="default" size="lg">
      Click Me
    </Button>
    
    <Card>
      <CardHeader>
        <CardTitle>Welcome to VinstyUI</CardTitle>
      </CardHeader>
      <CardContent>
        <p>This is a sample card component</p>
      </CardContent>
    </Card>
    
    <KPICard 
      title="Revenue" 
      value="$12,345" 
      delta={12.5} 
      deltaType="positive"
    />
  </div>
</template>

<script setup>
import { Button, Card, CardHeader, CardTitle, CardContent, KPICard } from 'vinsty-ui-vue'
</script>

Theme Configuration

Color Themes

VinstyUI provides three built-in color themes:

| Theme | Primary Color | CSS Class | |-------|--------------|-----------| | Violet (default) | #7C3AED / #8B5CF6 | (none) | | Emerald Green | #10B981 / #34D399 | .theme-emerald | | Dodger Blue | #3B82F6 / #60A5FA | .theme-blue |

Switch color themes by adding the corresponding class to the <html> element:

// Using the app store
import { useAppStore } from 'vinsty-ui-vue'

const appStore = useAppStore()
appStore.setColorTheme('emerald') // 'violet' | 'emerald' | 'blue'

Or manually:

document.documentElement.classList.remove('theme-emerald', 'theme-blue')
document.documentElement.classList.add('theme-emerald')

Dark/Light Mode

const appStore = useAppStore()
appStore.setTheme('dark') // 'light' | 'dark'

Custom CSS Variables

Override CSS variables in your global styles for further customization:

:root {
  --primary: #7C3AED;
  --secondary: #A78BFA;
  --accent: #22D3EE;
  --background: #ffffff;
  --foreground: #0B0B0B;
}

.dark {
  --primary: #8B5CF6;
  --secondary: #A78BFA;
  --accent: #22D3EE;
  --background: #0A0A0F;
  --foreground: #E8E8F0;
}

Border Radius Scale

Control the global corner roundness with --vinst-radius-scale:

| Value | Effect | |-------|--------| | 0 | Sharp corners (no rounding) | | 1 | Default rounding | | 2 | Double rounding |

// Using the app store
const appStore = useAppStore()
appStore.setRadiusScale(0)   // Sharp
appStore.setRadiusScale(1)   // Default
appStore.setRadiusScale(2)   // Round

Or manually:

:root {
  --vinst-radius-scale: 1.5; /* Custom scale between 0 and 2 */
}

document.documentElement.style.setProperty('--vinst-radius-scale', '1.5')

Internationalization

VinstyUI includes support for internationalization using vue-i18n. You can add or override translations:

import { i18n } from 'vinsty-ui-vue'

// Add new translations
i18n.global.mergeLocaleMessage('es', {
  dashboard: {
    title: 'Tablero',
  }
})

// Change locale
i18n.global.locale.value = 'es'

Components

UI Components

Button
Card
Badge
Input
Label
Tabs
Dialog
DropdownMenu
Table
Avatar
Progress
Switch
Checkbox
RadioGroup
Select
Textarea
Slider
Tooltip
Popover
Skeleton
Separator
ScrollArea
Accordion
Alert
Pagination
Sheet
Drawer
Toggle
Breadcrumb
Chart
InputOTP
Sonner

Chart Components

RevenueChart
SalesChart
MarginChart
PurchasesChart
ReturnsChart
StockValueChart
RevenueSharePie

Layout Components

AppLayout
ModernSidebar
ModernTopbar

Page Components

DashboardPage
MessagesPage
OrdersPage
PurchasesPage
StockPage
WalletPage
SettingsPage
NotificationsPage
PublisherPage
PublishedPage
LauncherPage
TrackingProductsPage
TrackingPublicPage
TrackingVendorsPage

Shared Components

KPICard
DateRangePicker
AccountFilter
PageHeader
SectionHeader
StatusBadge
EmptyState
LoadingSkeleton
RefreshButton
InsightCard

Utilities

cn()

Utility function for merging classes:

import { cn } from 'vinsty-ui-vue'

const classes = cn('p-4', 'bg-white', { 'dark:bg-gray-900': true })

Chart Config

Chart.js configuration utilities with color theme support:

import { getChartColors, getChartTheme, formatCurrency, formatNumber } from 'vinsty-ui-vue'

const colors = getChartColors('emerald')
const theme = getChartTheme(true, 'emerald') // isDark, colorTheme

Mock Data

Generate mock data for testing:

import { generateMockData } from 'vinsty-ui-vue'

const mockData = generateMockData()
console.log(mockData.accounts)
console.log(mockData.kpiData)

License

MIT License