@microkit
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.
Install this registry
npx shadcn@latest add https://microkit.co/r/registry.json pnpm dlx shadcn@latest add https://microkit.co/r/registry.json bunx shadcn@latest add https://microkit.co/r/registry.json curl -s https://microkit.co/r/registry.json Components
49 totalA spring-tracked pill light with mirrored edge glows that crossfade as the pointer changes sides.
npx shadcn@latest add https://microkit.co/r/cursor-edge-glow-button.json A dark share pill with a glowing send orb that tracks the pointer and a looping upward text swap.
npx shadcn@latest add https://microkit.co/r/cursor-follow-share-button.json An input with a clean animated focus treatment.
npx shadcn@latest add https://microkit.co/r/focus-input.json Circular social links that trade their icon for a brand-colored arrow and glow on hover.
npx shadcn@latest add https://microkit.co/r/social-icon-buttons.json A number field you drag to scrub and click to type, with a ruler that tracks the gesture.
npx shadcn@latest add https://microkit.co/r/scrub-number-field.json Social cards with a luminous top rail, a soft brand-colored wash, and matching icons on hover.
npx shadcn@latest add https://microkit.co/r/social-highlight-cards.json A nested menu whose steps blur before they glide aside, while the surface animates to the height of the step arriving.
npx shadcn@latest add https://microkit.co/r/blur-glide-menu.json An icon bar where the chosen tab widens to reveal its label and the rest of the row slides over to make room.
npx shadcn@latest add https://microkit.co/r/expanding-icon-tabs.json A bordered pill whose leading dot expands into a solid fill while the label swaps for an arrow cue.
npx shadcn@latest add https://microkit.co/r/next-dot-fill-button.json A thin empty pill that grows wider and taller off its fixed bottom edge when the surrounding preview is hovered, scaling its actions in one after another with …
npx shadcn@latest add https://microkit.co/r/preview-hover-toolbar.json A purchase button that opens room for a pixel-wave loader, swaps it for a shield once the payment clears, then resets itself.
npx shadcn@latest add https://microkit.co/r/secure-purchase-button.json A pill-shaped call-to-action with an expanding background and arrow icon, adapted from the supplied Webflow export.
npx shadcn@latest add https://microkit.co/r/expanding-contact-button.json A circular arrow and label that resolve into a polished contact pill on hover.
npx shadcn@latest add https://microkit.co/r/contact-reveal-button.json A compact white contact label that shifts upward to reveal muted contact details with an orange accent.
npx shadcn@latest add https://microkit.co/r/contact-details-reveal.json A dark subscribe pill with a rotating highlight that traces its edge on hover.
npx shadcn@latest add https://microkit.co/r/subscribe-shine-button.json An orange newsletter pill with a growing dark circle and an arrow that slides in from the left.
npx shadcn@latest add https://microkit.co/r/expanding-newsletter-button.json An outlined arrow control that expands into a bright Next button on hover.
npx shadcn@latest add https://microkit.co/r/next-reveal-button.json A text link whose arrow slides in from the left as the label settles into place.
npx shadcn@latest add https://microkit.co/r/pricing-slide-link.json A glowing rail that slides to the active item in a vertical nav — the same indicator powering this site's sidebar.
npx shadcn@latest add https://microkit.co/r/spotlight-indicator.json A text link whose arrow swaps from the right side to an orange leading arrow on hover.
npx shadcn@latest add https://microkit.co/r/read-more-swap.json A Projects label paired with an outlined circular arrow that slides through itself on hover.
npx shadcn@latest add https://microkit.co/r/projects-arrow-button.json A dark, fully rounded button whose orange and blue glows follow the cursor.
npx shadcn@latest add https://microkit.co/r/whats-new-glow-button.json An outlined pill button with a diagonal arrow that slides through on hover.
npx shadcn@latest add https://microkit.co/r/preview-browser-button.json A leading icon slides out as an arrow opens in to take its place, trading without changing the button's width.
npx shadcn@latest add https://microkit.co/r/icon-swap-button.json A magnetic pill button with a bottom-to-top background fill.
npx shadcn@latest add https://microkit.co/r/magnetic-fill-button.json A bordered share pill whose label glides right as an orange send icon enters from the left.
npx shadcn@latest add https://microkit.co/r/sliding-send-button.json A bordered CTA whose orange circle exits right as a directional arrow slides into place.
npx shadcn@latest add https://microkit.co/r/get-started-circle-swap.json Hollow stroked lettering that fills with orange behind a rounded bar sweeping left to right.
npx shadcn@latest add https://microkit.co/r/outline-wipe-button.json An outlined pill whose duplicated label swaps vertically on hover.
npx shadcn@latest add https://microkit.co/r/project-text-swap-button.json A borderless View More label that swaps vertically on hover.
npx shadcn@latest add https://microkit.co/r/view-more-text-swap.json A surface-free text interaction with a staggered per-letter upward replacement.
npx shadcn@latest add https://microkit.co/r/staggered-letter-text-swap.json A dark pill with inward orange edge glows and a staggered per-letter upward text swap.
npx shadcn@latest add https://microkit.co/r/staggered-letter-glow-button.json A label that scales up as a warm gradient underline grows across it.
npx shadcn@latest add https://microkit.co/r/gradient-underline-button.json An outlined Preview in browser button that fills with yellow from the left.
npx shadcn@latest add https://microkit.co/r/yellow-fill-preview-button.json A white Get in touch pill whose arrow settles into a black circular control on hover.
npx shadcn@latest add https://microkit.co/r/white-contact-orbit-button.json A circular CTA whose dark surface expands into an orange fill.
npx shadcn@latest add https://microkit.co/r/circle-surface-button.json A circular project CTA that reveals its dark base as the inset surface collapses.
npx shadcn@latest add https://microkit.co/r/inset-circle-button.json A text label that gets a bright surface while an arrow slides in beside it.
npx shadcn@latest add https://microkit.co/r/sliding-arrow-label.json An orange outlined pill that fills from a growing circle.
npx shadcn@latest add https://microkit.co/r/orange-circle-fill-button.json A dimensional pill with gradient text and subtly shifting layered surfaces.
npx shadcn@latest add https://microkit.co/r/layered-gradient-button.json A bright CTA with a soft glow and a moving arrow on hover.
npx shadcn@latest add https://microkit.co/r/glow-arrow-button.json An outlined Talk to us pill that fills with orange and reveals a long arrow.
npx shadcn@latest add https://microkit.co/r/talk-arrow-reveal-button.json A pill button whose arrow circle swaps sides while its surface changes color.
npx shadcn@latest add https://microkit.co/r/see-more-swap-button.json A bold orange CTA that inverts into a dark, softly glowing surface on hover.
npx shadcn@latest add https://microkit.co/r/neon-invert-button.json A compact contact action whose icon turns orange while an underline draws beneath the label.
npx shadcn@latest add https://microkit.co/r/contact-underline-button.json A compact tab switcher with a sliding active surface and content transition.
npx shadcn@latest add https://microkit.co/r/sliding-content-tabs.json A compact tab switcher with an orange underline that glides between labels.
npx shadcn@latest add https://microkit.co/r/sliding-underline-tabs.json A compact newsletter button that scales and lifts into a soft white glow on hover.
npx shadcn@latest add https://microkit.co/r/floating-newsletter-button.json A layered blue download button with a luminous rim, directional shadow, and blended hover bloom.
npx shadcn@latest add https://microkit.co/r/aurora-download-button.json