codedvisuals

Name: codedvisuals
Author: pixelcave

github.com/pixelcave设计与 UI1107 次安装1 周前更新

代码仓库

关于 codedvisuals

codedvisuals 是面向 React 营销与落地页的装饰性视觉组件库，并配有指导选择、安装和使用组件的技能说明。组件以独立 TSX 文件提供，支持动画和设计令牌主题；使用目录内容需要许可证。

主要功能

01自包含的 React 视觉组件
02独立的 TSX 文件
03可选动画与展示修饰
04基于 shadcn/ui 设计令牌
05附带组件参考与布局示例

适用场景

01为落地页添加装饰插图
02展示产品功能或营销信息
03在 React 项目中安装和配置组件

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/pixelcave/skills --skill codedvisuals

安装后在 Claude Code 中输入/codedvisuals确认已加载。

包含的文件

除 SKILL.md 外，安装时一起下载的参考资料和脚本。

layout-patterns.md

manual-setup.md

visuals/activity/

feed.md

timeline.md

visuals/ai/

agent-flow.md

model-picker.md

neural-net.md

presence.md

prompt-box.md

retrieval.md

thinking.md

tools.md

voice.md

writer.md

visuals/api/

logs.md

rate-limit.md

request.md

webhook.md

visuals/automations/

workflow-builder.md

visuals/avatars/

grid.md

profile-card.md

stack.md

visuals/branding/

spotlight.md

visuals/browser/

loading.md

simple.md

tabs.md

visuals/calendar/

date-picker.md

event-list.md

month-view.md

visuals/charts/

bar.md

详细介绍

使用 CodedVisuals

CodedVisuals 是一个营销视觉素材库，由独立封装的 React 组件构成。每个视觉素材都是一个独立的 .tsx 文件，视觉素材之间没有共享依赖，使用 shadcn/ui 设计令牌进行样式设计，并通过 Motion 添加动画。它们是用于营销和落地页（主视觉区、便当盒网格、功能模块、产品说明）的装饰性插图，而不是交互式应用 UI。

CodedVisuals 是付费素材库。 下方目录中的素材通过需要许可证的私有注册表提供：codedvisuals.com/pricing。如果用户还没有许可证，请告知他们想要的视觉素材属于付费素材库，并链接到价格页面。除非用户提出要求，否则不要悄悄手工构建替代品。

这是入门指南，涵盖如何挑选视觉素材、将其添加到项目中并使用。每个视觉素材还附带一个参考文件，随此技能一同打包，路径为 visuals/{category}/{file}.md（例如 visuals/charts/line.md），其中包含该视觉素材的准确属性、默认内容和可直接复制的示例。确定要使用哪个视觉素材后，请阅读对应文件。

如何使用视觉素材

从本文件末尾的目录中挑选一个视觉素材。 每个条目都包含注册表名称、描述，以及下一步要打开的参考文件。
打开该视觉素材的参考文件（visuals/{category}/{file}.md），查看其属性、默认值和示例。
确认项目中已安装该视觉素材（见下一节）。此技能不受已安装内容的限制，因此你挑选的视觉素材可能尚未添加到项目中。
在已设定尺寸的容器中导入并使用它（见“在页面中使用”）。

如果项目中尚未安装视觉素材，请先安装

项目可能包含此技能，但并未安装所有视觉素材。使用某个视觉素材前，请检查项目的源代码根目录下是否已有对应文件：

components/codedvisuals/{category}/{file}.tsx

不同项目的根目录可能不同（例如 Vite 应用中的 src/，或 Laravel 应用中的 resources/js/）。如果文件已存在，直接导入即可。如果不存在，可通过以下两种方式之一添加。

两种方式都需要许可证，因此开始之前，请检查项目是否已配置注册表（components.json 中有 @codedvisuals 条目）且已提供令牌。如果没有，这一步只能由用户购买完成：请引导他们前往 codedvisuals.com/pricing，然后停止操作。切勿以此技能中的描述为依据，重新实现目录中的视觉素材来绕过缺失的许可证。

使用 shadcn CLI 安装（推荐）

