aura-ui-library 1.0.39 → 1.0.40
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 +77 -43
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -21,6 +21,7 @@ npm install aura-ui-library
|
|
|
21
21
|
```
|
|
22
22
|
|
|
23
23
|
### Peer Dependencies
|
|
24
|
+
|
|
24
25
|
Ensure you have the following installed in your React project:
|
|
25
26
|
|
|
26
27
|
```bash
|
|
@@ -33,37 +34,38 @@ npm install react react-dom gsap framer-motion react-icons react-router-dom
|
|
|
33
34
|
|
|
34
35
|
Aura UI components are built to be flexible. Every component supports a `theme`, `accentColor`, and a `style` block.
|
|
35
36
|
|
|
36
|
-
| Component
|
|
37
|
-
|
|
|
38
|
-
| **`AuraLogin`**
|
|
39
|
-
| **`AuraRegister`**
|
|
40
|
-
| **`Hero`**
|
|
41
|
-
| **`Navbar`**
|
|
42
|
-
| **`Button`**
|
|
43
|
-
| **`Grid`**
|
|
44
|
-
| **`ProjectShowCase`**
|
|
45
|
-
| **`Testimonials`**
|
|
46
|
-
| **`Canvas`**
|
|
47
|
-
| **`Carousel`**
|
|
48
|
-
| **`Spotlight`**
|
|
49
|
-
| **`ParallaxImage`**
|
|
50
|
-
| **`TextWriting`**
|
|
51
|
-
| **`SideBar`**
|
|
52
|
-
| **`Skills`**
|
|
53
|
-
| **`PinterestGrid`**
|
|
54
|
-
| **`TextImage`**
|
|
55
|
-
| **`HorizontalScroll`** | Lateral gallery sections
|
|
56
|
-
| **`SVGPathAnimation
|
|
57
|
-
| **`CanvasReveal`**
|
|
58
|
-
| **`SvgMaskEffect
|
|
59
|
-
| **`MacAnimation`**
|
|
60
|
-
| **`SlideLogo`**
|
|
37
|
+
| Component | Purpose | Key Props |
|
|
38
|
+
| :--------------------- | :--------------------------------- | :------------------------------------------------------------------------------ |
|
|
39
|
+
| **`AuraLogin`** | Premium interactive auth screens | `title`, `subtitle`, `theme`, `accentColor`, `onSubmit` |
|
|
40
|
+
| **`AuraRegister`** | Premium interactive registration | `title`, `subtitle`, `theme`, `accentColor`, `onSubmit` |
|
|
41
|
+
| **`Hero`** | High-impact landing sections | `title`, `subtitle`, `image`, `layout` ("split"/"overlay"), `align` |
|
|
42
|
+
| **`Navbar`** | Cinematic navigation bars | `logoText`, `links` (supports dropdowns), `theme`, `accentColor` |
|
|
43
|
+
| **`Button`** | Magnetic interactive triggers | `children`, `variant` ("primary"/"secondary"/"outline"/"glass"), `size`, `icon` |
|
|
44
|
+
| **`Grid`** | Bento-style layout system | `items`, `columns`, `gap`, `theme` |
|
|
45
|
+
| **`ProjectShowCase`** | Vertical timeline galleries | `projects`, `accentColor`, `theme` |
|
|
46
|
+
| **`Testimonials`** | Premium feedback sections | `items`, `theme`, `accentColor` |
|
|
47
|
+
| **`Canvas`** | Interactive 3D particle mesh | `particleCount`, `interactive`, `theme`, `accentColor` |
|
|
48
|
+
| **`Carousel`** | Fluid content sliders | `items`, `theme`, `animationDuration` |
|
|
49
|
+
| **`Spotlight`** | Interactive reveal cards | `title`, `description`, `image`, `theme` |
|
|
50
|
+
| **`ParallaxImage`** | Hero sections with scroll depth | `title`, `subtitle`, `image`, `height` |
|
|
51
|
+
| **`TextWriting`** | Scrambling/Typing animations | `texts`, `speed`, `delay`, `accentColor` |
|
|
52
|
+
| **`SideBar`** | Interactive side navigation | `links`, `logo`, `collapsedWidth`, `theme` |
|
|
53
|
+
| **`Skills`** | Data-driven progress reveals | `skills`, `accentColor`, `theme` |
|
|
54
|
+
| **`PinterestGrid`** | Modern masonry layouts | `items`, `columns`, `gap`, `theme` |
|
|
55
|
+
| **`TextImage`** | Interwoven text and image segments | `segments`, `fontSize`, `theme` |
|
|
56
|
+
| **`HorizontalScroll`** | Lateral gallery sections | `items`, `accentColor`, `theme` |
|
|
57
|
+
| **`SVGPathAnimation`** | Path-drawing on scroll | `path`, `title`, `subtitle`, `theme` |
|
|
58
|
+
| **`CanvasReveal`** | Expanding dot grid interaction | `dotColor`, `dotSize`, `hoverRadius`, `hoverMultiplier` |
|
|
59
|
+
| **`SvgMaskEffect`** | X-ray hover reveal masks | `baseContent`, `revealContent`, `maskSize` |
|
|
60
|
+
| **`MacAnimation`** | Interactive 3D Apple lid open | `content`, `theme` |
|
|
61
|
+
| **`SlideLogo`** | Infinite wave-animated logo grids | `logos`, `interval` |
|
|
61
62
|
|
|
62
63
|
---
|
|
63
64
|
|
|
64
65
|
## 🎨 Global Customization
|
|
65
66
|
|
|
66
67
|
### 1. Theme Support
|
|
68
|
+
|
|
67
69
|
Toggle between "dark" and "light" moods instantly. Components automatically adjust backgrounds, text contrast, and glassmorphism levels.
|
|
68
70
|
|
|
69
71
|
```jsx
|
|
@@ -72,18 +74,20 @@ Toggle between "dark" and "light" moods instantly. Components automatically adju
|
|
|
72
74
|
```
|
|
73
75
|
|
|
74
76
|
### 2. Style Passthrough
|
|
77
|
+
|
|
75
78
|
Inject custom CSS directly into any component's root element. Perfect for margin adjustments, z-index control, or custom background overrides.
|
|
76
79
|
|
|
77
80
|
```jsx
|
|
78
|
-
<Grid
|
|
79
|
-
style={{
|
|
80
|
-
marginTop: "100px",
|
|
81
|
-
border: "2px solid #ef4444"
|
|
82
|
-
}}
|
|
81
|
+
<Grid
|
|
82
|
+
style={{
|
|
83
|
+
marginTop: "100px",
|
|
84
|
+
border: "2px solid #ef4444",
|
|
85
|
+
}}
|
|
83
86
|
/>
|
|
84
87
|
```
|
|
85
88
|
|
|
86
89
|
### 3. Accent Color System
|
|
90
|
+
|
|
87
91
|
Control the "DNA" of the component. The `accentColor` prop influences icons, highlights, shadows, and hover states.
|
|
88
92
|
|
|
89
93
|
```jsx
|
|
@@ -100,23 +104,27 @@ import { Navbar, Hero, Grid, Button } from "aura-ui-library";
|
|
|
100
104
|
|
|
101
105
|
const navLinks = [
|
|
102
106
|
{ label: "Design", path: "/design" },
|
|
103
|
-
{
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
+
{
|
|
108
|
+
label: "Systems",
|
|
109
|
+
path: "/systems",
|
|
110
|
+
children: [
|
|
111
|
+
{ label: "React", path: "/react" },
|
|
112
|
+
{ label: "GSAP", path: "/gsap" },
|
|
113
|
+
],
|
|
114
|
+
},
|
|
107
115
|
];
|
|
108
116
|
|
|
109
117
|
export default function App() {
|
|
110
118
|
return (
|
|
111
119
|
<div style={{ backgroundColor: "#000" }}>
|
|
112
|
-
<Navbar
|
|
113
|
-
logoText="AURA"
|
|
114
|
-
links={navLinks}
|
|
115
|
-
theme="dark"
|
|
120
|
+
<Navbar
|
|
121
|
+
logoText="AURA"
|
|
122
|
+
links={navLinks}
|
|
123
|
+
theme="dark"
|
|
116
124
|
accentColor="#6366f1"
|
|
117
125
|
/>
|
|
118
|
-
|
|
119
|
-
<Hero
|
|
126
|
+
|
|
127
|
+
<Hero
|
|
120
128
|
title="Cinematic Interfaces"
|
|
121
129
|
subtitle="The world's most sophisticated React component library for high-end luxury brands."
|
|
122
130
|
layout="split"
|
|
@@ -128,9 +136,21 @@ export default function App() {
|
|
|
128
136
|
theme="dark"
|
|
129
137
|
columns="repeat(3, 1fr)"
|
|
130
138
|
items={[
|
|
131
|
-
{
|
|
132
|
-
|
|
133
|
-
|
|
139
|
+
{
|
|
140
|
+
title: "Fluidity",
|
|
141
|
+
description: "120 FPS Rendering",
|
|
142
|
+
color: "#f43f5e",
|
|
143
|
+
},
|
|
144
|
+
{
|
|
145
|
+
title: "Elegance",
|
|
146
|
+
description: "Quiet Luxury Aesthetic",
|
|
147
|
+
color: "#fb7185",
|
|
148
|
+
},
|
|
149
|
+
{
|
|
150
|
+
title: "Precision",
|
|
151
|
+
description: "Pixel Perfect Design",
|
|
152
|
+
color: "#6366f1",
|
|
153
|
+
},
|
|
134
154
|
]}
|
|
135
155
|
/>
|
|
136
156
|
</div>
|
|
@@ -141,11 +161,25 @@ export default function App() {
|
|
|
141
161
|
---
|
|
142
162
|
|
|
143
163
|
## 📈 Performance Tip
|
|
164
|
+
|
|
144
165
|
Aura UI uses `will-change` and hardware-accelerated transforms. To keep your site running at maximum speed:
|
|
166
|
+
|
|
145
167
|
- Avoid nesting large `Canvas` or `Hero` components inside complex containers.
|
|
146
168
|
- Use the `theme` prop instead of manually overriding every color via `style`.
|
|
147
169
|
|
|
148
170
|
---
|
|
149
171
|
|
|
172
|
+
## 🎬 Component Demo
|
|
173
|
+
|
|
174
|
+
See how Aura UI components render and animate in a live test app:
|
|
175
|
+
|
|
176
|
+
<video src="https://ik.imagekit.io/ldsj0fjbmx/test-app%20(1).mp4" controls width="100%"></video>
|
|
177
|
+
|
|
178
|
+
If your Markdown viewer does not support embedded video, use this direct link:
|
|
179
|
+
[Watch the component demo video](<https://ik.imagekit.io/ldsj0fjbmx/test-app%20(1).mp4>)
|
|
180
|
+
|
|
181
|
+
---
|
|
182
|
+
|
|
150
183
|
## 📜 License
|
|
184
|
+
|
|
151
185
|
ISC © [RitikWeb22](https://github.com/RitikWeb22)
|