---
name: "@microkit"
slug: "microkit"
description: "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."
category: "Animated components"
tags: ["animation", "backgrounds", "buttons", "cards", "forms", "icons", "media", "navigation", "pro-available"]
framework: "react"
license: "MIT"
author: "henriquegpb"
website: "https://microkit.co"
github: "https://github.com/henriquegpb/microkit"
registry: "https://microkit.co/r/registry.json"
pro: true
pro_url: "https://microkit.co/components/pricing-slide-link"
github_stars: 40
component_count: 49
generated_at: "2026-09-21T01:50:16.753Z"
---

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

## Links

- Website: https://microkit.co
- GitHub: https://github.com/henriquegpb/microkit
- Registry JSON: https://microkit.co/r/registry.json
- Directory page: https://sh4dcn.vercel.app/registry/microkit
- This file: https://sh4dcn.vercel.app/md/microkit.md
- Pro / pricing: https://microkit.co/components/pricing-slide-link

## Install

```sh
# add the whole registry (shadcn CLI)
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
# clone the source repo
git clone https://github.com/henriquegpb/microkit.git
# fetch the raw registry index
curl -s https://microkit.co/r/registry.json
```

## Components (49)

| name | type | description | install |
| --- | --- | --- | --- |
| cursor-edge-glow-button | registry: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 | registry: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-input | registry:component | An input with a clean animated focus treatment. | `npx shadcn@latest add https://microkit.co/r/focus-input.json` |
| social-icon-buttons | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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` |
| whats-new-glow-button | registry: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-browser-button | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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` |

## For AI agents

```text
You are adding components from @microkit to a shadcn-compatible project.
1. Read this file (https://sh4dcn.vercel.app/md/microkit.md) for the component list.
2. Fetch the machine-readable index: https://microkit.co/r/registry.json
3. Install a single component with its install command from the table above.
4. Full structured record: https://sh4dcn.vercel.app/json (library slug: microkit).
```