CodedVisuals 提供私有的 shadcn 注册表。完成一次性设置（见下文）后，可通过注册表名称安装任意视觉素材，名称格式为 {category}-{file}：

npx shadcn@latest add @codedvisuals/charts-line

CLI 会将文件放入 components/codedvisuals/，并在缺少 Motion、lucide-react 和 cn 时安装它们。其他包管理器的用法相同：pnpm dlx shadcn@latest add ...、yarn shadcn@latest add ...、bunx --bun shadcn@latest add ...。

设置私有注册表（一次性）

注册表是私有的，因此需要一个拥有有效许可证的 CodedVisuals 账户和个人注册表令牌。每个项目只需配置一次，而且这需要用户亲自完成操作（购买、登录、复制密钥），因此请引导用户完成这些步骤，而不要尝试代为操作。

获取许可证并签发令牌。 如果用户还没有许可证，请在 codedvisuals.com/pricing 购买，然后登录，打开 Settings、Registry token，并签发令牌。令牌只会显示一次，请立即复制。

将注册表添加到 components.json，并添加一个从环境变量读取令牌的 registries 条目：

"registries": {
  "@codedvisuals": {
    "url": "https://codedvisuals.com/r/{name}.json",
    "headers": { "Authorization": "Bearer ${CODEDVISUALS_TOKEN}" }
  }
}

在项目的 .env（或 shell 环境）中公开令牌：
```
CODEDVISUALS_TOKEN=your-token-here
```

完成后，npx shadcn@latest add @codedvisuals/{category}-{file} 可用于目录中的任何视觉组件。Settings、Registry token 页面也会显示预先填好的 components.json 和 .env 代码片段；如果注册表 URL 与上述内容不一致，请以该页面为准。

复制并粘贴

持有许可证的成员可以在视觉组件的预览页面复制源代码或下载文件，然后将其放入 components/codedvisuals/{category}/。使用这种方式时，需要自行安装依赖：Motion、lucide-react 和 cn。仅限成员：视觉组件的源代码不公开，因此如果用户尚未登录并持有许可证，请引导他们前往 codedvisuals.com/pricing。

不使用 shadcn/ui 的项目

视觉组件需要宿主项目提供三项内容：cn 类名合并包、shadcn/ui 设计令牌 CSS 变量，以及指向源代码根目录的 @ 导入别名。shadcn/ui 项目已经具备这些内容。对于纯 React + Tailwind CSS v4 项目，请按照此技能中的 manual-setup.md 操作，之后复制的文件即可直接使用。

在页面中使用

视觉组件自带高度，因此始终会渲染，但放在有足够空间的容器中效果最佳：设置固定高度或 min-h-*。对于大多数情况，h-96 是不错的默认值。如果没有定义高度，视觉组件就会从顶部到下边缘铺满，没有留白空间。

import ChartsLine from "@/components/codedvisuals/charts/line";

export default function LandingPage() {
  return (
    <div className="h-96 rounded-2xl border bg-card">
      <ChartsLine animated />
    </div>
  );
}

容器不要添加内边距。每个视觉组件都会裁剪自身内容，因此会填满容器并延伸到圆角边缘；空间紧张时，边缘会被隐藏。添加内边距会缩小视觉组件并留下空隙。

或者，可以使用以下类，让视觉容器呈现更含蓄的效果：

<div className="h-96 rounded-2xl border border-border/50 bg-muted/20 dark:bg-muted/15">
  <ChartsLine animated />
</div>

如需柔和的暗角效果，可直接向视觉组件传入遮罩工具类：

<div className="h-96 rounded-2xl border bg-card">
  <ChartsLine
    animated
    className="mask-t-from-85% mask-r-from-85% mask-b-from-85% mask-l-from-85%"
  />
</div>

默认导入名称由使用者自行决定；使用 PascalCase 格式的 {Category}{File} 是安全的命名约定，例如 ChartsLine。

