Kodza

Kodza

AI 可获取的 UI 组件。纯 HTML、CSS 和 JavaScript：无需框架、无需构建步骤、无需依赖。

kodza.dev · 组件目录 · 文档 · 申请组件

只需提出需求

Kodza 也是一个 MCP 服务，地址为 https://kodza.dev/api/mcp（Streamable HTTP）。免费，无需账户或 API 密钥。只需将它接入你的 AI 一次：

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

然后用自己的话提出需求：“在我的主视觉区域添加 Kodza 填充按钮。”它会获取此仓库中的准确文件，而不是凭猜测生成，并告诉你应该放在哪里。

在编辑器中使用

Codex

codex mcp add kodza --url https://kodza.dev/api/mcp

VS Code（GitHub Copilot）

code --add-mcp '{"name":"kodza","type":"http","url":"https://kodza.dev/api/mcp"}'

Cursor（~/.cursor/mcp.json）

{ "mcpServers": { "kodza": { "url": "https://kodza.dev/api/mcp" } } }

更希望在自己的机器上运行？npx -y kodza-mcp 可在本地运行同一 MCP 服务（kodza-mcp）。其他内容请参阅文档。

功能说明

工具	功能说明
search_components	根据组件的功能或外观搜索组件（“按钮填充悬停”“粘性页眉”“日期选择器”），或列出某个类别。
get_component	获取单个组件：其准确的 HTML、CSS 和 JS（或下载这些文件的命令）、设置（--kz-… 变量、修饰类、data- 属性）、各项设置的作用、深色模式下的值，以及如何将其接入纯 HTML 页面、WordPress、Shopify、React 或 Claude artifact。

此服务为只读：它只提供代码，不会改动你的项目。它会统计哪些组件被获取以及由哪个助手获取；你输入的内容不会被保存。

或直接获取文件

components/ 中的每个文件夹对应一个组件：HTML、CSS，以及需要时用到的 JS。链接 CSS、粘贴 HTML、加载 JS。它适用于纯 HTML 页面、WordPress、Shopify 或 React，因为它本质上就是代码。

这些组件是按明天就要上线的标准编写的。因为很可能真的会。

• CSS 只会影响 kodza- 类。生成的主题防护规则可防止你的网站 CSS 影响组件。
• 设置通过 CSS 变量（--kz-…）实现，变体则通过修饰类或 data- 属性实现。
• 一个页面上可以按需使用任意多个实例，所有实例共用一份 JS。
• 每个组件都支持键盘操作、可见焦点和 prefers-reduced-motion。
• 内容后续加载时可使用 kodza:init 和 kodza:destroy：适用于 AJAX 主题、Swup、React。

组件

目前已有 115 个，还在持续增加。点击名称可打开对应文件夹，每个演示都可在 kodza.dev 上运行。

按钮

组件	功能
3D 按钮	带有真实厚度的按钮：按压时，按钮表面会陷入底座；即使快速轻点，也会完全按到底，然后轻轻弹回。可做成键帽、粗野主义风格的厚板，或按下后保持状态的切换按钮。	演示
箭头按钮	悬停时，箭头会自行绘出，将标签轻轻推开；离开时，箭头会继续穿过按钮。	演示
拨打电话按钮	圆形电话图标展开后会变成完整的“预约通话”按钮，并带有轻微的振铃效果。在触摸屏上会保持展开状态。纯 CSS 实现。	演示
复制到剪贴板	为命令或给 AI 的句子配上复制按钮：图标会变成一个自行绘出的勾号，标签则滚动变为“已复制”。	演示
填充按钮	填充效果从光标进入的确切位置开始，并朝光标离开的方向消退；标签会滚动，箭头则循环移动。	演示
按住以确认	适用于无法撤销的操作：按住按钮，墨迹胶囊就会填满按钮；过早松开，它就会退回；坚持到最后，按钮便会打勾。支持鼠标、手指、空格键或 Enter 键。	演示
加载按钮	按钮会展示操作进度：文字从“部署”滚动变为“正在部署”，同时圆环出现；随后圆环闭合并打勾，显示“已部署”。按钮宽度始终不变。	演示
磁吸按钮	指针靠近时，按钮会朝它倾斜，文字的移动幅度稍大一些，然后轻柔地回到原位。点击区域也会随之移动。在触摸屏上表现平稳。	演示
形变按钮	悬停时，胶囊形按钮会收紧成圆形，同时标签让位给箭头。可点击区域始终不动。纯 CSS 实现。	演示
滚动按钮	悬停时，按钮标签会逐字向上滚动；离开时也会以相同方式继续滚动。使用纯 CSS 和几行 JS 实现。	演示
分享按钮	按下“分享”后，选项会从按钮后方滑出；最后一个选项将胶囊形按钮推开，同时箭头飞出，交叉符号自行绘出。复制链接后会变成勾号；X 和 LinkedIn 会在小窗口中打开。	演示
分割按钮	左侧是主要操作，其他选项藏在箭头后面。一道色调会在按钮两半之间滑动；选择另一种操作方式时，标签会滚动切换，按钮则平滑调整到新的宽度。	演示

