shadcn-packaged 2025.1.19 → 2025.1.20
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 +30 -15
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
# Shadcn Packaged
|
|
2
2
|
|
|
3
|
-
This is
|
|
3
|
+
This is an npm package that exports all [shadcn/ui](https://ui.shadcn.com/) components without the need for a CLI, designed for ease of use.
|
|
4
4
|
|
|
5
|
-
It simply
|
|
5
|
+
It simply provides all useful files along with type declarations.
|
|
6
6
|
|
|
7
7
|
## Pre work
|
|
8
8
|
|
|
@@ -24,14 +24,14 @@ tailwind.config.js
|
|
|
24
24
|
const config = {
|
|
25
25
|
content: [
|
|
26
26
|
"...",
|
|
27
|
-
"./node_modules/shadcn-packaged/**/*.{jsx,js,ts,tsx}"
|
|
27
|
+
"./node_modules/shadcn-packaged/**/*.{jsx,js,ts,tsx}"
|
|
28
28
|
],
|
|
29
|
-
presets: [require("shadcn-packaged/tailwind.config")]
|
|
29
|
+
presets: [require("shadcn-packaged/tailwind.config")]
|
|
30
30
|
};
|
|
31
31
|
export default config;
|
|
32
32
|
```
|
|
33
33
|
|
|
34
|
-
next.config.js
|
|
34
|
+
For nextjs user, next.config.js
|
|
35
35
|
|
|
36
36
|
```javascript
|
|
37
37
|
const nextConfig = {
|
|
@@ -42,7 +42,7 @@ const nextConfig = {
|
|
|
42
42
|
export default nextConfig;
|
|
43
43
|
```
|
|
44
44
|
|
|
45
|
-
vite.config.js
|
|
45
|
+
For vite user, vite.config.js
|
|
46
46
|
|
|
47
47
|
```javascript
|
|
48
48
|
export default defineConfig({
|
|
@@ -54,15 +54,9 @@ export default defineConfig({
|
|
|
54
54
|
|
|
55
55
|
## Usage
|
|
56
56
|
|
|
57
|
-
Package Struct
|
|
58
|
-
|
|
59
|
-
- shadcn-packaged/ui/*: components
|
|
60
|
-
- shadcn-packaged/hooks/*: hooks
|
|
61
|
-
- shadcn-packaged/lib/utils: utils
|
|
62
|
-
|
|
63
57
|
Import style
|
|
64
58
|
|
|
65
|
-
> If you have a fully customized style in
|
|
59
|
+
> If you have a fully customized style in global entry css file, you don't need to import it
|
|
66
60
|
|
|
67
61
|
```javascript
|
|
68
62
|
import "shadcn-packaged/index.css";
|
|
@@ -76,17 +70,38 @@ import { cn } from 'shadcn-packaged/lib/utils';
|
|
|
76
70
|
import { useToast } from 'shadcn/hooks/use-toast';
|
|
77
71
|
```
|
|
78
72
|
|
|
73
|
+
Package Struct
|
|
74
|
+
|
|
75
|
+
- shadcn-packaged/ui/*: components
|
|
76
|
+
- shadcn-packaged/hooks/*: hooks
|
|
77
|
+
- shadcn-packaged/lib/utils: utils
|
|
78
|
+
|
|
79
79
|
## Type declaration and IDE auto import
|
|
80
80
|
|
|
81
|
-
This package support vscode auto import
|
|
81
|
+
This package support vscode auto import.
|
|
82
|
+
|
|
83
|
+
If the automatic code import does not take effect, please try the following methods.
|
|
84
|
+
|
|
85
|
+
1. add below code to project main.tsx or root layout.tsx in NextJS.
|
|
82
86
|
|
|
83
87
|
```typescript
|
|
84
88
|
/// <reference types="shadcn-packaged" />
|
|
85
89
|
```
|
|
86
90
|
|
|
91
|
+
2. change tsconig.json
|
|
92
|
+
|
|
93
|
+
```json
|
|
94
|
+
{
|
|
95
|
+
"compilerOptions": {
|
|
96
|
+
// append to exist types
|
|
97
|
+
"types": ["...", "./node_modules/shadcn-packaged/**/*.ts"]
|
|
98
|
+
}
|
|
99
|
+
}
|
|
100
|
+
```
|
|
101
|
+
|
|
87
102
|
## Custom Theme
|
|
88
103
|
|
|
89
|
-
index.css | global.css (the
|
|
104
|
+
index.css | global.css (the global entry css file)
|
|
90
105
|
|
|
91
106
|
```css
|
|
92
107
|
@tailwind base;
|