KBAISE/ for lovable
Head to head

Magic UI vs Tremor

Magic UI and Tremor solve the same job (UI component libraries), so this is a pick-one decision. Magic UI is our default here: Best stack fit of the animated libraries. Animated beams for a table-of-contents, number tickers for circulation stats, shimmer on a subscribe CTA, marquee for a sponsor row — polish without changing anything structural or blowing the image budget. Watch out: There are two Tremors. The legacy npm package @tremor/react still has an unresolved Tailwind v4 bug (renders completely unstyled). Use the copy-paste components from the site; do not npm install the package.

Quick read
  • Editor's pick: Magic UI.
  • No logged gotchas: Magic UI.
FieldMagic UImagicui.design Not yet sweptTremortremor.so Not yet swept
What it is150+ animated components built with React, TypeScript, Tailwind and Motion, explicitly designed as the companion to shadcn/ui. Installs with the exact same CLI you already use. No Three.js dependency; components stay under ~5 kB tree-shaken.35+ chart and dashboard components built on Recharts and Radix, copy-paste, requiring React 18.2+ and Tailwind v4. Tremor Labs was acquired by Vercel in Jan 2025 and the previously-paid Blocks were released free under MIT.
CategoryUI component librariesUI component libraries
Cost tierfreefree
PricingFree · MIT · Pro ~$199 onceFree · MIT (Blocks now free)
Why builders pick itBest stack fit of the animated libraries. Animated beams for a table-of-contents, number tickers for circulation stats, shimmer on a subscribe CTA, marquee for a sponsor row — polish without changing anything structural or blowing the image budget.If your project has an internal editorial dashboard — traffic per article, submission pipeline, subscriber growth over Supabase queries — this is the strongest free option and much better than hand-rolling Recharts.
Watch out fornot loggedThere are two Tremors. The legacy npm package @tremor/react still has an unresolved Tailwind v4 bug (renders completely unstyled). Use the copy-paste components from the site; do not npm install the package.
How to wire it uppnpm dlx shadcn@latest add @magicui/globenot logged
Editor's pickYesNo

Agent endpoint: GET /api/public/compare?slugs=magic-ui,tremor