Animated React Components

A animated-modal component from Aceternity UI.

A animated-testimonials component from Aceternity UI.

A animated-tooltip component from Aceternity UI.

A background-beams component from Aceternity UI.

A background-beams-with-collision component from Aceternity UI.

A background-gradient-animation component from Aceternity UI.

A card-spotlight component from Aceternity UI.

A container-scroll-animation component from Aceternity UI.

A hero-parallax component from Aceternity UI.

A meteors component from Aceternity UI.

A parallax-hero-images component from Aceternity UI.

A parallax-scroll component from Aceternity UI.

A parallax-scroll-2 component from Aceternity UI.

A sparkles component from Aceternity UI.

A spotlight component from Aceternity UI.

A spotlight-new component from Aceternity UI.

A tracing-beam component from Aceternity UI.

An animated avatar group that displays overlapping user images and smoothly shifts each avatar forward on hover to highlight it.

A code component that animates the code as it is written.

A tabs component that displays code for different languages.

An animated cursor component that allows you to customize both the cursor and cursor follow elements with smooth animations.

A scrolling wheel that displays GitHub stars count.

A set of layered sections of content—known as tab panels—that are displayed one at a time.

A tooltip is a small box that appears when hovering over an element.

An interactive background featuring smoothly animated gradient bubbles, creating a playful, dynamic, and visually engaging backdrop.

A background component that displays a fireworks animation.

A background component featuring a subtle yet engaging animated gradient effect, smoothly transitioning colors to enhance visual depth.

A background component featuring a subtle yet engaging animated gravity stars effect.

A background component featuring an interactive hexagon grid.

A background component featuring an animated hole grid.

An interactive background featuring animated dots of varying sizes and speeds, simulating a dynamic and immersive starry space effect.

A set of collapsible panels with headings.

A dialog that requires user response to proceed.

An easily stylable checkbox component.

A popup that opens on top of the entire page.

A component that allows you to display a list of files and folders.

A list of actions in a dropdown, enhanced with keyboard navigation.

An accessible popup anchored to a button.

A popup that appears when a link is hovered, showing a preview for sighted users.

Displays a preview image of a link when hovered.

Displays the status of a task that takes a long time.

An easily stylable radio button component.

A control that indicates whether a setting is on or off.

A component for toggling between related panels on the same page.

A two-state button that can be on or off.

Provides a shared state to a series of toggle buttons.

A popup that appears when an element is hovered or focused, showing a hint for sighted users.

A button component with a variety of styles and animations.

A copy button component with a variety of styles and animations.

A button that flips between two states on hover.

A clickable button that links to a GitHub repository and displays the number of stars.

An icon button component with a variety of styles and animations.

A button that fills on hover.

A button that animates on tap with a ripple effect.

A button that toggles the theme gradually.

A vertically stacked set of interactive headings that each reveal an associated section of content.

Checkboxes provide the same functionality as native HTML checkboxes, without any of the styling, giving you a clean slate to design them however you'd like.

A fully-managed, renderless dialog component jam-packed with accessibility and keyboard features, perfect for building completely custom dialogs and alerts.

Popovers are perfect for floating panels with arbitrary content like navigation menus, mobile menus and flyout menus.

Switches are a pleasant interface for toggling a value between two states, and offer the same semantics and keyboard navigation as native checkbox elements.

Easily create accessible, fully customizable tab interfaces, with robust focus management and keyboard navigation support.

A vertically stacked set of interactive headings that each reveal an associated section of content.

A modal dialog that interrupts the user with important content and expects a response.

A control that allows the user to toggle between checked and not checked.

A window overlaid on either the primary window or another dialog window, rendering the content underneath inert.

Displays a menu to the user — such as a set of actions or functions — triggered by a button.

A component that allows you to display a list of files and folders.

For sighted users to preview content available behind a link.

Displays rich content in a portal, triggered by a button.

Displays a preview image of a link when hovered.

Displays an indicator showing the completion progress of a task, typically displayed as a progress bar.

A set of checkable buttons—known as radio buttons—where no more than one of the buttons can be checked at a time.

Extends the Dialog component to display content that complements the main content of the screen.

A composable, themeable and customizable sidebar component. Created by Shadcn and animated by Animate UI.

A control that allows the user to toggle between checked and not checked.

