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

shadcn/ui Official Matrix

64/64 Implemented

Overview

All Components

Categories

Forms
17 items
Layout
8 items
Overlays
8 items
Data Display
9 items
Navigation
5 items
Feedback
8 items
Extended Primitives
9 items

AI Interactions & Extended Primitives (9 Components)

Attachment cards, Item rows, visual Markers, Text direction, interactive Questionnaire, Message stream, Sidebar, AI chat bubbles, and official Typography

01. Attachment 附件卡片组件

支持上传中、已完成、错误状态的多媒体附件胶囊

architecture-v2.pdf2.4 MB · 已就绪
dashboard-preview.png840 KB · 图片

02. Item & ItemGroup 结构化列表元素

标准化的列表单元格容器,集成头像媒体、标题、描述与右侧操作流

API
网关集群负载正常

当前 12 个节点处于低负载健康运行状态

DB
自动快照归档成功

已将增量 Wal 日志同步至分布式对象存储

03. Marker 视觉标注与分割点

文本或列表中的高亮标记点与指示连线

系统已完成自动化安全合规扫描,未发现高危代码漏洞。
以下为今日新增的扩展生态组件

04. Direction 方向感知 Provider

支持 LTR(从左至右)与 RTL(从右至左,如阿拉伯语/希伯来语)的无缝文字镜像排版

LTR (Left to Right)

Hello, shadcn/ui Base UI!

标准从左至右英文与汉字阅读流。

RTL (Right to Left)

مرحبا بكم في shadcn

阿拉伯语与多语言镜像文本支持。

05. Questionnaire 智能问卷与选择评估卡

多步骤选择题、满意度调查与进度指示器

用户体验调研步骤 1 / 3

您目前最常使用的前端框架是?

请选择一项以帮助我们针对性优化组件模板

Next.js (App Router)
Vite + React 19
Remix / React Router v7

06. MessageScroller & 07. Sidebar 侧边栏基元

消息会话自动触底滚动容器与侧边栏折叠收放基元

MessageScroller 流式容器自动平滑下滚

[09:12:00] Initializing AI agent runtime...

[09:12:01] Parsing AST for 61 components...

[09:12:02] Layout engine mounted successfully.

[09:12:03] Ready for prompt stream.

Sidebar 响应式基元折叠响应式

底层封装了与桌面大屏固定侧边栏与移动端浮动抽屉(Sheet)双向绑定的上下文状态,提供全局无缝联动。

08. Bubble 对话气泡与反应徽章

用于 AI 对话流、即时通讯会话气泡,支持多变体(默认、次要、强调色彩、线框)与悬浮反应动作

请问 shadcn/ui 官方这次最新收录的组件都有哪些?
包含全新的 DataTable(高阶数据表格)、DatePicker(日期及区间选择器)、Typography(规范排版体系)以及 Bubble(智能对话气泡)等全部 64 款组件!
12 4
✨ 所有组件均基于原生 Tailwind CSS 与现代无头协议驱动,零多余依赖!

09. Typography & Typeset 官方规范排版

基于 shadcn/ui Typeset 官方标准的排版原子体系:包含语义化标题、正文段落、代码标记、引用块与列表

Typography 现代化设计节奏

Typeset 通过基准字号、行高(Leading)和垂直韵律(Flow)三大核心参数驱动整个排版流。

当你在渲染 Markdown、技术文档或富文本博客时,使用语义化的排版组件可以确保与项目的设计规范和暗黑模式无缝契合。例如内联代码标记:npm run build 或 @base-ui/react。

“优秀的排版系统不仅是把文字变好看,更是在信息流与留白之间建立起自然的可读性节拍。”
  • 严格适配明亮 / 暗黑双主题自适应配色
  • 内置精确的文本截断、等宽字体与列表缩进
  • 支持 Typeset 单类容器化全局样式注入

发布于 2026年10月 · shadcn/ui 官方核心矩阵