@velkymx/vibeui 0.1.0 → 0.1.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +71 -3
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,5 +1,73 @@
|
|
|
1
|
-
#
|
|
1
|
+
# VibeUI
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
A modern Vue 3 UI component library built with Bootstrap 5, designed to simplify your development and enhance your application's aesthetic.
|
|
4
4
|
|
|
5
|
-
|
|
5
|
+
## Features
|
|
6
|
+
|
|
7
|
+
* Vue 3 Composition API: Built from the ground up using modern, reactive Vue.js practices.
|
|
8
|
+
* Bootstrap 5 Integration: Directly utilizes Bootstrap 5 CSS for consistency, without additional styling overhead.
|
|
9
|
+
* Lightweight & Modular: Import only what you need, keeping your bundle small.
|
|
10
|
+
* TypeScript Support: Fully typed components for a great developer experience.
|
|
11
|
+
* Accessibility First: Components crafted with accessibility and usability in mind.
|
|
12
|
+
|
|
13
|
+
## Installation
|
|
14
|
+
|
|
15
|
+
Install via npm:
|
|
16
|
+
|
|
17
|
+
```bash
|
|
18
|
+
npm install @velkymx/vibeui
|
|
19
|
+
```
|
|
20
|
+
|
|
21
|
+
Make sure you also install Bootstrap:
|
|
22
|
+
|
|
23
|
+
```bash
|
|
24
|
+
npm install bootstrap
|
|
25
|
+
```
|
|
26
|
+
|
|
27
|
+
## Quick Setup
|
|
28
|
+
|
|
29
|
+
In your Vue app's entry file (`main.ts` or `main.js`):
|
|
30
|
+
|
|
31
|
+
```typescript
|
|
32
|
+
import { createApp } from 'vue';
|
|
33
|
+
import App from './App.vue';
|
|
34
|
+
import VibeUI from '@velkymx/vibeui';
|
|
35
|
+
import 'bootstrap/dist/css/bootstrap.min.css';
|
|
36
|
+
|
|
37
|
+
createApp(App).use(VibeUI).mount('#app');
|
|
38
|
+
```
|
|
39
|
+
|
|
40
|
+
## Basic Usage
|
|
41
|
+
|
|
42
|
+
Here's a quick example of the `VibeAlert` component:
|
|
43
|
+
|
|
44
|
+
```vue
|
|
45
|
+
<script setup lang="ts">
|
|
46
|
+
import { ref } from 'vue';
|
|
47
|
+
|
|
48
|
+
const showAlert = ref(true);
|
|
49
|
+
</script>
|
|
50
|
+
|
|
51
|
+
<template>
|
|
52
|
+
<VibeAlert variant="success" dismissable v-model="showAlert">
|
|
53
|
+
Welcome to VibeUI!
|
|
54
|
+
</VibeAlert>
|
|
55
|
+
</template>
|
|
56
|
+
```
|
|
57
|
+
|
|
58
|
+
## Components
|
|
59
|
+
|
|
60
|
+
* VibeAlert
|
|
61
|
+
* More components coming soon.
|
|
62
|
+
|
|
63
|
+
## Contributing
|
|
64
|
+
|
|
65
|
+
Pull requests and contributions are very welcome! Please fork the repo, create a branch for your feature, and submit a PR.
|
|
66
|
+
|
|
67
|
+
## License
|
|
68
|
+
|
|
69
|
+
[MIT License](LICENSE)
|
|
70
|
+
|
|
71
|
+
## TechnoSorcery.com
|
|
72
|
+
|
|
73
|
+
Built with ✨ by [TechnoSorcery.com](https://technosorcery.com)
|