A fully animated, open-source React component distribution. Browse a list of animated primitives, components and icons you can install and use in your projects.
Plus icon component.
An accessible popup anchored to a button.
Popovers are perfect for floating panels with arbitrary content like navigation menus, mobile menus and flyout menus.
Displays rich content in a portal, triggered by a button.
Demo showing a popover.
Demo showing a popover.
Demo showing a popover.
A popup that appears when a link is hovered, showing a preview for sighted users.
Demo showing a preview card.
Displays a preview image of a link when hovered.
Displays a preview image of a link when hovered.
Demo showing a preview link card.
Demo showing a preview link card.
Displays the status of a task that takes a long time.
Displays an indicator showing the completion progress of a task, typically displayed as a progress bar.
Demo showing a progress bar.
A circular intro animation component that arranges elements in a radial layout, smoothly transitioning them into orbit with looping motion.
Demo showing radial intro.
A circular context menu built with Base UI, displaying actions in a clean radial layout with full keyboard support and smooth interaction.
Demo Radial Menu.
A circular navigation menu with animated pointer and expanding buttons for smooth interactive transitions.
Demo Radial Nav.
A set of checkable buttons—known as radio buttons—where no more than one of the buttons can be checked at a time.
Radio icon component.
Radio tower icon component.
A vertically stacked set of interactive headings that each reveal an associated section of content.
Demo showing an animated radix accordion.
A modal dialog that interrupts the user with important content and expects a response.
Demo showing an animated radix alert dialog.
A control that allows the user to toggle between checked and not checked.
Demo showing an animated radix checkbox.
An interactive component which expands/collapses a panel.
Demo showing an animated radix collapsible.
A window overlaid on either the primary window or another dialog window, rendering the content underneath inert.
Demo showing an animated radix dialog.
Displays a menu to the user — such as a set of actions or functions — triggered by a button.
Demo showing an animated radix dropdown menu.
Demo showing an animated radix files.
For sighted users to preview content available behind a link.
Demo showing an animated radix hover card.
Displays rich content in a portal, triggered by a button.
Demo showing an animated radix popover.
Displays a preview image of a link when hovered.
Demo showing an animated radix preview link card.
Displays an indicator showing the completion progress of a task, typically displayed as a progress bar.
Demo showing a radix progress.
Demo showing an animated radix progress.
A set of checkable buttons—known as radio buttons—where no more than one of the buttons can be checked at a time.