ActiveFeaturedAnimated components29
@odysseyui
Animated components · data updated 2026-07-28
A fully animated, open-source React component distribution built on top of Animate UI conventions, using Next.js App Router, React 19, TypeScript, Tailwind CSS v4, and Motion (formerly Framer Motion). Components are distributed via shadcn CLI and live directly in your codebase. Built as a Turborepo pnpm monorepo with Fumadocs for documentation. Free and MIT-licensed. Use for: Next.js projects that need motion-enhanced shadcn-compatible components with modern Tailwind v4 styling and full code ownership.
aestheticaianimationaudioblocksbuttonscardsdesign-systemformshooksiconsloadersmedianavigationoverlaystext-effectstheming
Install
npx shadcn@latest add https://www.odysseyui.com/r/registry.jsonHealth
StatusActive
Last commit2 months ago
License—
Open issues1
ArchivedNo
Stars29
Components (288)
indexcomponents-ai-chat-containercomponents-ai-message-bubblecomponents-ai-model-selectorcomponents-ai-prompt-inputcomponents-ai-search-modalcomponents-ai-stepscomponents-ai-thought-chaincomponents-ai-token-usagecomponents-animate-avatar-groupcomponents-animate-card-strokecomponents-animate-codecomponents-animate-code-blockcomponents-animate-code-tabscomponents-animate-cursorcomponents-animate-footercomponents-animate-github-stars-wheelcomponents-animate-tabscomponents-app-shells-app-shell-1components-app-shells-app-shell-2components-buttons-buttoncomponents-buttons-copycomponents-buttons-github-starscomponents-buttons-iconcomponents-buttons-smart-uploadcomponents-buttons-theme-togglercomponents-community-notification-listcomponents-community-playful-todolistcomponents-faqs-faq-1components-logoclouds-logocloud-1components-logoclouds-logocloud-2components-logoclouds-logocloud-3components-logoclouds-logocloud-4components-logoclouds-logocloud-5components-music-album-cardscomponents-music-spotify-cardcomponents-music-vertical-spotify-card-1components-music-vertical-spotify-card-2components-preloaders-greetingscomponents-pricings-pricing-1components-pricings-pricing-2components-pricings-pricing-3components-pricings-pricing-4components-pricings-pricing-5components-pricings-pricing-6components-primitives-avatarcomponents-primitives-tree-filtercomponents-radix-checkboxcomponents-radix-dropdown-menucomponents-radix-hover-cardcomponents-texts-text-highlightercomponents-texts-text-revealcomponents-texts-text-shimmercomponents-texts-text-shimmer-wavecomponents-texts-typewritercomponents-ui-badgedemo-components-ai-chat-containerdemo-components-ai-message-bubbledemo-components-ai-model-selectordemo-components-ai-prompt-input
Components: index, components-ai-chat-container, components-ai-message-bubble, components-ai-model-selector, components-ai-prompt-input, components-ai-search-modal, components-ai-steps, components-ai-thought-chain, components-ai-token-usage, components-animate-avatar-group, components-animate-card-stroke, components-animate-code, components-animate-code-block, components-animate-code-tabs, components-animate-cursor, components-animate-footer, components-animate-github-stars-wheel, components-animate-tabs, components-app-shells-app-shell-1, components-app-shells-app-shell-2, components-buttons-button, components-buttons-copy, components-buttons-github-stars, components-buttons-icon, components-buttons-smart-upload, components-buttons-theme-toggler, components-community-notification-list, components-community-playful-todolist, components-faqs-faq-1, components-logoclouds-logocloud-1, components-logoclouds-logocloud-2, components-logoclouds-logocloud-3, components-logoclouds-logocloud-4, components-logoclouds-logocloud-5, components-music-album-cards, components-music-spotify-card, components-music-vertical-spotify-card-1, components-music-vertical-spotify-card-2, components-preloaders-greetings, components-pricings-pricing-1, components-pricings-pricing-2, components-pricings-pricing-3, components-pricings-pricing-4, components-pricings-pricing-5, components-pricings-pricing-6, components-primitives-avatar, components-primitives-tree-filter, components-radix-checkbox, components-radix-dropdown-menu, components-radix-hover-card, components-texts-text-highlighter, components-texts-text-reveal, components-texts-text-shimmer, components-texts-text-shimmer-wave, components-texts-typewriter, components-ui-badge, demo-components-ai-chat-container, demo-components-ai-message-bubble, demo-components-ai-model-selector, demo-components-ai-prompt-input, demo-components-ai-search-modal, demo-components-ai-steps, demo-components-ai-thought-chain, demo-components-ai-token-usage, demo-components-animate-avatar-group, demo-components-animate-card-stroke, demo-components-animate-code, demo-components-animate-code-block, demo-components-animate-code-tabs, demo-components-animate-cursor, demo-components-animate-footer, demo-components-animate-github-stars-wheel, demo-components-animate-tabs, demo-components-app-shells-app-shell-1, demo-components-app-shells-app-shell-2, demo-components-buttons-button, demo-components-buttons-copy, demo-components-buttons-github-stars, demo-components-buttons-smart-upload, demo-components-buttons-theme-toggler, demo-components-community-notification-list, demo-components-community-playful-todolist, demo-components-faqs-faq-1, demo-components-logoclouds-logocloud-1, demo-components-logoclouds-logocloud-2, demo-components-logoclouds-logocloud-3, demo-components-logoclouds-logocloud-4, demo-components-logoclouds-logocloud-5, demo-components-music-album-cards, demo-components-music-spotify-card, demo-components-music-vertical-spotify-card-1, demo-components-music-vertical-spotify-card-2, demo-components-preloaders-greetings, demo-components-pricings-pricing-1, demo-components-pricings-pricing-2, demo-components-pricings-pricing-3, demo-components-pricings-pricing-4, demo-components-pricings-pricing-5, demo-components-pricings-pricing-6, demo-components-primitives-avatar, demo-components-primitives-tree-filter, demo-components-radix-checkbox, demo-components-radix-hover-card, demo-components-texts-text-highlighter, demo-components-texts-text-reveal, demo-components-texts-text-shimmer, demo-components-texts-text-shimmer-wave, demo-components-texts-typewriter, demo-components-ui-badge, demo-components-ui-badge-colors, demo-components-ui-button, demo-primitives-animate-avatar-group, demo-primitives-animate-code-block, demo-primitives-animate-cursor, demo-primitives-animate-github-stars, 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-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-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-alarm-clock, icons-arrow-right, icons-audio-lines, icons-battery-full, icons-bell-ring, icons-clock, icons-disc-3, icons-icon, icons-loader, icons-menu, icons-party-popper, icons-settings, icons-trash-2, icons-user, icons-wifi, lib-get-strict-context, primitives-animate-avatar-group, primitives-animate-code-block, primitives-animate-cursor, primitives-animate-github-stars, primitives-animate-pinned-list, primitives-animate-scroll-progress, primitives-animate-slot, primitives-animate-spring, primitives-animate-tabs, primitives-animate-tooltip, primitives-base-accordion, primitives-base-alert-dialog, primitives-base-checkbox, primitives-base-collapsible, primitives-base-dialog, primitives-base-files, primitives-base-menu, primitives-base-popover, primitives-base-preview-card, primitives-base-progress, primitives-base-radio, primitives-base-switch, primitives-base-tabs, primitives-base-toggle, primitives-base-toggle-group, primitives-base-tooltip, primitives-buttons-button, primitives-buttons-flip, primitives-buttons-liquid, primitives-buttons-ripple, primitives-effects-auto-height, primitives-effects-blur, primitives-effects-click, primitives-effects-effect, primitives-effects-fade, primitives-effects-highlight, primitives-effects-image-zoom, primitives-effects-magnetic, primitives-effects-particles, primitives-effects-shine, primitives-effects-slide, primitives-effects-theme-toggler, primitives-effects-tilt, primitives-effects-zoom, primitives-headless-checkbox, primitives-headless-dialog, primitives-headless-disclosure, primitives-headless-popover, primitives-headless-switch, primitives-headless-tabs, primitives-radix-accordion, primitives-radix-alert-dialog, primitives-radix-checkbox, primitives-radix-collapsible, primitives-radix-dialog, primitives-radix-dropdown-menu, primitives-radix-files, primitives-radix-hover-card, primitives-radix-popover, primitives-radix-progress, primitives-radix-radio-group, primitives-radix-sheet, primitives-radix-switch, primitives-radix-tabs, primitives-radix-toggle, primitives-radix-toggle-group, primitives-radix-tooltip, primitives-texts-counting-number, primitives-texts-gradient, primitives-texts-highlight, primitives-texts-morphing, primitives-texts-rolling, primitives-texts-rotating, primitives-texts-scrolling-number, primitives-texts-shimmering, primitives-texts-sliding-number, primitives-texts-splitting, primitives-texts-typingPreview
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.