The gap between an AI-generated app and a real product is almost never logic. It's motion, spacing and polish. These are the ten sites I keep going back to for exactly that — with the pricing and licence details checked at source, because several of them aren't what the listicles say.
What each one actually costs
Checked directly on each site, because "free tool" gets thrown around loosely.
| Tool | What for | Free? |
|---|---|---|
| Anime.js | Animation | Free · MIT |
| Motion | React animation | Free · MIT |
| Kokonut UI | Components | Free · MIT |
| Bklit UI | Charts | Free · MIT |
| shadcn/ui | Component foundation | Free · MIT |
| driver.js | Onboarding tours | Free · MIT |
| assistant-ui | AI chat UI | Free · MIT |
| React Bits | Animated components | MIT + Commons Clause |
| Tailark | Marketing pages | Free tier · $249+ for Pro |
| Manus | AI workspace | Paid in practice |
Seven are plain MIT — use them, sell what you build, no strings. Three have a catch: React Bits adds a restriction most people miss, Tailark's best material is paid, and Manus isn't really free at all. All three are covered below.
1. Anime.js
Anime.js
animejs.com
A fast, lightweight animation engine that works on CSS properties, SVG, DOM attributes and plain JavaScript objects. Free and MIT licensed — the site's words: "100% free and only made possible with the help of our sponsors."
Best for: landing pages, hero sections and logo or SVG path reveals, without pulling in a framework.
- Say the version. Current is v4, and it's a full rewrite of v3 — imports are now
import { animate, stagger } from 'animejs', and the oldanime({...})style is gone. Tell your AI "anime.js v4" or it will confidently generate v3 code that doesn't run. - Give exact numbers. "easeOutExpo over 800ms" beats "make it smooth" every time.
- Ask for a timeline rather than chained delays — far easier to adjust later.
- Stick to the built-in easing presets; they cover almost everything.
The v3 → v4 trap. Most tutorials and most AI training data are v3. If your animation silently does nothing, this is why. There's an official migration guide in the repo wiki.
2. Motion
Motion (formerly Framer Motion)
motion.dev
A production-grade animation library for React, JavaScript and Vue. The core is free and MIT.
Best for: hover states, page transitions, modals, drag interactions, and animating lists that change size.
whileHoverandwhileTapmake buttons and cards feel premium in one line — but they're React-only. In vanilla JS the equivalents arehover()andpress(). Tell your AI which one you're using.- Use the
layoutprop for accordions and dynamic lists instead of animating height by hand. - Let Tailwind own styling, Motion own movement. Mixing them causes fights.
- If an AI-built app feels dead, this is usually the quickest upgrade.
Watch what you copy. motion.dev markets paid Motion+ products alongside the free library — Carousel, Ticker, Cursor, splitText and others. Easy to grab one thinking it's part of the MIT package. Check the label before you build on it.
3. Kokonut UI
Kokonut UI
kokonutui.com
100+ animated UI components built with Next.js, React, Tailwind and Motion. Install through the shadcn CLI: npx shadcn@latest add @kokonutui/<name>.
Best for: MVPs, landing pages and client demos where you need to move fast and still look designed.
- Copy the real component. Asking AI to recreate it from a description wastes time and gives you a worse version.
- Screenshot the component and paste it as a visual reference — far more reliable than describing it.
- Mix sections from different components, but keep one spacing scale and one radius so it still reads as one design.
The library on the site is free and MIT. There's a separate Pro tier on its own domain — a one-time payment for extra components and templates — but nothing on the free site is paywalled.
4. Bklit UI
Bklit UI
bklit.com
A component library built on top of shadcn/ui for charts and data visualisation — 17 chart types including candlestick, sankey, sunburst and heatmap.
Best for: SaaS dashboards, analytics views, internal tools and admin panels.
- Upgrading default charts is the single biggest jump in perceived quality a dashboard gets.
- Shape your data to match the component's expected format before integrating, not after.
- Lock one chart colour palette across the whole dashboard. Mismatched charts look amateur instantly.
Two things to know. The name is Bklit UI — not "Backlit". Searching the wrong spelling gets you nowhere.
And the split licence: the chart components are MIT, but Bklit Studio — the interactive chart builder, arguably the best part — is proprietary and can't be reused or redistributed. Also note it requires shadcn/ui already set up in your project.
5. Manus
Manus
manus.im
An AI agent that executes tasks rather than just answering — building websites, decks and prototypes from a prompt.
Best for: turning a rough idea into a decent first draft before you move into your real workflow.
- Feed it references — screenshots, live sites, a named design style. Output quality tracks input specificity closely.
- Use it for the foundation, then refine in your normal stack. Don't try to take it to production.
- It's strongest on tight, contained projects: one landing page, one deck, one prototype.
Two things about Manus the listicles leave out
It's not really free. The free tier gives 300 daily credits (capped at 1,500 a month), one task at a time, and only the Lite model. The exact things it's famous for — research, website generation, slide generation — are listed by Manus itself under the Pro plans, starting around $20/month. Credits also don't roll over, and you can't see what a task will cost before running it.
Manus is now part of Meta. That's stated on their own homepage. Doesn't make it worse, but if you're feeding it client work or anything sensitive, you should know whose infrastructure it's running on.
6. shadcn/ui
shadcn/ui
ui.shadcn.com
The foundation almost everything else on this list sits on. 120k stars, MIT, and the most consequential idea in it is that it isn't a dependency — the CLI copies real component source into your project and you own it from then on. No version pinning, no fighting someone else's abstraction.
Best for: the base layer of any React app. Kokonut UI, Bklit UI, React Bits and Tailark all install through its CLI.
- Install it first. Half the "this component won't work" problems downstream are just shadcn not being set up.
npx shadcn@latest initbefore anything else. - Say which flavor. It now ships Base UI as the default with Radix UI as an alternative — AI will happily mix the two and give you imports that don't resolve.
- Tell it to use the CLI rather than write components from scratch:
npx shadcn@latest add dialogbeats any generated dialog. - It works beyond Next.js — Vite, Laravel and TanStack are all supported. Name your framework explicitly.
Worth knowing: the repo now ships its own agent integration — there are skills/, .claude/ and .cursor-plugin/ directories in the source. If your AI tool supports them, it can pull component definitions directly instead of guessing.
7. React Bits
React Bits
reactbits.dev
110+ animated components — text effects, backgrounds, interactive UI. 39.3k stars. Every component ships in four variants (JS-CSS, JS-Tailwind, TS-CSS, TS-Tailwind), so you get the one that matches your project instead of converting it by hand.
Best for: hero sections and landing pages that need to feel alive without you writing animation code.
- Install by name through the shadcn CLI — the variant is part of the string:
npx shadcn@latest add @react-bits/BlurText-TS-TW. - State your variant up front (TS + Tailwind, JS + CSS, etc.) or you'll get code in the wrong dialect.
- Use one or two of these per page. They're high-impact and they compete with each other for attention.
- There are official Vue and Svelte ports at vue-bits.dev and sveltebits.xyz if you're not on React.
The licence line worth reading
React Bits is MIT + Commons Clause, not plain MIT. In practice: you can use it commercially in an app, website or product — that's explicitly permitted. What you cannot do is "sell, sublicense, or redistribute the components themselves — whether alone, in a bundle, or as a ported version."
So building a client site with it is fine. Selling a template pack built out of them is not. If you're only ever shipping products, this never touches you — but the README's "free for personal and commercial use" is doing a lot of quiet work.
8. Tailark
Tailark
tailark.com
A shadcn registry of marketing blocks — heroes, pricing tables, testimonials, logo clouds, FAQ sections — plus full page templates and illustrations. Built on shadcn and Next.js, compatible with both Radix and Base UI.
Best for: the landing page around your app, which is usually the part that looks most obviously AI-made.
- Pick one style family and stay in it. Mixing blocks across styles is the fastest way to make a page look assembled.
- Marketing sections have a conventional order — hero, social proof, features, pricing, FAQ, CTA. Tell your AI the sequence and let Tailark fill the slots.
- Requires shadcn already initialised, same as Bklit UI.
The free tier is real, but limited. Free gets you a set of blocks, pages and snippets with lifetime access and unlimited projects — genuinely usable. The good material is behind a one-time payment: Essentials $249, Complete $299 (adds the full production page set), Team $499.
One-time rather than subscription is a meaningful difference, and worth saying out loud since most of this category rents. But don't go in expecting the showcase pages for free.
Disclosure worth making: Tailark is a paid sponsor of React Bits. They're both good, and they're also commercially linked — you'll see them recommended together a lot, and that's part of why.
9. driver.js
driver.js
driverjs.com
Product tours and feature introductions — the spotlight-and-popover walkthrough you get on your first login somewhere. ~5kb gzipped, zero dependencies, written in TypeScript, and everything is keyboard-controllable out of the box.
Best for: onboarding. This is the piece AI-built apps almost never have, and it's the difference between a demo and something a stranger can actually use.
- It's not only tours. It's a spotlight primitive — use it for contextual help, drawing attention to one field mid-form, or as a plain modal.
- Write the tour steps as content first, then hand them over. AI writes decent code here and consistently bad tour copy.
- Keep it to 4–5 steps. Longer walkthroughs get skipped, and a skipped tour is worse than none.
- Framework-agnostic vanilla JS — works anywhere, no React required.
The repo moved. It's now at github.com/nilbuild/driver.js, not kamranahmedse/driver.js. Old links still redirect and it's still MIT © Kamran Ahmed, but bookmarks and older tutorials point at the previous path.
10. assistant-ui
assistant-ui
assistant-ui.com
ChatGPT's chat UX as React primitives — streaming, auto-scroll, retries, attachments, markdown, code highlighting, keyboard shortcuts and accessibility, all handled. MIT, 11.4k stars, Y Combinator backed, and used in production by LangChain, Mastra, Browser Use and Helicone.
Best for: the moment you add a chat interface to your app and discover that streaming text without janky scrolling is genuinely hard.
- Start from the CLI:
npx assistant-ui@latest createfor a new app, orinitto add it to an existing one. - Name your backend. The runtime hook changes completely —
useChatRuntimefor the Vercel AI SDK,useLangGraphRuntimefor LangGraph, and others for AG-UI, Google ADK or a custom stream. Get this wrong and nothing connects. - It's composable primitives (
Thread,Message,Composer,ActionBar), not one monolithic component. Ask for the specific pieces you want. - Generative UI is the underrated feature: render tool calls as real React components rather than JSON blobs.
- Also ships for React Native and the terminal (via Ink).
Free vs paid, clearly: the library is MIT and free forever. Assistant Cloud — managed thread history, telemetry, file storage — is the paid product: free to 200 monthly active users, then $50/month for 500 MAU plus $0.10 per additional user. You never have to touch it; bring your own backend and the library is complete on its own.
Where to actually start
Ten is a lot to open at once. Don't — install them in the order you actually hit the problems.
- shadcn/ui — first, always. Four others on this list install through it.
- Motion — one
whileHoveron your buttons and cards changes the whole feel in five minutes. - Kokonut UI or React Bits — real components beat described ones. Kokonut for layout, React Bits for motion.
- Tailark — when you need the marketing page around the app.
- Bklit UI — the moment a dashboard appears. Charts are where AI code looks cheapest.
- driver.js — before anyone else touches it. Onboarding is what separates a demo from a product.
- assistant-ui — only if you're adding chat. Then it saves you a week.
If you only do one thing: shadcn/ui plus Motion. That combination fixes more perceived-quality problems than the other eight put together.
The pattern worth taking away: AI is good at logic and bad at taste. Every one of these outsources the taste to someone who already made those decisions well. You're not asking the model to be a designer — you're handing it better parts.
Three things to check before you monetise
React Bits — Commons Clause. Build products with it freely; don't resell the components.
Tailark — the free tier is real, but the pages you saw in the showcase start at $249.
Manus — the free plan won't do the things it's famous for.
Method note: I read the licence files and pricing pages directly rather than trusting README summaries — which is how the React Bits Commons Clause, the Bklit Studio licence split and the Manus credit limits turned up. Licences and pricing change; verify before you commit to anything paid or commercial.
Want the next one first?
The Input Daily — a 5-minute AI brief every weekday. 3 stories that matter, 1 tool worth trying, 1 prompt to steal.
Free. Every morning. Unsubscribe in one click. Privacy Policy.
You're all set.
The Input Daily lands in your inbox tomorrow morning. While you're here — the rest of the guides are free too.
Browse all free guides →