Components List

A fully accessible React button component with 10+ variants, loading states, and icon support. Copy-paste ready for shadcn/ui projects.

WebGL shader-powered liquid metal button effect for React. Create stunning 3D metallic animations with customizable colors and reflections.

Animated rainbow gradient border button for React. Eye-catching CTA component with smooth color transitions and hover effects.

SVG-based animated beam component for React. Create stunning connection lines between elements with customizable curves, gradients, and pulse effects.

Expandable location card with map preview for React. Click to reveal full map with 3D tilt animation. No Google Maps API required - uses OpenStreetMap tiles.

GitHub contributors avatar grid for React. Displays contributor avatars with tooltips showing stats. Perfect for open-source project landing pages.

Animated GitHub star counter for React. Real-time API data, rolling numbers, and confetti effects. Showcase your open-source project's popularity.

Link preview card on hover for React. Show images, descriptions, and metadata on link hover. Perfect for portfolios, blogs, and documentation sites.

Before/after image comparison slider for React. Drag handle, hover reveal, and lens modes. Perfect for photo editing, design, and AI image showcases.

3D rotating image gallery sphere for React. Drag to rotate, click to expand. Built with CSS 3D transforms and spring physics. Perfect for portfolios.

Magnetic hover effect component for React. Elements smoothly follow cursor with spring physics. Perfect for buttons, cards, and interactive UI.

A magnetic text effect component with a morphing cursor that reveals alternate text on hover. Creates an engaging interactive experience with smooth animations.

Embed interactive 3D Spline scenes in React. Lazy-loaded component with loading states. Perfect for product showcases, hero sections, and immersive experiences.

Custom React video player with playback controls, volume slider, fullscreen mode, keyboard shortcuts, and progress bar. Fully accessible and styleable.

Animated toast notifications for React. Success, error, warning, and info variants with stacking, promises, and custom styling. Sonner alternative.

Animated tooltip component for React. Spring animations, 12 placement options, and custom content support. Built on Radix Tooltip primitive.

ChatGPT-style AI prompt input for React. Supports file uploads, voice recording, @mentions, and expandable textarea. Build AI chat interfaces fast.

Smooth dark mode toggle for React. Sun-to-moon SVG morph animation with next-themes integration. Multiple sizes and customizable colors.

React date picker with single, range, and multi-select modes. Includes time picker, date presets, min/max constraints. Built on Radix and date-fns.

VS Code-style command palette for React. Fuzzy search, keyboard navigation, custom shortcuts, and nested commands. ⌘K ready component.

iOS-style date wheel picker for React. 3D rotation effect with drag gestures and keyboard support. Mobile-friendly date selection component.

Vercel-style feedback widget for React. Emoji rating scale with optional text area. Perfect for collecting user feedback in SaaS apps.

iOS-style segmented control for React. Animated selection indicator with smooth spring transitions. Perfect for filters, tabs, and toggle groups.

macOS-style dock component for React. Icon magnification on hover with spring animations. Customizable size, gap, and magnification strength.

VS Code-style file tree component for React. Expandable folders, file icons, selection states, and keyboard navigation. Perfect for IDE-like interfaces.

Animated tabs component inspired by Vercel's dashboard. Smooth active indicator animation with hover effects. Perfect for navigation and settings UI.

React data table with sorting, filtering, pagination, and row expansion. Smooth animations on interactions. Built on Radix primitives.

Responsive bento box grid layout for React. Create Apple-style dashboard layouts with flexible grid areas. Perfect for landing pages and feature showcases.

Syntax-highlighted code block for React. Copy button, line numbers, file tabs, and terminal styling. Built on Shiki for accurate highlighting.

iPhone mockup component for React. Realistic device frame with lazy-loaded video support. Perfect for app showcases and product demos.

Character-by-character text morph for React. Staggered letter animations with customizable timing. Create stunning word transition effects.

A physics-based text animation component that makes words fall and interact with realistic physics. Supports multiple triggers, customizable physics, and mouse interactions.

Cyberpunk-style glitch text effect for React. Digital distortion animation with character scrambling. Perfect for hero sections and tech websites.

Liquid gooey text morph effect for React. SVG filter-based animation with smooth blob-like transitions. Unique eye-catching text animation.

Animated text highlighter for React. SVG underlines, boxes, circles, and marker effects. Draw attention to key words with hand-drawn style animations.

Animated number counter for React. Rolling digits, circular progress, and stats counters. Perfect for dashboards, pricing pages, and landing pages.

Word rotation animation for React. Smooth vertical flip transitions with spring physics. Great for hero headlines and dynamic taglines.

Scroll-triggered text animations for React. Includes fade, blur, scale, parallax, and sticky reveal effects. Built with Framer Motion.

A cinematic shutter-style text reveal animation with layered color slices that sweep across each character. Supports auto, scroll, click, and hover triggers.

Smooth text morphing animation for React. Words transition with blur and scale effects. Perfect for dynamic hero sections and attention-grabbing headlines.

React typewriter effect with customizable speed, cursor styles, and word deletion. Perfect for hero sections and dynamic text displays.

High-speed text morph animation for React. Blur, scale, and slide effects with velocity-based easing. Perfect for dynamic and energetic UI.