Bynana UI

180+ Beautiful React UI components built with Tailwind CSS and Framer Motion

Installation

npm

npm install bynana-ui

yarn

yarn add bynana-ui

pnpm

pnpm add bynana-ui

bun

bun add bynana-ui

Peer Dependencies

Most components require these peer dependencies:

npm

npm install framer-motion lucide-react clsx tailwind-merge

yarn

yarn add framer-motion lucide-react clsx tailwind-merge

pnpm

pnpm add framer-motion lucide-react clsx tailwind-merge

bun

bun add framer-motion lucide-react clsx tailwind-merge

Quick Start

Import components from the main package:

import { ShineButton, GradientText, GlassCard } from "bynana-ui";

Or import specific components for better tree-shaking:

import { ShineButton } from "bynana-ui/shine-button";
import { GradientText } from "bynana-ui/gradient-text";
import { GlassCard } from "bynana-ui/glass-card";

Components with Additional Dependencies

Some components require additional packages. Install them as needed:

PixelTransition (GSAP)

npm

npm install gsap

yarn

yarn add gsap

pnpm

pnpm add gsap

bun

bun add gsap

Components NOT in npm package (require manual copy)

These components have heavy dependencies and are only available via copy/paste from bynanaui.com:

| Component | Required Dependencies | |-----------|----------------------| | Dither | three, postprocessing | | DotGrid | ogl | | Masonry | ogl | | Orb | ogl | | Silk | ogl | | Beams | three | | PixelBlast | three, postprocessing | | PixelTrail | three, @react-three/fiber, @react-three/drei | | PrismaticBurst | ogl | | GridDistortion | three | | CircularGallery | ogl | | GradientBlinds | ogl | | Iridescence | ogl | | LightRays | ogl | | LiquidChrome | ogl | | ShapeBlur | ogl |

To use these components, install the required dependencies:

For Three.js components:

# npm
npm install three @types/three postprocessing

# yarn
yarn add three @types/three postprocessing

# pnpm
pnpm add three @types/three postprocessing

# bun
bun add three @types/three postprocessing

For OGL components:

# npm
npm install ogl

# yarn
yarn add ogl

# pnpm
pnpm add ogl

# bun
bun add ogl

For React Three Fiber components:

# npm
npm install three @react-three/fiber @react-three/drei

# yarn
yarn add three @react-three/fiber @react-three/drei

# pnpm
pnpm add three @react-three/fiber @react-three/drei

# bun
bun add three @react-three/fiber @react-three/drei

All Available Components

Buttons (16)

• ShineButton, RippleButton, MagneticButton, BounceButton, GlowButton, PulseButton
• NeonButton, LiquidButton, SlideButton, GradientButton, HoldButton, ThreeDButton
• CopyButton, ParticleButton, AttractButton, CommandButton

Text Effects (29)

• GradientText, ShimmerText, GlitchText, BounceText, BlurText, Typewriter
• WaveText, FlipText, ShinyText, FuzzyText, MatrixText, LiquidText
• SwooshText, ScrambledText, MagneticText, DynamicText, RotatingText
• StaggerText, RainbowText, CountUp, RevealText, SplitText, MorphText
• PerspectiveText, ElasticText, CircularText, GlowingText, SlicedText, DecryptedText

Cards (10)

• GlassCard, HoverCard, CardFlip, Card, PixelCard, TiltedCard
• DecayCard, LiquidGlassCard, CardStack, AppleActivityCard

Loaders (12)

• LoadingDots, LoadingSpinner, LoadingBar, LoadingPulse, LoadingBounce
• LoadingFlower, LoadingGeometric, LoadingMorph, LoadingRings, LoadingText
• LoadingWords, LoadingInvert

UI Components (20)

• Skeleton, Tooltip, TooltipMinimal, TooltipAnimated, Badge, Avatar
• Progress, Switch, Accordion, Tabs, Modal, Drawer, Alert, Terminal
• Stepper, FileTree, Counter, Toolbar, Dock, TrueFocus

Form Components (6)

• Input, Textarea, Checkbox, RadioGroup, Select, InputOTP

Hamburger Menus (8)

• HamburgerBasic, HamburgerSpin, HamburgerMorph, HamburgerSpring
• HamburgerWave, HamburgerStagger, Hamburger3D, HamburgerElastic

Navigation (5)

• FlowingMenu, GooeyNav, PillNav, SmoothDrawer, SmoothTab

Effects (5)

• ClickSpark, SmoothCursor, FloatEffect, GlowEffect, BlurFade

Backgrounds (4)

• Aurora, Threads, Squares, Waves

Sections (15)

• HeroGrid, HeroShowcase, TestimonialsSimple, TestimonialsGrid
• PricingModern, FooterSimple, FooterComplex, LogoCloud
• FaqsAccordion, FaqsGrid, TeamCarousel, JobListing, StatsCards
• StatsGrid, BentoGrid

AI Components (4)

• AILoading, AIPrompt, AIBar, AIVoice

Scroll Effects (6)

• ScrollVelocity, ScrollReveal, ScrollFloat, ScrollStack, ScrollText, InfiniteScroll

Cursors (3)

• TextCursor, TargetCursor, Crosshair

Other (20+)

• AnimatedList, ContributionGraph, ElasticSlider, SocialButton, V0Button
• AnimatedThemeToggler, ShimmerEffect, Loader, AnimatedCircularProgressBar
• MultiStepLoader, ASCIIText, FallingText, Magnet, TextType, Folder
• TestimonialsStars, LogoLoop, FloatingPaths, BackgroundPaths, TeamSelector
• AITextLoading, TooltipInteractive, TooltipMagnetic, TooltipRich
• MagnetLines, GlareHover, TweetCard, PixelTransition, BlurFadeEffect
• ShapeHero, FileUpload

Tailwind CSS Setup

Add the package to your Tailwind content paths:

// tailwind.config.js
module.exports = {
  content: [
    // ... your paths
    "./node_modules/bynana-ui/**/*.{js,ts,jsx,tsx}",
  ],
  // ...
};

Browse All Components

Visit bynanaui.com to see all components with live previews and copy-paste code.

License

MIT © Bynana UI