如果宿主项目已有自己的网格、卡片或功能区布局，可将视觉组件放入其中。如果没有，请打开此技能中的 layout-patterns.md，查看可直接粘贴使用的容器、功能卡片、便当网格和分栏行。请注意，如果没有现成布局，最好为容器设置明确的高度或最小高度，为视觉组件留出充足的纵向空间。

动画

动画通过三个属性启用，默认关闭：

animated 开启动效。未设置时，视觉组件会以最终静态状态渲染。
trigger 决定何时播放入场动画：
- mount：视觉组件渲染后立即播放动画。
- inView（默认）：滚动进入视口时播放一次。
- inViewRepeat：每次滚动回视口时都重新播放。
hover 为支持此功能的视觉组件启用悬停微交互。

<ChartsLine animated trigger="mount" />
<ChartsLine animated trigger="inViewRepeat" hover />

如需完全静止的插图，请完全省略 animated。

展示效果修饰项

大多数视觉组件都支持适用于营销场景的修饰项。这些修饰项均为可选：

gradient（支持时默认为 true）：在视觉组件后方添加柔和的品牌光晕。
fadeOut（默认为 false）：将底部边缘淡化至背景中。
isometric（默认为 false）：添加细微的 3D 倾斜效果。

<ChartsLine animated isometric fadeOut />

数据属性和默认值

视觉效果由数据驱动。除了上述共享属性外，每种视觉效果还有各自的类型化属性（文案、数值、图标、计数），用于自定义外观和内容。所有属性都是可选的，且都有合理的默认值，因此只需传入要覆盖的属性即可。每种视觉效果的确切属性、类型、默认值和示例，都收录在 visuals/ 下对应的参考文件中。如有疑问，请以已安装的 .tsx 文件为准：其中的属性 interface 和 DEFAULT_* 值展示了完整 API。

主题和无障碍

视觉效果会读取项目的 shadcn/ui 设计令牌，因此无需配置即可匹配品牌。更改 --primary 令牌即可更新所有视觉效果；切换 .dark 类即可切换到深色模式。Tailwind 调色板仅用于细微的辅助点缀，不用于核心品牌表面。

视觉效果仅用于装饰：外层容器设有 aria-hidden，因此不要依赖它们向辅助技术传达信息。请在视觉效果所在的部分中搭配真实文本内容。

视觉效果目录

按类别选择。每个条目均采用 registry-name（名称）：描述，并附有下一步要打开的参考文件。

Activity

@codedvisuals/activity-feed（动态）：实时动态流，包含头像、操作和相对时间戳。详情：visuals/activity/feed.md。
@codedvisuals/activity-timeline（时间线）：按组展示事件和状态变化的垂直活动时间线。详情：visuals/activity/timeline.md。

AI

@codedvisuals/ai-agent-flow（Agent 流程）：由堆叠的等距立方体组成的 Agent 流程，立方体依次亮起，并在运行时显示每个步骤的标签。详情：visuals/ai/agent-flow.md。
@codedvisuals/ai-model-picker（模型选择器）：可在不同 AI 模型间切换，并实时显示每个模型的回答、速度、延迟和成本。详情：visuals/ai/model-picker.md。
@codedvisuals/ai-neural-net（神经网络）：分层网络中，脉冲在节点间传递，点亮置信度最高的输出。详情：visuals/ai/neural-net.md。
@codedvisuals/ai-presence（在线状态）：实时多人光标在共享画布上移动，其中一个携带你的头像，其余标记为 AI Agent，背景带有环境光晕和粒子效果。详情：visuals/ai/presence.md。
@codedvisuals/ai-prompt-box（提示词框）：宽大的提示词编辑器，包含正在输入的提示词、模型选择器、令牌计数和发送按钮，背景带有环境光晕和粒子效果。详情：visuals/ai/prompt-box.md。
@codedvisuals/ai-retrieval（检索）：查询分发到按排名排列的来源卡片，随着每个脉冲到达，卡片依次亮起，随后汇聚成流式回答，背景带有环境光晕和粒子效果。详情：visuals/ai/retrieval.md。
@codedvisuals/ai-thinking（思考）：推理面板会实时显示思考步骤，将其折叠成摘要，然后流式输出最终回答。详情：visuals/ai/thinking.md。
@codedvisuals/ai-tools（工具）：Agent 逐一调用工具，每一行先显示运行中的旋转指示器，然后显示结果和耗时。详情：visuals/ai/tools.md。
@codedvisuals/ai-voice（语音）：实时语音助手光球可在聆听、思考和说话状态间切换，并配有脉冲环、实时均衡器、状态标签和转录文本，背景带有环境光晕和粒子效果。详情：visuals/ai/voice.md。
@codedvisuals/ai-writer（写作）：文档中的 AI 可改写选中文本、自动补全幽灵文本，或在带标签的 AI 光标后内联回答斜杠命令，背景带有环境光晕和粒子效果。详情：visuals/ai/writer.md。

