Kodza vs Magic UI

A Magic UI alternative without React or Tailwind.

Magic UI is a free, open-source library of animated React components for landing pages, and a good one. Kodza builds the same kind of effects in plain HTML, CSS and JS: no React, no Tailwind, no package, at home in any page. Here's the honest comparison.

Their side checked on magicui.design, October 27, 2026

The short version

Pick the one that fits your stack.

Both ship landing page effects: marquees, patterns, text that types or shines. The difference is what they ask of your project.

Pick Magic UI if

your app runs on React and Tailwind, with shadcn/ui already in it;
you're building a SaaS landing page: bento grid, globe, iPhone and Safari mockups, tweet cards, all ready;
you'd rather buy finished sections once: 50+ sections and 9+ templates for $199;
you want the free part open source, under MIT.

Pick Kodza if

your site isn't a React app: WordPress, plain HTML, a CMS theme;
you want zero packages: no Tailwind, no Motion, no shadcn setup;
you want all of it free, with nothing behind a paid plan.

Side by side

The facts, no spin.

What each one asks of your project and your wallet. Their column comes from their own site.

Feature	Magic UI	Kodza
Built with	React, TypeScript, Tailwind, Motion	HTML, CSS, plain JS
Runs in	React apps: Next.js, Vite	Any page: HTML, WordPress, React
Adding one	shadcn CLI, or by hand	Copy and paste, or ask your AI
Packages to install	For 38 of 78: Motion, cobe, confetti…	None
Free	150+ components and effects	All 142 components
Paid plans	$199 once, or $49 a template	None
On paid plans	50+ sections, 9+ templates	Nothing held back
License	MIT; Pro: use, don't resell	Kodza License: use, don't resell
AI tools	Own MCP server via npx, llms.txt	Hosted MCP server, no account, no key

Magic UI figures from their Pro page (opens in a new tab), docs and registry, read on October 27, 2026. Prices change: theirs is the page that counts.

Install

Adding one, both ways.

Same goal, an animated component on your page. Different first step.

Magic UI

Set up shadcn/ui in a React app on Tailwind: run their init.
Add the component with their registry:

npx shadcn@latest add @magicui/globe

The code lands in your project, with the packages it needs: here, cobe and motion.

Kodza

Open a component page, any stack.
Copy the HTML, CSS and JS. Paste them where they go.

$ npm install nothing

No build step, no package. Or let your AI do it: the command is at the bottom of this page.

Try one

Six to start with.

The landing page classics: a pattern, a marquee, typed words, hand-drawn marks, figures that roll in, a border that traces itself. In plain code, free like the rest.

Backgrounds & textures Light · 7.8 KB

Pattern Background

A hero framed by its own pattern: the grid lines up on your content, four hairlines run along its edges with crop marks on the corners, the rest fades out. Grid, dots, crosses or diagonals. No images.

View code

Text effects Standard · 3.3 KB

Marquee

An endless ticker that never jumps, eases to a stop under the pointer and fades at both edges. Runs either way.

View code

Text effects Standard · 4.0 KB

Typewriter

Phrases typed with a human rhythm and an honest caret. Retypes only what changes, or selects it like an editor before typing over it.

View code

Text effects Standard · 4.3 KB

Annotated Text

Hand-drawn marks that draw themselves on key words when the paragraph shows up: underline, strike, circle or marker.

View code

Data display Light · 3.5 KB

Counter

A figure that rolls into place like an odometer when it comes into view: digits on the right spin more and land last, a zero takes a full turn. Readable without the script.

View code

Cards Standard · 5.2 KB

Border Trace Card

On hover a single line draws the card border from the exact point where the pointer came in. One way, both ways, or just the corners.

View code

Browse all 142 components

FAQ

Before you switch.

The questions people ask when they compare the two.

01Is Kodza a free alternative to Magic UI?

Yes, and Magic UI is free too: 150+ components and effects, open source under MIT. Its Pro sections and templates cost $199, paid once. Every Kodza component is free, with no account and nothing to unlock.

02Does Kodza need Tailwind or Motion?

No. Kodza has zero dependencies: CSS, the Web Animations API and plain JS, and each component brings its own CSS, scoped to its own class and tuned with --kz-* variables. Magic UI runs on Tailwind CSS, and 38 of the 78 components in its registry list a package, Motion in 30.

03Can I use Kodza in a React or Next.js app?

Yes. The plain JavaScript starts and stops cleanly, React StrictMode included, and most components also come as a React .tsx file on their page.

04Does Kodza work in WordPress?

Yes. Paste the HTML in a block, the CSS and JS in your theme. Each component is tested in real WordPress themes before it ships. Magic UI says it plainly in its own FAQ: it doesn't support WordPress, it's built for React frameworks.

05Are the licenses different?

A little. Magic UI's free components are MIT: do what you like with them, reselling included. Magic UI Pro allows commercial projects, but not reselling the code. The Kodza License: use it anywhere, don't resell it.

06Do both work with AI tools?

Yes, both run their own MCP server. Magic UI's installs with npx in Cursor, Windsurf, Claude or Cline, and its docs come as an llms.txt. Kodza's is hosted at https://kodza.dev/api/mcp: nothing to install, free, with no account and no key.

07Can I use both on the same site?

Sure. Kodza's CSS stays inside its own component, so a Kodza menu can sit next to a Magic UI globe without either one noticing.

Just ask.

Copy, paste, and go home early.

claude mcp add -t http kodza https://kodza.dev/api/mcp

Also in Codex, Cursor and VS CodeBrowse 142 components