Dev Design Library

MicroKit components

Copy-paste microinteractions for thoughtful product interfaces. Built with React, TypeScript and Tailwind CSS.

Components
55
Framework
React
Stack
React, TypeScript, Tailwind
License
MIT
GitHub stars
51
Source
https://github.com/henriquegpb/microkit
Website
https://www.microkit.co/
Install
npx shadcn@latest add @microkit/{name}

All MicroKit components

  • Aurora Download Button: A layered blue download button with a luminous rim, directional shadow, and blended hover bloom.
  • Blur Glide Menu: A nested menu whose steps blur before they glide aside, while the surface animates to the height of the step arriving.
  • Bounce Checkbox: A checkbox whose fill springs out past the box with a little swell, draws its tick, then strikes the label through and dims it.
  • Circle Surface Button: A circular CTA whose dark surface expands into an orange fill.
  • Contact Details Reveal: A compact white contact label that shifts upward to reveal muted contact details with an orange accent.
  • Contact Reveal Button: A circular arrow and label that resolve into a polished contact pill on hover.
  • Contact Underline Button: A compact contact action whose icon turns orange while an underline draws beneath the label.
  • Count Up Number: A stat that counts up from zero the first time it scrolls into view, easing out so the last digits settle slowly; it is sized to the…
  • Cursor Edge Glow Button: A spring-tracked pill light with mirrored edge glows that crossfade as the pointer changes sides.
  • Cursor Follow Share Button: A dark share pill with a glowing send orb that tracks the pointer and a looping upward text swap.
  • Expanding Contact Button: A pill-shaped call-to-action with an expanding background and arrow icon, adapted from the supplied Webflow export.
  • Expanding Icon Tabs: An icon bar where the chosen tab widens to reveal its label and the rest of the row slides over to make room.
  • Expanding Newsletter Button: An orange newsletter pill with a growing dark circle and an arrow that slides in from the left.
  • Floating Newsletter Button: A compact newsletter button that scales and lifts into a soft white glow on hover.
  • Focus Field: An input with a clean animated focus treatment.
  • Fuse Undo Button: An archive button that turns into Undo and lights an orange fuse around its outline; the fuse holds still while you hover it, so the…
  • Get Started Circle Swap: A bordered CTA whose orange circle exits right as a directional arrow slides into place.
  • Glow Arrow Button: A bright CTA with a soft glow and a moving arrow on hover.
  • Gradient Underline Button: A label that scales up as a warm gradient underline grows across it.
  • Hold to Delete Button: A delete button that only fires when held: an orange bar fills linearly from left to right as a matching glow builds behind it, snapping…
  • Hover Glide Cards: One highlight glides from card to card under the pointer, seen only through the cards themselves, so it drains out of one and fills the…
  • Icon Swap Button: A leading icon slides out as an arrow opens in to take its place, trading without changing the button's width.
  • Inset Circle Button: A circular project CTA that reveals its dark base as the inset surface collapses.
  • Layered Gradient Button: A dimensional pill with gradient text and subtly shifting layered surfaces.
  • Magnetic Fill Button: A magnetic pill button with a bottom-to-top background fill.
  • Neon Invert Button: A bold orange CTA that inverts into a dark, softly glowing surface on hover.
  • Next Dot Fill Button: A bordered pill whose leading dot expands into a solid fill while the label swaps for an arrow cue.
  • Next Reveal Button: An outlined arrow control that expands into a bright Next button on hover.
  • Orange Circle Fill Button: An orange outlined pill that fills from a growing circle.
  • Outline Wipe Button: Hollow stroked lettering that fills with orange behind a rounded bar sweeping left to right.
  • Preview in Browser Button: An outlined pill button with a diagonal arrow that slides through on hover.
  • Preview Hover Toolbar: A thin empty pill that grows wider and taller off its fixed bottom edge when the surrounding preview is hovered, scaling its actions in…
  • Pricing Slide Link: A text link whose arrow slides in from the left as the label settles into place.
  • Progress Ring Check: A task status icon whose dashed ring closes into a spinning arc, fills to its progress, then draws a check or a cross and strikes the…
  • Project Text Swap Button: An outlined pill whose duplicated label swaps vertically on hover.
  • Projects Arrow Button: A Projects label paired with an outlined circular arrow that slides through itself on hover.
  • Read More Swap: A text link whose arrow swaps from the right side to an orange leading arrow on hover.
  • Scrub Number Field: A number field you drag to scrub and click to type, with a ruler that tracks the gesture.
  • Secure Purchase Button: A purchase button that opens room for a pixel-wave loader, swaps it for a shield once the payment clears, then resets itself.
  • See More Swap Button: A pill button whose arrow circle swaps sides while its surface changes color.
  • Sliding Arrow Label: A text label that gets a bright surface while an arrow slides in beside it.
  • Sliding Content Tabs: A compact tab switcher with a sliding active surface and content transition.
  • Sliding Send Button: A bordered share pill whose label glides right as an orange send icon enters from the left.
  • Sliding Underline Tabs: A compact tab switcher with an orange underline that glides between labels.
  • Social Highlight Cards: Social cards with a luminous top rail, a soft brand-colored wash, and matching icons on hover.
  • Social Icon Buttons: Circular social links that trade their icon for a brand-colored arrow and glow on hover.
  • Spotlight Indicator: A glowing rail that slides to the active item in a vertical nav — the same indicator powering this site's sidebar.
  • Staggered Letter Glow Button: A dark pill with inward orange edge glows and a staggered per-letter upward text swap.
  • Staggered Letter Text Swap: A surface-free text interaction with a staggered per-letter upward replacement.
  • Subscribe Shine Button: A dark subscribe pill with a rotating highlight that traces its edge on hover.
  • Talk Arrow Reveal Button: An outlined Talk to us pill that fills with orange and reveals a long arrow.
  • View More Text Swap: A borderless View More label that swaps vertically on hover.
  • What's New Glow Button: A dark, fully rounded button whose orange and blue glows follow the cursor.
  • White Contact Orbit Button: A white Get in touch pill whose arrow settles into a black circular control on hover.
  • Yellow Fill Preview Button: An outlined Preview in browser button that fills with yellow from the left.

Browse by category