A set of layered sections of content—known as tab panels—that are displayed one at a time.

A two-state button that can be either on or off.

A set of two-state buttons that can be toggled on or off.

A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.

A 3d-wrapper component from Badtz UI.

A animated-card-1 component from Badtz UI.

A animated-card-2 component from Badtz UI.

A animated-card-3 component from Badtz UI.

A animated-keyboard component from Badtz UI.

A animated-list component from Badtz UI.

A blur-reveal component from Badtz UI.

A border-beam component from Badtz UI.

A cloud-orbit component from Badtz UI.

A confetti-button component from Badtz UI.

A dock component from Badtz UI.

A expandable-card component from Badtz UI.

A fade-up-word component from Badtz UI.

A flipping-card component from Badtz UI.

A glowing-button component from Badtz UI.

A hyperspace-background component from Badtz UI.

A image-split component from Badtz UI.

A image-trail component from Badtz UI.

A infinite-ribbon component from Badtz UI.

A like-button component from Badtz UI.

A marquee component from Badtz UI.

A mouse-wave component from Badtz UI.

A particles component from Badtz UI.

A pixel-distorsion component from Badtz UI.

A pulse-shader component from Badtz UI.

A shuffle-button component from Badtz UI.

A social-proof-avatars component from Badtz UI.

A stagger-blur-effect component from Badtz UI.

A stagger-button component from Badtz UI.

A star-button component from Badtz UI.

A swipe-button component from Badtz UI.

Number component with smooth counting animations and customizable formatting

A marquee component from DiceUI.

An animated badge component.

A browser SVG component.

A clerk OTP component.

A cobe globe component.

A github inline comments component.

A grid component.

An integrations component.

An iPad SVG component.

An iPhone 17 Pro SVG component.

A MacBook Pro SVG component.

A performant, customizable marquee (scrolling text/content) component.

A safari browser component.

A terminal component.

A shimmering-text component from ElevenLabs UI.

Marquees are a great way to show a list of items in a horizontal scrolling motion.

An animated beam of light which travels along a path. Useful for showcasing the integration features of a website.

Animated Circular Progress Bar is a component that displays a circular gauge with a percentage value.

An animated gradient background which transitions between colors for text.

A animated background grid pattern made with SVGs, fully customizable using Tailwind CSS.

A list that animates each item in sequence with a delay. Used to showcase notifications or events on your landing page.

A light glare effect which pans across text making it appear as if it is shimmering.

A component for theme changing animation.

An animated beam of light which travels along the border of its container.

An infinite scrolling component that can be used to display text, images, or videos.

A meteor shower effect.

A button with a shimmering light which travels around the perimeter.

A shiny button component with dynamic styles in the dark mode or light mode.

A dynamic text that generates continuous sparkles with smooth transitions, perfect for highlighting text with animated stars.

Characters appearing in typed animation

A accordion component from Motion Primitives.

A animated-background component from Motion Primitives.

A animated-group component from Motion Primitives.

A animated-number component from Motion Primitives.

A border-trail component from Motion Primitives.

A carousel component from Motion Primitives.

A cursor component from Motion Primitives.

A dialog component from Motion Primitives.

A disclosure component from Motion Primitives.

A dock component from Motion Primitives.

A glow-effect component from Motion Primitives.

A image-comparison component from Motion Primitives.

A in-view component from Motion Primitives.

A infinite-slider component from Motion Primitives.

A magnetic component from Motion Primitives.

A morphing-dialog component from Motion Primitives.

A morphing-popover component from Motion Primitives.

A progressive-blur component from Motion Primitives.

A scroll-progress component from Motion Primitives.

A sliding-number component from Motion Primitives.

A spinning-text component from Motion Primitives.

A spotlight component from Motion Primitives.

A text-effect component from Motion Primitives.

A text-loop component from Motion Primitives.

A text-morph component from Motion Primitives.

A text-roll component from Motion Primitives.

A text-scramble component from Motion Primitives.

A text-shimmer component from Motion Primitives.

A text-shimmer-wave component from Motion Primitives.

A tilt component from Motion Primitives.

A transition-panel component from Motion Primitives.

A marquee component in neobrutalism style.

A simple spinner for displaying loading state

Animated text reveal with blur effect.

A 3D book component with hover animation and customizable appearance.