ActiveAnimated componentspro available40
@microkit
Animated components · MIT · data updated 2026-09-21
Copy-paste microinteractions for React: animated buttons, hover effects, tabs and inputs. Each one installs as a single self-contained TypeScript and Tailwind file. MIT licensed.
animationbackgroundsbuttonscardsformsiconsmedianavigationpro-available
Install
npx shadcn@latest add https://microkit.co/r/registry.jsonHealth
StatusActive
Last commit2 days ago
LicenseMIT
Open issues0
ArchivedNo
Stars40
Components (49)
cursor-edge-glow-buttoncursor-follow-share-buttonfocus-inputsocial-icon-buttonsscrub-number-fieldsocial-highlight-cardsblur-glide-menuexpanding-icon-tabsnext-dot-fill-buttonpreview-hover-toolbarsecure-purchase-buttonexpanding-contact-buttoncontact-reveal-buttoncontact-details-revealsubscribe-shine-buttonexpanding-newsletter-buttonnext-reveal-buttonpricing-slide-linkspotlight-indicatorread-more-swapprojects-arrow-buttonwhats-new-glow-buttonpreview-browser-buttonicon-swap-buttonmagnetic-fill-buttonsliding-send-buttonget-started-circle-swapoutline-wipe-buttonproject-text-swap-buttonview-more-text-swapstaggered-letter-text-swapstaggered-letter-glow-buttongradient-underline-buttonyellow-fill-preview-buttonwhite-contact-orbit-buttoncircle-surface-buttoninset-circle-buttonsliding-arrow-labelorange-circle-fill-buttonlayered-gradient-buttonglow-arrow-buttontalk-arrow-reveal-buttonsee-more-swap-buttonneon-invert-buttoncontact-underline-buttonsliding-content-tabssliding-underline-tabsfloating-newsletter-buttonaurora-download-button
Components: cursor-edge-glow-button, cursor-follow-share-button, focus-input, social-icon-buttons, scrub-number-field, social-highlight-cards, blur-glide-menu, expanding-icon-tabs, next-dot-fill-button, preview-hover-toolbar, secure-purchase-button, expanding-contact-button, contact-reveal-button, contact-details-reveal, subscribe-shine-button, expanding-newsletter-button, next-reveal-button, pricing-slide-link, spotlight-indicator, read-more-swap, projects-arrow-button, whats-new-glow-button, preview-browser-button, icon-swap-button, magnetic-fill-button, sliding-send-button, get-started-circle-swap, outline-wipe-button, project-text-swap-button, view-more-text-swap, staggered-letter-text-swap, staggered-letter-glow-button, gradient-underline-button, yellow-fill-preview-button, white-contact-orbit-button, circle-surface-button, inset-circle-button, sliding-arrow-label, orange-circle-fill-button, layered-gradient-button, glow-arrow-button, talk-arrow-reveal-button, see-more-swap-button, neon-invert-button, contact-underline-button, sliding-content-tabs, sliding-underline-tabs, floating-newsletter-button, aurora-download-buttonPreview
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.
@microkit · cursor-edge-glow-button
npx shadcn@latest add https://microkit.co/r/cursor-edge-glow-button.jsonView source