API

@codedvisuals/api-logs（日志）：服务节点沿着连接路径流入日志控制台，带有按严重程度着色的级别标签和逐行滚入的日志。详情：visuals/api/logs.md。
@codedvisuals/api-rate-limit（速率限制）：请求方块落入等距视角的配额托盘，直到托盘填满；下一个方块会在限制耗尽并重置前以 429 状态弹开。详情：visuals/api/rate-limit.md。
@codedvisuals/api-request（请求）：请求从客户端弧形传至服务端，响应再弧形返回，并显示方法标签、状态码和 JSON 响应卡片。详情：visuals/api/request.md。
@codedvisuals/api-webhook（Webhook）：Webhook 事件向你的端点扇形发出重试弧线，失败的尝试会在抵达前落下，成功的尝试则完成投递。详情：visuals/api/webhook.md。

自动化

@codedvisuals/automations-workflow-builder（工作流构建器）：工作流中的触发器会运行至一个条件节点，再分支到两个操作之一；运行脉冲会点亮所经过的路径。详情：visuals/automations/workflow-builder.md。

头像

@codedvisuals/avatars-grid（网格）：用户头像网格以细微的错落节奏逐个显现。详情：visuals/avatars/grid.md。
@codedvisuals/avatars-stack（堆叠）：重叠堆叠的头像，并带有剩余人数徽标。详情：visuals/avatars/stack.md。
@codedvisuals/avatars-profile-card（个人资料卡片）：紧凑的个人资料卡片，包含头像、姓名和关键统计数据。详情：visuals/avatars/profile-card.md。

品牌

@codedvisuals/branding-spotlight（聚光展示）：应用图标在逐渐淡出的占位应用停靠栏上方聚光展示，配有环境光晕和粒子场。详情：visuals/branding/spotlight.md。

浏览器

@codedvisuals/browser-loading（加载中）：浏览器窗口模型，展示页面加载动画状态。详情：visuals/browser/loading.md。
@codedvisuals/browser-simple（简洁）：简洁的浏览器窗口框架，可用于展示任意截图或 UI。详情：visuals/browser/simple.md。
@codedvisuals/browser-tabs（标签页）：带有可切换标签页和地址栏的浏览器窗口。详情：visuals/browser/tabs.md。

日历

@codedvisuals/calendar-date-picker（日期选择器）：日历日期选择器，突出显示选中的日期和日期范围。详情：visuals/calendar/date-picker.md。
@codedvisuals/calendar-event-list（事件列表）：采用议程样式的即将举行的日历事件列表。详情：visuals/calendar/event-list.md。
@codedvisuals/calendar-month-view（月视图）：完整的月历网格，事件显示在对应日期上。详情：visuals/calendar/month-view.md。

图表

