StaleFeaturedAnimated components4,259
@animate-ui
Animated components · data updated 2026-09-05
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.
accessibilityaestheticanimationbackgroundsbuttonscardsdashboarddesign-systemformsglassmorphismhooksiconsloadersmedianavigationoverlaystheming
Install
npx shadcn@latest add https://animate-ui.com/r/registry.jsonHealth
StatusStale
Last commit8 months ago
License—
Open issues16
ArchivedNo
Stars4,259
Components (580)
indexcomponents-animate-avatar-groupcomponents-animate-codecomponents-animate-code-tabscomponents-animate-cursorcomponents-animate-github-stars-wheelcomponents-animate-tabscomponents-animate-tooltipcomponents-backgrounds-bubblecomponents-backgrounds-fireworkscomponents-backgrounds-gradientcomponents-backgrounds-gravity-starscomponents-backgrounds-hexagoncomponents-backgrounds-holecomponents-backgrounds-starscomponents-base-accordioncomponents-base-alert-dialogcomponents-base-checkboxcomponents-base-dialogcomponents-base-filescomponents-base-menucomponents-base-popovercomponents-base-preview-cardcomponents-base-preview-link-cardcomponents-base-progresscomponents-base-radiocomponents-base-switchcomponents-base-tabscomponents-base-togglecomponents-base-toggle-groupcomponents-base-tooltipcomponents-buttons-buttoncomponents-buttons-copycomponents-buttons-flipcomponents-buttons-github-starscomponents-buttons-iconcomponents-buttons-liquidcomponents-buttons-ripplecomponents-buttons-theme-togglercomponents-community-flip-cardcomponents-community-management-barcomponents-community-motion-carouselcomponents-community-notification-listcomponents-community-pin-listcomponents-community-playful-todolistcomponents-community-radial-introcomponents-community-radial-menucomponents-community-radial-navcomponents-community-share-buttoncomponents-community-user-presence-avatarcomponents-headless-accordioncomponents-headless-checkboxcomponents-headless-dialogcomponents-headless-popovercomponents-headless-switchcomponents-headless-tabscomponents-radix-accordioncomponents-radix-alert-dialogcomponents-radix-checkboxcomponents-radix-dialog
Components: index, components-animate-avatar-group, components-animate-code, components-animate-code-tabs, components-animate-cursor, components-animate-github-stars-wheel, components-animate-tabs, components-animate-tooltip, components-backgrounds-bubble, components-backgrounds-fireworks, components-backgrounds-gradient, components-backgrounds-gravity-stars, components-backgrounds-hexagon, components-backgrounds-hole, components-backgrounds-stars, components-base-accordion, components-base-alert-dialog, components-base-checkbox, components-base-dialog, components-base-files, components-base-menu, components-base-popover, components-base-preview-card, components-base-preview-link-card, components-base-progress, components-base-radio, components-base-switch, components-base-tabs, components-base-toggle, components-base-toggle-group, components-base-tooltip, components-buttons-button, components-buttons-copy, components-buttons-flip, components-buttons-github-stars, components-buttons-icon, components-buttons-liquid, components-buttons-ripple, components-buttons-theme-toggler, components-community-flip-card, components-community-management-bar, components-community-motion-carousel, components-community-notification-list, components-community-pin-list, components-community-playful-todolist, components-community-radial-intro, components-community-radial-menu, components-community-radial-nav, components-community-share-button, components-community-user-presence-avatar, components-headless-accordion, components-headless-checkbox, components-headless-dialog, components-headless-popover, components-headless-switch, components-headless-tabs, components-radix-accordion, components-radix-alert-dialog, components-radix-checkbox, components-radix-dialog, components-radix-dropdown-menu, components-radix-files, components-radix-hover-card, components-radix-popover, components-radix-preview-link-card, components-radix-progress, components-radix-radio-group, components-radix-sheet, components-radix-sidebar, components-radix-switch, components-radix-tabs, components-radix-toggle, components-radix-toggle-group, components-radix-tooltip, demo-components-animate-avatar-group, demo-components-animate-code, demo-components-animate-code-tabs, demo-components-animate-cursor, demo-components-animate-github-stars-wheel, demo-components-animate-tabs, demo-components-animate-tooltip, demo-components-backgrounds-bubble, demo-components-backgrounds-fireworks, demo-components-backgrounds-fireworks-circle, demo-components-backgrounds-gradient, demo-components-backgrounds-gravity-stars, demo-components-backgrounds-hexagon, demo-components-backgrounds-hole, demo-components-backgrounds-stars, demo-components-base-accordion, demo-components-base-alert-dialog, demo-components-base-checkbox, demo-components-base-dialog, demo-components-base-files, demo-components-base-menu, demo-components-base-menu-checkbox, demo-components-base-menu-radio, demo-components-base-popover, demo-components-base-preview-card, demo-components-base-preview-link-card, demo-components-base-progress, demo-components-base-radio, demo-components-base-switch, demo-components-base-tabs, demo-components-base-toggle, demo-components-base-toggle-group, demo-components-base-tooltip, demo-components-buttons-button, demo-components-buttons-copy, demo-components-buttons-flip, demo-components-buttons-github-stars, demo-components-buttons-icon, demo-components-buttons-liquid, demo-components-buttons-ripple, demo-components-buttons-theme-toggler, demo-components-community-flip-card, demo-components-community-management-bar, demo-components-community-motion-carousel, demo-components-community-notification-list, demo-components-community-pin-list, demo-components-community-playful-todolist, demo-components-community-radial-intro, demo-components-community-radial-menu, demo-components-community-radial-nav, demo-components-community-share-button, demo-components-community-user-presence-avatar, demo-components-headless-accordion, demo-components-headless-checkbox, demo-components-headless-dialog, demo-components-headless-popover, demo-components-headless-switch, demo-components-headless-tabs, demo-components-radix-accordion, demo-components-radix-alert-dialog, demo-components-radix-checkbox, demo-components-radix-dialog, demo-components-radix-dropdown-menu, demo-components-radix-dropdown-menu-checkbox, demo-components-radix-dropdown-menu-radio, demo-components-radix-files, demo-components-radix-hover-card, demo-components-radix-popover, demo-components-radix-preview-link-card, demo-components-radix-progress, demo-components-radix-radio-group, demo-components-radix-sheet, demo-components-radix-sidebar, demo-components-radix-switch, demo-components-radix-tabs, demo-components-radix-toggle, demo-components-radix-toggle-group, demo-components-radix-tooltip, demo-primitives-animate-avatar-group, demo-primitives-animate-code-block, demo-primitives-animate-cursor, demo-primitives-animate-github-stars, demo-primitives-animate-motion-grid, demo-primitives-animate-pinned-list, demo-primitives-animate-scroll-progress, demo-primitives-animate-spring, demo-primitives-animate-tabs, demo-primitives-animate-tooltip, demo-primitives-base-accordion, demo-primitives-base-alert-dialog, demo-primitives-base-checkbox, demo-primitives-base-collapsible, demo-primitives-base-dialog, demo-primitives-base-files, demo-primitives-base-menu, demo-primitives-base-popover, demo-primitives-base-preview-card, demo-primitives-base-preview-link-card, demo-primitives-base-progress, demo-primitives-base-radio, demo-primitives-base-switch, demo-primitives-base-tabs, demo-primitives-base-toggle, demo-primitives-base-toggle-group, demo-primitives-base-tooltip, demo-primitives-buttons-button, demo-primitives-buttons-flip, demo-primitives-buttons-liquid, demo-primitives-buttons-ripple, demo-primitives-effects-auto-height, demo-primitives-effects-blur, demo-primitives-effects-click, demo-primitives-effects-effect, demo-primitives-effects-fade, demo-primitives-effects-highlight, demo-primitives-effects-image-zoom, demo-primitives-effects-magnetic, demo-primitives-effects-particles, demo-primitives-effects-shine, demo-primitives-effects-slide, demo-primitives-effects-theme-toggler, demo-primitives-effects-tilt, demo-primitives-effects-zoom, demo-primitives-headless-checkbox, demo-primitives-headless-dialog, demo-primitives-headless-disclosure, demo-primitives-headless-popover, demo-primitives-headless-switch, demo-primitives-headless-tabs, demo-primitives-radix-accordion, demo-primitives-radix-alert-dialog, demo-primitives-radix-checkbox, demo-primitives-radix-collapsible, demo-primitives-radix-dialog, demo-primitives-radix-dropdown-menu, demo-primitives-radix-files, demo-primitives-radix-hover-card, demo-primitives-radix-popover, demo-primitives-radix-preview-link-card, demo-primitives-radix-progress, demo-primitives-radix-radio-group, demo-primitives-radix-sheet, demo-primitives-radix-switch, demo-primitives-radix-tabs, demo-primitives-radix-toggle, demo-primitives-radix-toggle-group, demo-primitives-radix-tooltip, demo-primitives-texts-counting-number, demo-primitives-texts-gradient, demo-primitives-texts-highlight, demo-primitives-texts-morphing, demo-primitives-texts-rolling, demo-primitives-texts-rotating, demo-primitives-texts-scrolling-number, demo-primitives-texts-shimmering, demo-primitives-texts-sliding-number, demo-primitives-texts-splitting, demo-primitives-texts-splitting-example, demo-primitives-texts-typing, hooks-use-auto-height, hooks-use-controlled-state, hooks-use-data-state, hooks-use-is-in-view, hooks-use-motion-value-state, icons-accessibility, icons-activity, icons-airplay, icons-alarm-clock, icons-arrow-down, icons-arrow-left, icons-arrow-right, icons-arrow-up, icons-arrow-up-down, icons-audio-lines, icons-axe, icons-axis-3d, icons-badge-check, icons-battery-charging, icons-battery-full, icons-battery-low, icons-battery-medium, icons-bell, icons-bell-off, icons-bell-ring, icons-between-horizontal-end, icons-between-horizontal-start, icons-between-vertical-end, icons-between-vertical-start, icons-binary, icons-blend, icons-blocks, icons-bot, icons-bot-message-square, icons-bot-off, icons-brush, icons-brush-cleaning, icons-cast, icons-cctv, icons-chart-bar, icons-chart-bar-decreasing, icons-chart-bar-increasing, icons-chart-column, icons-chart-column-decreasing, icons-chart-column-increasing, icons-chart-line, icons-chart-no-axes-column, icons-chart-no-axes-column-decreasing, icons-chart-no-axes-column-increasing, icons-chart-scatter, icons-chart-spline, icons-check, icons-check-check, icons-check-line, icons-cherry, icons-chevron-down, icons-chevron-left, icons-chevron-left-right, icons-chevron-right, icons-chevron-up, icons-chevron-up-down, icons-circle-check, icons-circle-check-big, icons-circle-plus, icons-circle-x, icons-circuit-board, icons-clapperboard, icons-clipboard, icons-clipboard-check, icons-clipboard-list, icons-clock, icons-clock-1, icons-clock-10, icons-clock-11, icons-clock-12, icons-clock-2, icons-clock-3, icons-clock-4, icons-clock-5, icons-clock-6, icons-clock-7, icons-clock-8, icons-clock-9, icons-cloud-download, icons-cloud-drizzle, icons-cloud-hail, icons-cloud-lightning, icons-cloud-moon, icons-cloud-moon-rain, icons-cloud-rain, icons-cloud-rain-wind, icons-cloud-snow, icons-cloud-sun, icons-cloud-sun-rain, icons-cloud-upload, icons-cog, icons-compass, icons-contrast, icons-copy, icons-crop, icons-cross, icons-disc-3, icons-download, icons-ellipsis, icons-ellipsis-vertical, icons-equal-not, icons-ev-charger, icons-expand, icons-external-link, icons-fan, icons-fingerprint, icons-forklift, icons-frame, icons-gallery-horizontal, icons-gallery-vertical-end, icons-gallery-vertical, icons-gallery-horizontal-end, icons-gauge, icons-gavel, icons-hammer, icons-heart, icons-house-wifi, icons-icon, icons-kanban, icons-key, icons-layers, icons-layers-2, icons-layout-dashboard, icons-lightbulb, icons-lightbulb-off, icons-link, icons-link-2, icons-list, icons-loader, icons-loader-circle, icons-loader-pinwheel, icons-lock, icons-lock-keyhole, icons-lock-keyhole-open, icons-lock-open, icons-log-in, icons-log-out, icons-map-pin, icons-map-pin-off, icons-maximize, icons-menu, icons-message-circle, icons-message-circle-code, icons-message-circle-dashed, icons-message-circle-heart, icons-message-circle-more, icons-message-circle-off, icons-message-circle-plus, icons-message-circle-question, icons-message-circle-warning, icons-message-circle-x, icons-message-square, icons-message-square-code, icons-message-square-dashed, icons-message-square-diff, icons-message-square-dot, icons-message-square-heart, icons-message-square-more, icons-message-square-off, icons-message-square-plus, icons-message-square-quote, icons-message-square-sharePreview
Live sandbox previews render component source client-side. Where a component can’t be rendered standalone, sh4dcn falls back to its source and install command.