gwan-design-system 0.1.1 โ 0.1.2
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 +79 -23
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,39 +1,79 @@
|
|
|
1
|
-
|
|
1
|
+
# ๐ Gwan Design System โ The Ultimate UI Library for Next.js โก
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
|
|
4
|
+
|
|
5
|
+
|
|
4
6
|
|
|
5
|
-
|
|
7
|
+
> ๐งช Reusable, composable, and beautifully crafted UI components built with ๐ Next.js โ supercharge your apps in minutes!
|
|
6
8
|
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
yarn dev
|
|
11
|
-
# or
|
|
12
|
-
pnpm dev
|
|
13
|
-
# or
|
|
14
|
-
bun dev
|
|
15
|
-
```
|
|
9
|
+
---
|
|
10
|
+
|
|
11
|
+
## ๐ฆ What is Gwan Design System?
|
|
16
12
|
|
|
17
|
-
|
|
13
|
+
**Gwan Design System** is a plug-and-play React component library tailored specifically for **Next.js** projects. Whether you're building a SaaS dashboard, marketing site, or internal tool โ we've got you covered.
|
|
18
14
|
|
|
19
|
-
|
|
15
|
+
- โก Built with Next.js App Router
|
|
16
|
+
- ๐จ Pre-styled, customizable components
|
|
17
|
+
- ๐งฑ Fully typed with TypeScript
|
|
18
|
+
- ๐
Styled with Tailwind CSS
|
|
19
|
+
- ๐งช Accessible and production-ready
|
|
20
20
|
|
|
21
|
-
|
|
21
|
+
## ๐ Getting Started
|
|
22
22
|
|
|
23
|
-
|
|
23
|
+
### ๐ฅ Installation
|
|
24
24
|
|
|
25
|
-
|
|
25
|
+
Install via npm: ```npm install gwan-design-system```
|
|
26
26
|
|
|
27
|
-
|
|
28
|
-
- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
|
|
27
|
+
or with Yarn: ```yarn add gwan-design-system```
|
|
29
28
|
|
|
30
|
-
|
|
29
|
+
### ๐งฐ Usage
|
|
31
30
|
|
|
32
|
-
|
|
31
|
+
Import any component and use it right away!
|
|
33
32
|
|
|
34
|
-
|
|
33
|
+
```
|
|
34
|
+
"use client";
|
|
35
|
+
|
|
36
|
+
import { Button, Card, Modal } from "gwan-design-system";
|
|
37
|
+
|
|
38
|
+
export default function HomePage() {
|
|
39
|
+
return (
|
|
40
|
+
<main className="p-10">
|
|
41
|
+
<h1 className="text-2xl font-bold mb-6">๐ Welcome to Gwan UI</h1>
|
|
42
|
+
<Card>
|
|
43
|
+
<h2 className="text-xl">Reusable UI</h2>
|
|
44
|
+
<p>Start using ready-made components!</p>
|
|
45
|
+
<Button onClick={() => alert("๐ Clicked!")}>Click Me</Button>
|
|
46
|
+
</Card>
|
|
47
|
+
</main>
|
|
48
|
+
);
|
|
49
|
+
}
|
|
50
|
+
```
|
|
51
|
+
### ๐งฑ Components
|
|
52
|
+
|
|
53
|
+
- ๐ Buttons
|
|
54
|
+
- ๐ฃ Modals
|
|
55
|
+
- ๐งพ Tables
|
|
56
|
+
- โ
Checkboxes
|
|
57
|
+
- โ๏ธ Radio Buttons
|
|
58
|
+
- ๐ฅ File Uploaders
|
|
59
|
+
- ๐ฆ Cards
|
|
60
|
+
- ๐ Dropdowns
|
|
61
|
+
- ๐ Pagination
|
|
62
|
+
- ๐ Tags
|
|
63
|
+
- ๐ง States (Empty, Error, Loading, etc.)
|
|
64
|
+
- ๐ Snackbars
|
|
65
|
+
- โจ Tooltips
|
|
66
|
+
- ๐งญ Navigation Bars
|
|
67
|
+
- ...and more!
|
|
68
|
+
> Want to see all available components? Visit ๐ [gwan-design-system](https://gwan-design-system.vercel.app) official website.
|
|
69
|
+
|
|
70
|
+
### ๐ Customization
|
|
71
|
+
|
|
72
|
+
All components are styled using Tailwind CSS. You can easily override styles using your own Tailwind theme or utility classes.
|
|
35
73
|
|
|
36
|
-
|
|
74
|
+
```
|
|
75
|
+
<Button className="bg-purple-600 hover:bg-purple-700 text-white" />
|
|
76
|
+
```
|
|
37
77
|
|
|
38
78
|
## ๐ค Contributing
|
|
39
79
|
|
|
@@ -52,3 +92,19 @@ Fork this repository
|
|
|
52
92
|
- Open a pull request with a clear description
|
|
53
93
|
|
|
54
94
|
Thanks for helping improve the project! ๐
|
|
95
|
+
|
|
96
|
+
## โจ Show Some Love
|
|
97
|
+
|
|
98
|
+
If you like this library:
|
|
99
|
+
|
|
100
|
+
- โญ Star this repo on GitHub
|
|
101
|
+
- ๐งโ๐ป Use it in your projects
|
|
102
|
+
- ๐ Submit bugs or improvements
|
|
103
|
+
- ๐ฅณ Share with the community
|
|
104
|
+
|
|
105
|
+
## ๐ฆ Coming Soon
|
|
106
|
+
|
|
107
|
+
- ๐ Dark mode support
|
|
108
|
+
- ๐จ Theming system
|
|
109
|
+
- ๐ Storybook documentation
|
|
110
|
+
- ๐งฉ Component playground
|