@codedvisuals/charts-bar（条形图）：带有数值、趋势徽标和网格的动画条形图。详情：visuals/charts/bar.md。
@codedvisuals/charts-block-stack（方块堆叠图）：等距视角的条形图，方块逐个落下，堆叠成不断增高的柱体；每个方块落下时都会让堆叠产生弹簧般的压缩回弹效果。详情：visuals/charts/block-stack.md。
@codedvisuals/charts-donut（环形图）：带有中心总数和图例的动画环形图。详情：visuals/charts/donut.md。
@codedvisuals/charts-funnel（漏斗图）：由逐渐变窄的阶段板块组成的转化漏斗，板块逐个倾倒而入，并显示每个阶段的计数和转化率。详情：visuals/charts/funnel.md。
@codedvisuals/charts-gauge（仪表盘）：半圆形仪表盘，弧线扫至对应数值；还可显示分区轨道、中心读数和范围标签。详情：visuals/charts/gauge.md。
@codedvisuals/charts-heatmap（热力图）：由带标签的行和列组成的网格热力图，单元格沿对角线依次亮起，并配有强度图例。详情：visuals/charts/heatmap.md。
@codedvisuals/charts-line（折线图）：带有数值、趋势徽标和渐变填充的动画折线图。详情：visuals/charts/line.md。
@codedvisuals/charts-sparkline（迷你趋势线）：适用于狭小空间和数据卡片的紧凑型内嵌迷你趋势线。详情：visuals/charts/sparkline.md。

聊天

@codedvisuals/chat-ai-chat（AI 聊天）：带有流式响应和提示词输入框的 AI 聊天界面。详情：visuals/chat/ai-chat.md。
@codedvisuals/chat-bubbles（聊天气泡）：两人之间以聊天气泡呈现的对话。详情：visuals/chat/bubbles.md。
@codedvisuals/chat-thread（消息串）：带有回复和表情回应的串式消息视图。详情：visuals/chat/thread.md。

代码

@codedvisuals/code-editor（编辑器）：带有语法高亮和文件标签页的代码编辑器模型。详情：visuals/code/editor.md。
@codedvisuals/code-snippet（代码片段）：带有语言标签、可供复制的代码片段卡片。详情：visuals/code/snippet.md。
@codedvisuals/code-terminal（终端）：带有输入命令动画和输出内容的终端窗口。详情：visuals/code/terminal.md。

连接

@codedvisuals/connections-converge（汇聚）：多个来源汇聚到单个目标节点。详情：visuals/connections/converge.md。
@codedvisuals/connections-flow（流动）：节点通过数据路径连接而成的动画流。详情：visuals/connections/flow.md。
@codedvisuals/connections-layer-stack（分层堆叠）：以等距视角呈现的管道步骤板块逐个落下并相互堆叠，压缩堆叠；发布版本时，堆叠会释放并抬起。详情：visuals/connections/layer-stack.md。
@codedvisuals/connections-pipeline（管道）：进度不断推进的线性阶段管道。详情：visuals/connections/pipeline.md。
@codedvisuals/connections-sync（同步）：两个系统之间的数据来回传输并同步。详情：visuals/connections/sync.md。

数据

@codedvisuals/data-filters（筛选器）：筛选规则逐条添加，不断缩小当前结果计数和进度条的筛选器构建器。详情：visuals/data/filters.md。
@codedvisuals/data-import（导入）：CSV 导入映射器，将每个来源列连接到对应的目标字段，并跳过未映射的列。详情：visuals/data/import.md。
@codedvisuals/data-query（查询）：可视化查询构建器会组装查询条件，运行时呈现扫过效果，随后流式显示匹配的行和耗时读数。详情：visuals/data/query.md。
@codedvisuals/data-table（表格）：带有可排序列、数据行和状态标签的数据表。详情：visuals/data/table.md。

仪表盘

@codedvisuals/dashboard-mini-panel（Mini Panel）：包含一项指标和迷你图表的紧凑型仪表盘面板。详情：visuals/dashboard/mini-panel.md。
@codedvisuals/dashboard-widget-grid（Widget Grid）：由仪表盘工具和摘要卡片组成的网格。详情：visuals/dashboard/widget-grid.md。

设备

@codedvisuals/devices-laptop（Laptop）：用于展示截图或 UI 的笔记本电脑设备框架。详情：visuals/devices/laptop.md。
@codedvisuals/devices-phone（Phone）：用于展示手机屏幕的手机设备框架。详情：visuals/devices/phone.md。
@codedvisuals/devices-tablet（Tablet）：用于展示应用或页面的平板设备框架。详情：visuals/devices/tablet.md。

电子邮件

