UIPicks UI 参考库
← 全部 AI 参考来源

UI 组件库

Shadcn Studio

基于 shadcn/ui 的组件、页面区块和模板，可复制代码或通过 CLI 使用。

进入原站读取本页 JSON

已核对公开组件与区块数据 · 2026-10-14。检查全部 135 个已发布组件/区块栏目；从发布的 registry 对象提取命名区块及正式预览路径，付费源码不采集。

资源与访问条件

“有免费资源”仅描述对应资源范围，不代表每条案例、模板或素材免费。代码、提示词与素材的实际获取权限及许可需到原站核对。

目录入口

共 1,017 条记录，本页显示 1–80 条。每页最多 80 条；直接点击名称进入已保存的真实网址。

条目类型、来源日期与链接性质分别标注。只有明确核验过的画面才显示布局或风格标签；没有标签表示当前没有相应确认信息。

  1. Shadcn Studio · 组件与区块库

    集合 · 集合或类目入口，非独立案例 · React

    相关词：Shadcn Studio、组件与区块库、React

    官网公开导航与用途说明2026-10-13

  2. Accordion

    组件 · 具体条目入口 · React

    官网公开导航与用途说明2026-10-13

  3. Alert

    组件 · 具体条目入口 · React

    官网公开导航与用途说明2026-10-13

  4. Avatar

    组件 · 具体条目入口 · React

    官网公开导航与用途说明2026-10-13

  5. Autocomplete

    组件 · 具体条目入口 · React

    官网公开导航与用途说明2026-10-13

  6. Button

    组件 · 具体条目入口 · React

    官网公开导航与用途说明2026-10-13

  7. Badge

    组件 · 具体条目入口 · React

    官网公开导航与用途说明2026-10-13

  8. Calendar

    组件 · 具体条目入口 · React

    官网公开导航与用途说明2026-10-13

  9. Card

    组件 · 具体条目入口 · React

    官网公开导航与用途说明2026-10-13

  10. Carousel

    组件 · 具体条目入口 · React

    官网公开导航与用途说明2026-10-13

  11. Checkbox

    组件 · 具体条目入口 · React

    官网公开导航与用途说明2026-10-13

  12. Combobox

    组件 · 具体条目入口 · React

    官网公开导航与用途说明2026-10-13

  13. Command

    组件 · 具体条目入口 · React

    官网公开导航与用途说明2026-10-13

  14. Collapsible

    组件 · 具体条目入口 · React

    官网公开导航与用途说明2026-10-13

  15. Dialog

    组件 · 具体条目入口 · React

    官网公开导航与用途说明2026-10-13

  16. Dropdown Menu

    组件 · 具体条目入口 · React

    官网公开导航与用途说明2026-10-13

  17. Data Table

    组件 · 具体条目入口 · React

    官网公开导航与用途说明2026-10-13

  18. Drawer

    组件 · 具体条目入口 · React

    官网公开导航与用途说明2026-10-13

  19. Form

    组件 · 具体条目入口 · React

    官网公开导航与用途说明2026-10-13

  20. Input

    组件 · 具体条目入口 · React

    官网公开导航与用途说明2026-10-13

  21. Label

    组件 · 具体条目入口 · React

    官网公开导航与用途说明2026-10-13

  22. List

    组件 · 具体条目入口 · React

    官网公开导航与用途说明2026-10-13

  23. Navigation Menu

    组件 · 具体条目入口 · React

    官网公开导航与用途说明2026-10-13

  24. Popover

    组件 · 具体条目入口 · React

    官网公开导航与用途说明2026-10-13

  25. Pagination

    组件 · 具体条目入口 · React

    官网公开导航与用途说明2026-10-13

  26. Progress Bar

    组件 · 具体条目入口 · React

    官网公开导航与用途说明2026-10-13

  27. Radio Group

    组件 · 具体条目入口 · React

    官网公开导航与用途说明2026-10-13

  28. Select

    组件 · 具体条目入口 · React

    官网公开导航与用途说明2026-10-13

  29. Sheet

    组件 · 具体条目入口 · React

    官网公开导航与用途说明2026-10-13

  30. Skeleton

    组件 · 具体条目入口 · React

    官网公开导航与用途说明2026-10-13

  31. Switch

    组件 · 具体条目入口 · React

    官网公开导航与用途说明2026-10-13

  32. Sonner

    组件 · 具体条目入口 · React

    官网公开导航与用途说明2026-10-13

  33. Separator

    组件 · 具体条目入口 · React

    官网公开导航与用途说明2026-10-13

  34. Hero 1

    页面区块预览 · 具体条目入口 · React

    相关词：徽章、状态标签、首屏、主视觉、图片

    发布者公开目录数据2026-10-14

  35. Hero 2

    页面区块预览 · 具体条目入口 · React

    相关词：表单、首屏、主视觉、背景、动画、动效、图片

    已核验画面：左对齐首屏、操作或表单入口、浅色、鲜明色彩 · 2026-10-18

    标签仅描述本条官方默认预览；代码、付费权限与可配置颜色以原站为准。未验证所有交互。

    发布者公开目录数据2026-10-14

  36. Hero 3

    页面区块预览 · 具体条目入口 · React

    相关词：跑马灯、轮播、滚动列表、头像、网格、首屏、主视觉、滚动、动画、动效

    发布者公开目录数据2026-10-14

  37. Hero 4

    页面区块预览 · 具体条目入口 · React

    相关词：卡片、首屏、主视觉、动画、动效

    发布者公开目录数据2026-10-14

  38. Hero 5

    页面区块预览 · 具体条目入口 · React

    相关词：按钮、头像、网格、首屏、主视觉、背景

    发布者公开目录数据2026-10-14

  39. Hero 6

    页面区块预览 · 具体条目入口 · React

    相关词：按钮、首屏、主视觉、淡入、淡出、模糊

    发布者公开目录数据2026-10-14

  40. Hero 7

    页面区块预览 · 具体条目入口 · React

    相关词：列表、首屏、主视觉、图标

    发布者公开目录数据2026-10-14

  41. Hero 8

    页面区块预览 · 具体条目入口 · React

    相关词：网格、首屏、主视觉、交错、逐个出现、动画、动效

    发布者公开目录数据2026-10-14

  42. Hero 9

    页面区块预览 · 具体条目入口 · React

    相关词：按钮、首屏、主视觉、文字、文本、翻转、三维、3D

    发布者公开目录数据2026-10-14

  43. Hero 10

    页面区块预览 · 具体条目入口 · React

    相关词：头像、首屏、主视觉、仪表盘、后台、星星、收藏

    发布者公开目录数据2026-10-14

  44. Hero 11

    页面区块预览 · 具体条目入口 · React

    相关词：首屏、主视觉、悬停、鼠标悬停、三维、3D

    发布者公开目录数据2026-10-14

  45. Hero 12

    页面区块预览 · 具体条目入口 · React

    相关词：首屏、主视觉、文字、文本、翻转、动画、动效

    发布者公开目录数据2026-10-14

  46. Hero 13

    页面区块预览 · 具体条目入口 · React

    相关词：卡片、网格、首屏、主视觉、悬停、鼠标悬停、渐变

    发布者公开目录数据2026-10-14

  47. Hero 14

    页面区块预览 · 具体条目入口 · React

    相关词：跑马灯、轮播、滚动列表、输入框、首屏、主视觉、背景、动画、动效、AI、人工智能

    已核验画面：左右分栏、操作或表单入口、深色 · 2026-10-18

    标签仅描述本条官方默认预览；代码、付费权限与可配置颜色以原站为准。未验证所有交互。

    发布者公开目录数据2026-10-14

  48. Hero 15

    页面区块预览 · 具体条目入口 · React

    相关词：单选框、菜单、首屏、主视觉、动画、动效、图标

    发布者公开目录数据2026-10-14

  49. Hero 16

    页面区块预览 · 具体条目入口 · React

    相关词：跑马灯、轮播、滚动列表、卡片、首屏、主视觉、涟漪、波纹、光标、鼠标、指针

    发布者公开目录数据2026-10-14

  50. Hero 17

    页面区块预览 · 具体条目入口 · React

    相关词：环形、圆形、首屏、主视觉、文字、文本、动画、动效

    发布者公开目录数据2026-10-14

  51. Hero 18

    页面区块预览 · 具体条目入口 · React

    相关词：选择器、下拉选择、网格、表单、首屏、主视觉、搜索、渐变、背景

    发布者公开目录数据2026-10-14

  52. Hero 19

    页面区块预览 · 具体条目入口 · React

    相关词：轮播、轮播图、滑块、滑杆、首屏、主视觉

    发布者公开目录数据2026-10-14

  53. Hero 20

    页面区块预览 · 具体条目入口 · React

    相关词：首屏、主视觉、发光、光晕、背景、模糊、文字、文本

    发布者公开目录数据2026-10-14

  54. Hero 21

    页面区块预览 · 具体条目入口 · React

    相关词：跑马灯、轮播、滚动列表、滑块、滑杆、头像、卡片、首屏、主视觉

    发布者公开目录数据2026-10-14

  55. Hero 22

    页面区块预览 · 具体条目入口 · React

    相关词：选择器、下拉选择、头像、表单、首屏、主视觉、图标

    发布者公开目录数据2026-10-14

  56. Hero 23

    页面区块预览 · 具体条目入口 · React

    相关词：跑马灯、轮播、滚动列表、头像、卡片、首屏、主视觉、动画、动效

    发布者公开目录数据2026-10-14

  57. Hero 24

    页面区块预览 · 具体条目入口 · React

    相关词：跑马灯、轮播、滚动列表、切换、开关、标签页、选项卡、卡片、首屏、主视觉

    发布者公开目录数据2026-10-14

  58. Hero 25

    页面区块预览 · 具体条目入口 · React

    相关词：网格、首屏、主视觉、光束、动画、动效、仪表盘、后台、图标

    发布者公开目录数据2026-10-14

  59. Hero 26

    页面区块预览 · 具体条目入口 · React

    相关词：卡片、首屏、主视觉、背景、涟漪、波纹、模糊

    发布者公开目录数据2026-10-14

  60. Hero 27

    页面区块预览 · 具体条目入口 · React

    相关词：跑马灯、轮播、滚动列表、头像、首屏、主视觉、悬停、鼠标悬停、动画、动效

    发布者公开目录数据2026-10-14

  61. Hero 28

    页面区块预览 · 具体条目入口 · React

    相关词：网格、首屏、主视觉、发光、光晕、图标

    发布者公开目录数据2026-10-14

  62. Hero 29

    页面区块预览 · 具体条目入口 · React

    相关词：输入框、表单、首屏、主视觉、图片

    发布者公开目录数据2026-10-14

  63. Hero 30

    页面区块预览 · 具体条目入口 · React

    相关词：跑马灯、轮播、滚动列表、头像、卡片、网格、首屏、主视觉、用户评价、搜索

    发布者公开目录数据2026-10-14

  64. Hero 31

    页面区块预览 · 具体条目入口 · React

    相关词：跑马灯、轮播、滚动列表、图表、卡片、首屏、主视觉、背景

    发布者公开目录数据2026-10-14

  65. Hero 32

    页面区块预览 · 具体条目入口 · React

    相关词：轮播、轮播图、滑块、滑杆、卡片、首屏、主视觉、文字、文本、翻转

    发布者公开目录数据2026-10-14

  66. Hero 33

    页面区块预览 · 具体条目入口 · React

    相关词：首屏、主视觉、发光、光晕、视频

    发布者公开目录数据2026-10-14

  67. Hero 34

    页面区块预览 · 具体条目入口 · React

    相关词：按钮、首屏、主视觉、悬停、鼠标悬停、发光、光晕、光束、揭示、出现、入场、聊天

    发布者公开目录数据2026-10-14

  68. Hero 35

    页面区块预览 · 具体条目入口 · React

    相关词：卡片、网格、表单、首屏、主视觉

    发布者公开目录数据2026-10-14

  69. Hero 36

    页面区块预览 · 具体条目入口 · React

    相关词：跑马灯、轮播、滚动列表、按钮、徽章、状态标签、卡片、首屏、主视觉、动画、动效、排版

    发布者公开目录数据2026-10-14

  70. Hero 37

    页面区块预览 · 具体条目入口 · React

    相关词：跑马灯、轮播、滚动列表、按钮、卡片、首屏、主视觉、排版、字体

    发布者公开目录数据2026-10-14

  71. Hero 38

    页面区块预览 · 具体条目入口 · React

    相关词：首屏、主视觉、文字、文本、三维、3D

    发布者公开目录数据2026-10-14

  72. Hero 39

    页面区块预览 · 具体条目入口 · React

    相关词：首屏、主视觉、骨架屏、加载、加载动画、涟漪、波纹、滚动、文字、文本、翻转、动画

    发布者公开目录数据2026-10-14

  73. Hero 40

    页面区块预览 · 具体条目入口 · React

    相关词：标签页、选项卡、头像、首屏、主视觉、光束、背景、动画、动效

    发布者公开目录数据2026-10-14

  74. Hero 41

    页面区块预览 · 具体条目入口 · React

    相关词：轮播、轮播图、按钮、导航、网格、首屏、主视觉、渐变、淡入、淡出、用户、播放

    发布者公开目录数据2026-10-14

  75. Hero 42

    页面区块预览 · 具体条目入口 · React

    相关词：导航、头像、徽章、状态标签、卡片、首屏、主视觉、翻转、动画、动效、AI、人工智能

    发布者公开目录数据2026-10-14

  76. Hero 43

    页面区块预览 · 具体条目入口 · React

    相关词：轮播、轮播图、导航、头像、首屏、主视觉、用户评价、背景、模糊、视频

    发布者公开目录数据2026-10-14

  77. Hero 44

    页面区块预览 · 具体条目入口 · React

    相关词：跑马灯、轮播、滚动列表、徽章、状态标签、卡片、首屏、主视觉、动画、动效、拖拽、拖动

    发布者公开目录数据2026-10-14

  78. Hero 45

    页面区块预览 · 具体条目入口 · React

    相关词：组合选择框、下拉选择、菜单、导航栏、卡片、首屏、主视觉、搜索、画廊、图片展示、地图

    发布者公开目录数据2026-10-14

  79. Hero 46

    页面区块预览 · 具体条目入口 · React

    相关词：轮播、轮播图、卡片、首屏、主视觉、动画、动效

    发布者公开目录数据2026-10-14

  80. Features 1

    页面区块预览 · 具体条目入口 · React

    相关词：按钮、头像、卡片、网格、功能区、图标

    发布者公开目录数据2026-10-14