sh4dcnv2 · atlas
← libraries

@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.

49 components pro available react shadcn-cli MIT

Install this registry

shadcn (npm) npx shadcn@latest add https://microkit.co/r/registry.json
pnpm pnpm dlx shadcn@latest add https://microkit.co/r/registry.json
bun bunx shadcn@latest add https://microkit.co/r/registry.json
fetch registry curl -s https://microkit.co/r/registry.json

Components

49 total
Cursor Edge Glow Button component

A 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
Cursor Follow Share Button component

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
Focus Field component

An input with a clean animated focus treatment.

npx shadcn@latest add https://microkit.co/r/focus-input.json
Social Icon Buttons component

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
Scrub Number Field component

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 Highlight Cards component

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
Blur Glide Menu component

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
Expanding Icon Tabs component

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
Next Dot Fill Button component

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
Preview Hover Toolbar component

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
Secure Purchase Button component

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
Expanding Contact Button component

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
Contact Reveal Button component

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
Contact Details Reveal component

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
Subscribe Shine Button component

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
Expanding Newsletter Button component

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
Next Reveal Button component

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
Pricing Slide Link component

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
Spotlight Indicator component

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
Read More Swap component

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
Projects Arrow Button component

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
What's New Glow Button component

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
Preview in Browser Button component

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
Icon Swap Button component

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
Magnetic Fill Button component

A magnetic pill button with a bottom-to-top background fill.

npx shadcn@latest add https://microkit.co/r/magnetic-fill-button.json
Sliding Send Button component

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
Get Started Circle Swap component

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
Outline Wipe Button component

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
Project Text Swap Button component

An outlined pill whose duplicated label swaps vertically on hover.

npx shadcn@latest add https://microkit.co/r/project-text-swap-button.json
View More Text Swap component

A borderless View More label that swaps vertically on hover.

npx shadcn@latest add https://microkit.co/r/view-more-text-swap.json
Staggered Letter Text Swap component

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
Staggered Letter Glow Button component

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
Gradient Underline Button component

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
Yellow Fill Preview Button component

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
White Contact Orbit Button component

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
Circle Surface Button component

A circular CTA whose dark surface expands into an orange fill.

npx shadcn@latest add https://microkit.co/r/circle-surface-button.json
Inset Circle Button component

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
Sliding Arrow Label component

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
Orange Circle Fill Button component

An orange outlined pill that fills from a growing circle.

npx shadcn@latest add https://microkit.co/r/orange-circle-fill-button.json
Layered Gradient Button component

A dimensional pill with gradient text and subtly shifting layered surfaces.

npx shadcn@latest add https://microkit.co/r/layered-gradient-button.json
Glow Arrow Button component

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
Talk Arrow Reveal Button component

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
See More Swap Button component

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
Neon Invert Button component

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
Contact Underline Button component

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
Sliding Content Tabs component

A compact tab switcher with a sliding active surface and content transition.

npx shadcn@latest add https://microkit.co/r/sliding-content-tabs.json
Sliding Underline Tabs component

A compact tab switcher with an orange underline that glides between labels.

npx shadcn@latest add https://microkit.co/r/sliding-underline-tabs.json
Floating Newsletter Button component

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
Aurora Download Button component

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