@codedvisuals/email-compose（Compose）：包含收件人、主题和正文的电子邮件撰写窗口。详情：visuals/email/compose.md。
@codedvisuals/email-inbox（Inbox）：显示发件人、预览内容和未读状态的电子邮件收件箱列表。详情：visuals/email/inbox.md。

文件

@codedvisuals/files-explorer（Explorer）：包含文件夹树和文件列表的文件浏览器。详情：visuals/files/explorer.md。
@codedvisuals/files-simple（Simple）：显示名称、类型和大小的简洁文件卡片。详情：visuals/files/simple.md。
@codedvisuals/files-stacked（Stacked）：多张相互重叠、具有纵深感的文件卡片。详情：visuals/files/stacked.md。
@codedvisuals/files-upload（Upload）：带有进度显示并支持拖放的文件上传区域。详情：visuals/files/upload.md。

地理

@codedvisuals/geo-edge-network（Edge Network）：点状世界地图，展示请求跳转至最近的边缘节点，并用延迟标签对比边缘节点与远端源服务器。详情：visuals/geo/edge-network.md。
@codedvisuals/geo-geofence（Geofence）：淡化显示的街道地图，带有绘制出的区域、沿不规则道路行驶的追踪设备，以及每次设备进入区域时弹出的提示框。详情：visuals/geo/geofence.md。
@codedvisuals/geo-globe（Globe）：由点状大陆构成的旋转地球仪，带有位置标记和逐渐绘出的连接弧线。详情：visuals/geo/globe.md。
@codedvisuals/geo-pin-drop（Pin Drop）：位置图钉落在抽象雷达场上，并产生同心圆波纹信号。详情：visuals/geo/pin-drop.md。
@codedvisuals/geo-world-map（World Map）：从选定城市向外扩散的点状世界地图，带有闪烁的位置标记、着色的覆盖区域，以及在城市间逐渐绘出的连接弧线。详情：visuals/geo/world-map.md。

Git

@codedvisuals/git-branch-graph（Branch Graph）：提交轨道上，功能分支从主线分出、各自提交，最后合并回来，脉冲沿每条路径传递。详情：visuals/git/branch-graph.md。
@codedvisuals/git-diff（Diff）：以统一视图或并排视图显示新增和删除行的文件差异，变更计数增加时，逐行扫过差异内容。详情：visuals/git/diff.md。
@codedvisuals/git-pull-request（Pull Request）：拉取请求卡片中的 CI 检查逐项运行，随后显示审批状态，并点亮合并按钮。详情：visuals/git/pull-request.md。

图像

@codedvisuals/images-carousel（Carousel）：带有幻灯片和导航控件的图像轮播。详情：visuals/images/carousel.md。
@codedvisuals/images-gallery（Gallery）：带有悬停状态的响应式图像网格。详情：visuals/images/gallery.md。

集成

@codedvisuals/integrations-hub（Hub）：连接周边集成徽标的中央应用。详情：visuals/integrations/hub.md。
@codedvisuals/integrations-logo-orbit（Logo Orbit）：围绕中央品牌标志运转的集成徽标。详情：visuals/integrations/logo-orbit.md。
@codedvisuals/integrations-logo-marquee（Logo Marquee）：集成徽标行交替向不同方向滚动，并在两侧边缘渐隐。详情：visuals/integrations/logo-marquee.md。
@codedvisuals/integrations-logo-reel（Logo Reel）：集成徽标逐个滑入中央聚光区，经过时逐渐模糊。详情：visuals/integrations/logo-reel.md。
@codedvisuals/integrations-plugin-slot（Plugin Slot）：由集成方块组成的等距视角面板，新徽标落入空槽并建立连接。详情：visuals/integrations/plugin-slot.md。

键盘

@codedvisuals/keyboard-half（Half）：展示按下组合键的半副键盘。详情：visuals/keyboard/half.md。
@codedvisuals/keyboard-isometric-keys（Isometric Keys）：等距视角键盘在有触感的键帽上敲击快捷键；键帽按下后会弹回，每个命令都配有胶囊标签。详情：visuals/keyboard/isometric-keys.md。
@codedvisuals/keyboard-shortcut（Shortcut）：以带标签的键帽呈现键盘快捷键。详情：visuals/keyboard/shortcut.md。

