@nikitph/flux-ui 0.3.1 → 0.3.3
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 +8 -8
- package/dist/index.js +382 -148
- package/dist/index.js.map +3 -3
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
<p align="center">
|
|
2
|
-
<img src="https://img.shields.io/badge/FLUX_UI-v0.1
|
|
2
|
+
<img src="https://img.shields.io/badge/FLUX_UI-v0.3.1-0d9488?style=for-the-badge&labelColor=09090b" alt="Version" />
|
|
3
3
|
<img src="https://img.shields.io/badge/React-19+-61dafb?style=for-the-badge&logo=react&labelColor=09090b" alt="React 19+" />
|
|
4
4
|
<img src="https://img.shields.io/badge/TypeScript-5.9-3178c6?style=for-the-badge&logo=typescript&labelColor=09090b" alt="TypeScript" />
|
|
5
5
|
<img src="https://img.shields.io/badge/Tailwind_CSS-v4-06b6d4?style=for-the-badge&logo=tailwindcss&labelColor=09090b" alt="Tailwind v4" />
|
|
@@ -44,7 +44,7 @@ FLUX UI provides that language through 40 motion primitives, a unified physics e
|
|
|
44
44
|
### Installation
|
|
45
45
|
|
|
46
46
|
```bash
|
|
47
|
-
npm install flux-ui
|
|
47
|
+
npm install @nikitph/flux-ui
|
|
48
48
|
```
|
|
49
49
|
|
|
50
50
|
**Peer dependencies:** `react >= 19`, `react-dom >= 19`, `motion >= 12`, `tailwindcss >= 4`
|
|
@@ -52,11 +52,11 @@ npm install flux-ui
|
|
|
52
52
|
### Wrap your app
|
|
53
53
|
|
|
54
54
|
```tsx
|
|
55
|
-
import { FluxProvider } from "flux-ui";
|
|
55
|
+
import { FluxProvider } from "@nikitph/flux-ui";
|
|
56
56
|
|
|
57
57
|
function App() {
|
|
58
58
|
return (
|
|
59
|
-
<FluxProvider
|
|
59
|
+
<FluxProvider motionLevel="full">
|
|
60
60
|
{/* your app */}
|
|
61
61
|
</FluxProvider>
|
|
62
62
|
);
|
|
@@ -66,15 +66,15 @@ function App() {
|
|
|
66
66
|
### Use a primitive
|
|
67
67
|
|
|
68
68
|
```tsx
|
|
69
|
-
import { Reveal, Magnetic, HoverScale } from "flux-ui";
|
|
69
|
+
import { Reveal, Magnetic, HoverScale } from "@nikitph/flux-ui";
|
|
70
70
|
|
|
71
71
|
function Hero() {
|
|
72
72
|
return (
|
|
73
|
-
<Reveal
|
|
73
|
+
<Reveal from="below">
|
|
74
74
|
<h1>Welcome</h1>
|
|
75
75
|
<p>Motion is not a feature. It is a language.</p>
|
|
76
76
|
<Magnetic strength={0.3}>
|
|
77
|
-
<HoverScale
|
|
77
|
+
<HoverScale hoverScale={1.05}>
|
|
78
78
|
<button className="px-6 py-3 bg-teal-500 text-white rounded-xl">
|
|
79
79
|
Get Started
|
|
80
80
|
</button>
|
|
@@ -182,7 +182,7 @@ Every spring animation is driven by named physics presets — no magic numbers.
|
|
|
182
182
|
Override per-primitive:
|
|
183
183
|
|
|
184
184
|
```tsx
|
|
185
|
-
<Reveal physics="dramatic"
|
|
185
|
+
<Reveal physics="dramatic" from="below">
|
|
186
186
|
<h1>Grand Entrance</h1>
|
|
187
187
|
</Reveal>
|
|
188
188
|
```
|