kodza.dev

Kodza is a free library of premium UI components and effects in plain HTML, CSS and vanilla JavaScript (no framework, no build step), made to be pasted into any site: a plain HTML page, WordPress, Shopify, or a React app. Use it when the user wants a polished UI element or effect (buttons, links, text effects, sliders and galleries, cards, navigation, scroll effects, preloaders and page transitions, forms, overlays, feedback, data display) without adding a framework: search_components to find one, then get_component for its exact code. Rules for the code you get: if you can run shell commands, download the CSS and JS files with the commands of the component's Files section (byte for byte what the Kodza site copies) instead of retyping them, and call get_component with inline: false to leave them out of the answer; only the HTML is yours to adapt and paste. Without a shell, paste the code as it is (HTML, CSS, JS), including the generated theme guard at the end of the CSS (the :not(#_) lines keep the site's own CSS from restyling buttons and fields); restyle through its --kz-* CSS variables, modifier classes and data- attributes rather than by editing its CSS; one copy of the JS per page serves every instance; for content inserted after page load, dispatch kodza:init on document with { detail: { root } } (and kodza:destroy before removing it). Components take the page's font; the Kodza look is Geist (Google Fonts). Each component comes with its dark-mode values (the "Dark mode" section): use them when the page has a dark theme. Building a Claude artifact (claude.ai)? Ask get_component with target "artifact": the artifact blocks images from other sites, among other limits.