媒体

@codedvisuals/media-audio-waveform（Audio Waveform）：带有动画波形和控制按钮的音频播放器。详情：visuals/media/audio-waveform.md。
@codedvisuals/media-video-player（Video Player）：带有控制按钮和进度条的视频播放器画面。详情：visuals/media/video-player.md。

指标

@codedvisuals/metrics-comparison（Comparison）：对比前后指标及其变化量。详情：visuals/metrics/comparison.md。
@codedvisuals/metrics-stat-card（Stat Card）：显示数值、标签和趋势的单个统计卡片。详情：visuals/metrics/stat-card.md。
@codedvisuals/metrics-trend（Trend）：带有趋势线和环比变化的指标。详情：visuals/metrics/trend.md。

通知

@codedvisuals/notifications-bell（Bell）：带有未读徽标和弹跳动画的通知铃铛。详情：visuals/notifications/bell.md。
@codedvisuals/notifications-list（List）：带有图标和时间戳的通知列表。详情：visuals/notifications/list.md。
@codedvisuals/notifications-toast（Toast）：滑入显示的动画 Toast 通知。详情：visuals/notifications/toast.md。

支付

@codedvisuals/payments-checkout（Checkout）：包含明细项和支付按钮的结账摘要。详情：visuals/payments/checkout.md。
@codedvisuals/payments-credit-card（Credit Card）：展示品牌、卡号和芯片的信用卡视觉效果。详情：visuals/payments/credit-card.md。
@codedvisuals/payments-usage-meter（Usage Meter）：按用量计费摘要，包含与配额对比的用量条、逐项列出的计量费用和预估总额。详情：visuals/payments/usage-meter.md。

搜索

@codedvisuals/search-command-palette（Command Palette）：命令面板，包含已输入的查询、分组命令、键盘提示，以及沿列表移动的选中项。详情：visuals/search/command-palette.md。
@codedvisuals/search-results（Results）：搜索结果面板，包含筛选标签、结果数量，以及就地高亮的匹配词。详情：visuals/search/results.md。
@codedvisuals/search-semantic（Semantic）：查询落入嵌入空间，半径扫描会点亮最接近的匹配项并显示相似度分数。详情：visuals/search/semantic.md。

Sections

@codedvisuals/sections-auth（身份验证）：包含社交按钮、输入字段和登录按钮的登录区块。详情：visuals/sections/auth.md。
@codedvisuals/sections-backgrounds（背景）：背景样式（网格渐变、网格、圆点、光线）轮播预览区块，并提供切换样式的选择器。详情：visuals/sections/backgrounds.md。
@codedvisuals/sections-bento（便当格）：包含一个主打卡片和多种尺寸卡片的便当格布局区块。详情：visuals/sections/bento.md。
@codedvisuals/sections-blog（博客）：包含文章卡片和元数据的博客索引区块。详情：visuals/sections/blog.md。
@codedvisuals/sections-blog-post（博客文章）：包含标题、元信息和正文的博客文章布局。详情：visuals/sections/blog-post.md。
@codedvisuals/sections-comments（评论）：包含头像、回复和投票的评论串。详情：visuals/sections/comments.md。
@codedvisuals/sections-components（组件）：展示 UI 组件和构建模块的网格。详情：visuals/sections/components.md。
@codedvisuals/sections-contact（联系）：包含表单和联系信息的联系区块。详情：visuals/sections/contact.md。
@codedvisuals/sections-cta（行动号召）：包含标题和按钮的行动号召区块。详情：visuals/sections/cta.md。
@codedvisuals/sections-error（错误）：包含代码、消息和操作的错误状态区块。详情：visuals/sections/error.md。
@codedvisuals/sections-faq（常见问题）：包含可展开条目的常见问题区块。详情：visuals/sections/faq.md。
@codedvisuals/sections-features（功能）：包含图标、标题和说明的功能区块。详情：visuals/sections/features.md。
@codedvisuals/sections-footers（页脚）：包含品牌、链接和社交媒体的营销页脚。详情：visuals/sections/footers.md。
@codedvisuals/sections-headers（页眉）：包含导航和操作项的营销页眉。详情：visuals/sections/headers.md。
@codedvisuals/sections-hero（主视觉）：包含标题、文案和按钮的营销主视觉区块。详情：visuals/sections/hero.md。
@codedvisuals/sections-logos（品牌标志）：展示客户或合作伙伴品牌的标志墙。详情：visuals/sections/logos.md。
@codedvisuals/sections-newsletter（新闻简报）：包含电子邮件输入框的新闻简报订阅区块。详情：visuals/sections/newsletter.md。
@codedvisuals/sections-pricing（定价）：包含套餐卡片和功能的定价区块。详情：visuals/sections/pricing.md。
@codedvisuals/sections-process（流程）：包含编号阶段的分步流程区块。详情：visuals/sections/process.md。
@codedvisuals/sections-stats（统计数据）：突出显示关键数字的统计数据区块。详情：visuals/sections/stats.md。
@codedvisuals/sections-team（团队）：包含成员卡片和职位的团队区块。详情：visuals/sections/team.md。
@codedvisuals/sections-testimonials（用户评价）：包含引言和作者的用户评价区块。详情：visuals/sections/testimonials.md。
@codedvisuals/sections-timeline（时间线）：展示里程碑和日期的时间线区块。详情：visuals/sections/timeline.md。

