React UI Components

A glass surface that refracts the content behind it, with a curved rim, color fringing and a frosted fallback for every browser.

A grid of 3D cubes that ripples under the cursor. Use the flat isometric field or a tilted perspective grid with glowing crests.

A canvas loader that scans across an image with animated pixel grids, text masks, and progress overlays.

A collection of hero sections that are modern and stand out

An interactive image with responsive color separation, displacement, and tilt.

Soft procedural clouds that drift across the sky. Tune speed, count, and colors with props.

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

A collection of reusable shaders for your backgrounds.

A collection of logo clouds with micro interactions and minimal animations

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.

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 set of feature sections ranging from bento grids to simple layouts

A tooltip card container that follows mouse pointer when hovered over

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 set of beautiful, creative backgrounds for landing pages

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

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 realistic globe component with tooltips and avatar tips

A set of bento grids for various use cases

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 text component that reveals the text gradually, gibberish effect.

Content sections for your single blog posts

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

A mac style keyboard component with mechanical keys sound effects.

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

Blog sections with search and filters

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 set of cards that can be used for different use cases

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

Contact sections with forms and micro interactions

Minimal testimonials sections with image and quote.

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

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 grid of cells that ripple when clicked.

CTA sections with modern and minimalist styles

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

A customizable carousel with microinteractions and slider.

Empty states for your projects and dashboards.

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

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

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

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

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

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.

Clean footers with a variety of styles and layouts

Click cards to expand them and show additional information

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

A set of motion illustrations for blocks, sections and pages

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

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

Login, registration and authentication form sections

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.

Simple and elegant headers for your website.

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

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.

Minimal and elegant pricing sections.

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

Elegant sidebars with hover effects and open, close states

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.

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

Perfect for displaying numbers, stats and changelogs

A customizable, compound modal component with animated transitions

Pages and blocks to showcase your team and culture

A cool tooltip that reveals on hover, follows mouse pointer

A subtle Aurora or Southern Lights background for your website.

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

Testimonials sections for social proof and trust

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

Text animations components for headings and paragraphs

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

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.

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.