链接

组件	功能
箭头链接	指引方向的链接：静止时显示为尖括号，悬停时，箭杆逐渐显现，箭头继续前行，› 变为 →。另有一个指向相反方向的返回变体。纯 CSS。	演示
外部链接	离开当前网站的链接会明确标示：一条墨线从文字下方延伸至 ↗，随后图标弹向角落，箭杆也随之拉长。纯 CSS。	演示
高亮链接	高亮笔划扫过链接文字的背景，或者实色块翻转文字颜色，让色块边缘下方的文字变为白色。	演示
链接预览	指向链接时，其目标内容卡片会在链接上方展开。每个段落显示一张卡片：卡片在链接之间滑动，图片渐变切换，文字滚动切换。	演示
扰动链接	悬停在链接上时，文字会先打乱，再从左向右恢复：可以是逐渐解码的符号、重新排列的字母，也可以是翻牌效果。	演示
下划线链接	下划线从左侧滑入、从右侧离开，或者反过来。它会像笔迹一样，沿着文字跨行延伸。	演示

表单

组件	功能
复选框	真实的复选框，重新绘制：墨迹从中心扩散，勾号自行绘出。全选框在只选中部分选项时会显示短横线。也适用于卡片。	演示
颜色选择器	带有完整面板的真实颜色输入框：饱和度方块、色相滑块、十六进制字段、预设、吸管和复制功能。选中预设后，控件会滑动到对应位置。	演示
日期选择器	带日历的真实日期输入框：月份会朝切换方向滑动，月份名称会滚动，墨迹标记会移动到你选择的日期。支持完整键盘操作。	演示
文件上传	覆盖在真实文件输入框上的拖放区域：文件悬停时边框会移动，每个文件都有带缩略图和滚动进度条的行，超大文件会显示提示。	演示
多选	将真实的多选框呈现为标签字段：输入内容进行筛选，选择后添加标签。移除的标签会缩小消失，其他标签则滑动到空出的位置。	演示
OTP 输入框	一次性验证码字段：一个真实输入框绘制成多个单元格。数字会升起就位，粘贴和短信自动填充都能正常使用，输入完成后单元格会变成墨迹。	演示
密码	带有眼睛图标的密码字段，点击后图标会被划掉；强度越高，强度计填充越多；判定文字会滚动显示，规则会自动打勾。	演示
单选框	一组真实的单选按钮共用一个圆点：选择其他选项时，圆点会移动过去，途中拉伸得像一滴墨水。	演示
范围滑块	绘制在轨道上的真实范围输入框：数值气泡会从滑块手柄弹出，填充经过时刻度会变暗，两个手柄会互相推动而不会交叉。	演示
搜索自动补全	基于真实 datalist 的搜索字段：建议项会在下方展开并分组，你输入的字母会带下划线。按“/”即可跳转，使用方向键和 Enter 操作。	演示
选择框	经过美化的真实选择框：列表从字段中展开，高亮项在选项间滑动，选中的值会滚动到位。也提供适用于工具栏的胶囊样式。	演示
星级评分	绘制成星星的真实单选按钮：指针悬停时，星星会依次亮起；评分文字会从“还行”滚动到“已交付”，静态分数也会在视图中填充显示。	演示
开关	重新绘制为开关的真实复选框：墨迹会在滑块后方填满轨道，按下时滑块会拉伸并弹回原位。也提供标签和工具栏样式。	演示
文本字段	标签会在输入时向上折叠的文本字段。按钮可清空内容，内容有效时会自动绘出勾号，提示文字会让位给错误信息。	演示
文本域	标签会向上折叠、高度会平滑调整以适应文本的文本域；接近字符数上限时，边框环会逐渐填充，并在最后五分之一显示剩余字符数。	演示