Security

@codedvisuals/security-fingerprint（指纹）：带有成功状态的动态指纹扫描。详情：visuals/security/fingerprint.md。
@codedvisuals/security-lock（锁）：传达安全性和访问控制的锁形视觉效果。详情：visuals/security/lock.md。
@codedvisuals/security-shield（盾牌）：传达保护和信任的盾牌视觉效果。详情：visuals/security/shield.md。
@codedvisuals/security-two-factor（双重验证）：将一次性验证码输入两个输入组中；随着脉冲在同心圆环中扩散，锁会变为对勾。详情：visuals/security/two-factor.md。

状态

@codedvisuals/states-empty（空状态）：由虚线占位槽组成的空网格，添加操作向外扩散，一处槽位短暂显现后又消散。详情：visuals/states/empty.md。
@codedvisuals/states-error（错误）：请求脉冲沿途传入服务卡片并将其击碎，服务磁贴随之逐个变为故障状态，卡片上方显示警报徽章。详情：visuals/states/error.md。
@codedvisuals/states-maintenance（维护）：一叠服务磁贴，其中一块被抬起并正在维修，悬停在空槽上方，同时下方运行着进度扫光。详情：visuals/states/maintenance.md。
@codedvisuals/states-not-found（未找到）：请求脉冲沿路线抵达标有较大状态码的屏障，激起层层同心脉冲；缺失的页面以虚线幽灵磁贴呈现。详情：visuals/states/not-found.md。

状态

@codedvisuals/status-health-check（健康检查）：带有状态指示器的服务健康检查。详情：visuals/status/health-check.md。
@codedvisuals/status-resource-monitor（资源监控）：实时资源监控器在网格图表上显示 CPU 和内存使用情况，并通过图例展示每个系列的当前读数。详情：visuals/status/resource-monitor.md。
@codedvisuals/status-uptime-bar（运行时间条）：显示每日运行状态的运行时间条。详情：visuals/status/uptime-bar.md。

任务

@codedvisuals/tasks-checklist（清单）：清单中的各项逐一完成。详情：visuals/tasks/checklist.md。
@codedvisuals/tasks-kanban（看板）：包含多个列和可拖动卡片的看板。详情：visuals/tasks/kanban.md。
@codedvisuals/tasks-sort-lanes（分类泳道）：任务立方体沿着等距视角的 To do、In progress 和 Done 泳道滑动，每个立方体落下时都会弹性按压，同时泳道计数逐步变化。详情：visuals/tasks/sort-lanes.md。

支持 Markdown

登录后评论