ActiveAnimated componentspro available11
@ballmac
Animated components · MIT · data updated 2026-10-27
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.
accessibilityaianimationblocksbuttonscardscmsdeveloper-toolsformsloadersmediamobilenavigationoverlayspaymentspro-available
Install
npx shadcn@latest add https://ui.ballmac.com/r/registry/registry.jsonHealth
StatusActive
Last commit2 days ago
LicenseMIT
Open issues0
ArchivedNo
Stars11
Components (702)
accordionaccordion-demoaccordion-multipleagent-rosteragent-roster-demoagent-roster-selectalert-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-tabsanimated-tabs-demoanimated-tabs-underlineapi-key-fieldapi-key-field-demoapp-shellapp-shell-demoapp-shell-statesapp-windowapp-window-demoapp-window-feelsaspect-ratioaspect-ratio-demoaspect-ratio-statesavataravatar-demoavatar-groupback-to-topback-to-top-demoback-to-top-statesbadgebadge-demobadge-statusbannerbanner-demobanner-statesbar-listbar-list-demobar-list-selectbento-gridbento-grid-demobento-grid-featuresabout-1about-1-demoabout-1-shortaccess-1access-1-demo
Components: accordion, accordion-demo, accordion-multiple, agent-roster, agent-roster-demo, agent-roster-select, 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-tabs, animated-tabs-demo, animated-tabs-underline, api-key-field, api-key-field-demo, app-shell, app-shell-demo, app-shell-states, app-window, app-window-demo, app-window-feels, aspect-ratio, aspect-ratio-demo, aspect-ratio-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, bar-list, bar-list-demo, bar-list-select, bento-grid, bento-grid-demo, bento-grid-features, about-1, about-1-demo, about-1-short, access-1, access-1-demo, access-1-flagged, access-1-loading, access-1-empty, access-1-error, alerts-1, alerts-1-demo, alerts-1-quiet, alerts-1-loading, alerts-1-empty, alerts-1-error, analytics-1, analytics-1-demo, analytics-1-week, analytics-1-loading, analytics-1-empty, analytics-1-error, api-1, api-1-demo, api-1-created, api-1-notfound, api-1-loading, api-1-error, app-shell-1, app-shell-1-demo, app-shell-1-collapsed, audit-1, audit-1-demo, audit-1-failed, audit-1-loading, audit-1-empty, audit-1-error, billing-2, billing-2-demo, billing-2-yearly, billing-2-loading, billing-2-error, billing-2-no-plans, blog-1, blog-1-demo, blog-1-compact, blog-1-loading, blog-1-error, blog-1-no-posts, booking-1, booking-1-demo, booking-1-loading, booking-1-empty, booking-1-error, calendar-1, calendar-1-demo, calendar-1-compact, calendar-1-loading, calendar-1-error, calendar-1-no-events, careers-1, careers-1-demo, careers-1-small, changelog-1, changelog-1-demo, changelog-1-minimal, changelog-1-loading, changelog-1-error, changelog-1-no-releases, chat-1, chat-1-demo, chat-1-thread, chat-1-loading, chat-1-empty, chat-1-error, comments-1, comments-1-demo, comments-1-failed, comments-1-loading, comments-1-empty, comments-1-error, comparison-1, comparison-1-demo, comparison-1-single, contact-1, contact-1-demo, contact-1-support, contact-1-sending, contact-1-sent, contact-1-error, crm-1, crm-1-demo, crm-1-won, crm-1-loading, crm-1-empty, crm-1-error, cron-1, cron-1-demo, cron-1-loading, cron-1-empty, cron-1-error, cta-1, cta-1-demo, dashboard-1, dashboard-1-demo, dashboard-1-week, dashboard-1-loading, dashboard-1-error, dashboard-1-no-data, deploys-1, deploys-1-demo, deploys-1-failing, deploys-1-loading, deploys-1-empty, deploys-1-error, directory-1, directory-1-demo, directory-1-list, directory-1-loading, directory-1-empty, directory-1-error, download-1, download-1-demo, download-1-simple, error-1, error-1-demo, error-1-server, event-1, event-1-demo, event-1-saved, faq-1, faq-1-demo, features-1, features-1-demo, footer-1, footer-1-demo, forgot-password-1, forgot-password-1-demo, forgot-password-1-reset, forgot-password-1-submitting, forgot-password-1-success, forgot-password-1-error, header-1, header-1-demo, hero-4, hero-4-demo, invoice-1, invoice-1-demo, invoice-1-due, invoice-1-paid, invoice-1-loading, invoice-1-error, kanban-1, kanban-1-demo, kanban-1-simple, kanban-1-loading, kanban-1-error, kanban-1-no-cards, login-1, login-1-demo, login-1-submitting, login-1-error, logo-cloud-1, logo-cloud-1-demo, logo-cloud-1-grid, mail-1, mail-1-demo, mail-1-empty, mail-1-loading, mail-1-error, mail-1-no-messages, newsletter-1, newsletter-1-demo, newsletter-1-simple, newsletter-1-subscribing, newsletter-1-subscribed, newsletter-1-error, onboarding-1, onboarding-1-demo, onboarding-1-custom, onboarding-1-creating, onboarding-1-ready, onboarding-1-error, pricing-1, pricing-1-demo, reviews-2, reviews-2-demo, reviews-2-few, reviews-2-loading, reviews-2-empty, reviews-2-error, settings-4, settings-4-demo, settings-4-loading, settings-4-empty, settings-4-error, stats-1, stats-1-demo, stats-1-simple, team-1, team-1-demo, team-1-small, testimonials-1, testimonials-1-demo, waitlist-1, waitlist-1-demo, waitlist-1-joined, waitlist-1-sending, waitlist-1-error, blur-fade, blur-fade-demo, blur-fade-directions, border-beam, border-beam-demo, border-beam-button, breadcrumb, breadcrumb-demo, breadcrumb-states, button-group, button-group-demo, button-group-states, button, button-demo, button-variants, button-loading, calendar, calendar-demo, calendar-states, callout, callout-demo, callout-states, card, card-demo, card-states, chart, chart-demo, chart-bars, chart-donut, checkbox, checkbox-demo, checkbox-indeterminate, 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, container-scroll, container-scroll-demo, container-scroll-states, context-menu, context-menu-demo, context-menu-states, copy-button, copy-button-demo, copy-button-inline, countdown, countdown-demo, countdown-states, cover-art, cover-art-demo, cover-art-seeds, currency-input, currency-input-demo, currency-input-states, date-picker, date-picker-demo, date-picker-states, date-range-picker, date-range-picker-demo, date-range-picker-states, dialog, dialog-demo, dialog-confirm, drawer, drawer-demo, drawer-states, dropdown-menu, dropdown-menu-demo, dropdown-menu-states, emoji-picker, emoji-picker-demo, emoji-picker-popover, emoji-picker-german, emoji-picker-loading, emoji-picker-error, empty-state, empty-state-demo, empty-state-states, empty, empty-demo, empty-states, feel-auto, field, field-demo, field-states, file-dropzone, file-dropzone-demo, file-dropzone-states, floating-nav, floating-nav-demo, floating-nav-states, form, form-demo, form-states, funnel-chart, funnel-chart-demo, funnel-chart-static, globe, globe-demo, globe-hero, glow-border, glow-border-demo, glow-border-button, grid-pattern, grid-pattern-demo, grid-pattern-variants, hud, hud-demo, hud-pill, image-cropper, image-cropper-demo, image-cropper-aspect, image-cropper-avatar, image-cropper-controlled, image-cropper-loading, image-cropper-error, inline-alert, inline-alert-demo, inline-alert-states, input-group, input-group-demo, input-group-states, input-otp, input-otp-demo, input-otp-states, inputPreview
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.
@ballmac · accordion
npx shadcn@latest add https://ui.ballmac.com/r/{style}/accordion.jsonView source