Beautiful UI Components

本地组件库 — 来自 beautifului.dev， 为 AI-native 界面设计的精致组件原语。

同步日期：2026-09-21 Tailwind CSS v4.3.3 21 个组件
AI Agent 使用指南

先读 COMPONENTS_GUIDE.md，再查 catalog.json 找组件，然后读 *.snippet.html 获取代码，读 *.meta.md 了解用法。

21
组件
10
分类
v4
Tailwind
Dark/Light
主题
AI States
01 Loading State Pixel-grid loader with shimmer and elapsed time.
loadinganimationshimmerpixelai
Snippet Docs 原网站
02 Thinking Expandable traces — steps, reasoning, search, coding.
thinkingexpandabletracesai
Snippet Docs 原网站
03 Streaming Text Streamed answer with inline sources, actions, and follow-ups.
streamingsourcesfollow-upschat
Snippet Docs 原网站
Interaction
04 Approval Card Human-in-the-loop questions the agent asks before acting.
approvalhitlformdecision
Snippet Docs 原网站
05 Tool Chips Code edits and tool calls as compact chips.
chipstool-callsagentcode
Snippet Docs 原网站
20 Selection Actions Contextual action bar for selected items.
selectionbulktoolbarfloating
Snippet 原网站
Task Management
06 Task Rows Live agent task status — running, failed, completed.
tasksstatusrunningagent
Snippet Docs 原网站
Input
07 Chat Full chat conversation interface for AI.
chatcomposerconversation
Docs 原网站
08 Prompt Bar Floating prompt input bar for AI interfaces.
promptinputai-input
Snippet Docs 原网站
Cards
09 Recommendation Card Cards suggesting next actions or content.
recommendationsuggestioncta
Docs 原网站
10 Context Cards Cards showing contextual information and attachments.
contextpreviewattachment
Docs 原网站
17 Insight Cards Dashboard metric cards with sparkline charts and trends.
insightmetricdashboardkpi
Docs 原网站
19 Fine-tune Card Card for model fine-tuning configuration and training.
fine-tunemodelmlai
Docs 原网站
Data Display
11 Diff Table Side-by-side code/content diff view.
diffcodecomparison
Docs 原网站
12 Records Table Full-featured data table with sorting, selection, and calculations.
tablerecordssortableairtable-like
Docs 原网站
13 Filter Table Table with filter bar, status badges, and search.
tablefilterstatus
Docs 原网站
Navigation & Layout
16 Flowchart Interactive flowchart with nodes, edges, zoom, and pan.
flowchartdiagramworkflow
原网站
18 Code Block Syntax-highlighted code display with copy button.
codesyntaxhighlight
Snippet 原网站
21 Agent Screen Full agent desktop/screen layout with sidebar and activity feed.
agentlayoutfull-page
原网站