@fragment-build/ui 3.0.4 → 3.0.9
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 +6 -7
- package/package.json +8 -6
package/README.md
CHANGED
|
@@ -58,9 +58,9 @@ Fragment UI is a design system and React component library which provides alread
|
|
|
58
58
|
1. Setup Tailwind CSS
|
|
59
59
|
[Installation Guide](https://tailwindcss.com/docs/installation)
|
|
60
60
|
|
|
61
|
-
2. Install Fragment UI
|
|
61
|
+
2. Install Fragment UI and its peer dependencies
|
|
62
62
|
```bash
|
|
63
|
-
npm install -S @fragment-build/ui
|
|
63
|
+
npm install -S @fragment-build/ui @heroui/react @heroui/styles
|
|
64
64
|
```
|
|
65
65
|
|
|
66
66
|
As a next step you must configure the library the way you want to. See [**Configuration**](#🔧-configuration) section.
|
|
@@ -69,24 +69,23 @@ All done. Enjoy 🎉
|
|
|
69
69
|
|
|
70
70
|
## 🔧 Configuration
|
|
71
71
|
|
|
72
|
+
Import the HeroUI styles and Fragment UI styles in your global CSS file:
|
|
73
|
+
|
|
72
74
|
```ts
|
|
73
75
|
// src/main.css
|
|
74
76
|
|
|
75
77
|
@import 'tailwindcss';
|
|
76
|
-
@import "@heroui/styles";
|
|
78
|
+
@import "@heroui/styles";
|
|
77
79
|
@import "@fragment-build/ui";
|
|
78
80
|
```
|
|
79
81
|
|
|
80
|
-
|
|
82
|
+
Add `FragmentUIProvider` at the root of your application:
|
|
81
83
|
|
|
82
84
|
```tsx
|
|
83
85
|
import React from 'react';
|
|
84
|
-
|
|
85
|
-
// 1. import `FragmentUIProvider` component
|
|
86
86
|
import { FragmentUIProvider } from '@fragment-build/ui';
|
|
87
87
|
|
|
88
88
|
function App() {
|
|
89
|
-
// 2. Wrap FragmentUIProvider at the root of your app
|
|
90
89
|
return (
|
|
91
90
|
<FragmentUIProvider>
|
|
92
91
|
<YourApplication />
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@fragment-build/ui",
|
|
3
|
-
"version": "3.0.
|
|
3
|
+
"version": "3.0.9",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"engines": {
|
|
6
6
|
"node": ">=22"
|
|
@@ -13,21 +13,23 @@
|
|
|
13
13
|
},
|
|
14
14
|
"license": "Apache-2.0",
|
|
15
15
|
"peerDependencies": {
|
|
16
|
-
"
|
|
16
|
+
"@heroui/react": ">=3.0.0",
|
|
17
|
+
"@heroui/styles": ">=3.0.0",
|
|
18
|
+
"react": ">=19.0.0",
|
|
19
|
+
"react-dom": ">=19.0.0",
|
|
20
|
+
"tailwindcss": ">=4.0.0"
|
|
17
21
|
},
|
|
18
22
|
"dependencies": {
|
|
19
|
-
"@heroui/react": "3.0.5",
|
|
20
|
-
"@heroui/styles": "3.0.5",
|
|
21
23
|
"@tabler/icons-react": "3.44.0",
|
|
22
24
|
"apexcharts": "5.12.0",
|
|
23
|
-
"i": "0.3.7",
|
|
24
25
|
"next-themes": "0.4.6",
|
|
25
|
-
"npm": "11.14.1",
|
|
26
26
|
"react-apexcharts": "2.1.0",
|
|
27
27
|
"tailwind-variants": "^3.2.2",
|
|
28
28
|
"tailwindcss": "4.3.0"
|
|
29
29
|
},
|
|
30
30
|
"devDependencies": {
|
|
31
|
+
"@heroui/react": "3.0.5",
|
|
32
|
+
"@heroui/styles": "3.0.5",
|
|
31
33
|
"@storybook/addon-a11y": "10.4.0",
|
|
32
34
|
"@storybook/addon-docs": "10.4.0",
|
|
33
35
|
"@storybook/addon-links": "10.4.0",
|