# MicroKit UI

> Free copy-paste React and CSS micro-interactions for modern web interfaces

MicroKit UI is an open-source gallery of animated UI micro-interactions, such as glowing buttons, hover reveals, sliding tabs, and focus fields. Each interaction is provided as standalone React, CSS, or Tailwind code with no third-party runtime package required, and can also be installed directly via the shadcn CLI.

Website: https://microkit.co/

## What it is for

- Add animated hover and click feedback to call-to-action buttons
- Implement animated sliding tabs and navigation menus
- Enhance form inputs with animated focus states and drag-to-scrub controls
- Drop micro-interactions into Next.js or React projects via copy-paste or shadcn CLI

## Features

- 49 copy-paste micro-interactions spanning buttons, tabs, inputs, and navigation
- No runtime package dependency—just copy code or use the official shadcn registry
- Available in both standard CSS and Tailwind CSS (supporting v3 and v4)
- Available in TypeScript and JavaScript variants
- Fully compatible with React and Next.js App Router
- Categorized and filterable by stack (React, CSS) and trigger type (Hover, Click, Drag, Focus)
- MIT licensed for commercial and personal projects

## Pricing

Free and MIT licensed

## Details

- Type: Website
- Category: [Development](https://xiry.app/topics/development.md)
- Topic: [UI Components](https://xiry.app/topics/development/ui-components.md)
- Open source: yes
- Platforms: Web, Code library
- For: Frontend developers and UI designers building React and Tailwind web applications
- Alternative to: shadcn/ui, Aceternity UI, Magic UI
- Tags: react, css, tailwind, microinteractions, ui components, shadcn

## Why it was saved

- [@craftworkdesign, 7 September 2026](https://x.com/craftworkdesign/status/2097011863489757516): 43 interactions ready to copy, adapt and ship; cards tagged React/CSS, Hover, Click feedback, Navigation.
- [@csaba_kissi, 8 September 2026](https://x.com/csaba_kissi/status/2097206925264118197): One-stop source of ready-to-copy micro-interactions to adapt into any project instead of hand-coding each hover/click effect.

## Compare

- [Alternatives to Aceternity UI](https://xiry.app/alternatives/aceternity-ui.md)
- [Alternatives to Magic UI](https://xiry.app/alternatives/magic-ui.md)
- [Alternatives to shadcn/ui](https://xiry.app/alternatives/shadcn-ui.md)

## Related

- [shadcn/ui](https://xiry.app/resources/shadcn-ui-1902): Copy-paste React UI components built with Tailwind CSS and Radix primitives. (Website, Open source)
- [Efferd](https://xiry.app/resources/efferd): Pre-built, responsive shadcn/ui blocks and layouts for React applications (Web app, Freemium)
- [Motion](https://xiry.app/resources/motion): Open-source animation library for React, Vue, and vanilla JavaScript (Website, Freemium)
- [React Bits](https://xiry.app/resources/react-bits): Open-source animated and interactive React UI components and backgrounds (Website, Freemium)
- [21st.dev](https://xiry.app/resources/21st-dev): Curated directory of crafted React, Tailwind, and shadcn UI components. (Website, Freemium)
- [lucide-animated](https://xiry.app/resources/lucide-animated): Open-source animated React icons built with Lucide and Motion (Web app, Open source)

Updated 10 October 2026. Page: https://xiry.app/resources/microkit-ui

Make your own library: Xiry takes your saved reels, tweets, Reddit bookmarks and Watch Later videos, makes them searchable and pulls the useful stuff out, like this library. It's invite-only for now; join the waitlist at https://xiry.app/#waitlist.