Kodza
Browse · 108

Just ask. It moves.

Ask your AI for a component, get plain HTML, CSS and JS in your project. No framework, no build step.

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

Also in Codex, Cursor and VS CodeBrowse 108 components

Live demo

Live. Not a video.

Real components running in the page. Pick one, hover it, click it, then ask your AI for it, or grab the code underneath.

View the code Ask your AI
Component Fullscreen

With your AI

Just ask.

Say it to your AI. It gets the exact code below, not its best guess, and knows where it goes.

Add the Kodza component to my page.

Not plugged in yet?
claude mcp add -t http kodza https://kodza.dev/api/mcp
Also in Codex, Cursor and VS Code.

What you see in the code panel is exactly what your AI gets. No hidden wrapper, no build step.

How it works

Plug. Ask. Ship.

One line to set up. Then thirty seconds from "I need a dropdown" to a dropdown on your page.

  1. 01
    add kodza
    • Claude Code · MCP
    • Codex · MCP
    • Cursor · MCP

    Plug it in.

    One line in Claude Code, Codex, Cursor or VS Code. Free, no account, no API key.

  2. 02
    › a fill button, please
    AskOn it

    Ask for it.

    In your own words. Your AI fetches the real component and where it goes. Not a guess.

  3. 03
    0 dependencies added

    Ship it.

    Plain HTML, CSS and JS land in React, Vue, WordPress or a bare HTML page. It just works, because it's just code.

The library

108 components, zero dependencies.

Take the one you need, leave the rest. No kit to install, no theme to fight with.

Read the docs
01

Link Underline

The underline that slides in, and out the other way.
Fill Left
02

Button Fill

Four directions, one class to switch.
Dark mode
03

Switch Toggle

A real checkbox underneath. Forms stay happy.
04

Skeleton Loader

Shimmer while the data takes its time.
05

Typewriter

Words that write themselves, then change their mind.
0pixels moved
06

Counter

Numbers that count up when they enter the screen.
SHUFFLE
07

Text Shuffle

Letters scramble on hover, then land in place.
Uploading0%
08

Progress Bar

Smooth, honest, and it actually reaches 100.
09

Image Hover

Blurred at rest, crisp on hover. Plus three other moods.

Browse the library.

108 components · 11 categories

Open the A–Z list

Why Kodza

One line to plug in.
Nothing to fix.

No framework. Just code.

Plain HTML, CSS and a pinch of JavaScript, fetched by your AI. Drop it into any stack, including no stack at all.

$ npm install @some/ui-kit framer-motion clsx
$ npx some-ui init --yes
$ claude mcp add -t http kodza https://kodza.dev/api/mcp
0 dependencies 0 build steps 1 line

Production-ready.

Written like it's going live tomorrow. Because it probably is.

  • Mobile-friendly
  • Clean, readable code
  • Edge cases handled
  • Easy to restyle

Speaks WordPress.

Your AI gets the code and where it goes: theme, Additional CSS, blocks.

kodza-mcp
toolsearch_components
toolget_component
forhtml · wordpress · react

Fullscreen preview.

See it at full size before it ever touches your codebase.

Yours to tweak.

Colors, timing, easing: a few lines of CSS, no config file in sight.

duration0.4s
easingease
radius999px

FAQ

Before you ask.

The short answers. The long ones are in the code.

Browse components

01Do I need React, Vue or Tailwind?

No. Every component is plain HTML, CSS and JavaScript. It works in any stack, including no stack at all.

02How do I add a component to my project?

Plug Kodza into your AI once, with claude mcp add -t http kodza https://kodza.dev/api/mcp or the same address in Codex, Cursor or VS Code. Then just ask: "add a Kodza fill button to my hero". Rather do it by hand? The HTML, CSS and JS are still on every component page.

03Is everything really free?

Yes. Every component, its full source code and the MCP server. No account, no API key, no paywall.

04Which AI tools does it work with?

Anything that speaks MCP: Claude Code, Codex, Cursor, VS Code, Windsurf and friends. No AI at all? Copy and paste still works, like it's 2019.

05No GSAP? Really?

Really. Zero dependencies, on purpose. Pinning, staggers, inertia: CSS, the Web Animations API and a few lines of plain JS do it just as smooth. Nothing extra to load, nothing to update.

06Does it work on mobile?

Yes. Components are built to behave on touch screens and small viewports, not just on a 27-inch monitor.

07Can I change the colors and timing?

That's the point. Readable class names and CSS you can follow in thirty seconds. Change a color, a duration or an easing in a couple of lines.

Just ask. Done.

Animations that actually ship.

Plug it into your AI Browse 108 components