shadcn-chart 0.1.2 → 0.2.0
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 -2
- package/package.json +6 -2
package/README.md
CHANGED
|
@@ -18,6 +18,26 @@ Beautiful, customizable chart components built with [shadcn/ui](https://ui.shadc
|
|
|
18
18
|
|
|
19
19
|
## 📦 Installation
|
|
20
20
|
|
|
21
|
+
### Option 1: shadcn CLI (Recommended)
|
|
22
|
+
|
|
23
|
+
Add individual chart components directly to your project:
|
|
24
|
+
|
|
25
|
+
```bash
|
|
26
|
+
# Install a single chart
|
|
27
|
+
npx shadcn add https://mnhtng.github.io/shadcn-chart/r/area-chart.json
|
|
28
|
+
|
|
29
|
+
# Or install all charts
|
|
30
|
+
npx shadcn add https://mnhtng.github.io/shadcn-chart/r/area-chart.json \
|
|
31
|
+
https://mnhtng.github.io/shadcn-chart/r/bar-chart.json \
|
|
32
|
+
https://mnhtng.github.io/shadcn-chart/r/line-chart.json \
|
|
33
|
+
https://mnhtng.github.io/shadcn-chart/r/pie-chart.json \
|
|
34
|
+
https://mnhtng.github.io/shadcn-chart/r/radial-chart.json
|
|
35
|
+
```
|
|
36
|
+
|
|
37
|
+
This copies the component source to your project, allowing full customization.
|
|
38
|
+
|
|
39
|
+
### Option 2: npm Package
|
|
40
|
+
|
|
21
41
|
```bash
|
|
22
42
|
npm install shadcn-chart
|
|
23
43
|
# or
|
|
@@ -29,14 +49,22 @@ pnpm add shadcn-chart
|
|
|
29
49
|
### Peer Dependencies
|
|
30
50
|
|
|
31
51
|
```bash
|
|
32
|
-
npm install react react-dom recharts lucide-react
|
|
52
|
+
npm install react react-dom recharts lucide-react tailwindcss tw-animate-css
|
|
33
53
|
```
|
|
34
54
|
|
|
55
|
+
> **Note:** This package requires **Tailwind CSS v4+** and uses the new CSS-first configuration.
|
|
56
|
+
|
|
35
57
|
## 🚀 Quick Start
|
|
36
58
|
|
|
37
59
|
### 1. Import Styles
|
|
38
60
|
|
|
39
|
-
Add to your root
|
|
61
|
+
Add to your root CSS file (e.g., `index.css` or `globals.css`):
|
|
62
|
+
|
|
63
|
+
```css
|
|
64
|
+
@import "shadcn-chart/styles";
|
|
65
|
+
```
|
|
66
|
+
|
|
67
|
+
Or import in your main entry file:
|
|
40
68
|
|
|
41
69
|
```tsx
|
|
42
70
|
// Next.js: app/layout.tsx or pages/_app.tsx
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "shadcn-chart",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.2.0",
|
|
4
4
|
"description": "Headless and styled chart components built with shadcn/ui conventions",
|
|
5
5
|
"main": "dist/index.js",
|
|
6
6
|
"module": "dist/index.mjs",
|
|
@@ -30,6 +30,7 @@
|
|
|
30
30
|
"dev": "tsup --watch",
|
|
31
31
|
"typecheck": "tsc --noEmit",
|
|
32
32
|
"prepublishOnly": "npm run build",
|
|
33
|
+
"registry:build": "shadcn build",
|
|
33
34
|
"test": "echo \"Error: no test specified\" && exit 1"
|
|
34
35
|
},
|
|
35
36
|
"repository": {
|
|
@@ -62,7 +63,9 @@
|
|
|
62
63
|
"lucide-react": ">=0.400.0",
|
|
63
64
|
"react": ">=18.0.0 || >=19.0.0",
|
|
64
65
|
"react-dom": ">=18.0.0 || >=19.0.0",
|
|
65
|
-
"recharts": ">=2.0.0"
|
|
66
|
+
"recharts": ">=2.0.0",
|
|
67
|
+
"tailwindcss": ">=4.0.0",
|
|
68
|
+
"tw-animate-css": ">=1.0.0"
|
|
66
69
|
},
|
|
67
70
|
"devDependencies": {
|
|
68
71
|
"@tailwindcss/postcss": "^4.1.18",
|
|
@@ -73,6 +76,7 @@
|
|
|
73
76
|
"react": "^19.2.3",
|
|
74
77
|
"react-dom": "^19.2.3",
|
|
75
78
|
"recharts": "^2.15.4",
|
|
79
|
+
"shadcn": "^3.6.3",
|
|
76
80
|
"tailwindcss": "^4.1.18",
|
|
77
81
|
"tsup": "^8.3.5",
|
|
78
82
|
"typescript": "^5.9.3"
|