MicroKit UI

Overview

MicroKit UI is a free library of 54 copy-paste microinteractions for React, CSS and Tailwind CSS, aimed at developers who care about small details in product interfaces. It covers animated buttons, hover effects, tabs, inputs and menus, and every item is available through its official shadcn registry.

Each microinteraction installs as a single self-contained TypeScript and Tailwind file, with Motion and lucide-react as the only dependencies where needed. The site lets developers filter by framework (React or CSS) and sort by newest, popular or A–Z. The library is MIT licensed.

Features

• Click feedback buttons: Hold to delete, fuse undo, secure purchase, sliding send and magnetic fill buttons.
• Hover buttons: Cursor edge glow, cursor follow share, outline wipe, staggered letter text swap and neon invert buttons.
• Inputs: Focus input, bounce checkbox, progress ring check and a drag-to-scrub number field.
• Navigation: Blur glide menu, expanding icon tabs, sliding underline tabs, preview hover toolbar and hover glide cards.
• Contact and newsletter: Expanding contact, contact reveal, subscribe shine and floating newsletter buttons.
• Social links: Social icon buttons and social highlight cards with brand-colored hover states.
• Single-file installs: Each item lands as one self-contained file.

Tech stack

• React, TypeScript, Tailwind CSS, CSS, Motion, lucide-react

Registry

Install via the shadcn CLI registry:

npx shadcn@latest add @microkit/component-name