Explore micro interactions

Questions

• Can I use these in a commercial project?

  Yes. The code in this repository is MIT licensed. Some interactions are adapted from publicly shared examples and Webflow exports and rewritten here — if you recognise work that needs clearer attribution, open an issue.

• Do I need to install any dependencies?

  Usually not. 26 of the 54 interactions need nothing at all: a component file and either CSS or Tailwind classes. The other 28 import lucide-react for their icons, and every component page names what it needs under Installation.

• Is there an npm package to install?

  No, and that is deliberate. You open an interaction, choose TypeScript or JavaScript and CSS or Tailwind, copy it, and it is yours to edit. Nothing is added to your package.json except lucide-react when a component draws an icon.

• Does it work with Tailwind v4?

  Yes. Every interaction ships a Tailwind version alongside the CSS one, written with core utilities and arbitrary values that behave the same in v3 and v4. This site is itself built on Tailwind v4.

• Do the components work with the Next.js App Router?

  Yes. Most are markup and CSS with no client state, so they drop straight into a server component. Anything using React state, a ref or an event handler needs "use client" at the top of its file — add it if the snippet you copied does not already have it.

• Can I submit my own interaction?

  Yes. The submit page takes your component code and an optional screenshot and prefills a GitHub issue, which you review and open yourself.