# Docs

- [Introduction](/docs): Animated drop-in primitives for Radix UI, Base UI and React Aria, built with Motion.
- [Installation](/docs/installation): Install Animate UI and animate your shadcn/ui components.
- Primitives
  - [Primitives](/docs/primitives): Animated versions of Radix UI, Base UI and React Aria primitives, with exactly their API, plus Animate UI's own primitives.
  - Base UI
    - [Accordion](/docs/primitives/base-ui/accordion): A set of collapsible panels with headings.
    - [Alert Dialog](/docs/primitives/base-ui/alert-dialog): A dialog that requires a user response to proceed.
    - [Checkbox](/docs/primitives/base-ui/checkbox): A control that allows the user to toggle between checked and not checked.
    - [Collapsible](/docs/primitives/base-ui/collapsible): A collapsible panel controlled by a button.
    - [Combobox](/docs/primitives/base-ui/combobox): An input combined with a list of predefined items to select.
    - [Context Menu](/docs/primitives/base-ui/context-menu): A menu that appears at the pointer on right click or long press.
    - [Dialog](/docs/primitives/base-ui/dialog): A popup that opens on top of the entire page. Also the primitive under shadcn/ui's Sheet.
    - [Drawer](/docs/primitives/base-ui/drawer): A panel that slides in from the edge of the screen and can be swiped away.
    - [Dropdown Menu](/docs/primitives/base-ui/dropdown-menu): A list of actions in a dropdown, enhanced with keyboard navigation. Built on Base UI's Menu.
    - [Hover Card](/docs/primitives/base-ui/hover-card): A popup that appears when a link is hovered, showing a preview for sighted users. Built on Base UI's Preview Card.
    - [Menubar](/docs/primitives/base-ui/menubar): A menu bar providing commands and options for your application.
    - [Navigation Menu](/docs/primitives/base-ui/navigation-menu): A collection of links and menus for website navigation.
    - [Pagination](/docs/primitives/base-ui/pagination): Pagination with page navigation, next and previous links. The current page's outline slides from link to link as the page changes.
    - [Popover](/docs/primitives/base-ui/popover): An accessible popup anchored to a button.
    - [Preview Link Card](/docs/primitives/base-ui/preview-link-card): A link that shows a screenshot of the page it leads to when hovered, in a card that links there too. Built on Base UI's Preview Card.
    - [Progress](/docs/primitives/base-ui/progress): Displays the status of a task that takes a long time.
    - [Questionnaire](/docs/primitives/base-ui/questionnaire): A multi-step questionnaire with single-choice, multiple-choice, freeform, and skippable questions. Each question slides out before the next one slides in, while the height glides to the new one's.
    - [Radio Group](/docs/primitives/base-ui/radio-group): A set of checkable buttons, known as radio buttons, where no more than one of the buttons can be checked at a time.
    - [Select](/docs/primitives/base-ui/select): A common form component for choosing a predefined value in a dropdown menu.
    - [Sheet](/docs/primitives/base-ui/sheet): Extends the Dialog component to display content that complements the main content of the screen.
    - [Sidebar](/docs/primitives/base-ui/sidebar): A composable, themeable and customizable sidebar. Its menu buttons share one gliding highlight, and it collapses to icons and back with everything inside on one curve.
    - [Slider](/docs/primitives/base-ui/slider): An easily stylable range input.
    - [Switch](/docs/primitives/base-ui/switch): A control that allows the user to toggle between checked and not checked.
    - [Tabs](/docs/primitives/base-ui/tabs): A component for toggling between related panels on the same page.
    - [Toast](/docs/primitives/base-ui/toast): Generates toast notifications.
    - [Toggle Group](/docs/primitives/base-ui/toggle-group): A set of two-state buttons that can be toggled on or off.
    - [Toggle](/docs/primitives/base-ui/toggle): A two-state button that can be either on or off.
    - [Tooltip](/docs/primitives/base-ui/tooltip): A popup that appears when an element is hovered or focused, showing a hint for sighted users.
  - Radix UI
    - [Accordion](/docs/primitives/radix-ui/accordion): A vertically stacked set of interactive headings that each reveal an associated section of content.
    - [Alert Dialog](/docs/primitives/radix-ui/alert-dialog): A modal dialog that interrupts the user with important content and expects a response.
    - [Checkbox](/docs/primitives/radix-ui/checkbox): A control that allows the user to toggle between checked and not checked.
    - [Collapsible](/docs/primitives/radix-ui/collapsible): An interactive component which expands/collapses a panel.
    - [Context Menu](/docs/primitives/radix-ui/context-menu): Displays a menu located at the pointer, triggered by a right click or a long press.
    - [Dialog](/docs/primitives/radix-ui/dialog): A window overlaid on the page, rendering the content underneath inert. Also the primitive under shadcn/ui's Sheet.
    - [Drawer](/docs/primitives/radix-ui/drawer): A panel that slides in from the edge of the screen and follows the finger. A drop-in replacement for Vaul, with the same API.
    - [Dropdown Menu](/docs/primitives/radix-ui/dropdown-menu): Displays a menu to the user, such as a set of actions or functions, triggered by a button.
    - [Hover Card](/docs/primitives/radix-ui/hover-card): For sighted users to preview content available behind a link.
    - [Menubar](/docs/primitives/radix-ui/menubar): A visually persistent menu common in desktop applications that provides quick access to a consistent set of commands.
    - [Navigation Menu](/docs/primitives/radix-ui/navigation-menu): A collection of links for navigating websites.
    - [Pagination](/docs/primitives/radix-ui/pagination): Pagination with page navigation, next and previous links. The current page's outline slides from link to link as the page changes.
    - [Popover](/docs/primitives/radix-ui/popover): Displays rich content in a portal, triggered by a button.
    - [Preview Link Card](/docs/primitives/radix-ui/preview-link-card): A link that shows a screenshot of the page it leads to when hovered, in a card that links there too. Built on Radix UI's Hover Card.
    - [Progress](/docs/primitives/radix-ui/progress): Displays an indicator showing the completion progress of a task, typically displayed as a progress bar.
    - [Questionnaire](/docs/primitives/radix-ui/questionnaire): A multi-step questionnaire with single-choice, multiple-choice, freeform, and skippable questions. Each question slides out before the next one slides in, while the height glides to the new one's.
    - [Radio Group](/docs/primitives/radix-ui/radio-group): A set of checkable buttons, known as radio buttons, where no more than one of the buttons can be checked at a time.
    - [Select](/docs/primitives/radix-ui/select): Displays a list of options for the user to pick from, triggered by a button.
    - [Sheet](/docs/primitives/radix-ui/sheet): Extends the Dialog component to display content that complements the main content of the screen.
    - [Sidebar](/docs/primitives/radix-ui/sidebar): A composable, themeable and customizable sidebar. Its menu buttons share one gliding highlight, and it collapses to icons and back with everything inside on one curve.
    - [Slider](/docs/primitives/radix-ui/slider): An input where the user selects a value from within a given range.
    - [Switch](/docs/primitives/radix-ui/switch): A control that allows the user to toggle between checked and not checked.
    - [Tabs](/docs/primitives/radix-ui/tabs): A set of layered sections of content, known as tab panels, that are displayed one at a time.
    - [Toggle Group](/docs/primitives/radix-ui/toggle-group): A set of two-state buttons that can be toggled on or off.
    - [Toggle](/docs/primitives/radix-ui/toggle): A two-state button that can be either on or off.
    - [Tooltip](/docs/primitives/radix-ui/tooltip): A popup that displays information related to an element when it receives keyboard focus or the mouse hovers over it.
  - React Aria
    - [Accordion](/docs/primitives/react-aria/accordion): A group of disclosures, built with React Aria's DisclosureGroup.
    - [Alert Dialog](/docs/primitives/react-aria/alert-dialog): A modal dialog that interrupts the user with important content and expects a response.
    - [Checkbox](/docs/primitives/react-aria/checkbox): A control that allows the user to toggle between checked and not checked.
    - [Collapsible](/docs/primitives/react-aria/collapsible): A collapsible section of content, built with React Aria's Disclosure.
    - [Combobox](/docs/primitives/react-aria/combobox): A combo box combines a text input with a listbox, allowing users to filter a list of options to items matching a query.
    - [Context Menu](/docs/primitives/react-aria/context-menu): Displays a menu at the pointer, triggered by a right click.
    - [Dialog](/docs/primitives/react-aria/dialog): An overlay shown above other content in an application. Also the primitive under shadcn/ui's Sheet.
    - [Dropdown Menu](/docs/primitives/react-aria/dropdown-menu): Displays a list of actions or options that a user can choose, triggered by a button.
    - [Hover Card](/docs/primitives/react-aria/hover-card): A preview of the content behind a link, shown on hover. Built with React Aria's PreviewTrigger and Popover.
    - [Pagination](/docs/primitives/react-aria/pagination): Pagination with page navigation, next and previous links. The current page's outline slides from link to link as the page changes.
    - [Popover](/docs/primitives/react-aria/popover): An overlay element positioned relative to a trigger.
    - [Preview Link Card](/docs/primitives/react-aria/preview-link-card): A link that shows a screenshot of the page it leads to when hovered, in a card that links there too. Built on React Aria's PreviewTrigger and Popover.
    - [Progress](/docs/primitives/react-aria/progress): Progress bars show either determinate or indeterminate progress of an operation over time.
    - [Questionnaire](/docs/primitives/react-aria/questionnaire): A multi-step questionnaire with single-choice, multiple-choice, freeform, and skippable questions. Each question slides out before the next one slides in, while the height glides to the new one's.
    - [Radio Group](/docs/primitives/react-aria/radio-group): A set of checkable buttons, known as radio buttons, where no more than one of the buttons can be checked at a time.
    - [Select](/docs/primitives/react-aria/select): A select displays a collapsible list of options and allows a user to select one of them.
    - [Sheet](/docs/primitives/react-aria/sheet): Extends the Dialog component to display content that complements the main content of the screen.
    - [Sidebar](/docs/primitives/react-aria/sidebar): A composable, themeable and customizable sidebar. Its menu buttons share one gliding highlight, and it collapses to icons and back with everything inside on one curve.
    - [Slider](/docs/primitives/react-aria/slider): A slider allows a user to select one or more values within a range.
    - [Switch](/docs/primitives/react-aria/switch): A control that allows the user to toggle between checked and not checked.
    - [Tabs](/docs/primitives/react-aria/tabs): Tabs organize content into multiple sections and allow users to navigate between them.
    - [Toggle Group](/docs/primitives/react-aria/toggle-group): A set of two-state buttons that can be toggled on or off.
    - [Toggle](/docs/primitives/react-aria/toggle): A two-state button that can be either on or off.
    - [Tooltip](/docs/primitives/react-aria/tooltip): A tooltip displays a description of an element on hover or focus.
  - Animate UI
    - [Auto Height](/docs/primitives/animate-ui/auto-height): A container that animates its height to fit its content whenever it changes.
    - [Avatar Group](/docs/primitives/animate-ui/avatar-group): Overlapping avatars where the hovered one rises, with a tooltip that glides from avatar to avatar.
    - [Blur](/docs/primitives/animate-ui/blur): An entrance that brings elements into focus on load or when they scroll into view.
    - [Button](/docs/primitives/animate-ui/button): A button that presses down when tapped.
    - [Click](/docs/primitives/animate-ui/click): A visual effect played where the pointer clicks: a ring, a ripple, a crosshair, a burst or particles.
    - [Code Block](/docs/primitives/animate-ui/code-block): A code block highlighted with Shiki that can type its code out, character by character.
    - [Copy Button](/docs/primitives/animate-ui/copy-button): A button that copies text to the clipboard, its icon swapping for a check.
    - [Counting Number](/docs/primitives/animate-ui/counting-number): A number that counts up to its value, written straight to the DOM.
    - [Cursor](/docs/primitives/animate-ui/cursor): A custom cursor, and a label that follows it, inside an area or across the page.
    - [Effect](/docs/primitives/animate-ui/effect): An entrance that combines fade, blur, slide and zoom on load or when elements scroll into view.
    - [Fade](/docs/primitives/animate-ui/fade): An entrance that fades elements in on load or when they scroll into view.
    - [Flip Button](/docs/primitives/animate-ui/flip-button): A button that flips over on hover to reveal its back face.
    - [GitHub Stars Button](/docs/primitives/animate-ui/github-stars-button): A button showing a repository's GitHub stars, counted up with a filling star.
    - [GitHub Stars](/docs/primitives/animate-ui/github-stars): A repository's GitHub stars, counted up with a filling star and a burst of particles.
    - [Gradient Text](/docs/primitives/animate-ui/gradient-text): Text filled with a gradient that sweeps slowly across it.
    - [Highlight Text](/docs/primitives/animate-ui/highlight-text): Text with a background that sweeps in from the left, like a highlighter.
    - [Highlight](/docs/primitives/animate-ui/highlight): A background that glides between items on click, on hover or with a controlled value.
    - [Icon Button](/docs/primitives/animate-ui/icon-button): A button that bursts into particles when clicked.
    - [Image Zoom](/docs/primitives/animate-ui/image-zoom): An image that zooms in where the pointer is, on hover or on click.
    - [Input OTP](/docs/primitives/animate-ui/input-otp): Accessible one-time password input where typed characters pop in and a pasted code staggers in. A drop-in replacement for input-otp, with the same API.
    - [Liquid Button](/docs/primitives/animate-ui/liquid-button): A button that fills with color from the bottom on hover.
    - [Magnetic](/docs/primitives/animate-ui/magnetic): An element pulled toward the pointer when it comes close.
    - [Morphing Text](/docs/primitives/animate-ui/morphing-text): Text that morphs from one string to the next, letters gliding to their new place.
    - [Motion Grid](/docs/primitives/animate-ui/motion-grid): A grid of dots that plays frame-by-frame animations, for loading and status indicators.
    - [Page Transition](/docs/primitives/animate-ui/page-transition): Animated transitions between pages, built on view transitions, for Next.js, React Router and TanStack Router.
    - [Particles](/docs/primitives/animate-ui/particles): A burst of particles around an element, for likes, stars and other celebrations.
    - [Pinned List](/docs/primitives/animate-ui/pinned-list): A list whose items glide between a pinned and an unpinned group.
    - [Ripple Button](/docs/primitives/animate-ui/ripple-button): A button that sends a ripple out from where it is clicked.
    - [Rolling Text](/docs/primitives/animate-ui/rolling-text): Text whose letters roll over one after another, like a flip board.
    - [Rotating Text](/docs/primitives/animate-ui/rotating-text): Words that take turns in place, each one sliding out as the next slides in.
    - [Scroll Fade](/docs/primitives/animate-ui/scroll-fade): A scroll container whose edges fade only where there is more to scroll, animated as you scroll.
    - [Scroll Progress](/docs/primitives/animate-ui/scroll-progress): A progress bar that follows the scroll position of the page or of a container.
    - [Scrolling Number](/docs/primitives/animate-ui/scrolling-number): A wheel of numbers that spins to its value and settles under a highlight.
    - [Shimmering Text](/docs/primitives/animate-ui/shimmering-text): Text with a glint of light that runs across its letters.
    - [Shine](/docs/primitives/animate-ui/shine): A light that sweeps across an element, once, in a loop, on hover or on tap.
    - [Slide](/docs/primitives/animate-ui/slide): An entrance that slides elements into place on load or when they scroll into view.
    - [Sliding Number](/docs/primitives/animate-ui/sliding-number): A number whose digits roll to their new value, like an odometer.
    - [Sliding Text](/docs/primitives/animate-ui/sliding-text): Text that slides out of its box while a copy slides in, on hover or on click, like a menu link.
    - [Splitting Text](/docs/primitives/animate-ui/splitting-text): Text that comes in piece by piece, by character, word or line.
    - [Spring](/docs/primitives/animate-ui/spring): A draggable element tied to its place by a spring coil, which pulls it back on release.
    - [Swapping Text](/docs/primitives/animate-ui/swapping-text): Text that swaps to a new value letter by letter, each changed letter sliding out as the new one slides in.
    - [Tabs](/docs/primitives/animate-ui/tabs): Animate UI's own tabs: a highlight glides between triggers and panels slide, with the height following the active panel.
    - [Theme Toggler Button](/docs/primitives/animate-ui/theme-toggler-button): A button that cycles the theme, its icon turning into the next one.
    - [Theme Toggler](/docs/primitives/animate-ui/theme-toggler): A theme switch that wipes the new theme across the page with the View Transitions API.
    - [Tilt](/docs/primitives/animate-ui/tilt): A card that tilts in 3D toward the pointer.
    - [Tooltip](/docs/primitives/animate-ui/tooltip): Animate UI's own tooltip: the tooltips of a provider share one popup that moves from trigger to trigger instead of closing and reopening.
    - [Typing Text](/docs/primitives/animate-ui/typing-text): Text typed character by character, with an optional blinking cursor.
    - [Zoom](/docs/primitives/animate-ui/zoom): An entrance that scales elements up into place on load or when they scroll into view.