导航

组件	功能
面包屑导航	当一行放不下时，面包屑导航会将中间部分折叠到一个“…”按钮后，点击后可逐项展开。	演示
命令面板	在真正的对话框中打开 ⌘K 面板：输入时筛选结果，为匹配字母添加下划线，并让高亮在它们之间滑动。	演示
上下文菜单	右键菜单从点击的确切位置展开，始终保持在屏幕内，并支持通过 Shift + F10 使用键盘操作。	演示
下拉菜单	菜单从按钮展开，高亮在各个条目之间滑动。可执行操作或选择，并支持方向键和首字母导航。	演示
悬停导航	一组胶囊形链接，高亮会随指针滑动，并回到当前页面的位置。墨色版本会在文字边缘处将文字变为白色。	演示
分页	七个固定位置，不会跳动：墨色胶囊滑向对应页面，变化的数字滚动到位。还提供紧凑版本。	演示
滚动页眉	悬浮的玻璃质感胶囊会避开页面顶部，随滚动呈现磨砂效果，阅读时移到一旁，并在深色区域上变为深色玻璃质感。	演示
侧边栏菜单	侧边面板滑入页面上方，随后大号链接逐个升起。这是真正的对话框：焦点保持在其中，按 Escape 键即可退出。不使用 GSAP。	演示
交错横向菜单	按钮让链接逐个出现，从最近的开始，再按相反顺序收回。标签滚动变为“关闭”。不使用 GSAP。	演示
步骤条	分为四步的流程：线条逐渐填满，每完成一步都会绘制一个勾号，内容则从下一步的方向滑入。	演示
目录	根据标题生成摘要卡片：墨色标记跟随正在阅读的章节，圆环逐渐填满，剩余时间倒计时。手机上则显示为横条。	演示
标签页	标签页带有胶囊形标记（或线条），滑向所选标签；面板从侧边滑入，并支持完整的键盘操作模式。	演示
翻板菜单	按下“菜单”，页面便会像活板门一样绕铰链向下翻转，露出下方的菜单：链接随着边缘经过逐个升起，图像跟随指针移动。关闭时会倒放动画。不使用 GSAP。	演示

覆盖层

组件	功能
Cookie 同意	一张诚恳的 Cookie 卡片：「拒绝」和「接受」同样醒目；「选择」会展开类别；选择结果会被保存，还可通过链接重新打开卡片。	演示
对话框	一个从打开它的按钮处展开、并能回到按钮中的真实对话框。警告版本会要求你先输入名称，然后才删除内容。	演示
弹出框	一个从触发器处展开、箭头指回触发器的面板；空间不足时会翻转。可点击打开，也可悬停打开，并作为悬停卡片停留在原处。	演示
产品导览	引导式导览：页面变暗，聚光灯逐个突出元素并滑向下一个元素，途中调整形状，同时有一张卡片跟随。也支持键盘操作。	演示
抽屉面板	一个从右侧滑入的面板；在手机上，它会从底部升起，成为可拖动的面板，有半屏和全屏停靠位置，也可快速一划关闭。	演示
Toast 通知	通知像一叠牌一样堆叠，并在悬停时展开。细线显示剩余时间，一划即可关闭；加载中的 Toast 会转为成功状态。	演示
工具提示	每组只有一个气泡：首次悬停时等待，之后在各个按钮之间滑动，并根据文字调整大小，内部还会显示键盘快捷键。	演示

反馈与加载

