ActiveFeaturedAnimated components4,698
@animate-ui
Animated components · data updated 2026-10-27
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.
accessibilityaestheticanimationaudiobackgroundsblocksbuttonscardschartsdashboarddesign-systemformsglassmorphismhooksiconsloadersmedianavigationoverlaystheming
Install
npx shadcn@latest add https://animate-ui.com/r/registry.jsonHealth
StatusActive
Last commit1 day ago
License—
Open issues1
ArchivedNo
Stars4,698
Components (790)
backgrounds-bubblebackgrounds-fireworksbackgrounds-glyphbackgrounds-gradientbackgrounds-gravity-starsbackgrounds-hexagonbackgrounds-holebackgrounds-starsbackgrounds-topographybuttons-flipbuttons-github-starsbuttons-liquidbuttons-theme-togglercomponents-code-blockcomponents-page-transition-react-routercomponents-page-transition-tanstack-routercomponents-page-transitionicons-hugeicons-accessibilityicons-hugeicons-activity-01icons-hugeicons-add-01icons-hugeicons-airplayicons-hugeicons-alarm-clockicons-hugeicons-arrow-down-01icons-hugeicons-arrow-down-02icons-hugeicons-arrow-left-01icons-hugeicons-arrow-left-02icons-hugeicons-arrow-right-01icons-hugeicons-arrow-right-02icons-hugeicons-arrow-up-01icons-hugeicons-arrow-up-02icons-hugeicons-arrow-up-downicons-hugeicons-attachment-01icons-hugeicons-audio-linesicons-hugeicons-axeicons-hugeicons-badge-checkicons-hugeicons-battery-chargingicons-hugeicons-battery-fullicons-hugeicons-battery-lowicons-hugeicons-battery-medium-01icons-hugeicons-bell-officons-hugeicons-bell-ringicons-hugeicons-between-horizontal-endicons-hugeicons-between-horizontal-starticons-hugeicons-between-vertical-endicons-hugeicons-between-vertical-starticons-hugeicons-binaryicons-hugeicons-blendicons-hugeicons-blocksicons-hugeicons-bluetoothicons-hugeicons-bookmark-checkicons-hugeicons-bookmark-plusicons-hugeicons-bookmarkicons-hugeicons-bot-message-squareicons-hugeicons-bot-officons-hugeicons-boticons-hugeicons-brush-cleaningicons-hugeicons-brushicons-hugeicons-calendar-checkicons-hugeicons-calendar-clockicons-hugeicons-calendar-plus
Components: backgrounds-bubble, backgrounds-fireworks, backgrounds-glyph, backgrounds-gradient, backgrounds-gravity-stars, backgrounds-hexagon, backgrounds-hole, backgrounds-stars, backgrounds-topography, buttons-flip, buttons-github-stars, buttons-liquid, buttons-theme-toggler, components-code-block, components-page-transition-react-router, components-page-transition-tanstack-router, components-page-transition, icons-hugeicons-accessibility, icons-hugeicons-activity-01, icons-hugeicons-add-01, icons-hugeicons-airplay, icons-hugeicons-alarm-clock, icons-hugeicons-arrow-down-01, icons-hugeicons-arrow-down-02, icons-hugeicons-arrow-left-01, icons-hugeicons-arrow-left-02, icons-hugeicons-arrow-right-01, icons-hugeicons-arrow-right-02, icons-hugeicons-arrow-up-01, icons-hugeicons-arrow-up-02, icons-hugeicons-arrow-up-down, icons-hugeicons-attachment-01, icons-hugeicons-audio-lines, icons-hugeicons-axe, icons-hugeicons-badge-check, icons-hugeicons-battery-charging, icons-hugeicons-battery-full, icons-hugeicons-battery-low, icons-hugeicons-battery-medium-01, icons-hugeicons-bell-off, icons-hugeicons-bell-ring, icons-hugeicons-between-horizontal-end, icons-hugeicons-between-horizontal-start, icons-hugeicons-between-vertical-end, icons-hugeicons-between-vertical-start, icons-hugeicons-binary, icons-hugeicons-blend, icons-hugeicons-blocks, icons-hugeicons-bluetooth, icons-hugeicons-bookmark-check, icons-hugeicons-bookmark-plus, icons-hugeicons-bookmark, icons-hugeicons-bot-message-square, icons-hugeicons-bot-off, icons-hugeicons-bot, icons-hugeicons-brush-cleaning, icons-hugeicons-brush, icons-hugeicons-calendar-check, icons-hugeicons-calendar-clock, icons-hugeicons-calendar-plus, icons-hugeicons-calendar, icons-hugeicons-camera, icons-hugeicons-cancel-01, icons-hugeicons-cast, icons-hugeicons-cctv, icons-hugeicons-chart-bar-decreasing, icons-hugeicons-chart-bar-increasing, icons-hugeicons-chart-column-decreasing, icons-hugeicons-chart-column-increasing, icons-hugeicons-chart-column, icons-hugeicons-chart-line, icons-hugeicons-chart-no-axes-column-decreasing, icons-hugeicons-chart-no-axes-column-increasing, icons-hugeicons-chart-no-axes-column, icons-hugeicons-chart-scatter, icons-hugeicons-chart-spline, icons-hugeicons-check-check, icons-hugeicons-check-line, icons-hugeicons-check, icons-hugeicons-checkmark-circle-02, icons-hugeicons-cherry, icons-hugeicons-circle-check-big, icons-hugeicons-circle-plus, icons-hugeicons-circle-question-mark, icons-hugeicons-circle-x, icons-hugeicons-circuit-board, icons-hugeicons-clapperboard, icons-hugeicons-clipboard-check, icons-hugeicons-clipboard-list, icons-hugeicons-clipboard, icons-hugeicons-clock-01, icons-hugeicons-clock-02, icons-hugeicons-clock-03, icons-hugeicons-clock-04, icons-hugeicons-clock-05, icons-hugeicons-clock-add, icons-hugeicons-clock-alert, icons-hugeicons-clock-arrow-down, icons-hugeicons-clock-arrow-up, icons-hugeicons-clock-check, icons-hugeicons-clock-fading, icons-hugeicons-clock-hour-1, icons-hugeicons-clock-hour-10, icons-hugeicons-clock-hour-11, icons-hugeicons-clock-hour-12, icons-hugeicons-clock-hour-2, icons-hugeicons-clock-hour-3, icons-hugeicons-clock-hour-4, icons-hugeicons-clock-hour-5, icons-hugeicons-clock-hour-6, icons-hugeicons-clock-hour-7, icons-hugeicons-clock-hour-8, icons-hugeicons-clock-hour-9, icons-hugeicons-clock-plus, icons-hugeicons-cloud-download, icons-hugeicons-cloud-drizzle, icons-hugeicons-cloud-hail, icons-hugeicons-cloud-lightning, icons-hugeicons-cloud-moon-rain, icons-hugeicons-cloud-rain-wind, icons-hugeicons-cloud-rain, icons-hugeicons-cloud-snow, icons-hugeicons-cloud-sun-rain, icons-hugeicons-cloud-upload, icons-hugeicons-coffee-02, icons-hugeicons-cog, icons-hugeicons-compass, icons-hugeicons-computer-terminal-01, icons-hugeicons-contrast, icons-hugeicons-copy-01, icons-hugeicons-credit-card, icons-hugeicons-crop, icons-hugeicons-cross, icons-hugeicons-crown, icons-hugeicons-delete-02, icons-hugeicons-disc-3, icons-hugeicons-download-01, icons-hugeicons-download-04, icons-hugeicons-droplet, icons-hugeicons-equal-not, icons-hugeicons-ev-charger, icons-hugeicons-expand, icons-hugeicons-eye-closed, icons-hugeicons-eye-off, icons-hugeicons-fan, icons-hugeicons-fast-forward, icons-hugeicons-favourite, icons-hugeicons-file-check, icons-hugeicons-file-clock, icons-hugeicons-file-plus, icons-hugeicons-file-sliders, icons-hugeicons-file-x, icons-hugeicons-filter-horizontal, icons-hugeicons-finger-print, icons-hugeicons-flag, icons-hugeicons-flame, icons-hugeicons-flash, icons-hugeicons-folder-clock, icons-hugeicons-folder-open, icons-hugeicons-forklift, icons-hugeicons-frame, icons-hugeicons-gallery-horizontal-end, icons-hugeicons-gallery-horizontal, icons-hugeicons-gallery-vertical-end, icons-hugeicons-gallery-vertical, icons-hugeicons-gauge, icons-hugeicons-gavel, icons-hugeicons-ghost, icons-hugeicons-gift, icons-hugeicons-globe-02, icons-hugeicons-hammer, icons-hugeicons-headphones, icons-hugeicons-home-03, icons-hugeicons-hourglass, icons-hugeicons-house-wifi, icons-hugeicons-infinity, icons-hugeicons-info, icons-hugeicons-kanban, icons-hugeicons-key-01, icons-hugeicons-key-round, icons-hugeicons-layers-01, icons-hugeicons-layout-dashboard, icons-hugeicons-leaf, icons-hugeicons-lightbulb-off, icons-hugeicons-lightbulb, icons-hugeicons-link-01, icons-hugeicons-link-square-02, icons-hugeicons-list, icons-hugeicons-loading-01, icons-hugeicons-loading-02, icons-hugeicons-loading-03, icons-hugeicons-location-01, icons-hugeicons-lock-keyhole-open, icons-hugeicons-lock-keyhole, icons-hugeicons-login-01, icons-hugeicons-logout-01, icons-hugeicons-mail-01, icons-hugeicons-mail-check, icons-hugeicons-mail-open, icons-hugeicons-map-pin-off, icons-hugeicons-maximize-01, icons-hugeicons-megaphone, icons-hugeicons-menu-01, icons-hugeicons-message-01, icons-hugeicons-message-circle-code, icons-hugeicons-message-circle-dashed, icons-hugeicons-message-circle-heart, icons-hugeicons-message-circle-more, icons-hugeicons-message-circle-off, icons-hugeicons-message-circle-plus, icons-hugeicons-message-circle-warning, icons-hugeicons-message-circle-x, icons-hugeicons-message-circle, icons-hugeicons-message-square-code, icons-hugeicons-message-square-dashed, icons-hugeicons-message-square-diff, icons-hugeicons-message-square-dot, icons-hugeicons-message-square-heart, icons-hugeicons-message-square-more, icons-hugeicons-message-square-off, icons-hugeicons-message-square-plus, icons-hugeicons-message-square-quote, icons-hugeicons-message-square-share, icons-hugeicons-message-square-text, icons-hugeicons-message-square-warning, icons-hugeicons-message-square-x, icons-hugeicons-mic-off, icons-hugeicons-mic, icons-hugeicons-minimize-01, icons-hugeicons-minus-sign, icons-hugeicons-moon-02, icons-hugeicons-moon-star, icons-hugeicons-more-horizontal, icons-hugeicons-more-vertical, icons-hugeicons-move-down, icons-hugeicons-move-left, icons-hugeicons-move-right, icons-hugeicons-move-up, icons-hugeicons-music-3, icons-hugeicons-nfc, icons-hugeicons-notification-01, icons-hugeicons-octagon-alert, icons-hugeicons-orbit, icons-hugeicons-paintbrush, icons-hugeicons-panel-bottom-close, icons-hugeicons-panel-bottom-open, icons-hugeicons-panel-bottom, icons-hugeicons-panel-left-close, icons-hugeicons-panel-left-open, icons-hugeicons-panel-left, icons-hugeicons-panel-right-close, icons-hugeicons-panel-right-open, icons-hugeicons-panel-right, icons-hugeicons-panel-top-close, icons-hugeicons-panel-top-open, icons-hugeicons-panel-top, icons-hugeicons-party-popper, icons-hugeicons-pause, icons-hugeicons-pencil-edit-02, icons-hugeicons-phone-call, icons-hugeicons-phone-incoming, icons-hugeicons-phone-outgoing, icons-hugeicons-phone, icons-hugeicons-pickaxe, icons-hugeicons-pin-off, icons-hugeicons-pin, icons-hugeicons-plane-takeoff, icons-hugeicons-play, icons-hugeicons-plug-zap, icons-hugeicons-plus-sign, icons-hugeicons-power, icons-hugeicons-preference-horizontal, icons-hugeicons-preference-vertical, icons-hugeicons-printer, icons-hugeicons-radio-tower, icons-hugeicons-radio, icons-hugeicons-redo-02, icons-hugeicons-refresh-ccw-dot, icons-hugeicons-refresh-ccw, icons-hugeicons-refresh-cw-off, icons-hugeicons-refresh, icons-hugeicons-repeat, icons-hugeicons-reply, icons-hugeicons-rewind, icons-hugeicons-rocket-01, icons-hugeicons-rotate-ccw-key, icons-hugeicons-rotate-ccw, icons-hugeicons-rotate-clockwise, icons-hugeicons-rotate-left-01, icons-hugeicons-rotate-right-01, icons-hugeicons-route, icons-hugeicons-router, icons-hugeicons-save, icons-hugeicons-scissors-line-dashed, icons-hugeicons-scissors, icons-hugeicons-search-01, icons-hugeicons-send-horizontal, icons-hugeicons-sent, icons-hugeicons-settings-02, icons-hugeicons-settings-04, icons-hugeicons-settings-05, icons-hugeicons-share-03, icons-hugeicons-share-08, icons-hugeicons-shield-check, icons-hugeicons-shopping-bag, icons-hugeicons-shopping-cart, icons-hugeicons-shrink, icons-hugeicons-shuffle, icons-hugeicons-signal-full-01, icons-hugeicons-signal-high, icons-hugeicons-signal-low, icons-hugeicons-signal-medium, icons-hugeicons-signal-zero, icons-hugeicons-skip-back, icons-hugeicons-skip-forward, icons-hugeicons-sliders-horizontal, icons-hugeicons-sliders-vertical, icons-hugeicons-snowflake, icons-hugeicons-sparkle, icons-hugeicons-sparkles, icons-hugeicons-square-arrow-out-down-left, icons-hugeicons-square-arrow-out-down-right, icons-hugeicons-square-arrow-out-up-left, icons-hugeicons-square-arrow-out-up-right, icons-hugeicons-square-dashed-kanban, icons-hugeicons-square-kanban, icons-hugeicons-square-lock-02, icons-hugeicons-square-plus, icons-hugeicons-square-unlock-02, icons-hugeicons-square-x, icons-hugeicons-star, icons-hugeicons-sun-03, icons-hugeicons-sun-dim, icons-hugeicons-sun-medium, icons-hugeicons-sun-moon, icons-hugeicons-sunrise, icons-hugeicons-sunset, icons-hugeicons-tag, icons-hugeicons-target-01, icons-hugeicons-temperature, icons-hugeicons-thumbs-down, icons-hugeicons-thumbs-up, icons-hugeicons-timer-off, icons-hugeicons-timer, icons-hugeicons-toggle-left, icons-hugeicons-toggle-right, icons-hugeicons-trash, icons-hugeicons-trending-down, icons-hugeicons-trending-up, icons-hugeicons-triangle-alert, icons-hugeicons-trophy, icons-hugeicons-umbrella, icons-hugeicons-undo-02, icons-hugeicons-unplug, icons-hugeicons-upload-01, icons-hugeicons-upload-04, icons-hugeicons-user-round, icons-hugeicons-user, icons-hugeicons-users-round, icons-hugeicons-users, icons-hugeicons-view, icons-hugeicons-volume-01, icons-hugeicons-volume-high, icons-hugeicons-volume-mute-01, icons-hugeicons-volume-off, icons-hugeicons-volume-x, icons-hugeicons-wallet, icons-hugeicons-wand-sparkles, icons-hugeicons-waves, icons-hugeicons-wifi-01, icons-hugeicons-wifi-02, icons-hugeicons-wifi-circle, icons-hugeicons-wifi-cog, icons-hugeicons-wifi-connected-01, icons-hugeicons-wifi-connected-02, icons-hugeicons-wifi-connected-03, icons-hugeicons-wifi-disconnected-01, icons-hugeicons-wifi-disconnected-02, icons-hugeicons-wifi-disconnected-03, icons-hugeicons-wifi-disconnected-04, icons-hugeicons-wifi-error-01, icons-hugeicons-wifi-error-02, icons-hugeicons-wifi-full-signal, icons-hugeicons-wifi-high, icons-hugeicons-wifi-location, icons-hugeicons-wifi-lock, icons-hugeicons-wifi-low-signal, icons-hugeicons-wifi-low, icons-hugeicons-wifi-medium-signal, icons-hugeicons-wifi-off-01, icons-hugeicons-wifi-off-02, icons-hugeicons-wifi-pen, icons-hugeicons-wifi-square, icons-hugeicons-wifi-sync, icons-hugeicons-wifi-unlock, icons-hugeicons-wifi-zero, icons-hugeicons-zoom-in, icons-hugeicons-zoom-out, icons-lucide-accessibility, icons-lucide-activityPreview
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.
@animate-ui · backgrounds-bubble
npx shadcn@latest add https://animate-ui.com/r/backgrounds-bubble.jsonView source