Skip to content

Versakit/Versakit-Vue

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Versakit

A modern, highly customizable Vue3 component library

Documentation | Storybook | 中文

vue typescript tailwindcss license


📖 Introduction

Versakit is a carefully designed Vue3 component library aimed at providing highly customizable, headless component solutions. It allows developers to build user interfaces without being constrained by specific visual styles, while providing complete control over the appearance and behavior of components.

✨ Features

  • 🚀   Provides 30+ high-quality universal components covering forms, navigation, feedback, data display, and more
  • 💪   Built entirely on Tailwind CSS, offering elegant default styles with high customizability
  • 🎨   Supports headless (unstyled) mode and PT style passing mechanism for flexible component styling
  • 🛠️   Supports on-demand importing to optimize application size
  • 🌈   Supports theme customization for creating brand-specific UIs
  • 🌍   Supports internationalization with built-in Chinese and English language packs
  • 💡   Fully developed with TypeScript, providing comprehensive type definitions
  • 📚   Detailed documentation and examples for quick onboarding
  • 🌙   Native support for dark mode with one-click switching
  • ♿   Focus on accessibility design, compliant with WCAG standards

📦 Installation

# Using npm
npm install @versakit/vue

# Using yarn
yarn add @versakit/vue

# Using pnpm
pnpm add @versakit/vue

🚀 Quick Start

Full Import

// main.ts
import { createApp } from 'vue'
import App from './App.vue'
import Versakit from '@versakit/vue'
import '@versakit/vue/style'

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

On-demand Import

<script setup lang="ts">
import { VButton, VInput } from '@versakit/vue'
import '@versakit/vue/style'
</script>

<template>
	<v-input placeholder="Please enter content" />
	<v-button>Click Button</v-button>
</template>

🔍 Online Documentation

Check out our online documentation for more detailed information on component usage, examples, and API references.

💻 Local Development

# Clone the repository
git clone https://github.com/lenran659/versakit-ui.git

# Install dependencies
pnpm install

# Start the development server
pnpm dev

# Build the component library
pnpm build

# Run tests
pnpm test

📄 License

Versakit is licensed under the MIT License.

🔗 Related Links

🤝 Thanks to the Contributors for Their Efforts

lenran659Dream-2022ZHuuOZRMYDYCGSimonmieabiningyyz945947732StriveToLearnCode
yuguaaxiaotanqingjiao

Packages

No packages published

Contributors 11

Languages