shadcn-hub
HomeOfficial Components64Live GalleryLive
Design Tools
/
Star on GitHub
shadcn-hub100% Strictly Implemented
Visitor Analytics
|
Site Visitor Counter
Star on GitHubMIT License

HeroUI Pro

NextUI 进化版

Overview

Overview

Components

图表
8 items
Data Presentation
10 items
AI Interaction
Agent
Feedback Micro-UX
Feedback

Blocks

Marketing Landing
Glow
Console App
Console
HeroUI Pro AI Components官方全量 9 大智能体交互组件

AI Components · 新一代智能体交互基元

HeroUI 专为 AI 原生时代打造的交互界面规范:折叠式思考链 (Chain Of Thought)、流式代码块 (Code Block)、 工具调用卡片 (Chat Tool)、信源卡 (Chat Source)、智能提示词输入器 (Prompt Input) 与动态流光 (Text Shimmer)。

1. Prompt Input · 智能体多模态提示词输入框

集成模型选择器、上下文附件挂载、Token 计数与流光发送

Claude 3.7 Sonnet (Thinking)64k Tokens 视窗
Press ⌘ + Enter to send
推荐指令:

2. Chain Of Thought (CoT) · 智能体思考推理链

展开即可查看模型内在思维逻辑,带流式脉冲、耗时指示与检查点

Step 1:理解用户意图:提取需求为 HeroUI Pro 风格组件,需要包含圆角 2xl、微透明磨砂与高对比度色彩。
Step 2:信源检索:在本地设计规范库中核实 HeroUI Pro 核心组件的样式变量与属性约定。
Step 3:工具执行:完成代码构筑并进行 React 19 Client Component 兼容性检测。
推理逻辑自洽,无幻觉风险,输出最终组件方案。
Chat Tool · Agent 工具调用卡
Success
展示智能体调用函数、执行命令与回传结果的状态
Tool: execute_code
Command: npm run build:analyze
Return: Bundle size: 84.2kb, 0 errors.
Chat Source · 信源引用卡片
3 Sources
智能体生成回复所依赖的外部文献与网页锚点
1

HeroUI Pro 官方组件全览

heroui.pro/docs/react/components

2

Tailwind CSS v4 现代化排版基底

tailwindcss.com/docs/v4

3. Chat Message & Code Block · 消息体与代码高亮卡

包含悬浮操作胶囊(复制、重试、赞踩反馈)与纯净暗色代码容器

HeroUI Pro Agent刚刚

为您生成的 HeroUI 风格代码块已就绪。支持一键快速复制并在现有 React 19 / Next.js 项目中平滑运行:

HeroUICard.tsx
import { Card } from "@/components/ui/card";

export function ModernHoloCard() {
  return (
    <div className="rounded-2xl border border-pink-500/20 bg-gradient-to-br from-card to-pink-500/10 p-6 backdrop-blur-md">
      <h3 className="text-base font-bold">HeroUI Pro Component</h3>
      <p className="text-xs text-muted-foreground mt-1">极致的磨砂高光与大圆角</p>
    </div>
  );
}