组件	功能
警示框	页面中的消息：提示、成功、警告或错误，通过图标而非颜色区分。图标会自行绘制，关闭的警示框会折叠消失，错误警示框则会展开日志。	演示
空状态	列表为空时显示的内容：一幅会在你靠近时回应的 CSS 绘图、一句自然亲切的话，以及下一步操作。还提供适用于搜索无结果的另一种样式。	演示
进度指示器	由 data-value 驱动的进度条或环形指示器：百分比像里程表一样滚动；进度未知时，一段条带会滑动；达到 100 时，会自行绘制一个勾号。	演示
骨架屏	根据内容本身绘制骨架，并以一道光泽扫过所有骨架。加载完成时，柔和的边缘向下扫过，将每根骨架变成对应的内容行；较晚加载的图片会保留骨架。	演示
加载指示器	根据文本大小调整尺寸的加载状态：呼吸般起伏的圆环、十二根条形、三个点，或一个终端盲文单元。添加 .is-done 后，会自行绘制勾号，同时文字滚动切换。	演示
顶部加载条	页面加载时显示在屏幕顶部的细线：以逐渐缩短的步幅缓慢前进，随后跑到末端并向右滑出。点击网站链接时会自动启动。	演示

数据展示

组件	功能说明
手风琴	点击问题即可展开答案，基于原生的 ：面板按实际高度展开，答案向上浮现，加号变成减号。也可以设置为一次只展开一项。	演示
头像	支持四种尺寸，可显示姓名首字母或图片；状态通过形状表示（实心、圆环、条形、淡化）；靠近时头像组会展开，指向哪个头像，就会显示其名称。	演示
徽章	小型标签：柔和、实心、动态、单色，以及滚动计数。移除标签时，它会缩小消失，旁边的标签则滑到新位置，也会跨行移动。	演示
代码块	便于阅读和复制的代码：文件名、行号、高亮行，以及深浅两种模式下的单色语法高亮。点击复制后会显示“已复制”；终端只会复制其中的命令。	演示
倒计时	实时倒计时至指定日期：每个变化的数字都会从窗口中滚出，下一个数字随即落入；倒计时归零时，数字会让出位置，显示你的消息。支持大尺寸或行内显示。	演示
计数器	数字进入视野时，像里程表一样滚动到位：右侧数字转动更多，最后停下；归零时会完整转动一圈。不依赖脚本也能读取。	演示
筛选过渡效果	可筛选的网格：墨色胶囊滑至所选筛选项，离开的卡片后退，其他卡片滑到新位置，新卡片则依次出现。	演示
按键	带有轻微立体感的键盘按键，可单独显示、组成组合键或列出快捷键。实际按下按键时，对应按键会下沉；按下整个组合键时，其所在行会亮起。	演示
分隔线	进入视野时从中间向两端绘制的线条：普通分隔线、带标签或分区标题的分隔线、环绕 CSS 圆点的分隔线，以及项目之间的垂直分隔线。	演示
显示更多	默认收起长内容，按需展开：文本会以柔和渐隐的方式截断，或由列表提示剩余项目数。内容按实际高度展开，按钮文字也会滚动切换。	演示
统计卡片	关键数字、变化幅度和背后的曲线：数字会滚动，曲线会自行绘制，指引线会跟随指针并显示当天的数值。趋势通过箭头表示。	演示
表格	点击列标题即可对数据表排序：行会滑至新位置，已排序的列会显示柔和色带，表头保持在顶部，滚动时边缘会渐隐。	演示
时间线	沿着轨道排列的带日期步骤，轨道会随滚动逐渐填充：墨色到达某个圆点时，该圆点便会填满；步骤首次进入视野时会向上浮现；最后到达的步骤会保持标记状态。	演示

卡片

组件	功能说明
边框描绘卡片	悬停时，一条线会从指针进入的确切位置开始描绘卡片边框。可以只画一个方向、两个方向，或只画圆角。	演示
卡片	一张编辑风格的卡片，整个卡片都可通过同一个链接点击：图片向前微移，边框变得更明显，箭头滑入。	演示
可展开卡片	一排卡片中始终有一张处于展开状态：点击另一张，它就会变宽，其他卡片则向后退。小屏幕上会改为堆叠显示。	演示
定价方案	在一个区块中展示三种方案，主推方案以墨色突出并向上抬起。切换到按年计费时，只有发生变化的数字会滚动到新数值。	演示
粘性卡片	滚动时卡片会层层堆叠，每张被遮住的卡片都会向后退并变暗。仅使用普通的 position: sticky 和几行 JS。不用 GSAP。	演示

