---
name: "@animate-ui"
slug: "animate-ui"
description: "Fully animated open-source React component distribution built with TypeScript, Tailwind CSS, and Motion (formerly Framer Motion). Three component tiers: animated Radix-wrapped primitives (accordion, alert-dialog, checkbox, dialog, dropdown-menu, files, hover-card, popover, progress, radio-group, sheet, sidebar, switch, tabs, toggle, tooltip), Base UI-backed variants of the same set, and custom Animate components (avatar-group, code, code-tabs, cursor, github-stars-wheel, tabs, tooltip). Also includes animated Lucide icons. MCP server available. Free, MIT-licensed. Use for: any React app that wants smooth, physics-based transitions on standard shadcn/ui primitives without writing animation logic manually."
category: "Animated components"
tags: ["accessibility", "aesthetic", "animation", "backgrounds", "buttons", "cards", "dashboard", "design-system", "forms", "glassmorphism", "hooks", "icons", "loaders", "media", "navigation", "overlays", "theming"]
framework: "react"
license: null
author: "imskyleen"
website: "https://animate-ui.com"
github: "https://github.com/imskyleen/animate-ui"
registry: "https://animate-ui.com/r/registry.json"
pro: false
pro_url: null
github_stars: 3777
component_count: 250
generated_at: "2026-07-28T08:00:50.948Z"
---

# @animate-ui

Fully animated open-source React component distribution built with TypeScript, Tailwind CSS, and Motion (formerly Framer Motion). Three component tiers: animated Radix-wrapped primitives (accordion, alert-dialog, checkbox, dialog, dropdown-menu, files, hover-card, popover, progress, radio-group, sheet, sidebar, switch, tabs, toggle, tooltip), Base UI-backed variants of the same set, and custom Animate components (avatar-group, code, code-tabs, cursor, github-stars-wheel, tabs, tooltip). Also includes animated Lucide icons. MCP server available. Free, MIT-licensed. Use for: any React app that wants smooth, physics-based transitions on standard shadcn/ui primitives without writing animation logic manually.

## Links

- Website: https://animate-ui.com
- GitHub: https://github.com/imskyleen/animate-ui
- Registry JSON: https://animate-ui.com/r/registry.json
- Directory page: https://sh4dcn.vercel.app/registry/animate-ui
- This file: https://sh4dcn.vercel.app/md/animate-ui.md

## Install

```sh
# add the whole registry (shadcn CLI)
npx shadcn@latest add https://animate-ui.com/r/registry.json
pnpm dlx shadcn@latest add https://animate-ui.com/r/registry.json
bunx shadcn@latest add https://animate-ui.com/r/registry.json
# clone the source repo
git clone https://github.com/imskyleen/animate-ui.git
# fetch the raw registry index
curl -s https://animate-ui.com/r/registry.json
```

## Components (250)

