Skip to content

Commit cc642fc

Browse files
committed
fix: package.json updated
1 parent f9bf18a commit cc642fc

File tree

2 files changed

+111
-0
lines changed

2 files changed

+111
-0
lines changed

README.md

Lines changed: 84 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,84 @@
1+
# Vue Sketchy Components Library
2+
3+
Welcome to the **Codeglyn UI Kit**! This library is designed to help you save time and money by providing simple yet powerful UI components that you can easily integrate into your projects.
4+
5+
## Table of Contents
6+
7+
- Introduction
8+
- Components
9+
- SketchyDiv
10+
- SketchyBtn
11+
- Tabs and Tab
12+
- SketchyHLine
13+
- Installation
14+
- Usage
15+
- Contributing
16+
- License
17+
18+
## Introduction
19+
20+
The Vue Sketchy Components Library allows you to build and design your UI without worrying too much about the details. It's simple but powerful, making it easy to create beautiful interfaces quickly.
21+
22+
## Components
23+
24+
### SketchyDiv
25+
26+
The `SketchyDiv` component is the most basic component in this library. It can be used anywhere just like normal `<div>` elements.
27+
28+
### SketchyBtn
29+
30+
The `SketchyBtn` component is a button that works just like normal buttons. It's easy to use and customize.
31+
32+
### Tabs and Tab
33+
34+
The `Tabs` component is the parent element, and the `Tab` component should be placed inside it. This allows you to create tabbed interfaces effortlessly.
35+
36+
### SketchyHLine
37+
38+
The `SketchyHLine` component is a simple horizontal line separator that you can use to divide sections of your UI.
39+
40+
## Installation
41+
42+
To install the Vue Sketchy Components Library, use npm or yarn:
43+
44+
```bash
45+
npm install codeglynuikit
46+
```
47+
48+
## Usage
49+
```javascript
50+
<template>
51+
<SketchyDiv class="pd" style="margin-bottom: 10px">INsied</SketchyDiv>
52+
<SketchyBtn
53+
label="Click"
54+
style="padding: 10px 5px; font-size: 18px; margin-bottom: 100px"
55+
/>
56+
<SketchyHLine />
57+
<div>NEXT</div>
58+
<br />
59+
<SketchyTabs v-model="tab">
60+
<SketchyTab name="focuz" label="Focuz Time" />
61+
<SketchyTab name="short" label="Short Break" />
62+
<SketchyTab name="long" label="Long Break" />
63+
</SketchyTabs>
64+
</template>
65+
66+
<script setup>
67+
import { SketchyDiv, SketchyBtn, SketchyHLine, SketchyTab, SketchyTabs } from "codeglynuikit";
68+
import { ref } from "vue";
69+
70+
const tab = ref("focuz")
71+
72+
</script>
73+
74+
<style>
75+
.pd {
76+
padding: 80px;
77+
}
78+
</style>
79+
```
80+
## Contributing
81+
We welcome contributions to the Vue Sketchy Components Library! If you have any ideas, suggestions, or bug reports, please open an issue or submit a pull request on our GitHub repository or you can also contact me through my email. I would love to hear from me.
82+
83+
## Licence
84+
This project is licensed under the MIT License. See the LICENSE file for more details.

lib/package.json

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,33 @@
1313
"require": "./dist/codeglynuikit.cjs"
1414
}
1515
},
16+
"repository": {
17+
"type": "git",
18+
"url": "git+https://github.com/quasarframework/sketchycodeglyn.git"
19+
},
20+
"keywords": [
21+
"vuejs",
22+
"vue",
23+
"components",
24+
"js",
25+
"phone",
26+
"tablet",
27+
"desktop",
28+
"spa",
29+
"pwa",
30+
"website",
31+
"library"
32+
],
33+
"author": {
34+
"name": "Mohammad Rashid Stanikzai",
35+
"email": "mohammadrashidstanikzai@gmail.com",
36+
"url": "https://codeglyn.com"
37+
},
38+
"license": "MIT",
39+
"bugs": {
40+
"url": "https://github.com/brimmann/sketchycodeglyn/issues"
41+
},
42+
"homepage": "https://github.com/quasarframework/sketchycodeglyn",
1643
"scripts": {
1744
"dev": "vite",
1845
"build": "vite build",

0 commit comments

Comments
 (0)