Kodza
Browse · 108

About Kodza

Code you can keep, not fix.

Kodza is a free library of UI components in plain HTML, CSS and JS. No framework, no dependency, no paywall. Here's why, and how we keep it that way.

Kodza isn't showcase code. It's real-world code: plain HTML, CSS and a pinch of JavaScript, written like it's going live tomorrow. Free, all of it. No framework, no dependency, no lost weekend.

Kodza talks like a dev. Not a landing page.

House rules

Seven rules we don't bend.

Written for ourselves first. A component gets its page only once it keeps all seven.

  1. 01

    Free. All of it.

    Every component, every line of code, the MCP server. No Pro tier hiding behind a blur, no account, no API key.

  2. 02

    Zero dependencies. Ever.

    No GSAP, no Three.js, no scroll library. If an effect needs one, we write the forty lines instead.

  3. 03

    Pastes anywhere.

    CSS that stays in its own box, a guard that keeps your theme out of it, and a clean restart when Ajax swaps the page. WordPress, React or a bare HTML file.

  4. 04

    Motion with manners.

    No dry fades: the old leaves while the new arrives. Nothing jumps. Reduced motion is respected, every single time.

  5. 05

    Keyboard first.

    A real native input under every custom field, a focus you can see, and an accessibility audit on every component.

  6. 06

    Monochrome.

    Your brand brings the colour. We bring the timing.

  7. 07

    No padding.

    Never a colour variant to inflate the count. If nobody would use it on a real site, it doesn't ship.

Quality

Nothing ships unchecked.

Taste is the hard part, so a human does it. The rest is checked by machines, on every component, every time it changes.

  1. 01

    Built

    • Its own root class
    • CSS scoped to it
    • Settings as --kz-*
  2. 02

    Checked in Chrome

    • Keyboard and focus
    • Accessibility audit
    • 375 px, no overflow
    • Reduced motion
  3. 03

    Played for real

    • Opens, closes, scrolls
    • Inside a real page
    • Watched frame by frame
  4. 04

    Pasted into WordPress

    • Eight popular themes
    • Ajax page swaps
    • No style leaks
  5. 05

    Filmed

    • One subject, one loop
    • Ends where it starts
    • Light and dark

Then, and only then, your AI can fetch it.

The count

108 down. 906 to go.

The goal is a thousand, with a new one every day until we get there. Never a colour variant to pad the number.

108/ 1,000 9.4%
7

Signature

The showpiece: the whole page moves with it. One or two per family.

63

Standard

Rich, but it keeps to its own box. Most of the library.

24

Light

CSS only, or a few lines of JS. Usually the one that gets pasted.

Signatures make noise. Light ones get pasted. Same care for both.

House style

No stock. No lorem.

Every demo image is rendered by code: concrete, light and a little grain. Every line of demo copy is written by hand, by someone who has shipped on a Friday.

A tall concrete slab standing alone in the dark
display: blockZero dependencies
A row of square concrete pillars under a flat roof, in the dark
repeat(7, 1fr)Grid, 1968 edition
A round-topped opening in a dark concrete wall, under a spotlight
border-radius: 50%Concrete, but soft

Overheard in our demos

  • Works on my machine.
  • Boring ships. Clever gets rewritten on a Friday.
  • Push to production. On a Friday, if you must.
  • Copy. Paste. Ship.

Who

One dev. Zero meetings.

Kodza is an indie project by Florent (opens in a new tab), a full-stack dev who would rather ship than configure, and who builds websites that move for a living.

Why free? AI writes the basic snippets now. What's left is taste and reliability, and that's worth giving away. It also makes a pretty good showroom.

License
Use it anywhere. Don't resell it.
Made of
HTML, CSS, a pinch of JS
Dependencies
0
Components
108, and counting

Just ask.

Do less. Ship more.

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

Also in Codex, Cursor and VS CodeBrowse 108 components