| name | type | description | install |
| --- | --- | --- | --- |
| index | registry:style | — | `npx shadcn@latest add https://animate-ui.com/r/index.json` |
| components-animate-avatar-group | registry:ui | An animated avatar group that displays overlapping user images and smoothly shifts each avatar forward on hover to highlight it. | `npx shadcn@latest add https://animate-ui.com/r/components-animate-avatar-group.json` |
| components-animate-code | registry:ui | A code component that animates the code as it is written. | `npx shadcn@latest add https://animate-ui.com/r/components-animate-code.json` |
| components-animate-code-tabs | registry:ui | A tabs component that displays code for different languages. | `npx shadcn@latest add https://animate-ui.com/r/components-animate-code-tabs.json` |
| components-animate-cursor | registry:ui | An animated cursor component that allows you to customize both the cursor and cursor follow elements with smooth animations. | `npx shadcn@latest add https://animate-ui.com/r/components-animate-cursor.json` |
| components-animate-github-stars-wheel | registry:ui | A scrolling wheel that displays GitHub stars count. | `npx shadcn@latest add https://animate-ui.com/r/components-animate-github-stars-wheel.json` |
| components-animate-tabs | registry:ui | A set of layered sections of content—known as tab panels—that are displayed one at a time. | `npx shadcn@latest add https://animate-ui.com/r/components-animate-tabs.json` |
| components-animate-tooltip | registry:ui | A tooltip is a small box that appears when hovering over an element. | `npx shadcn@latest add https://animate-ui.com/r/components-animate-tooltip.json` |
| components-backgrounds-bubble | registry:ui | An interactive background featuring smoothly animated gradient bubbles, creating a playful, dynamic, and visually engaging backdrop. | `npx shadcn@latest add https://animate-ui.com/r/components-backgrounds-bubble.json` |
| components-backgrounds-fireworks | registry:ui | A background component that displays a fireworks animation. | `npx shadcn@latest add https://animate-ui.com/r/components-backgrounds-fireworks.json` |
| components-backgrounds-gradient | registry:ui | A background component featuring a subtle yet engaging animated gradient effect, smoothly transitioning colors to enhance visual depth. | `npx shadcn@latest add https://animate-ui.com/r/components-backgrounds-gradient.json` |
| components-backgrounds-gravity-stars | registry:ui | A background component featuring a subtle yet engaging animated gravity stars effect. | `npx shadcn@latest add https://animate-ui.com/r/components-backgrounds-gravity-stars.json` |
| components-backgrounds-hexagon | registry:ui | A background component featuring an interactive hexagon grid. | `npx shadcn@latest add https://animate-ui.com/r/components-backgrounds-hexagon.json` |
| components-backgrounds-hole | registry:ui | A background component featuring an animated hole grid. | `npx shadcn@latest add https://animate-ui.com/r/components-backgrounds-hole.json` |
| components-backgrounds-stars | registry:ui | An interactive background featuring animated dots of varying sizes and speeds, simulating a dynamic and immersive starry space effect. | `npx shadcn@latest add https://animate-ui.com/r/components-backgrounds-stars.json` |
| components-base-accordion | registry:ui | A set of collapsible panels with headings. | `npx shadcn@latest add https://animate-ui.com/r/components-base-accordion.json` |
| components-base-alert-dialog | registry:ui | A dialog that requires user response to proceed. | `npx shadcn@latest add https://animate-ui.com/r/components-base-alert-dialog.json` |
| components-base-checkbox | registry:ui | An easily stylable checkbox component. | `npx shadcn@latest add https://animate-ui.com/r/components-base-checkbox.json` |
| components-base-dialog | registry:ui | A popup that opens on top of the entire page. | `npx shadcn@latest add https://animate-ui.com/r/components-base-dialog.json` |
| components-base-files | registry:ui | A component that allows you to display a list of files and folders. | `npx shadcn@latest add https://animate-ui.com/r/components-base-files.json` |
| components-base-menu | registry:ui | A list of actions in a dropdown, enhanced with keyboard navigation. | `npx shadcn@latest add https://animate-ui.com/r/components-base-menu.json` |
| components-base-popover | registry:ui | An accessible popup anchored to a button. | `npx shadcn@latest add https://animate-ui.com/r/components-base-popover.json` |
| components-base-preview-card | registry:ui | A popup that appears when a link is hovered, showing a preview for sighted users. | `npx shadcn@latest add https://animate-ui.com/r/components-base-preview-card.json` |
| components-base-preview-link-card | registry:ui | Displays a preview image of a link when hovered. | `npx shadcn@latest add https://animate-ui.com/r/components-base-preview-link-card.json` |
| components-base-progress | registry:ui | Displays the status of a task that takes a long time. | `npx shadcn@latest add https://animate-ui.com/r/components-base-progress.json` |
| components-base-radio | registry:ui | An easily stylable radio button component. | `npx shadcn@latest add https://animate-ui.com/r/components-base-radio.json` |
| components-base-switch | registry:ui | A control that indicates whether a setting is on or off. | `npx shadcn@latest add https://animate-ui.com/r/components-base-switch.json` |
| components-base-tabs | registry:ui | A component for toggling between related panels on the same page. | `npx shadcn@latest add https://animate-ui.com/r/components-base-tabs.json` |
| components-base-toggle | registry:ui | A two-state button that can be on or off. | `npx shadcn@latest add https://animate-ui.com/r/components-base-toggle.json` |
| components-base-toggle-group | registry:ui | Provides a shared state to a series of toggle buttons. | `npx shadcn@latest add https://animate-ui.com/r/components-base-toggle-group.json` |
| components-base-tooltip | registry:ui | A popup that appears when an element is hovered or focused, showing a hint for sighted users. | `npx shadcn@latest add https://animate-ui.com/r/components-base-tooltip.json` |
| components-buttons-button | registry:ui | A button component with a variety of styles and animations. | `npx shadcn@latest add https://animate-ui.com/r/components-buttons-button.json` |
| components-buttons-copy | registry:ui | A copy button component with a variety of styles and animations. | `npx shadcn@latest add https://animate-ui.com/r/components-buttons-copy.json` |
| components-buttons-flip | registry:ui | A button that flips between two states on hover. | `npx shadcn@latest add https://animate-ui.com/r/components-buttons-flip.json` |
| components-buttons-github-stars | registry:ui | A clickable button that links to a GitHub repository and displays the number of stars. | `npx shadcn@latest add https://animate-ui.com/r/components-buttons-github-stars.json` |
| components-buttons-icon | registry:ui | An icon button component with a variety of styles and animations. | `npx shadcn@latest add https://animate-ui.com/r/components-buttons-icon.json` |
| components-buttons-liquid | registry:ui | A button that fills on hover. | `npx shadcn@latest add https://animate-ui.com/r/components-buttons-liquid.json` |
| components-buttons-ripple | registry:ui | A button that animates on tap with a ripple effect. | `npx shadcn@latest add https://animate-ui.com/r/components-buttons-ripple.json` |
| components-buttons-theme-toggler | registry:ui | A button that toggles the theme gradually. | `npx shadcn@latest add https://animate-ui.com/r/components-buttons-theme-toggler.json` |
| components-community-flip-card | registry:ui | A 3D animated card component that flips to reveal content on the back. | `npx shadcn@latest add https://animate-ui.com/r/components-community-flip-card.json` |
| components-community-management-bar | registry:ui | A management bar for managing items. | `npx shadcn@latest add https://animate-ui.com/r/components-community-management-bar.json` |
| components-community-motion-carousel | registry:ui | 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… | `npx shadcn@latest add https://animate-ui.com/r/components-community-motion-carousel.json` |
| components-community-notification-list | registry:ui | A fun notification list with animated stacking and cards that expand as you interact. | `npx shadcn@latest add https://animate-ui.com/r/components-community-notification-list.json` |
| components-community-pin-list | registry:ui | A playful list for pinning and unpinning items, with smooth animated transitions as items move between groups. | `npx shadcn@latest add https://animate-ui.com/r/components-community-pin-list.json` |
| components-community-playful-todolist | registry:ui | A playful todolist component with animated wavy strikethroughs for each completed task. | `npx shadcn@latest add https://animate-ui.com/r/components-community-playful-todolist.json` |
| components-community-radial-intro | registry:ui | A circular intro animation component that arranges elements in a radial layout, smoothly transitioning them into orbit with looping motion. | `npx shadcn@latest add https://animate-ui.com/r/components-community-radial-intro.json` |
| components-community-radial-menu | registry:ui | A circular context menu built with Base UI, displaying actions in a clean radial layout with full keyboard support and smooth interaction. | `npx shadcn@latest add https://animate-ui.com/r/components-community-radial-menu.json` |
| components-community-radial-nav | registry:ui | A circular navigation menu with animated pointer and expanding buttons for smooth interactive transitions. | `npx shadcn@latest add https://animate-ui.com/r/components-community-radial-nav.json` |
| components-community-share-button | registry:ui | This is a button for sharing. | `npx shadcn@latest add https://animate-ui.com/r/components-community-share-button.json` |
| components-community-user-presence-avatar | registry:ui | A compact avatar group for showing online and offline users, with smooth animated transitions when presence changes. | `npx shadcn@latest add https://animate-ui.com/r/components-community-user-presence-avatar.json` |
| components-headless-accordion | registry:ui | A vertically stacked set of interactive headings that each reveal an associated section of content. | `npx shadcn@latest add https://animate-ui.com/r/components-headless-accordion.json` |
| components-headless-checkbox | registry:ui | 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. | `npx shadcn@latest add https://animate-ui.com/r/components-headless-checkbox.json` |
| components-headless-dialog | registry:ui | A fully-managed, renderless dialog component jam-packed with accessibility and keyboard features, perfect for building completely custom dialogs and alerts. | `npx shadcn@latest add https://animate-ui.com/r/components-headless-dialog.json` |
| components-headless-popover | registry:ui | Popovers are perfect for floating panels with arbitrary content like navigation menus, mobile menus and flyout menus. | `npx shadcn@latest add https://animate-ui.com/r/components-headless-popover.json` |
| components-headless-switch | registry:ui | Switches are a pleasant interface for toggling a value between two states, and offer the same semantics and keyboard navigation as native checkbox elements. | `npx shadcn@latest add https://animate-ui.com/r/components-headless-switch.json` |
| components-headless-tabs | registry:ui | Easily create accessible, fully customizable tab interfaces, with robust focus management and keyboard navigation support. | `npx shadcn@latest add https://animate-ui.com/r/components-headless-tabs.json` |
| components-radix-accordion | registry:ui | A vertically stacked set of interactive headings that each reveal an associated section of content. | `npx shadcn@latest add https://animate-ui.com/r/components-radix-accordion.json` |
| components-radix-alert-dialog | registry:ui | A modal dialog that interrupts the user with important content and expects a response. | `npx shadcn@latest add https://animate-ui.com/r/components-radix-alert-dialog.json` |
| components-radix-checkbox | registry:ui | A control that allows the user to toggle between checked and not checked. | `npx shadcn@latest add https://animate-ui.com/r/components-radix-checkbox.json` |
| components-radix-dialog | registry:ui | A window overlaid on either the primary window or another dialog window, rendering the content underneath inert. | `npx shadcn@latest add https://animate-ui.com/r/components-radix-dialog.json` |
| components-radix-dropdown-menu | registry:ui | Displays a menu to the user — such as a set of actions or functions — triggered by a button. | `npx shadcn@latest add https://animate-ui.com/r/components-radix-dropdown-menu.json` |
| components-radix-files | registry:ui | A component that allows you to display a list of files and folders. | `npx shadcn@latest add https://animate-ui.com/r/components-radix-files.json` |
| components-radix-hover-card | registry:ui | For sighted users to preview content available behind a link. | `npx shadcn@latest add https://animate-ui.com/r/components-radix-hover-card.json` |
| components-radix-popover | registry:ui | Displays rich content in a portal, triggered by a button. | `npx shadcn@latest add https://animate-ui.com/r/components-radix-popover.json` |
| components-radix-preview-link-card | registry:ui | Displays a preview image of a link when hovered. | `npx shadcn@latest add https://animate-ui.com/r/components-radix-preview-link-card.json` |
| components-radix-progress | registry:ui | Displays an indicator showing the completion progress of a task, typically displayed as a progress bar. | `npx shadcn@latest add https://animate-ui.com/r/components-radix-progress.json` |
| components-radix-radio-group | registry:ui | A set of checkable buttons—known as radio buttons—where no more than one of the buttons can be checked at a time. | `npx shadcn@latest add https://animate-ui.com/r/components-radix-radio-group.json` |
| components-radix-sheet | registry:ui | Extends the Dialog component to display content that complements the main content of the screen. | `npx shadcn@latest add https://animate-ui.com/r/components-radix-sheet.json` |
| components-radix-sidebar | registry:ui | A composable, themeable and customizable sidebar component. Created by Shadcn and animated by Animate UI. | `npx shadcn@latest add https://animate-ui.com/r/components-radix-sidebar.json` |
| components-radix-switch | registry:ui | A control that allows the user to toggle between checked and not checked. | `npx shadcn@latest add https://animate-ui.com/r/components-radix-switch.json` |
| components-radix-tabs | registry:ui | A set of layered sections of content—known as tab panels—that are displayed one at a time. | `npx shadcn@latest add https://animate-ui.com/r/components-radix-tabs.json` |
| components-radix-toggle | registry:ui | A two-state button that can be either on or off. | `npx shadcn@latest add https://animate-ui.com/r/components-radix-toggle.json` |
| components-radix-toggle-group | registry:ui | A set of two-state buttons that can be toggled on or off. | `npx shadcn@latest add https://animate-ui.com/r/components-radix-toggle-group.json` |
| components-radix-tooltip | registry:ui | A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it. | `npx shadcn@latest add https://animate-ui.com/r/components-radix-tooltip.json` |
| demo-components-animate-avatar-group | registry:ui | Demo showing a avatar group. | `npx shadcn@latest add https://animate-ui.com/r/demo-components-animate-avatar-group.json` |
| demo-components-animate-code | registry:ui | Demo showing a code. | `npx shadcn@latest add https://animate-ui.com/r/demo-components-animate-code.json` |
| demo-components-animate-code-tabs | registry:ui | Demo showing a code tabs. | `npx shadcn@latest add https://animate-ui.com/r/demo-components-animate-code-tabs.json` |
| demo-components-animate-cursor | registry:ui | Demo showing a cursor. | `npx shadcn@latest add https://animate-ui.com/r/demo-components-animate-cursor.json` |
| demo-components-animate-github-stars-wheel | registry:ui | Demo showing an animated github stars wheel. | `npx shadcn@latest add https://animate-ui.com/r/demo-components-animate-github-stars-wheel.json` |
| demo-components-animate-tabs | registry:ui | Demo showing an animated tabs. | `npx shadcn@latest add https://animate-ui.com/r/demo-components-animate-tabs.json` |
| demo-components-animate-tooltip | registry:ui | Demo showing an animated tooltip. | `npx shadcn@latest add https://animate-ui.com/r/demo-components-animate-tooltip.json` |
| demo-components-backgrounds-bubble | registry:ui | Demo showing a bubble background. | `npx shadcn@latest add https://animate-ui.com/r/demo-components-backgrounds-bubble.json` |
| demo-components-backgrounds-fireworks | registry:ui | Demo showing a fireworks background. | `npx shadcn@latest add https://animate-ui.com/r/demo-components-backgrounds-fireworks.json` |
| demo-components-backgrounds-fireworks-circle | registry:ui | Demo showing a fireworks circle background. | `npx shadcn@latest add https://animate-ui.com/r/demo-components-backgrounds-fireworks-circle.json` |
| demo-components-backgrounds-gradient | registry:ui | Demo showing a gradient background. | `npx shadcn@latest add https://animate-ui.com/r/demo-components-backgrounds-gradient.json` |
| demo-components-backgrounds-gravity-stars | registry:ui | Demo showing a gravity stars background. | `npx shadcn@latest add https://animate-ui.com/r/demo-components-backgrounds-gravity-stars.json` |
| demo-components-backgrounds-hexagon | registry:ui | Demo showing a hexagon background. | `npx shadcn@latest add https://animate-ui.com/r/demo-components-backgrounds-hexagon.json` |
| demo-components-backgrounds-hole | registry:ui | Demo showing a hole background. | `npx shadcn@latest add https://animate-ui.com/r/demo-components-backgrounds-hole.json` |
| demo-components-backgrounds-stars | registry:ui | Demo showing a stars background. | `npx shadcn@latest add https://animate-ui.com/r/demo-components-backgrounds-stars.json` |
| demo-components-base-accordion | registry:ui | Demo showing a accordion. | `npx shadcn@latest add https://animate-ui.com/r/demo-components-base-accordion.json` |
| demo-components-base-alert-dialog | registry:ui | Demo showing a alert dialog. | `npx shadcn@latest add https://animate-ui.com/r/demo-components-base-alert-dialog.json` |
| demo-components-base-checkbox | registry:ui | Demo showing a checkbox. | `npx shadcn@latest add https://animate-ui.com/r/demo-components-base-checkbox.json` |
| demo-components-base-dialog | registry:ui | Demo showing a dialog. | `npx shadcn@latest add https://animate-ui.com/r/demo-components-base-dialog.json` |
| demo-components-base-files | registry:ui | Demo showing a files. | `npx shadcn@latest add https://animate-ui.com/r/demo-components-base-files.json` |
| demo-components-base-menu | registry:ui | Demo showing a menu. | `npx shadcn@latest add https://animate-ui.com/r/demo-components-base-menu.json` |
| demo-components-base-menu-checkbox | registry:ui | Demo showing a menu checkbox. | `npx shadcn@latest add https://animate-ui.com/r/demo-components-base-menu-checkbox.json` |
| demo-components-base-menu-radio | registry:ui | Demo showing a menu radio. | `npx shadcn@latest add https://animate-ui.com/r/demo-components-base-menu-radio.json` |
| demo-components-base-popover | registry:ui | Demo showing a popover. | `npx shadcn@latest add https://animate-ui.com/r/demo-components-base-popover.json` |
| demo-components-base-preview-card | registry:ui | Demo showing a preview card. | `npx shadcn@latest add https://animate-ui.com/r/demo-components-base-preview-card.json` |
| demo-components-base-preview-link-card | registry:ui | Demo showing a preview link card. | `npx shadcn@latest add https://animate-ui.com/r/demo-components-base-preview-link-card.json` |
| demo-components-base-progress | registry:ui | Demo showing a progress bar. | `npx shadcn@latest add https://animate-ui.com/r/demo-components-base-progress.json` |
| demo-components-base-radio | registry:ui | Demo showing a base radio. | `npx shadcn@latest add https://animate-ui.com/r/demo-components-base-radio.json` |
| demo-components-base-switch | registry:ui | Demo showing a switch. | `npx shadcn@latest add https://animate-ui.com/r/demo-components-base-switch.json` |
| demo-components-base-tabs | registry:ui | Demo showing a base tabs. | `npx shadcn@latest add https://animate-ui.com/r/demo-components-base-tabs.json` |
| demo-components-base-toggle | registry:ui | Demo showing a toggle. | `npx shadcn@latest add https://animate-ui.com/r/demo-components-base-toggle.json` |
| demo-components-base-toggle-group | registry:ui | Demo showing a toggle group. | `npx shadcn@latest add https://animate-ui.com/r/demo-components-base-toggle-group.json` |
| demo-components-base-tooltip | registry:ui | Demo showing a tooltip. | `npx shadcn@latest add https://animate-ui.com/r/demo-components-base-tooltip.json` |
| demo-components-buttons-button | registry:ui | Demo showing a button. | `npx shadcn@latest add https://animate-ui.com/r/demo-components-buttons-button.json` |
| demo-components-buttons-copy | registry:ui | Demo showing a copy button. | `npx shadcn@latest add https://animate-ui.com/r/demo-components-buttons-copy.json` |
| demo-components-buttons-flip | registry:ui | Demo showing a flip button. | `npx shadcn@latest add https://animate-ui.com/r/demo-components-buttons-flip.json` |
| demo-components-buttons-github-stars | registry:ui | Demo showing a GitHub stars button. | `npx shadcn@latest add https://animate-ui.com/r/demo-components-buttons-github-stars.json` |
| demo-components-buttons-icon | registry:ui | Demo showing an icon button. | `npx shadcn@latest add https://animate-ui.com/r/demo-components-buttons-icon.json` |
| demo-components-buttons-liquid | registry:ui | Demo showing a liquid button. | `npx shadcn@latest add https://animate-ui.com/r/demo-components-buttons-liquid.json` |
| demo-components-buttons-ripple | registry:ui | Demo showing a ripple button. | `npx shadcn@latest add https://animate-ui.com/r/demo-components-buttons-ripple.json` |
| demo-components-buttons-theme-toggler | registry:ui | Demo showing a theme toggler button. | `npx shadcn@latest add https://animate-ui.com/r/demo-components-buttons-theme-toggler.json` |
| demo-components-community-flip-card | registry:ui | Demo showing the flip card component. | `npx shadcn@latest add https://animate-ui.com/r/demo-components-community-flip-card.json` |
| demo-components-community-management-bar | registry:ui | Demo showing a management bar. | `npx shadcn@latest add https://animate-ui.com/r/demo-components-community-management-bar.json` |
| demo-components-community-motion-carousel | registry:ui | Demo showing motion carousel. | `npx shadcn@latest add https://animate-ui.com/r/demo-components-community-motion-carousel.json` |
| demo-components-community-notification-list | registry:ui | Demo showing a notification list. | `npx shadcn@latest add https://animate-ui.com/r/demo-components-community-notification-list.json` |
| demo-components-community-pin-list | registry:ui | Demo showing a pin list. | `npx shadcn@latest add https://animate-ui.com/r/demo-components-community-pin-list.json` |
| demo-components-community-playful-todolist | registry:ui | Demo showing a playful todolist. | `npx shadcn@latest add https://animate-ui.com/r/demo-components-community-playful-todolist.json` |
| demo-components-community-radial-intro | registry:ui | Demo showing radial intro. | `npx shadcn@latest add https://animate-ui.com/r/demo-components-community-radial-intro.json` |
| demo-components-community-radial-menu | registry:ui | Demo Radial Menu. | `npx shadcn@latest add https://animate-ui.com/r/demo-components-community-radial-menu.json` |
| demo-components-community-radial-nav | registry:ui | Demo Radial Nav. | `npx shadcn@latest add https://animate-ui.com/r/demo-components-community-radial-nav.json` |
| demo-components-community-share-button | registry:ui | Demo showing a share button. | `npx shadcn@latest add https://animate-ui.com/r/demo-components-community-share-button.json` |
| demo-components-community-user-presence-avatar | registry:ui | Demo showing a user presence avatar. | `npx shadcn@latest add https://animate-ui.com/r/demo-components-community-user-presence-avatar.json` |
| demo-components-headless-accordion | registry:ui | Demo showing a accordion. | `npx shadcn@latest add https://animate-ui.com/r/demo-components-headless-accordion.json` |
| demo-components-headless-checkbox | registry:ui | Demo showing a checkbox. | `npx shadcn@latest add https://animate-ui.com/r/demo-components-headless-checkbox.json` |
| demo-components-headless-dialog | registry:ui | Demo showing a dialog. | `npx shadcn@latest add https://animate-ui.com/r/demo-components-headless-dialog.json` |
| demo-components-headless-popover | registry:ui | Demo showing a popover. | `npx shadcn@latest add https://animate-ui.com/r/demo-components-headless-popover.json` |
| demo-components-headless-switch | registry:ui | Demo showing a headless switch. | `npx shadcn@latest add https://animate-ui.com/r/demo-components-headless-switch.json` |
| demo-components-headless-tabs | registry:ui | Demo showing a headless tabs. | `npx shadcn@latest add https://animate-ui.com/r/demo-components-headless-tabs.json` |
| demo-components-radix-accordion | registry:ui | Demo showing a accordion. | `npx shadcn@latest add https://animate-ui.com/r/demo-components-radix-accordion.json` |
| demo-components-radix-alert-dialog | registry:ui | Demo showing a alert dialog. | `npx shadcn@latest add https://animate-ui.com/r/demo-components-radix-alert-dialog.json` |
| demo-components-radix-checkbox | registry:ui | Demo showing a checkbox. | `npx shadcn@latest add https://animate-ui.com/r/demo-components-radix-checkbox.json` |
| demo-components-radix-dialog | registry:ui | Demo showing a dialog. | `npx shadcn@latest add https://animate-ui.com/r/demo-components-radix-dialog.json` |
| demo-components-radix-dropdown-menu | registry:ui | Demo showing a dropdown menu. | `npx shadcn@latest add https://animate-ui.com/r/demo-components-radix-dropdown-menu.json` |
| demo-components-radix-dropdown-menu-checkbox | registry:ui | Demo showing a dropdown menu with a checkbox. | `npx shadcn@latest add https://animate-ui.com/r/demo-components-radix-dropdown-menu-checkbox.json` |
| demo-components-radix-dropdown-menu-radio | registry:ui | Demo showing a dropdown menu with a radio. | `npx shadcn@latest add https://animate-ui.com/r/demo-components-radix-dropdown-menu-radio.json` |
| demo-components-radix-files | registry:ui | Demo showing a files. | `npx shadcn@latest add https://animate-ui.com/r/demo-components-radix-files.json` |
| demo-components-radix-hover-card | registry:ui | Demo showing a hover card. | `npx shadcn@latest add https://animate-ui.com/r/demo-components-radix-hover-card.json` |
| demo-components-radix-popover | registry:ui | Demo showing a popover. | `npx shadcn@latest add https://animate-ui.com/r/demo-components-radix-popover.json` |
| demo-components-radix-preview-link-card | registry:ui | Demo showing a preview link card. | `npx shadcn@latest add https://animate-ui.com/r/demo-components-radix-preview-link-card.json` |
| demo-components-radix-progress | registry:ui | Demo showing a radix progress. | `npx shadcn@latest add https://animate-ui.com/r/demo-components-radix-progress.json` |
| demo-components-radix-radio-group | registry:ui | Demo showing a radix radio group. | `npx shadcn@latest add https://animate-ui.com/r/demo-components-radix-radio-group.json` |
| demo-components-radix-sheet | registry:ui | Demo showing a radix sheet. | `npx shadcn@latest add https://animate-ui.com/r/demo-components-radix-sheet.json` |
| demo-components-radix-sidebar | registry:ui | Demo showing a radix sidebar. | `npx shadcn@latest add https://animate-ui.com/r/demo-components-radix-sidebar.json` |
| demo-components-radix-switch | registry:ui | Demo showing a radix switch. | `npx shadcn@latest add https://animate-ui.com/r/demo-components-radix-switch.json` |
| demo-components-radix-tabs | registry:ui | Demo showing a radix tabs. | `npx shadcn@latest add https://animate-ui.com/r/demo-components-radix-tabs.json` |
| demo-components-radix-toggle | registry:ui | Demo showing a radix toggle. | `npx shadcn@latest add https://animate-ui.com/r/demo-components-radix-toggle.json` |
| demo-components-radix-toggle-group | registry:ui | Demo showing a radix toggle group. | `npx shadcn@latest add https://animate-ui.com/r/demo-components-radix-toggle-group.json` |
| demo-components-radix-tooltip | registry:ui | Demo showing a radix tooltip. | `npx shadcn@latest add https://animate-ui.com/r/demo-components-radix-tooltip.json` |
| demo-primitives-animate-avatar-group | registry:ui | Demo showing an animated avatar group. | `npx shadcn@latest add https://animate-ui.com/r/demo-primitives-animate-avatar-group.json` |
| demo-primitives-animate-code-block | registry:ui | Demo showing an animated code block. | `npx shadcn@latest add https://animate-ui.com/r/demo-primitives-animate-code-block.json` |
| demo-primitives-animate-cursor | registry:ui | Demo showing an animated cursor. | `npx shadcn@latest add https://animate-ui.com/r/demo-primitives-animate-cursor.json` |
| demo-primitives-animate-github-stars | registry:ui | Demo showing an animated github stars counter. | `npx shadcn@latest add https://animate-ui.com/r/demo-primitives-animate-github-stars.json` |
| demo-primitives-animate-motion-grid | registry:ui | Demo showing an animated motion grid. | `npx shadcn@latest add https://animate-ui.com/r/demo-primitives-animate-motion-grid.json` |
| demo-primitives-animate-pinned-list | registry:ui | Demo showing an animated pinned list. | `npx shadcn@latest add https://animate-ui.com/r/demo-primitives-animate-pinned-list.json` |
| demo-primitives-animate-scroll-progress | registry:ui | Demo showing an animated scroll progress. | `npx shadcn@latest add https://animate-ui.com/r/demo-primitives-animate-scroll-progress.json` |
| demo-primitives-animate-spring | registry:ui | Demo showing an animated spring. | `npx shadcn@latest add https://animate-ui.com/r/demo-primitives-animate-spring.json` |
| demo-primitives-animate-tabs | registry:ui | Demo showing an animated tabs. | `npx shadcn@latest add https://animate-ui.com/r/demo-primitives-animate-tabs.json` |
| demo-primitives-animate-tooltip | registry:ui | Demo showing an animated tooltip. | `npx shadcn@latest add https://animate-ui.com/r/demo-primitives-animate-tooltip.json` |
| demo-primitives-base-accordion | registry:ui | Demo showing an animated base accordion. | `npx shadcn@latest add https://animate-ui.com/r/demo-primitives-base-accordion.json` |
| demo-primitives-base-alert-dialog | registry:ui | Demo showing an animated base alert dialog. | `npx shadcn@latest add https://animate-ui.com/r/demo-primitives-base-alert-dialog.json` |
| demo-primitives-base-checkbox | registry:ui | Demo showing an animated base checkbox. | `npx shadcn@latest add https://animate-ui.com/r/demo-primitives-base-checkbox.json` |
| demo-primitives-base-collapsible | registry:ui | Demo showing an animated base collapsible. | `npx shadcn@latest add https://animate-ui.com/r/demo-primitives-base-collapsible.json` |
| demo-primitives-base-dialog | registry:ui | Demo showing an animated base dialog. | `npx shadcn@latest add https://animate-ui.com/r/demo-primitives-base-dialog.json` |
| demo-primitives-base-files | registry:ui | Demo showing an animated base files. | `npx shadcn@latest add https://animate-ui.com/r/demo-primitives-base-files.json` |
| demo-primitives-base-menu | registry:ui | Demo showing an animated base menu. | `npx shadcn@latest add https://animate-ui.com/r/demo-primitives-base-menu.json` |
| demo-primitives-base-popover | registry:ui | Demo showing an animated base popover. | `npx shadcn@latest add https://animate-ui.com/r/demo-primitives-base-popover.json` |
| demo-primitives-base-preview-card | registry:ui | Demo showing an animated base preview card. | `npx shadcn@latest add https://animate-ui.com/r/demo-primitives-base-preview-card.json` |
| demo-primitives-base-preview-link-card | registry:ui | Demo showing an animated base preview link card. | `npx shadcn@latest add https://animate-ui.com/r/demo-primitives-base-preview-link-card.json` |
| demo-primitives-base-progress | registry:ui | Demo showing an animated base progress. | `npx shadcn@latest add https://animate-ui.com/r/demo-primitives-base-progress.json` |
| demo-primitives-base-radio | registry:ui | Demo showing an animated base radio. | `npx shadcn@latest add https://animate-ui.com/r/demo-primitives-base-radio.json` |
| demo-primitives-base-switch | registry:ui | Demo showing an animated base switch. | `npx shadcn@latest add https://animate-ui.com/r/demo-primitives-base-switch.json` |
| demo-primitives-base-tabs | registry:ui | Demo showing an animated base tabs. | `npx shadcn@latest add https://animate-ui.com/r/demo-primitives-base-tabs.json` |
| demo-primitives-base-toggle | registry:ui | Demo showing an animated base toggle. | `npx shadcn@latest add https://animate-ui.com/r/demo-primitives-base-toggle.json` |
| demo-primitives-base-toggle-group | registry:ui | Demo showing an animated base toggle group. | `npx shadcn@latest add https://animate-ui.com/r/demo-primitives-base-toggle-group.json` |
| demo-primitives-base-tooltip | registry:ui | Demo showing an animated base tooltip. | `npx shadcn@latest add https://animate-ui.com/r/demo-primitives-base-tooltip.json` |
| demo-primitives-buttons-button | registry:ui | Demo showing a button. | `npx shadcn@latest add https://animate-ui.com/r/demo-primitives-buttons-button.json` |
| demo-primitives-buttons-flip | registry:ui | Demo showing an animated flip button. | `npx shadcn@latest add https://animate-ui.com/r/demo-primitives-buttons-flip.json` |
| demo-primitives-buttons-liquid | registry:ui | Demo showing an animated liquid button. | `npx shadcn@latest add https://animate-ui.com/r/demo-primitives-buttons-liquid.json` |
| demo-primitives-buttons-ripple | registry:ui | Demo showing a ripple button. | `npx shadcn@latest add https://animate-ui.com/r/demo-primitives-buttons-ripple.json` |
| demo-primitives-effects-auto-height | registry:ui | Demo showing an animated auto height. | `npx shadcn@latest add https://animate-ui.com/r/demo-primitives-effects-auto-height.json` |
| demo-primitives-effects-blur | registry:ui | Demo showing an animated blur. | `npx shadcn@latest add https://animate-ui.com/r/demo-primitives-effects-blur.json` |
| demo-primitives-effects-click | registry:ui | Demo showing an animated click. | `npx shadcn@latest add https://animate-ui.com/r/demo-primitives-effects-click.json` |
| demo-primitives-effects-effect | registry:ui | Demo showing an animated effect. | `npx shadcn@latest add https://animate-ui.com/r/demo-primitives-effects-effect.json` |
| demo-primitives-effects-fade | registry:ui | Demo showing an animated fade. | `npx shadcn@latest add https://animate-ui.com/r/demo-primitives-effects-fade.json` |
| demo-primitives-effects-highlight | registry:ui | Demo showing an animated highlight. | `npx shadcn@latest add https://animate-ui.com/r/demo-primitives-effects-highlight.json` |
| demo-primitives-effects-image-zoom | registry:ui | Demo showing a image zoom effect. | `npx shadcn@latest add https://animate-ui.com/r/demo-primitives-effects-image-zoom.json` |
| demo-primitives-effects-magnetic | registry:ui | Demo showing a magnetic effect. | `npx shadcn@latest add https://animate-ui.com/r/demo-primitives-effects-magnetic.json` |
| demo-primitives-effects-particles | registry:ui | Demo showing an animated particles. | `npx shadcn@latest add https://animate-ui.com/r/demo-primitives-effects-particles.json` |
| demo-primitives-effects-shine | registry:ui | Demo showing an animated shine. | `npx shadcn@latest add https://animate-ui.com/r/demo-primitives-effects-shine.json` |
| demo-primitives-effects-slide | registry:ui | Demo showing an animated slide. | `npx shadcn@latest add https://animate-ui.com/r/demo-primitives-effects-slide.json` |
| demo-primitives-effects-theme-toggler | registry:ui | Demo showing a theme toggler. | `npx shadcn@latest add https://animate-ui.com/r/demo-primitives-effects-theme-toggler.json` |
| demo-primitives-effects-tilt | registry:ui | Demo showing an animated tilt. | `npx shadcn@latest add https://animate-ui.com/r/demo-primitives-effects-tilt.json` |
| demo-primitives-effects-zoom | registry:ui | Demo showing an animated zoom. | `npx shadcn@latest add https://animate-ui.com/r/demo-primitives-effects-zoom.json` |
| demo-primitives-headless-checkbox | registry:ui | Demo showing an animated headless checkbox. | `npx shadcn@latest add https://animate-ui.com/r/demo-primitives-headless-checkbox.json` |
| demo-primitives-headless-dialog | registry:ui | Demo showing an animated headless dialog. | `npx shadcn@latest add https://animate-ui.com/r/demo-primitives-headless-dialog.json` |
| demo-primitives-headless-disclosure | registry:ui | Demo showing an animated headless disclosure. | `npx shadcn@latest add https://animate-ui.com/r/demo-primitives-headless-disclosure.json` |
| demo-primitives-headless-popover | registry:ui | Demo showing an animated headless popover. | `npx shadcn@latest add https://animate-ui.com/r/demo-primitives-headless-popover.json` |
| demo-primitives-headless-switch | registry:ui | Demo showing an animated headless switch. | `npx shadcn@latest add https://animate-ui.com/r/demo-primitives-headless-switch.json` |
| demo-primitives-headless-tabs | registry:ui | Demo showing an animated headless tabs. | `npx shadcn@latest add https://animate-ui.com/r/demo-primitives-headless-tabs.json` |
| demo-primitives-radix-accordion | registry:ui | Demo showing an animated radix accordion. | `npx shadcn@latest add https://animate-ui.com/r/demo-primitives-radix-accordion.json` |
| demo-primitives-radix-alert-dialog | registry:ui | Demo showing an animated radix alert dialog. | `npx shadcn@latest add https://animate-ui.com/r/demo-primitives-radix-alert-dialog.json` |
| demo-primitives-radix-checkbox | registry:ui | Demo showing an animated radix checkbox. | `npx shadcn@latest add https://animate-ui.com/r/demo-primitives-radix-checkbox.json` |
| demo-primitives-radix-collapsible | registry:ui | Demo showing an animated radix collapsible. | `npx shadcn@latest add https://animate-ui.com/r/demo-primitives-radix-collapsible.json` |
| demo-primitives-radix-dialog | registry:ui | Demo showing an animated radix dialog. | `npx shadcn@latest add https://animate-ui.com/r/demo-primitives-radix-dialog.json` |
| demo-primitives-radix-dropdown-menu | registry:ui | Demo showing an animated radix dropdown menu. | `npx shadcn@latest add https://animate-ui.com/r/demo-primitives-radix-dropdown-menu.json` |
| demo-primitives-radix-files | registry:ui | Demo showing an animated radix files. | `npx shadcn@latest add https://animate-ui.com/r/demo-primitives-radix-files.json` |
| demo-primitives-radix-hover-card | registry:ui | Demo showing an animated radix hover card. | `npx shadcn@latest add https://animate-ui.com/r/demo-primitives-radix-hover-card.json` |
| demo-primitives-radix-popover | registry:ui | Demo showing an animated radix popover. | `npx shadcn@latest add https://animate-ui.com/r/demo-primitives-radix-popover.json` |
| demo-primitives-radix-preview-link-card | registry:ui | Demo showing an animated radix preview link card. | `npx shadcn@latest add https://animate-ui.com/r/demo-primitives-radix-preview-link-card.json` |
| demo-primitives-radix-progress | registry:ui | Demo showing an animated radix progress. | `npx shadcn@latest add https://animate-ui.com/r/demo-primitives-radix-progress.json` |
| demo-primitives-radix-radio-group | registry:ui | Demo showing an animated radix radio group. | `npx shadcn@latest add https://animate-ui.com/r/demo-primitives-radix-radio-group.json` |
| demo-primitives-radix-sheet | registry:ui | Demo showing an animated radix sheet. | `npx shadcn@latest add https://animate-ui.com/r/demo-primitives-radix-sheet.json` |
| demo-primitives-radix-switch | registry:ui | Demo showing an animated radix switch. | `npx shadcn@latest add https://animate-ui.com/r/demo-primitives-radix-switch.json` |
| demo-primitives-radix-tabs | registry:ui | Demo showing an animated radix tabs. | `npx shadcn@latest add https://animate-ui.com/r/demo-primitives-radix-tabs.json` |
| demo-primitives-radix-toggle | registry:ui | Demo showing an animated radix toggle. | `npx shadcn@latest add https://animate-ui.com/r/demo-primitives-radix-toggle.json` |
| demo-primitives-radix-toggle-group | registry:ui | Demo showing an animated radix toggle group. | `npx shadcn@latest add https://animate-ui.com/r/demo-primitives-radix-toggle-group.json` |
| demo-primitives-radix-tooltip | registry:ui | Demo showing an animated radix tooltip. | `npx shadcn@latest add https://animate-ui.com/r/demo-primitives-radix-tooltip.json` |
| demo-primitives-texts-counting-number | registry:ui | Demo showing an animated counting number. | `npx shadcn@latest add https://animate-ui.com/r/demo-primitives-texts-counting-number.json` |
| demo-primitives-texts-gradient | registry:ui | Demo showing an animated gradient text. | `npx shadcn@latest add https://animate-ui.com/r/demo-primitives-texts-gradient.json` |
| demo-primitives-texts-highlight | registry:ui | Demo showing an animated highlight text. | `npx shadcn@latest add https://animate-ui.com/r/demo-primitives-texts-highlight.json` |
| demo-primitives-texts-morphing | registry:ui | Demo showing an animated morphing text. | `npx shadcn@latest add https://animate-ui.com/r/demo-primitives-texts-morphing.json` |
| demo-primitives-texts-rolling | registry:ui | Demo showing an animated rolling text. | `npx shadcn@latest add https://animate-ui.com/r/demo-primitives-texts-rolling.json` |
| demo-primitives-texts-rotating | registry:ui | Demo showing an animated rotating text. | `npx shadcn@latest add https://animate-ui.com/r/demo-primitives-texts-rotating.json` |
| demo-primitives-texts-scrolling-number | registry:ui | Demo showing an animated scrolling number. | `npx shadcn@latest add https://animate-ui.com/r/demo-primitives-texts-scrolling-number.json` |
| demo-primitives-texts-shimmering | registry:ui | Demo showing an animated shimmering text. | `npx shadcn@latest add https://animate-ui.com/r/demo-primitives-texts-shimmering.json` |
| demo-primitives-texts-sliding-number | registry:ui | Demo showing an animated sliding number. | `npx shadcn@latest add https://animate-ui.com/r/demo-primitives-texts-sliding-number.json` |
| demo-primitives-texts-splitting | registry:ui | Demo showing an animated splitting text. | `npx shadcn@latest add https://animate-ui.com/r/demo-primitives-texts-splitting.json` |
| demo-primitives-texts-splitting-example | registry:ui | Demo showing an animated splitting text. | `npx shadcn@latest add https://animate-ui.com/r/demo-primitives-texts-splitting-example.json` |
| demo-primitives-texts-typing | registry:ui | Demo showing an animated typing text. | `npx shadcn@latest add https://animate-ui.com/r/demo-primitives-texts-typing.json` |
| hooks-use-auto-height | registry:hook | A hook that allows you to automatically adjust the height of an element based on its content. | `npx shadcn@latest add https://animate-ui.com/r/hooks-use-auto-height.json` |
| hooks-use-controlled-state | registry:hook | A hook that allows you to control a state. | `npx shadcn@latest add https://animate-ui.com/r/hooks-use-controlled-state.json` |
| hooks-use-data-state | registry:hook | A hook that allows you to get the data-state of an element. | `npx shadcn@latest add https://animate-ui.com/r/hooks-use-data-state.json` |
| hooks-use-is-in-view | registry:hook | A hook that allows you to check if an element is in view. | `npx shadcn@latest add https://animate-ui.com/r/hooks-use-is-in-view.json` |
| hooks-use-motion-value-state | registry:hook | A hook that allows you to use a motion value state. | `npx shadcn@latest add https://animate-ui.com/r/hooks-use-motion-value-state.json` |
| icons-accessibility | registry:ui | Accessibility icon component. | `npx shadcn@latest add https://animate-ui.com/r/icons-accessibility.json` |
| icons-activity | registry:ui | Activity icon component. | `npx shadcn@latest add https://animate-ui.com/r/icons-activity.json` |
| icons-airplay | registry:ui | Airplay icon component. | `npx shadcn@latest add https://animate-ui.com/r/icons-airplay.json` |
| icons-alarm-clock | registry:ui | Alarm clock icon component. | `npx shadcn@latest add https://animate-ui.com/r/icons-alarm-clock.json` |
| icons-arrow-down | registry:ui | Arrow down icon component. | `npx shadcn@latest add https://animate-ui.com/r/icons-arrow-down.json` |
| icons-arrow-left | registry:ui | Arrow left icon component. | `npx shadcn@latest add https://animate-ui.com/r/icons-arrow-left.json` |
| icons-arrow-right | registry:ui | Arrow right icon component. | `npx shadcn@latest add https://animate-ui.com/r/icons-arrow-right.json` |
| icons-arrow-up | registry:ui | Arrow up icon component. | `npx shadcn@latest add https://animate-ui.com/r/icons-arrow-up.json` |
| icons-arrow-up-down | registry:ui | Arrow up down icon component. | `npx shadcn@latest add https://animate-ui.com/r/icons-arrow-up-down.json` |
| icons-audio-lines | registry:ui | Audio Lines icon component. | `npx shadcn@latest add https://animate-ui.com/r/icons-audio-lines.json` |
| icons-axe | registry:ui | Axe icon component. | `npx shadcn@latest add https://animate-ui.com/r/icons-axe.json` |
| icons-axis-3d | registry:ui | Axis 3D icon component. | `npx shadcn@latest add https://animate-ui.com/r/icons-axis-3d.json` |

## For AI agents

```text
You are adding components from @animate-ui to a shadcn-compatible project.
1. Read this file (https://sh4dcn.vercel.app/md/animate-ui.md) for the component list.
2. Fetch the machine-readable index: https://animate-ui.com/r/registry.json
3. Install a single component with its install command from the table above.
4. Full structured record: https://sh4dcn.vercel.app/json (library slug: animate-ui).
```