媒体

组件	功能说明
前后对比	在同一画框中展示两张图片，中间有一个滑块：拖动滑块、点击让它滑动，或使用方向键。首次显示时会轻轻移动一次；标签会移到一旁。	演示
轮播图	原生滚动吸附轮播图，即使脚本尚未加载也能正常使用。加载后提供翻页按钮、滚动计数、进度条或圆点，以及带惯性滑动的鼠标拖动。绝不会抢夺滚轮控制权。	演示
全屏滑块	全屏幻灯片通过幕布效果切换，标题从遮罩中升起。支持水平或垂直切换、按钮、方向键和滑动手势。不用 GSAP。	演示
图片画廊	编辑风格的图片网格：每张图片都会以连贯的动效展开为全屏查看器，图片之间通过幕布效果切换，并支持键盘和滑动手势。	演示
灯箱	将文章包裹起来后，文章中的每张图片都可放大查看：图片从原位扩展至整个屏幕，可通过方向键或滑动切换到下一张，按 Escape 后则返回原位。	演示
放大镜头	查看指针下方的细节：圆形镜头会稍稍滞后地跟随指针，并显示来自更清晰文件的细节；也可以让图片本身朝指针方向放大。	演示

文字效果

组件	功能说明
标注文字	段落出现时，手绘标记会在关键词上自行绘制：下划线、删除线、圆圈或荧光笔标记。	演示
眼睛字形	任何带孔的字母都会变成一只眼睛：瞳孔跟随指针，睫毛从上方长出，眨眼时眼睑会真实闭合。戳一下，它就会眨眼示意。	演示
跑马灯	无缝循环滚动的文字，永不跳动；指针悬停时会平滑停下，并在两端淡出。可双向滚动。	演示
滚动文字显现	段落滚过时，文字会逐个亮起，返回时又会变暗。可淡入、模糊或上升。无需 GSAP。	演示
闪光文字	一道光带扫过文字，就像忙碌的界面在说“仍在处理中”。可循环播放、悬停触发，或跟随指针。	演示
文字显现	文字进入屏幕时自行写出：线条从遮罩中升起，单词逐渐清晰，或字母逐个显现。只播放一次。	演示
打字机	以自然节奏输入短语，并带有真实的光标。只重输发生变化的部分，或像编辑器那样先选中内容再覆盖输入。	演示
单词轮换	句子中的一个单词不断变化：下一个单词的字母升起，旧单词随之离开；或让单词翻转。空格会随单词移动，句子也会跟着调整。	演示

图像效果

组件	功能说明
悬停列表预览	指向某一行时，图片会显示在一个跟随指针的画框中；沿列表向下移动时，画框会擦除并切换到下一张图片。还提供面板模式、键盘操作和触屏缩略图。	演示
图像悬停	在图像自己的画框内，以四种方式响应指针：缓慢缩放、逐渐清晰、边角变圆，或随光标漂移。	演示
图像显现	图像进入视野时逐渐显现：帷幕从下方或侧面拉开，或像光圈一样打开，同时图像从轻微缩放中稳定下来。	演示

背景与纹理

组件	功能说明
颗粒效果	使用一个内联 SVG 噪点生成胶片颗粒，每秒跳动十次，仿佛胶卷的下一帧：颗粒位于区块文字下方、照片上方。颗粒会采用你提供的两种颜色。无需下载。	演示
交互式圆点	在细密圆点背景上呈现主视觉区域。指针会像手伸进沙子一样拨开圆点，它们随后弹回；点击则会激起一道波纹。使用单个 canvas，无人注视时会休眠。	演示
图案背景	主视觉区域由自身图案构成边框：网格与内容对齐，四条细线沿边缘延伸，角落带有裁切标记，其余部分逐渐淡出。可选网格、圆点、十字或斜线。无需图片。	演示

