ActiveAnimated componentspro available3
@ballmac
Animated components · MIT · data updated 2026-10-10
Accessible React and Tailwind v4 components, blocks and templates with native-app motion, built-in keyboard, RTL and translation support, and an MCP server for AI agents.
accessibilityaianimationaudiobackgroundsblocksbuttonscardscmsdeveloper-toolsformsmediamobilenavigationoverlayspaymentspro-available
Install
npx shadcn@latest add https://ui.ballmac.com/r/registry.jsonHealth
StatusActive
Last commit1 day ago
LicenseMIT
Open issues4
ArchivedNo
Stars3
Components (1012)
accordionaccordion-demoaccordion-multipleactivity-feedactivity-feed-demoactivity-feed-statesagent-planagent-plan-demoagent-plan-failedai-chatai-chat-demoai-chat-emptyai-messageai-message-demoai-message-actionsai-orbai-orb-demoai-orb-voicealert-dialogalert-dialog-demoalert-dialog-statesalertalert-demoalert-statesandroid-frameandroid-frame-demoandroid-frame-buttonsanimated-beamanimated-beam-demoanimated-beam-bidirectionalanimated-gridanimated-grid-demoanimated-listanimated-list-demoanimated-list-loganimated-number-flowanimated-number-flow-demoanimated-number-flow-formatsanimated-tabsanimated-tabs-demoanimated-tabs-underlineapi-endpointapi-endpoint-demoapi-endpoint-listapi-key-fieldapi-key-field-demoapp-shellapp-shell-demoapp-shell-statesapproval-cardapproval-card-demoapproval-card-risksartifact-panelartifact-panel-demoartifact-panel-streamingaspect-ratioaspect-ratio-demoaspect-ratio-statesaudio-playeraudio-player-demo
Components: accordion, accordion-demo, accordion-multiple, activity-feed, activity-feed-demo, activity-feed-states, agent-plan, agent-plan-demo, agent-plan-failed, ai-chat, ai-chat-demo, ai-chat-empty, ai-message, ai-message-demo, ai-message-actions, ai-orb, ai-orb-demo, ai-orb-voice, alert-dialog, alert-dialog-demo, alert-dialog-states, alert, alert-demo, alert-states, android-frame, android-frame-demo, android-frame-buttons, animated-beam, animated-beam-demo, animated-beam-bidirectional, animated-grid, animated-grid-demo, animated-list, animated-list-demo, animated-list-log, animated-number-flow, animated-number-flow-demo, animated-number-flow-formats, animated-tabs, animated-tabs-demo, animated-tabs-underline, api-endpoint, api-endpoint-demo, api-endpoint-list, api-key-field, api-key-field-demo, app-shell, app-shell-demo, app-shell-states, approval-card, approval-card-demo, approval-card-risks, artifact-panel, artifact-panel-demo, artifact-panel-streaming, aspect-ratio, aspect-ratio-demo, aspect-ratio-states, audio-player, audio-player-demo, audio-player-compact, aurora-background, aurora-background-demo, aurora-background-warm, avatar-circles, avatar-circles-demo, avatar-circles-sizes, avatar-stack, avatar-stack-demo, avatar-stack-states, avatar, avatar-demo, avatar-group, back-to-top, back-to-top-demo, back-to-top-states, badge, badge-demo, badge-status, banner, banner-demo, banner-states, beams-background, beams-background-demo, beams-background-falling, bento-grid, bento-grid-demo, bento-grid-features, billing-card, billing-card-demo, billing-card-states, ai-chat-1, ai-chat-1-demo, ai-chat-2, ai-chat-2-demo, ai-chat-2-blank, app-shell-1, app-shell-1-demo, app-shell-1-collapsed, billing-1, billing-1-demo, billing-1-starter, billing-2, billing-2-demo, billing-2-yearly, blog-1, blog-1-demo, blog-1-compact, blog-post-1, blog-post-1-demo, blog-post-1-short, calendar-1, calendar-1-demo, calendar-1-compact, careers-1, careers-1-demo, careers-1-small, changelog-1, changelog-1-demo, changelog-1-minimal, comparison-1, comparison-1-demo, comparison-1-single, contact-1, contact-1-demo, contact-1-support, cta-1, cta-1-demo, cta-2, cta-2-demo, cta-3, cta-3-demo, cta-3-custom, dashboard-1, dashboard-1-demo, dashboard-1-week, dashboard-2, dashboard-2-demo, dashboard-2-week, devices-1, devices-1-demo, devices-1-custom, download-1, download-1-demo, download-1-simple, error-1, error-1-demo, error-1-server, faq-1, faq-1-demo, faq-2, faq-2-demo, faq-2-compact, features-1, features-1-demo, features-2, features-2-demo, features-3, features-3-demo, features-4, features-4-demo, features-5, features-5-demo, features-5-custom, features-6, features-6-demo, features-6-two, features-7, features-7-demo, features-7-two, footer-1, footer-1-demo, footer-2, footer-2-demo, footer-2-long, forgot-password-1, forgot-password-1-demo, forgot-password-1-reset, header-1, header-1-demo, header-2, header-2-demo, header-2-simple, hero-1, hero-1-demo, hero-2, hero-2-demo, hero-3, hero-3-demo, hero-4, hero-4-demo, hero-5, hero-5-demo, hero-6, hero-6-demo, hero-6-custom, hero-7, hero-7-demo, hero-7-custom, invite-1, invite-1-demo, invite-1-expired, kanban-1, kanban-1-demo, kanban-1-simple, login-1, login-1-demo, login-2, login-2-demo, login-2-error, logo-cloud-1, logo-cloud-1-demo, logo-cloud-1-grid, mail-1, mail-1-demo, mail-1-empty, newsletter-1, newsletter-1-demo, newsletter-1-simple, onboarding-1, onboarding-1-demo, onboarding-1-custom, pricing-1, pricing-1-demo, pricing-2, pricing-2-demo, pricing-2-custom, pricing-3, pricing-3-demo, pricing-3-two, pricing-4, pricing-4-demo, pricing-4-custom, settings-1, settings-1-demo, settings-1-save, settings-2, settings-2-demo, settings-2-custom, settings-3, settings-3-demo, settings-3-full, showcase-1, showcase-1-demo, showcase-1-custom, signup-1, signup-1-demo, signup-1-simple, stats-1, stats-1-demo, stats-1-simple, team-1, team-1-demo, team-1-small, testimonials-1, testimonials-1-demo, testimonials-2, testimonials-2-demo, testimonials-2-autoplay, verify-1, verify-1-demo, verify-1-four, blur-fade, blur-fade-demo, blur-fade-directions, border-beam, border-beam-demo, border-beam-button, breadcrumb, breadcrumb-demo, breadcrumb-states, browser-frame, browser-frame-demo, browser-frame-minimal, button-group, button-group-demo, button-group-states, button, button-demo, button-variants, button-loading, calendar-agenda, calendar-agenda-demo, calendar-agenda-states, calendar, calendar-demo, calendar-states, callout, callout-demo, callout-states, card, card-demo, card-states, carousel, carousel-demo, carousel-states, changelog-feed, changelog-feed-demo, changelog-feed-states, chart, chart-demo, chart-bars, chart-donut, chat-attachment, chat-attachment-demo, chat-attachment-tiles, checkbox, checkbox-demo, checkbox-indeterminate, circular-progress, circular-progress-demo, circular-progress-gauge, citation, citation-demo, citation-pill, code-block, code-block-demo, code-block-tabs, collapsible, collapsible-demo, collapsible-states, color-picker, color-picker-demo, color-picker-states, combobox, combobox-demo, combobox-states, command-bar, command-bar-demo, command-bar-states, command, command-demo, command-dialog, comparison-table, comparison-table-demo, comparison-table-states, confetti, confetti-demo, confetti-presets, container-scroll, container-scroll-demo, container-scroll-states, context-menu, context-menu-demo, context-menu-states, contribution-graph, contribution-graph-demo, contribution-graph-states, control-center, control-center-demo, control-center-compact, cookie-consent, cookie-consent-demo, cookie-consent-states, copy-button, copy-button-demo, copy-button-inline, countdown, countdown-demo, countdown-states, currency-input, currency-input-demo, currency-input-states, data-table, data-table-demo, data-table-states, date-picker, date-picker-demo, date-picker-states, date-range-picker, date-range-picker-demo, date-range-picker-states, description-list, description-list-demo, description-list-states, desktop-icons, desktop-icons-demo, desktop-icons-window, dialog, dialog-demo, dialog-confirm, diff-viewer, diff-viewer-demo, diff-viewer-states, dock, dock-demo, dock-vertical, dot-pattern, dot-pattern-demo, dot-pattern-dense, dotted-map, dotted-map-demo, dotted-map-regions, drawer, drawer-demo, drawer-states, dropdown-menu, dropdown-menu-demo, dropdown-menu-states, dynamic-islandPreview
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.