@tan-ahmed/tan-ui-kit 0.1.7 → 0.1.8
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 +11 -43
- package/package.json +3 -2
package/README.md
CHANGED
|
@@ -31,32 +31,13 @@ npm install @tan-ahmed/tan-ui-kit
|
|
|
31
31
|
|
|
32
32
|
See [INSTALLATION_TROUBLESHOOTING.md](./INSTALLATION_TROUBLESHOOTING.md) for more details.
|
|
33
33
|
|
|
34
|
-
##
|
|
35
|
-
|
|
36
|
-
This package requires the following peer dependencies:
|
|
37
|
-
|
|
38
|
-
- `react`: ^18.0.0 || ^19.0.0
|
|
39
|
-
- `react-dom`: ^18.0.0 || ^19.0.0
|
|
40
|
-
|
|
41
|
-
All other dependencies (base-ui, class-variance-authority, clsx, tailwind-merge) are bundled with the library, so you don't need to install them separately.
|
|
42
|
-
|
|
43
|
-
## Setup
|
|
44
|
-
|
|
45
|
-
### 1. Configure Tailwind CSS v4
|
|
46
|
-
|
|
47
|
-
This package uses **Tailwind CSS v4**. In your main CSS file (e.g., `src/index.css` or `src/main.css`), add:
|
|
48
|
-
|
|
49
|
-
```css
|
|
50
|
-
@import "tailwindcss";
|
|
51
|
-
|
|
52
|
-
/* Your other styles... */
|
|
53
|
-
```
|
|
34
|
+
## Usage
|
|
54
35
|
|
|
55
|
-
|
|
36
|
+
The package includes pre-generated CSS with all utility classes, so **no Tailwind configuration is needed** - it works out of the box!
|
|
56
37
|
|
|
57
|
-
###
|
|
38
|
+
### 1. Import styles in your entry file
|
|
58
39
|
|
|
59
|
-
|
|
40
|
+
Import the styles once in your main entry point file:
|
|
60
41
|
|
|
61
42
|
- **React (Vite/CRA)**: `src/main.tsx` or `src/index.tsx`
|
|
62
43
|
- **Next.js (App Router)**: `app/layout.tsx` or `app/page.tsx`
|
|
@@ -67,19 +48,13 @@ This package uses **Tailwind CSS v4**. In your main CSS file (e.g., `src/index.c
|
|
|
67
48
|
```tsx
|
|
68
49
|
// In your main entry point file (e.g., src/main.tsx, app.tsx, etc.)
|
|
69
50
|
import "@tan-ahmed/tan-ui-kit/styles"; // ⚠️ Import this at the top of your entry file
|
|
70
|
-
import { Button } from "@tan-ahmed/tan-ui-kit";
|
|
71
|
-
|
|
72
|
-
function App() {
|
|
73
|
-
return <Button variant="destructive">Click me</Button>;
|
|
74
|
-
}
|
|
75
51
|
```
|
|
76
52
|
|
|
77
|
-
|
|
53
|
+
### 2. Use components anywhere
|
|
78
54
|
|
|
79
|
-
|
|
55
|
+
After importing the styles, you can use components anywhere in your app:
|
|
80
56
|
|
|
81
57
|
```tsx
|
|
82
|
-
// In your component files, you only need to import the component
|
|
83
58
|
import { Button } from "@tan-ahmed/tan-ui-kit";
|
|
84
59
|
|
|
85
60
|
function MyComponent() {
|
|
@@ -87,21 +62,14 @@ function MyComponent() {
|
|
|
87
62
|
}
|
|
88
63
|
```
|
|
89
64
|
|
|
90
|
-
##
|
|
91
|
-
|
|
92
|
-
```bash
|
|
93
|
-
# Install dependencies
|
|
94
|
-
pnpm install
|
|
65
|
+
## Peer Dependencies
|
|
95
66
|
|
|
96
|
-
|
|
97
|
-
pnpm dev
|
|
67
|
+
This package requires the following peer dependencies:
|
|
98
68
|
|
|
99
|
-
|
|
100
|
-
|
|
69
|
+
- `react`: ^18.0.0 || ^19.0.0
|
|
70
|
+
- `react-dom`: ^18.0.0 || ^19.0.0
|
|
101
71
|
|
|
102
|
-
|
|
103
|
-
pnpm lint
|
|
104
|
-
```
|
|
72
|
+
All other dependencies (base-ui, class-variance-authority, clsx, tailwind-merge) are bundled with the library, so you don't need to install them separately.
|
|
105
73
|
|
|
106
74
|
## License
|
|
107
75
|
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@tan-ahmed/tan-ui-kit",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.8",
|
|
4
4
|
"description": "A React component library built with Tailwind CSS v4 and base-ui components",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"module": "./dist/tan-ui-kit.es.js",
|
|
@@ -17,7 +17,8 @@
|
|
|
17
17
|
}
|
|
18
18
|
},
|
|
19
19
|
"files": [
|
|
20
|
-
"dist"
|
|
20
|
+
"dist",
|
|
21
|
+
"README.md"
|
|
21
22
|
],
|
|
22
23
|
"repository": {
|
|
23
24
|
"type": "git",
|