滚动

组件	功能
返回顶部	向下滚动一屏后，会出现一个圆形按钮；随着阅读，环形进度条逐渐填满。悬停时标签展开，点击后箭头飞出。	演示
水平滚动	向下滚动时，某个区块会固定在原处，卡片则横向滑动。图片在画框中缓缓移动，计数器滚动。支持触屏滑动。	演示
无限滚动	与帖子等大的占位符会闪烁出现，随后无缝替换为帖子。自动加载两次，然后显示按钮，确保页脚仍可访问。	演示
滚动显现	区块随滚动进入视野时依次登场：淡入、文字从遮罩中逐行升起，或图片通过 clip-path 揭晓。同时到达的区块会轮流登场。	演示
粘性滚动显现	区块固定在原处，醒目的文字随滚动依次出现：每一行都通过自己的遮罩离场，下一行随之升起。	演示
粘性步骤	图片固定在一侧，步骤在另一侧滚动：每一步都会像帘幕一样，将自己的图片绘制在上一张图片上，计数器也随之滚动。	演示

光标

组件	功能
自定义光标	在指定区域内，指针会变成带有柔和延迟效果的圆点，并出现一个胶囊标签，说明点击各个项目会执行什么操作。无需 GSAP。	演示

预加载器与过渡效果

组件	功能
首页揭晓	预加载器会统计首页主视觉区域实际所需的文件，同时图片逐张升至堆叠处。加载至 100 时，主视觉图片最后出现并放大到位，随后标题升起。点击或按任意键即可跳过。无需 GSAP。	演示
页面抬升	在两个真实页面之间切换时，离开的页面会后退，下一页则沿圆角边缘升起并覆盖其上。页眉保持不变，返回时动画反向播放。支持 Chrome、Edge、Safari；目前 Firefox 会直接加载。无需 GSAP。	演示

Hero

组件	功能
Hero Centered	居中布局的 Hero，包含公告胶囊、标题（各行从遮罩中升起）、一句话介绍和两个胶囊按钮。仅使用 CSS，加载时播放入场动画。	演示
Hero Cover	封面式 Hero：全宽图片覆以单色滤镜，标题位于左下角。图片从顶部展开并停稳，标题各行随之升起。仅使用 CSS。	演示
Hero Exit	居中的两行大标题。滚动时场景保持不动，两行文字分开，图片在它们之间展开并收拢成卡片，然后下一部分滑过卡片。	演示
Hero Expand	大标题中两个词之间嵌入一张小图片。滚动时场景固定，图片展开至全屏并将文字推向两侧，随后说明文字和按钮升起。向上滚动即可倒放。	演示
Hero Focus	标题清晰地叠在模糊图片上。滚动时焦点移至图片，标题变模糊并消失，读数显示距离，随后注释指出细节。动画可倒放。	演示
Hero Screen	产品截图以透视角度向后倾斜，标题和按钮居中叠加其上。滚动时屏幕立起面向你并逐渐放大，同时标题向后退。	演示
Hero Showcase	标题叠加在一面项目缩略图墙上，缩略图如同摆在桌上的照片。滚动时各行朝相反方向滑动，随着墙面立起而排列整齐，每张缩略图都是链接。	演示
Hero Split	左侧文字、右侧 4:5 图片的分栏 Hero：标题各行从遮罩中升起，图片则从顶部向下展开。	演示
Hero Statement	超大字号的工作室宣言，叠加在一行单色文字上，展示城市、实时当地时间和预约时段。加载时，各段文字依次从遮罩中升起。	演示

关于此代码库

此代码库与 kodza.dev 同步：组件在该站点发布或更改后，也会更新到这里。所有文件均由程序生成，不会手动编辑，因此不会合并拉取请求。

发现 Bug 或缺少某个组件？请前往 kodza-dev/requests：Bug 请提交 issue，功能请求请参与讨论并投票。

许可证

Kodza License。可在任何项目中使用这些组件，包括个人项目、商业项目和客户项目，无需注明出处。请勿转售或再分发，也不要通过其他目录、注册表或 MCP 服务提供这些组件。

随处使用，但请勿转售。