Animated React components, blocks, backgrounds and hooks built with Tailwind CSS and Motion. Copy the source and make it yours.
A Hero Section Four Block component for displaying a hero section.
A Hero Split Reveal Block component for displaying a hero section.
A row of image panels where the hovered one expands and reveals its label.
An Icon Radio component for displaying a radio button with an icon.
A Laptop Closes on Scroll component for displaying a laptop that closes on scroll.
Loader component with animated dots for indicating loading state.
A Logo Cloud Block component for displaying a logo cloud section.
A Logo Cloud Carousel component for displaying a carousel of logos.
A stats bento with a masked heading reveal, staggered tiles, count-up numbers and a self-drawing trend arrow.
A Modal component for displaying a modal dialog.
A Morphing Nav component for displaying a morphing navigation menu.
A Newsletter Block component for displaying a newsletter section.
A Newsletter Block Two component for displaying a newsletter section.
A music widget with spinning vinyl album art that morphs into the full cover on hover.
Authenticator two-factor prompt with trust-this-device and a backup code.
Six-digit email code that submits itself, with a resend countdown.
A Pricing Block component for displaying pricing plans.
A Pricing Card component for displaying pricing information.
A Product Card component for displaying product information.
A social profile card with accent-tinted cover art, verified badge, follow toggle, stats and link.
A Range Slider with Histogram component for displaying a range slider with histogram.
An order card that prints a receipt line by line with totals, a QR payment slot and a tear-off reset.
A widget-style checklist with an accent header, live clock, animated checkboxes and inline add.
Choose a new password with live requirements and a security panel.
An animated showcase bento with hopping team portraits, a count-up stat and rotating testimonials.
Editorial single-column sign-in with an optional magic-link mode.
Split sign-in with an ink panel, researcher quote and SSO options.
Split sign-up with live password requirements and a plan summary panel.
Two-step sign-up: account, then workspace, with focus management.
A field of softly twinkling particles, rendered with CSS only.
A Success Result component for displaying a success message.
A Tabs Switcher component for displaying a tabbed interface.
A Team Block component for displaying a team section.
An infinite Embla team carousel that pauses on hover and highlights the hovered member.
A Testimonials Block component for displaying a testimonials section.
A Testimonials Block Two component for displaying a testimonials section.
A Text Effect component for displaying animated text.
A Tour component for displaying a tour section.
A boolean flag that switches on when triggered and turns itself off after a set duration, for one-shot CSS animations.
Copy text to the clipboard with a temporary copied state, error handling and a fallback for insecure contexts.
Toggle a persisted dark class on the document (or a scoped element) that follows the system color scheme until the user chooses.
Memoized, locale-aware absolute, relative and range date formatting built on the Intl API.
Debounce a changing value, or a callback with cancel and flush controls.
Classify the device as mobile, tablet or desktop from viewport media queries, with pointer and hover capabilities.
Fetch data with status, error and refetch, aborting stale requests when the URL changes or the component unmounts.
Manage typed form values, derived validation errors, touched fields and submission in one hook.
Track whether the pointer is over an element through a callback ref.
Detect keys and shortcuts like mod+k, returning whether they are held and optionally calling a handler.