- Backgrounds
  - [Backgrounds](/docs/backgrounds): Animated backgrounds for heroes and sections. Each one is a file in your project, added with the shadcn CLI.
  - [Bubble Background](/docs/backgrounds/bubble): An interactive background featuring smoothly animated gradient bubbles, creating a playful, dynamic, and visually engaging backdrop.
  - [Fireworks Background](/docs/backgrounds/fireworks): A background component that displays a fireworks animation.
  - [Glyph Background](/docs/backgrounds/glyph): A field of characters lit by drifting glows. Moving the cursor wakes them up with a trail of light, and a click sends shapes rippling out of it.
  - [Gradient Background](/docs/backgrounds/gradient): A background component featuring a subtle yet engaging animated gradient effect, smoothly transitioning colors to enhance visual depth.
  - [Gravity Stars Background](/docs/backgrounds/gravity-stars): A background component featuring an interactive gravity stars effect.
  - [Hexagon Background](/docs/backgrounds/hexagon): A background component featuring an interactive hexagon grid.
  - [Hole Background](/docs/backgrounds/hole): A background component featuring an animated tunnel of rings with rising particles.
  - [Stars Background](/docs/backgrounds/stars): An interactive background featuring animated dots of varying sizes and speeds, simulating a dynamic and immersive starry space effect.
  - [Topography Background](/docs/backgrounds/topography): Living contour lines, like a map of a terrain that slowly breathes. A hill rises under the cursor and a click sends a wave across.
