React UI Components

A split-flap display component that animates characters with flip transitions, inspired by Vestaboard.

Scroll through the page and see the image come out of the screen, as seen on Fey.com website.

A floating, configurable notch that pins to the top or bottom of the screen. Pass an array of items with links and it animates the active state as you switch between them.

A collection of hero sections that are modern and stand out

Mouse-driven parallax effect, perfect for hero sections. Images blur fade in and move at different depths.

A squiggly text effect using SVG turbulence and displacement filters, animated with Motion.

A collection of reusable shaders for your backgrounds.

A tooltip card container that follows mouse pointer when hovered over

A collection of logo clouds with micro interactions and minimal animations

A search-style input that expands with a gooey SVG filter and shared layout animation

A button that subtly drifts toward the cursor as you hover, with a spring-based return when you leave.

A mac style terminal component with bash syntax highlighting and typewriter effect.

A card perspective effect, hover over the card to elevate card elements.

A set of feature sections ranging from bento grids to simple layouts

Convert any image to ASCII art with customizable charsets, colors, and animations.

Animated text component with colorful curved lines rendered on canvas, clipped to the text shape.

A set of beautiful, creative backgrounds for landing pages

A realistic globe component with tooltips and avatar tips

A real-time ordered dithering effect for images, perfect for pixel art and retro aesthetics.

A background effect with opacity animation, glow effect and more.

A set of bento grids for various use cases

A text component that reveals the text gradually, gibberish effect.

A badge with images that can be hovered to reveal more images.

A mac style keyboard component with mechanical keys sound effects.

Content sections for your single blog posts

A dynamic background effect with animated gradients, noise texture, and smooth motion.

A repeating diagonal, horizontal, or vertical line pattern background effect.

A text hover effect that animates and outlines gradient on hover, as seen on x.ai

A real-time webcam pixel grid effect, perfect for pixel art and retro aesthetics.

Minimal testimonials sections with image and quote.

A sleek and minimal carousel implementation, as seen on apple.com

Blog sections with search and filters

Exploding beams in the background

A set of svg paths that animate in a wave pattern. Good for hero sections background, as seen on height.app

A set of cards that can be used for different use cases

A grid of cells that ripple when clicked.

A card component with a spotlight effect revealing a radial gradient background

A customizable carousel with microinteractions and slider.

A configurable code block component built on top of react-syntax-highlighter.

Contact sections with forms and micro interactions

A text component with various colours, filter and scale effects.

A perspective, 3D, Tilt card as seen on Perplexity Comet's website.

CTA sections with modern and minimalist styles

A comparison component between two images, slide or drag to compare

Empty states for your projects and dashboards.

A Cover component that wraps any children, providing beams and space effect, hover to reveal speed.

A container that flips through words, animating the width.

A tiltable, draggable card component that jumps on bounds.

Click cards to expand them and show additional information

Elegant and minimal FAQs with grid, accordions and micro-interactions

A set of feature sections ranging from bento grids to simple layouts

A minimal file upload form with background grid, drag and drop, and micro interactions.

Clean footers with a variety of styles and layouts

A floating dock mac os style component, acts as a navigation bar.

Hover over the card to focus on it, blurring the rest of the cards.

A set of hero sections ranging from simple to complex layouts

A text flip effect that changes the layout of surrounding text

A lens component to zoom into images, videos, or practically anything.

A set of simple and minimal loaders for your loading screens and components.

A set of motion illustrations for blocks, sections and pages

Login, registration and authentication form sections

Convert any image to a pixelated canvas mouse distortion effects, as seen on Tailwind CSS Website.

A component that highlights text when it's in view, with a pointer and border.

A navbar that changes width on scroll, responsive and animated.

A button that shows a loading state when clicked, and a success state when the action is completed.

Simple and elegant headers for your website.

A banner component that sticks to top, hides when user scrolls down

A world map with animated lines and dots, programatically generated.

An effect of SVGs as seen on the Google Gemini Website

A Beam that follows the path of an SVG as the user scrolls. Adjusts beam length with scroll speed.

Minimal and elegant pricing sections.

A 3D Marquee effect with grid, good for showcasing testimonials and hero sections

A customizable, compound modal component with animated transitions

A cool tooltip that reveals on hover, follows mouse pointer

Elegant sidebars with hover effects and open, close states

A subtle Aurora or Southern Lights background for your website.

Perfect for displaying numbers, stats and changelogs

Multiple background beams that follow a path of SVG, makes a good hero section background.

A smooth and elegant background gradient animation that changes the gradient position over time.

A skewed grid layout with Title, description and a header component

A dot background that expands on hover, as seen on Clerk's website

Cards stack on top of each other after some interval. Perfect for showing testimonials.

A set of cards that can be used for different use cases

Pages and blocks to showcase your team and culture

Testimonials sections for social proof and trust

A scroll animation that rotates in 3d on scroll. Perfect for hero or marketing sections.

A cool card with amazing hover effect, reveals encrypted text and a mixed gradient.

A component that flips through a list of words

A globe animation as seen on GitHub's homepage. Interactive and customizable.

Text animations components for headings and paragraphs

A glare effect that happens on hover, as seen on Linear's website

A border glowing effect that adapts to any container or card, as seen on Cursor's website.

Card background stars that animate on hover and animate anyway

A simple grid and dots background to make your sections stand out.

A background effect with a text highlight component, perfect for hero sections.

A scroll effect with rotation, translation and opacity animations.

A customizable group of cards that move infinitely in a loop. Made with Framer Motion and Tailwind CSS.

A lamp effect as seen on linear, great for section headers.

A layout effect that animates the grid item on click, powered by framer motion layout

Dynamic link previews for your anchor tags

A group of beams in the background of a container, sort of like meteors.

A border that moves around the container. Perfect for making your buttons stand out.

A grid where two columns scroll in oposite directions, giving a parallax effect.

Sliding in placeholders and vanish effect of input on submit

A shooting star animation on top of a starry background, as seen on figmaplug.in

Expandable sidebar that expands on hover, mobile responsive and dark mode support

A customizable form built on top of shadcn's input and label, with a touch of framer motion

A configurable sparkles component that can be used as a background or as a standalone component.

A new spotlight component with left and right spotlight, configurable and customizable.

A spotlight effect with Tailwind CSS, good for drawing attention to a particular element on the page.

A sticky container that sticks while scrolling, text reveals on scroll

A mask reveal effect, hover the cursor over a container to reveal what's underneath.

Tabs to switch content, click on a tab to check background animation.

A cool text effect that fades in text on page load, one by one.

Mousemove effect to reveal text content at the bottom of the card.

Text generates as if it is being typed on the screen.

A wavy, swirly, vortex background ideal for CTAs and backgrounds.

A cool background effect with waves that move.

A card effect that translates and scales on mousemove, perfect for feature cards.

A hover effect that expands to the entire container with a gradient border.

A step loader for screens that take a lot of time to load.

A gradient pin that animates on hover, perfect for product links.

A full width background box container that highlights on hover

An animated gradient that sits at the background of a card, button or anything.

Hover over the cards and the effect slides to the currently hovered card.

A direction aware hover effect using Framer Motion, Tailwindcss and good old javascript.

A sticky Navbar that hides on scroll, reveals when scrolled up.

A custom pointer that follows mouse arrow and animates in pointer and content.

A full page slider with images that can be navigated with the keyboard.

A navbar menu that animates its children on hover, makes a beautiful bignav

A curated list of awesome, battle tested Tailwind CSS buttons components

A timeline component with sticky header and scroll beam follow.