bynana-ui 2.1.0 → 2.1.1

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.
Files changed (2) hide show
  1. package/README.md +186 -65
  2. package/package.json +1 -1
package/README.md CHANGED
@@ -1,23 +1,59 @@
1
1
  # Bynana UI
2
2
 
3
- > 200+ Beautiful React UI components built with Tailwind CSS and Framer Motion
3
+ > 180+ Beautiful React UI components built with Tailwind CSS and Framer Motion
4
4
 
5
5
  [![npm version](https://badge.fury.io/js/bynana-ui.svg)](https://www.npmjs.com/package/bynana-ui)
6
6
  [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
7
7
 
8
8
  ## Installation
9
9
 
10
+ ### npm
10
11
  ```bash
11
- npm install bynana-ui framer-motion
12
- # or
13
- yarn add bynana-ui framer-motion
14
- # or
15
- pnpm add bynana-ui framer-motion
12
+ npm install bynana-ui
13
+ ```
14
+
15
+ ### yarn
16
+ ```bash
17
+ yarn add bynana-ui
18
+ ```
19
+
20
+ ### pnpm
21
+ ```bash
22
+ pnpm add bynana-ui
23
+ ```
24
+
25
+ ### bun
26
+ ```bash
27
+ bun add bynana-ui
28
+ ```
29
+
30
+ ## Peer Dependencies
31
+
32
+ Most components require these peer dependencies:
33
+
34
+ ### npm
35
+ ```bash
36
+ npm install framer-motion lucide-react clsx tailwind-merge
37
+ ```
38
+
39
+ ### yarn
40
+ ```bash
41
+ yarn add framer-motion lucide-react clsx tailwind-merge
42
+ ```
43
+
44
+ ### pnpm
45
+ ```bash
46
+ pnpm add framer-motion lucide-react clsx tailwind-merge
47
+ ```
48
+
49
+ ### bun
50
+ ```bash
51
+ bun add framer-motion lucide-react clsx tailwind-merge
16
52
  ```
17
53
 
18
54
  ## Quick Start
19
55
 
20
- Import all components from the main package:
56
+ Import components from the main package:
21
57
 
22
58
  ```tsx
23
59
  import { ShineButton, GradientText, GlassCard } from "bynana-ui";
@@ -31,88 +67,173 @@ import { GradientText } from "bynana-ui/gradient-text";
31
67
  import { GlassCard } from "bynana-ui/glass-card";
32
68
  ```
33
69
 
34
- ## Components
70
+ ## Components with Additional Dependencies
35
71
 
36
- ### Buttons
72
+ Some components require additional packages. Install them as needed:
37
73
 
38
- | Component | Import |
39
- |-----------|--------|
40
- | ShineButton | `bynana-ui/shine-button` |
41
- | RippleButton | `bynana-ui/ripple-button` |
42
- | MagneticButton | `bynana-ui/magnetic-button` |
43
- | BounceButton | `bynana-ui/bounce-button` |
44
- | GlowButton | `bynana-ui/glow-button` |
45
- | PulseButton | `bynana-ui/pulse-button` |
74
+ ### PixelTransition (GSAP)
46
75
 
47
- ### Text Effects
76
+ #### npm
77
+ ```bash
78
+ npm install gsap
79
+ ```
48
80
 
49
- | Component | Import |
50
- |-----------|--------|
51
- | GradientText | `bynana-ui/gradient-text` |
52
- | ShimmerText | `bynana-ui/shimmer-text` |
53
- | GlitchText | `bynana-ui/glitch-text` |
54
- | BounceText | `bynana-ui/bounce-text` |
55
- | BlurText | `bynana-ui/blur-text` |
56
- | Typewriter | `bynana-ui/typewriter` |
57
- | WaveText | `bynana-ui/wave-text` |
58
- | FlipText | `bynana-ui/flip-text` |
81
+ #### yarn
82
+ ```bash
83
+ yarn add gsap
84
+ ```
59
85
 
60
- ### Cards
86
+ #### pnpm
87
+ ```bash
88
+ pnpm add gsap
89
+ ```
61
90
 
62
- | Component | Import |
63
- |-----------|--------|
64
- | GlassCard | `bynana-ui/glass-card` |
65
- | HoverCard | `bynana-ui/hover-card` |
66
- | CardFlip | `bynana-ui/card-flip` |
91
+ #### bun
92
+ ```bash
93
+ bun add gsap
94
+ ```
67
95
 
68
- ### Loaders
96
+ ### Components NOT in npm package (require manual copy)
97
+
98
+ These components have heavy dependencies and are only available via copy/paste from [bynanaui.com](https://bynanaui.com):
99
+
100
+ | Component | Required Dependencies |
101
+ |-----------|----------------------|
102
+ | Dither | `three`, `postprocessing` |
103
+ | DotGrid | `ogl` |
104
+ | Masonry | `ogl` |
105
+ | Orb | `ogl` |
106
+ | Silk | `ogl` |
107
+ | Beams | `three` |
108
+ | PixelBlast | `three`, `postprocessing` |
109
+ | PixelTrail | `three`, `@react-three/fiber`, `@react-three/drei` |
110
+ | PrismaticBurst | `ogl` |
111
+ | GridDistortion | `three` |
112
+ | CircularGallery | `ogl` |
113
+ | GradientBlinds | `ogl` |
114
+ | Iridescence | `ogl` |
115
+ | LightRays | `ogl` |
116
+ | LiquidChrome | `ogl` |
117
+ | ShapeBlur | `ogl` |
118
+
119
+ To use these components, install the required dependencies:
120
+
121
+ #### For Three.js components:
122
+ ```bash
123
+ # npm
124
+ npm install three @types/three postprocessing
69
125
 
70
- | Component | Import |
71
- |-----------|--------|
72
- | LoadingDots | `bynana-ui/loading-dots` |
73
- | LoadingSpinner | `bynana-ui/loading-spinner` |
126
+ # yarn
127
+ yarn add three @types/three postprocessing
74
128
 
75
- ### Lists
129
+ # pnpm
130
+ pnpm add three @types/three postprocessing
76
131
 
77
- | Component | Import |
78
- |-----------|--------|
79
- | AnimatedList | `bynana-ui/animated-list` |
132
+ # bun
133
+ bun add three @types/three postprocessing
134
+ ```
80
135
 
81
- ## Usage Examples
136
+ #### For OGL components:
137
+ ```bash
138
+ # npm
139
+ npm install ogl
82
140
 
83
- ### ShineButton
141
+ # yarn
142
+ yarn add ogl
84
143
 
85
- ```tsx
86
- import { ShineButton } from "bynana-ui/shine-button";
144
+ # pnpm
145
+ pnpm add ogl
87
146
 
88
- <ShineButton>Click Me</ShineButton>
147
+ # bun
148
+ bun add ogl
89
149
  ```
90
150
 
91
- ### GradientText
151
+ #### For React Three Fiber components:
152
+ ```bash
153
+ # npm
154
+ npm install three @react-three/fiber @react-three/drei
92
155
 
93
- ```tsx
94
- import { GradientText } from "bynana-ui/gradient-text";
156
+ # yarn
157
+ yarn add three @react-three/fiber @react-three/drei
95
158
 
96
- <GradientText colors={["#ff6b6b", "#feca57", "#48dbfb"]}>
97
- Hello World
98
- </GradientText>
159
+ # pnpm
160
+ pnpm add three @react-three/fiber @react-three/drei
161
+
162
+ # bun
163
+ bun add three @react-three/fiber @react-three/drei
99
164
  ```
100
165
 
101
- ### AnimatedList
166
+ ## All Available Components
102
167
 
103
- ```tsx
104
- import { AnimatedList } from "bynana-ui/animated-list";
168
+ ### Buttons (16)
169
+ - ShineButton, RippleButton, MagneticButton, BounceButton, GlowButton, PulseButton
170
+ - NeonButton, LiquidButton, SlideButton, GradientButton, HoldButton, ThreeDButton
171
+ - CopyButton, ParticleButton, AttractButton, CommandButton
105
172
 
106
- <AnimatedList delay={1000}>
107
- <div>Item 1</div>
108
- <div>Item 2</div>
109
- <div>Item 3</div>
110
- </AnimatedList>
111
- ```
173
+ ### Text Effects (29)
174
+ - GradientText, ShimmerText, GlitchText, BounceText, BlurText, Typewriter
175
+ - WaveText, FlipText, ShinyText, FuzzyText, MatrixText, LiquidText
176
+ - SwooshText, ScrambledText, MagneticText, DynamicText, RotatingText
177
+ - StaggerText, RainbowText, CountUp, RevealText, SplitText, MorphText
178
+ - PerspectiveText, ElasticText, CircularText, GlowingText, SlicedText, DecryptedText
179
+
180
+ ### Cards (10)
181
+ - GlassCard, HoverCard, CardFlip, Card, PixelCard, TiltedCard
182
+ - DecayCard, LiquidGlassCard, CardStack, AppleActivityCard
183
+
184
+ ### Loaders (12)
185
+ - LoadingDots, LoadingSpinner, LoadingBar, LoadingPulse, LoadingBounce
186
+ - LoadingFlower, LoadingGeometric, LoadingMorph, LoadingRings, LoadingText
187
+ - LoadingWords, LoadingInvert
188
+
189
+ ### UI Components (20)
190
+ - Skeleton, Tooltip, TooltipMinimal, TooltipAnimated, Badge, Avatar
191
+ - Progress, Switch, Accordion, Tabs, Modal, Drawer, Alert, Terminal
192
+ - Stepper, FileTree, Counter, Toolbar, Dock, TrueFocus
193
+
194
+ ### Form Components (6)
195
+ - Input, Textarea, Checkbox, RadioGroup, Select, InputOTP
196
+
197
+ ### Hamburger Menus (8)
198
+ - HamburgerBasic, HamburgerSpin, HamburgerMorph, HamburgerSpring
199
+ - HamburgerWave, HamburgerStagger, Hamburger3D, HamburgerElastic
200
+
201
+ ### Navigation (5)
202
+ - FlowingMenu, GooeyNav, PillNav, SmoothDrawer, SmoothTab
203
+
204
+ ### Effects (5)
205
+ - ClickSpark, SmoothCursor, FloatEffect, GlowEffect, BlurFade
206
+
207
+ ### Backgrounds (4)
208
+ - Aurora, Threads, Squares, Waves
209
+
210
+ ### Sections (15)
211
+ - HeroGrid, HeroShowcase, TestimonialsSimple, TestimonialsGrid
212
+ - PricingModern, FooterSimple, FooterComplex, LogoCloud
213
+ - FaqsAccordion, FaqsGrid, TeamCarousel, JobListing, StatsCards
214
+ - StatsGrid, BentoGrid
215
+
216
+ ### AI Components (4)
217
+ - AILoading, AIPrompt, AIBar, AIVoice
218
+
219
+ ### Scroll Effects (6)
220
+ - ScrollVelocity, ScrollReveal, ScrollFloat, ScrollStack, ScrollText, InfiniteScroll
221
+
222
+ ### Cursors (3)
223
+ - TextCursor, TargetCursor, Crosshair
224
+
225
+ ### Other (20+)
226
+ - AnimatedList, ContributionGraph, ElasticSlider, SocialButton, V0Button
227
+ - AnimatedThemeToggler, ShimmerEffect, Loader, AnimatedCircularProgressBar
228
+ - MultiStepLoader, ASCIIText, FallingText, Magnet, TextType, Folder
229
+ - TestimonialsStars, LogoLoop, FloatingPaths, BackgroundPaths, TeamSelector
230
+ - AITextLoading, TooltipInteractive, TooltipMagnetic, TooltipRich
231
+ - MagnetLines, GlareHover, TweetCard, PixelTransition, BlurFadeEffect
232
+ - ShapeHero, FileUpload
112
233
 
113
234
  ## Tailwind CSS Setup
114
235
 
115
- Make sure you have Tailwind CSS configured in your project. Add the package to your content paths:
236
+ Add the package to your Tailwind content paths:
116
237
 
117
238
  ```js
118
239
  // tailwind.config.js
@@ -127,7 +248,7 @@ module.exports = {
127
248
 
128
249
  ## Browse All Components
129
250
 
130
- Visit [bynanaui.com](https://bynanaui.com) to see all 200+ components with live previews and copy-paste code.
251
+ Visit [bynanaui.com](https://bynanaui.com) to see all components with live previews and copy-paste code.
131
252
 
132
253
  ## License
133
254
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "bynana-ui",
3
- "version": "2.1.0",
3
+ "version": "2.1.1",
4
4
  "description": "180+ Beautiful React UI components built with Tailwind CSS and Framer Motion",
5
5
  "main": "dist/index.js",
6
6
  "module": "dist/index.mjs",