- Icons
  - [Icons](/docs/icons): Animated icons for the icon libraries you already use. Each icon is a file in your project, added with the shadcn CLI, and animated by one small core from @animate-ui/react.
  - [Get Started](/docs/icons/get-started): How animated icons work, whatever the icon library. Each icon is a file in your project, animated by one small core from @animate-ui/react.
  - [Lucide Icons](/docs/icons/lucide-icons): Every Lucide icon Animate UI animates. Preview each animation, then add the icons you need.
  - [Hugeicons](/docs/icons/hugeicons): Hugeicons' free icons, animated. Preview each animation, then add the icons you need.
- [@animate-ui/react](/docs/react): The @animate-ui/react package, its exports, peer dependencies and AnimateUIProvider.
- [CLI](/docs/cli): Use the Animate UI CLI to animate your shadcn/ui components, migrate from Animate UI v1 and list what moves in your project.
- [Skills](/docs/skills): Give your AI assistant the knowledge to animate components the Animate UI way.
- [MCP](/docs/mcp): Browse and add Animate UI's icons, backgrounds and styled components from your AI assistant with the shadcn MCP server.
- [Accessibility](/docs/accessibility): Animation that never gets in the way of anyone using your interface.
- [Changelog](/docs/changelog): What changed in Animate UI.