UI Component Prompts
Prompts for individual interface components — buttons, cards, switches, testimonials and more. Copy one to build a polished component fast.
Card Swap
An elegant card swapping animation component with depth perception and perspective. Features automated cycling of cards with a premium floating feel. Source: ReactBits
Light Beam Button
A high-performance button with a rotating light beam border effect using CSS @property and conic gradients. Features a shiny hover state and gradient border animation.
Jelly Squish Button
A high-fidelity interactive 3D jelly simulation that responds to vertical dragging and mouse movement. Uses GSAP for physics-based animation and optimized image sequencing. Perfect for playful hero sections or interactive showcases. Source: https://codepen.io/cerpow/pen/LEZYxqM
Magnification Dock
A premium macOS-inspired dock component with fluid magnification effects, spring physics, and tooltips. Built with Framer Motion for high-performance interactions.
Radiant Prompt Input
A high-fidelity, kinetic input interface featuring a mesmerizing, continuously rotating conic gradient border. Designed for next-generation AI interactions, this component elevates simple text entry into a focal point of engagement, blending futuristic aesthetics with organic fluid motion. Ideal for LLM chat interfaces, command palettes, or hero search bars that require a premium, 'magical' feel. Source: https://codepen.io/una/pen/wBGNWmZ
Colored, Glowing Edge Card
Original source: https://codepen.io/simeydotme/pen/RNWoPRj
Masonry Gallery
A high-performance, GSAP-powered Masonry layout component with fluid animations, entrance effects (blur-to-focus, directional stagger), and interactive hover states. Supports responsive column counts and lazy-loading pre-checks.
Pill Nav
A premium, minimalist pill-shaped navigation component with GSAP-powered hover effects, rotating logo animation, and responsive mobile menu. Features a unique 'rising circle' background effect on hover.
Bento
A high-end, minimalist bento grid component with advanced interactive effects including spotlight, border glow, particles (stars), tilt, and magnetism. Designed for modern dashboards and landing pages. Source: ReactBits
Interactive virtual character
Original source: https://xhslink.com/m/2mDzucZQKD1
Interactive Folder
An interactive, premium folder component with a playful opening animation and drifting paper elements. Features smooth CSS transitions and mouse-tracking interactions. Source: ReactBits
Testimonial
Circular Gallery
A high-end, WebGL-powered circular gallery with smooth scroll, image bending effects, and elegant typography. Ideal for immersive storytelling or creative portfolios.
Tilted Card
A premium tilted card component with 3D parallax effects, hover scaling, and a follow-the-cursor tooltip. Built with motion/react for smooth, physics-based interactions.
Animated Stepper
A reusable, animated stepper component with smooth slide transitions, progress indicators, and customizable step content. Follows a minimalist aesthetic with clean lines and refined motion. Source: ReactBits
Glow Cursor Button
Staggered Menu
A premium staggered menu with multi-layer entrance animations using GSAP. Features social links, item numbering, and smooth transitions. Source: ReactBits
Rotating logos
Logo display UI
Pricing
A high-conversion pricing section with a toggle for monthly/annual billing. Features three tiers with a highlighted 'Pro' plan, glassmorphism effects, and smooth Framer Motion animations. Designed for SaaS and digital products.
Pricing Section
A premium, clean pricing section with vertically stacked cards. Features a distinct split layout within each card (plan details vs features), distinctive pill-shaped black buttons with 3D depth, and orange accent checkmarks. Designed for high conversion with clear typography and minimalist aesthetics.
Mixpanel Pricing
A pixel-perfect recreation of the Mixpanel pricing section featuring a distinctive purple gradient curtain background, interactive pricing cards, and a dynamic usage estimator slider.
Flowing Menu
A premium menu component with a flowing marquee effect on hover. Features smooth GSAP animations, directional edge detection for entry/exit transitions, and infinite scrolling image-text ribbons. Source: ReactBits
Interactive Card Stack
A premium, interactive card stack component with drag-to-back physics, random rotations, and smooth motion transitions. Features autoplay, mobile-optimized interactions, and highly customizable animation configurations.
Luminous Switch
Original source: https://codepen.io/RAFA3L/pen/ZYbabEa
Creepy Button
A playful, interactive button with eyes that blink and track the cursor movement. Perfect for gamified interfaces or playful call-to-actions. Source: https://codepen.io/jkantner/pen/ZYWKvqW
Flying Posters
A high-end, high-performance WebGL-powered vertical poster gallery with 3D distortion and smooth scrolling. Uses OGL for efficient rendering and a minimalist presentation style. Source: ReactBits
Motion Music Player
This is an UI component of music player
Counter
A premium, high-performance rolling counter component with smooth mechanical-style transitions. Features automatic digit detection, customizable font sizes, and sleek gradient overlays for a professional 'odometer' effect. Built with Framer Motion for precise easing and spring physics. Source: ReactBits
BookCallCta
Pricing
A sophisticated pricing section featuring elegant serif typography, three distinct plan cards (Standard, Growth, Enterprise) with subtle gradient headers, feature comparison lists, and a responsive grid layout. Matches the 'Reducto' design aesthetic.
Shrinking Sticky Header
A sticky header that shrinks in height and transitions to a glassmorphism effect when scrolling down.
Card Nav
A premium, expandable navigation component with card-based submenu reveals and GSAP-powered height transitions. Designed for a high-end, minimalist aesthetic.
Button loading state
Wallet UI
Image Trail
A premium minimalist showcase for a high-end image trail animation effect. Features multiple animation variants (lerp-based movement, scaling, brightness shifts, 3D rotations) with a clean, editorial aesthetic. Source: ReactBits
Neon Typing Button
A button component that show dynamic typing animation when hovering
Refined Order Form UI
Create a refined combobox/dropdown component matching the provided design style. Features: Clean white background with subtle borders, left-aligned labels with icon badges (emoji/icon style), dropdown triggers with chevron icons on the right, smooth animations. Include states for: text input fields with search icons, category/service selector dropdowns, link input field with URL placeholder. Use consistent spacing, typography, and the same visual style as the reference image. Color scheme: blue accents (#4B7EFC or similar), neutral gray text, clean white inputs. Make it production-ready with smooth interactions.
ClickUp Pricing Calculator
A cost savings calculator section comparing app spending vs ClickUp. Features an interactive app selection grid, user count input, and dynamic cost breakdown with a distinctive gradient border design.
Animated List
A vertical list component with scroll-triggered animations, keyboard navigation, and gradient overflow effects. Features item scaling on scroll and hover.
Single Pricing
[SECTION] A clean, two-column pricing section with a flat fee highlight and feature list. Mimics the AngelList SPV pricing design.
Pricing Comparison Table
A detailed, pixel-perfect pricing comparison table replicating the Mixpanel pricing page. Features sticky headers, collapsible sections (Usage, Analytics), tiered columns (Free, Growth, Enterprise), and extensive feature lists with status indicators (check, cross, text).
Elastic Slider
A premium, high-end elastic slider component with smooth motion, overflow physics, and haptic-like feedback icons. Perfect for high-end interfaces and luxury settings. Source: ReactBits
Bubble Menu
A playful and interactive bubble-style navigation menu with floating pill animations and staggered reveals. Uses GSAP for smooth, organic motion and hover effects.