• Home
  • Components
  • ObsidianUI
  • Docs
  • Templates
ObsidianUIObsidianUI
  • Installation
  • Install Next.js
  • Install Tailwind CSS
  • Add utilities
  • CLI
  • Components
  • AI Input
  • Animated Tab Bar
  • Apple Spotlight
  • Circle Menu
  • Creepy Button
  • Dialog Form
  • Eagle Vision
  • Expandable Bento Grid
  • Flip Fade Text
  • Flip Scroll
  • Flip Text
  • Floating Navigation
  • Flow Scroll
  • Folder Preview
  • Dock
  • Glitch Text
  • Glow Border Card
  • Glowing Effect
  • Glowing Scroll Indicator
  • Horizontal Scroll
  • Icon Wheel
  • Image Pile
  • Infinite Moving Cards
  • Interactive Book
  • Interest Picker
  • Jelly Loader
  • Leave Rating
  • Light Lines
  • Liquid Ocean
  • 3D Displacement Text
  • Magnet Tabs
  • Mask Cursor Effect
  • Masked Avatars
  • Masonry Grid
  • Neumorphism 3D Button
  • OTP Input
  • Perspective Grid
  • Photo Gallery
  • Pixelated Carousel
  • Pixelated Image Trail
  • Retro Pixel Button
  • Rolling Ball Scroll Indicator
  • Rubik Cube
  • Scroll Effect
  • Sine Wave
  • Social Flip Button
  • Spotlight Navbar
  • Stacked Logos
  • Staggered Grid
  • Testimonials Card
  • Trading Card
  • Hover Img

On This Page

  • Install using CLI
  • Install Manually
DocumentationSocial Flip Button

Social Flip Button

A social media contact button with flip animation.

C
O
N
T
A
C
T

Install using CLI

npx shadcn@latest add "https://obsidianui.dev/r/social-flip-button.json"

Install Manually

1

Install dependencies

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

Copy the source code

Copy into components/ui/social-flip-button.tsx

Sine WaveSpotlight Navbar
Made byAthrix.me❤️