ActiveAnimated components8
@craftui
Animated components · data updated 2026-09-21
Animated, interaction-first components for React: 70+ loaders, interactive SVG icons, plus blocks, sections and UI primitives. Built with Tailwind CSS v4 and Motion, with every animation hand-tuned rather than generated.
animationaudioauthblocksbuttonscardsdesign-systeme-commerceformsglassmorphismhooksiconsloadersmediamobilenavigationonboardingoverlaysretrotheming
Install
npx shadcn@latest add https://www.craftui.space/r/registry.jsonHealth
StatusActive
Last commit5 days ago
License—
Open issues0
ArchivedNo
Stars8
Components (158)
craftui-basetrash-defaulttrash-shaketrash-bouncetrash-dissolvetab-open-defaultshopping-cart-defaultrefresh-defaultrefresh-strokerefresh-dashmsg-glass-typingmsg-glass-wigglemsg-glass-slideInmail-defaultmail-notificationlock-glass-defaultlock-glass-unlocklayout-defaultlayout-swaphome-defaulthome-drawexternal-link-defaultdownload-defaultcalendar-page-flipcalendar-picker-opencalendar-slide-monthbulb-defaultalarm-clock-defaultalarm-clock-ticktriangle-cascade-defaultsquare-flip-defaultsquare-corners-rotate-defaultsquare-corners-dance-defaultspinner-orbit-dots-defaultsiri-wave-defaultscan-line-defaultpulse-ring-defaultios-spinner-trail-defaultios-spinner-thick-defaultios-spinner-pulse-defaultios-spinner-grow-defaultios-spinner-dual-defaultios-spinner-dots-defaultios-spinner-defaultinfinity-loop-defaulthexagon-rotate-defaultheart-fill-defaultgrid-wave-row-defaultgrid-spiral-defaultgrid-snake-defaultgrid-ripple-defaultgrid-random-defaultgrid-pulse-defaultgrid-cross-defaultgrid-corners-in-defaultgrid-column-scan-defaultgrid-clock-defaultgrid-checker-defaultfill-water-drop-defaultfill-thermometer-default
Components: craftui-base, trash-default, trash-shake, trash-bounce, trash-dissolve, tab-open-default, shopping-cart-default, refresh-default, refresh-stroke, refresh-dash, msg-glass-typing, msg-glass-wiggle, msg-glass-slideIn, mail-default, mail-notification, lock-glass-default, lock-glass-unlock, layout-default, layout-swap, home-default, home-draw, external-link-default, download-default, calendar-page-flip, calendar-picker-open, calendar-slide-month, bulb-default, alarm-clock-default, alarm-clock-tick, triangle-cascade-default, square-flip-default, square-corners-rotate-default, square-corners-dance-default, spinner-orbit-dots-default, siri-wave-default, scan-line-default, pulse-ring-default, ios-spinner-trail-default, ios-spinner-thick-default, ios-spinner-pulse-default, ios-spinner-grow-default, ios-spinner-dual-default, ios-spinner-dots-default, ios-spinner-default, infinity-loop-default, hexagon-rotate-default, heart-fill-default, grid-wave-row-default, grid-spiral-default, grid-snake-default, grid-ripple-default, grid-random-default, grid-pulse-default, grid-cross-default, grid-corners-in-default, grid-column-scan-default, grid-clock-default, grid-checker-default, fill-water-drop-default, fill-thermometer-default, fill-paint-bucket-default, fill-hourglass-default, fill-flask-default, fill-coffee-cup-default, fill-beer-glass-default, fill-battery-default, download-bounce-default, dots-rotate-default, dots-compress-default, dots-bounce-default, dot-matrix-vortex-default, dot-matrix-rain-default, dot-matrix-life-default, dot-matrix-chase-default, dot-matrix-bits-default, dot-circle-expand-default, dock-bounce-default, cross-expand-default, conic-spinner-default, circular-wave-fill-default, circle-spinner-wipe-default, breath-default, bars-wave-default, bars-scale-wave-default, bars-scale-bottom-default, bars-scale-01-scale, bars-pulse-swap-default, bars-fill-sequential-default, bars-fade-01-fade, bars-cascade-default, bars-bounce-default, ball-bounce-slide-default, ball-bounce-dashed-default, ball-bounce-box-default, ball-bounce-alternate-default, audio-wave-vertical-default, audio-bars-sequential-default, audio-bars-opacity-default, audio-bars-horizontal-default, audio-bars-glow-default, app-download-default, activity-rings-default, travel-card-default, theme-button-default, teletype-clock-default, subscribe-button-default, subitem-navbar-subitem-navbar, steps-count-default, question-builder-modal-default, profile-card-navbar, product-card-default, pixel-dissolve-card-default, onboarding-form-default, netflix-sign-in-default, morphing-image-effect-default, hero-roster-default, frosted-navbar-frosted-navbar, feedback-button-default, curve-heading-default, contact-reveal-card-default, checkout-button-default, category-ticker-vertical-marquee, avatar-default, approve-switch-default, ai-chat-default, wellness-hero-01-default, team-cluster-01-default, orchid-ai-01-default, navbar-01-default, feature-gallery-02-default, feature-gallery-01-default, feature-ai-01-default, akta-hero-01-default, akta-benchmarks-01-default, tool-connector-default, modular-block-default, gpu-infrastructure-default, workflow-pipeline-default, upgrade-modal-default, stacked-tower-default, rewards-card-default, notes-card-default, insight-card-default, flight-card-default, otp-input-ripple, button-whimsical, button-confetti, button-scramble, alert-dialog-scale, alert-dialog-blur, alert-dialog-slam, alert-dialog-ios, alert-dialog-terminal, alert-dialog-curtain, alert-dialog-reactive, accordion-clip, accordion-drawer, accordion-easePreview
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.
@craftui · craftui-base
npx shadcn@latest add https://www.craftui.space/r/craftui-base.jsonView source