Amicro SV

168 micro interactions for Svelte 5, published as 179 shadcn style registry items.

Demo · Install page · llms.txt

Note

Port of the React library Amicro by Syed Subhan. He designed every interaction, this repo rebuilds them on Svelte 5 and motion-sv. Provenance and license: NOTICE.md.

motion-sv is the best Motion port for Svelte I know of, and this site is the stress test: 168 components that exist in React, rebuilt to show what carries over and where Svelte and React actually diverge.

Install

Requires SvelteKit and Tailwind 4. shadcn-svelte init does not install Tailwind, it exits when Tailwind is missing, so add it first.

╭──────────────────────────────────────── amicro-sv registry ────────────────────────────────────────╮
│ npx sv add tailwindcss                                                      add Tailwind 4         │
│ npx shadcn-svelte@latest init                                               set up components.json │
│ npx shadcn-svelte@latest add https://amicro-sv.enisdev.com/r/fade-in.json   add a component        │
╰────────────────────────────────────────────────────────────────────────────────────────────────────╯

The CLI writes the component into your ui alias under amicro/, installs motion-sv and drops the upstream MIT license next to it. Every name from the install page works, or from llms.txt if a coding agent is doing the picking.

Development

pnpm install
pnpm dev
pnpm check
pnpm build
pnpm test:amicro      # Playwright motion check, needs pnpm dev running
pnpm registry:build   # regenerate registry.json, static/r and llms.txt

Conventions

PORTING.md is the contract for every ported file. Where motion-sv and Motion for React differ, and which of those differences fail silently: docs/motion-sv.md, NOTICE.md and the agent skill in .claude/skills/motion-sv.

License

MIT, inherited from the original. Provenance: NOTICE.md, LICENSE.upstream.