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

Layout Components

Cards, accordions, tabs, separators, collapsibles, and resizable layout panels

Card 卡片

结构清晰的内容容器

项目活跃度
最近30天数据分析

1,284

+12.5% 较上月提升

系统通知
实时消息推送通道
云主机升级维护完成
发现新依赖漏洞修复
备份计划执行成功
构建状态
运行中

流水线进度 85%

Accordion 折叠面板

支持多级展开与收起的层次化列表

shadcn/ui 是一套设计精致、高度可定制的 UI 组件体系。它不作为不可修改的黑盒 npm 包安装,而是直接将源代码拷贝到你的工程中,让你拥有对组件 100% 的掌控权。

Tabs 标签面板

多重视图平滑切换

仪表盘面板概览

统一监视整个系统的核心指标与最新活动日志。

Separator 分隔线

清晰界定内容层级关系

水平分隔线

内容区块 A

内容区块 B

Antigravity
Next.js 16
Tailwind v4
shadcn/ui

Collapsible 独立折叠组件

独立的状态受控折叠面板

项目核心依赖库 (3)

@base-ui/react

AspectRatio 固定宽高比

自适应容器保持严格的宽高比例

16:9 宽屏视频比例

16 : 9

4:3 标准比例

4 : 3

1:1 正方形比例

1 : 1

Resizable 分割面板

支持鼠标自由拖拽缩放的可调比例面板

侧边目录面板
代码编辑器面板
终端调试面板

ScrollArea 滚动区域

跨浏览器视觉一致的轻量化滚动区域

垂直滚动列表

标签项 1
标签项 2
标签项 3
标签项 4
标签项 5
标签项 6
标签项 7
标签项 8
标签项 9
标签项 10
标签项 11
标签项 12
标签项 13
标签项 14
标签项 15
标签项 16
标签项 17
标签项 18
标签项 19
标签项 20

水平横向滚动

卡片 #1横向滑动
卡片 #2横向滑动
卡片 #3横向滑动
卡片 #4横向滑动
卡片 #5横向滑动
卡片 #6横向滑动
卡片 #7横向滑动
卡片 #8横向滑动