ogBlocks - Animated UI Library
Browse our collection of animated React and Next.js base UI components designed for building exceptional digital experiences.
accordions
Animated FAQ Accordion for React
A beautifully animated accordion component for FAQ sections. Built with Framer Motion and Tailwind CSS. Copy-paste ready for React & Next.js.
Animated Collapsible Accordion for Next.js Apps
Smooth collapse animations and accessible markup. Perfect for documentation sites and knowledge bases.
Animated Nested Accordion Component for React
Multi-level accordion with staggered reveal animations. Ideal for complex content hierarchies.
cards
Animated Beam Border Card with Hover Effects
A card with a glowing beam border that follows the cursor. Perfect for portfolio and feature showcases.
Animated Hover Card for React
Immersive hover-triggered card with smooth 3D tilt and scaling effects. Copy-paste ready.
Animated Pricing Card for SaaS
High-converting, animated pricing card for your SaaS product. Built with React and Tailwind CSS.
Animated Credit Balance Card for Fintech Apps
Display account balances with a premium, animated card component. Ideal for fintech and banking UIs.
Animated Social Proof Card for Landing Pages
Showcase user counts, reviews, and trust signals with this animated social proof card.
Animated Stacked Cards Animation for React
Eye-catching stacked card layout with smooth drag and swipe animations. Great for testimonials.
Animated Team Member Card for Company Pages
Animated team card with avatar, role, and social links. Perfect for About Us pages.
buttons
Animated Button Component for React
A premium, animated CTA button with hover effects. Built with Framer Motion and Tailwind CSS.
Animated Gradient Button for Next.js
A smooth gradient CTA button with scale and glow effects. Perfect for hero sections.
Animated Icon Button for React
Button with animated icon transitions. Ideal for action buttons and toolbars.
Minimal Animated Button for React
A clean, minimalistic button with subtle micro-interactions for modern UIs.
Animated Pulse Effect CTA Button for Landing Pages
Draw attention to your call-to-action with this pulsing, animated button for React.
Animated Submit Button with Loading State
A form submit button with smooth loading and success state animations. Great for checkout flows.
carousels
Animated Carousel for React & Next.js
A smooth, touch-friendly carousel with beautiful slide transitions. Zero dependencies beyond Framer Motion.
Animated Image Carousel for Next.js Projects
Showcase your product screenshots with this animated image carousel. Responsive and mobile-friendly.
Animated Card Carousel for React Applications
Display feature cards, team members, or products in an animated horizontal carousel.
Animated Testimonial Carousel for SaaS Websites
Build trust with smooth, animated testimonial sliders. Great for social proof sections.
inputs
Animated Checkbox for React Forms
A micro-animated checkbox with satisfying check animation. Accessible and keyboard-navigable.
Animated Floating Label Input for React
An animated text input with a floating label effect. Modern look for SaaS signup forms.
Underline Animated Input for React
A sleek input with animated underline focus effect. Minimal and clean for developer tools.
Animated OTP Input for Verification Flows
Secure 6-digit OTP input with auto-focus and smooth transitions. Built for 2FA and phone verification.
Animated Radio Group for React Forms
Beautiful radio button group with selection animations. Perfect for settings and survey forms.
Animated Toggle Switch for React
A smooth, satisfying toggle switch with spring animations. Ideal for settings panels.
Animated Range Slider for React
A visually polished range slider with smooth drag and value animations.
Animated Drag & Drop File Upload for React
A polished drag-and-drop file upload zone with animated progress feedback.
countdown
Animated Countdown Timer for React
Create urgency with a beautifully animated countdown timer. Perfect for launches and flash sales.
Animated Flip Clock Countdown for E-commerce Sales
A retro-inspired flip clock countdown with 3D card animation effects. Drive FOMO on your sales page.
Animated Number Counter for Stats Sections
Count up to impressive numbers with smooth spring animations. Perfect for metrics and KPI displays.
navigation
Animated Glassmorphism Navbar for React
A stunning frosted-glass navbar with blur effects. Fully responsive and animated.
Animated Mega Menu Navigation for React
A full-featured nav menu with animated dropdown mega menus. Ideal for large SaaS apps.
Animated Sidebar Navigation for Dashboards
A collapsible, animated sidebar navigation. Perfect for admin panels and SaaS dashboards.
Animated Modern Sidebar V2 for Next.js
A second-generation animated sidebar with improved transitions and mobile support.
Animated MacOS Dock Navigation for React
Recreate the iconic macOS dock magnification effect in your web app. Smooth spring animations.
modals
Animated Modal Dialog for React
A smooth, entrance-animated modal with backdrop blur. Perfect for confirmations and onboarding flows.
Animated Slide-Up Modal for Next.js Apps
A mobile-friendly slide-up modal with swipe-to-dismiss. Ideal for mobile-first web apps.
Animated Drawer Component for React
A slide-in side drawer with smooth open/close transitions. Great for filters and mobile menus.
dropdowns
sections
text effects
Animated Infinite Text Cycle Animation for React
Rotate through words with smooth, infinite cycling animations. Great for hero headlines.
Animated Copy-to-Clipboard Text Component for React
Click-to-copy text with animated feedback. Ideal for code snippets, API keys, and referral links.
Animated Spinning Text Animation for React
A circular spinning text effect with smooth rotation. Eye-catching for creative portfolios.
Animated Text Pop-In Animation for React
Words that pop in with spring physics. Perfect for attention-grabbing headlines and CTAs.
Animated Text Scale Animation for React
Smooth scale-up text reveal on scroll. Ideal for storytelling and long-form landing pages.
Animated Scroll Driven Text Animation for React
Words animate into view as you scroll. Built with Framer Motion for buttery-smooth experiences.
testimonials
Animated Testimonial Card for React
Showcase customer reviews with an animated testimonial component. Build social proof instantly.
Animated 3D Cube Testimonial for Landing Pages
A stunning 3D rotating cube that cycles through testimonials. Unforgettable visual impact.
Animated Flip Card Testimonial for React
Testimonials that flip to reveal the full review. Engaging and space-efficient.
tabs
Animated Tabs Component for React
Smooth tab switching with animated indicator and content transitions.
Animated Tabs V2 for React Apps
A second-generation tab component with improved animations and accessibility.
Animated Pricing Toggle Tab for SaaS Pages
Monthly/Annual pricing toggle with smooth content swap animations. Essential for SaaS pricing.
dashboards
effects
Animated Cursor Mask Reveal Effect for React
A mesmerizing cursor-following mask effect that reveals hidden content. Unique interaction design.
Animated Ripple Click Effect for React
Material Design-style ripple effect on click. Adds tactile feedback to any button or surface.
Animated Logo Revolve Animation for Partner Sections
Animate your partner and client logos in a smooth revolving wheel. Builds brand credibility.
feedback
Animated Loader Spinner for React
A premium loading spinner with smooth animations. Better than boring spinners.
Animated Progress Bar for React
A smooth, animated progress bar for file uploads, onboarding flows, and step wizards.
Animated Scroll Progress Indicator for Blog Sites
Show reading progress with a smooth scroll-linked progress bar. Great for long-form content.