@animate-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 3D animated card component that flips to reveal content on the back.

A management bar for managing items.

A carousel built on top of Embla Carousel with smooth Motion-powered animations. Each slide scales dynamically based on its active state, and the pagination us…

A fun notification list with animated stacking and cards that expand as you interact.

A playful list for pinning and unpinning items, with smooth animated transitions as items move between groups.

A playful todolist component with animated wavy strikethroughs for each completed task.

A circular intro animation component that arranges elements in a radial layout, smoothly transitioning them into orbit with looping motion.

A circular context menu built with Base UI, displaying actions in a clean radial layout with full keyboard support and smooth interaction.

A circular navigation menu with animated pointer and expanding buttons for smooth interactive transitions.

This is a button for sharing.

A compact avatar group for showing online and offline users, with smooth animated transitions when presence changes.

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.

Demo showing a avatar group.

Demo showing a code.

Demo showing a code tabs.

Demo showing a cursor.

Demo showing an animated github stars wheel.

Demo showing an animated tabs.

Demo showing an animated tooltip.

Demo showing a bubble background.

Demo showing a fireworks background.

Demo showing a fireworks circle background.

Demo showing a gradient background.

Demo showing a gravity stars background.

Demo showing a hexagon background.

Demo showing a hole background.

Demo showing a stars background.

Demo showing a accordion.

Demo showing a alert dialog.

Demo showing a checkbox.

Demo showing a dialog.

Demo showing a files.

Demo showing a menu.

Demo showing a menu checkbox.

Demo showing a menu radio.

Demo showing a popover.

Demo showing a preview card.

Demo showing a preview link card.

Demo showing a progress bar.

Demo showing a base radio.

Demo showing a switch.

Demo showing a base tabs.

Demo showing a toggle.

Demo showing a toggle group.

Demo showing a tooltip.

Demo showing a button.

Demo showing a copy button.

Demo showing a flip button.

Demo showing a GitHub stars button.

Demo showing an icon button.

Demo showing a liquid button.

Demo showing a ripple button.

Demo showing a theme toggler button.

Demo showing the flip card component.

Demo showing a management bar.

Demo showing motion carousel.

Demo showing a notification list.

Demo showing a pin list.

Demo showing a playful todolist.

Demo showing radial intro.

Demo Radial Menu.

Demo Radial Nav.

Demo showing a share button.

Demo showing a user presence avatar.

Demo showing a accordion.

Demo showing a checkbox.

Demo showing a dialog.

Demo showing a popover.

Demo showing a headless switch.

Demo showing a headless tabs.

Demo showing a accordion.

Demo showing a alert dialog.

Demo showing a checkbox.

Demo showing a dialog.

Demo showing a dropdown menu.

Demo showing a dropdown menu with a checkbox.

Demo showing a dropdown menu with a radio.

Demo showing a files.

Demo showing a hover card.

Demo showing a popover.

Demo showing a preview link card.

Demo showing a radix progress.

Demo showing a radix radio group.

Demo showing a radix sheet.

Demo showing a radix sidebar.

Demo showing a radix switch.

Demo showing a radix tabs.

Demo showing a radix toggle.

Demo showing a radix toggle group.

Demo showing a radix tooltip.

Demo showing an animated avatar group.

Demo showing an animated code block.

Demo showing an animated cursor.

Demo showing an animated github stars counter.

Demo showing an animated motion grid.

Demo showing an animated pinned list.

Demo showing an animated scroll progress.

Demo showing an animated spring.

Demo showing an animated tabs.

Demo showing an animated tooltip.

Demo showing an animated base accordion.

Demo showing an animated base alert dialog.

Demo showing an animated base checkbox.

Demo showing an animated base collapsible.

Demo showing an animated base dialog.

Demo showing an animated base files.

Demo showing an animated base menu.

Demo showing an animated base popover.

Demo showing an animated base preview card.

Demo showing an animated base preview link card.

Demo showing an animated base progress.

Demo showing an animated base radio.

Demo showing an animated base switch.

Demo showing an animated base tabs.

Demo showing an animated base toggle.

Demo showing an animated base toggle group.

Demo showing an animated base tooltip.

Demo showing a button.

Demo showing an animated flip button.

Demo showing an animated liquid button.

Demo showing a ripple button.

Demo showing an animated auto height.

Demo showing an animated blur.

Demo showing an animated click.

Demo showing an animated effect.

Demo showing an animated fade.

Demo showing an animated highlight.

Demo showing a image zoom effect.

Demo showing a magnetic effect.

Demo showing an animated particles.

Demo showing an animated shine.

Demo showing an animated slide.

Demo showing a theme toggler.

Demo showing an animated tilt.

Demo showing an animated zoom.

Demo showing an animated headless checkbox.

Demo showing an animated headless dialog.

Demo showing an animated headless disclosure.

Demo showing an animated headless popover.

Demo showing an animated headless switch.

Demo showing an animated headless tabs.

Demo showing an animated radix accordion.

Demo showing an animated radix alert dialog.

Demo showing an animated radix checkbox.

Demo showing an animated radix collapsible.

Demo showing an animated radix dialog.

Demo showing an animated radix dropdown menu.

Demo showing an animated radix files.

Demo showing an animated radix hover card.

Demo showing an animated radix popover.

Demo showing an animated radix preview link card.

Demo showing an animated radix progress.

Demo showing an animated radix radio group.

Demo showing an animated radix sheet.

Demo showing an animated radix switch.

Demo showing an animated radix tabs.

Demo showing an animated radix toggle.

Demo showing an animated radix toggle group.

Demo showing an animated radix tooltip.

Demo showing an animated counting number.

Demo showing an animated gradient text.

Demo showing an animated highlight text.

Demo showing an animated morphing text.

Demo showing an animated rolling text.

Demo showing an animated rotating text.

Demo showing an animated scrolling number.

Demo showing an animated shimmering text.

Demo showing an animated sliding number.

Demo showing an animated splitting text.

Demo showing an animated splitting text.

Demo showing an animated typing text.

A hook that allows you to automatically adjust the height of an element based on its content.

A hook that allows you to control a state.

A hook that allows you to get the data-state of an element.

A hook that allows you to check if an element is in view.

A hook that allows you to use a motion value state.

Accessibility icon component.

Activity icon component.

Airplay icon component.

Alarm clock icon component.

Arrow down icon component.

Arrow left icon component.

Arrow right icon component.

Arrow up icon component.

Arrow up down icon component.

Audio Lines icon component.

Axe icon component.

Axis 3D icon component.