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

UI 组件库

Shadcn Studio

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

进入原站读取本页 JSON

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

资源与访问条件

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

目录入口

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

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

  1. Product List 7

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

    相关词：轮播、轮播图、导航、列表

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

  2. Product List 8

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

    相关词：列表、进度条

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

  3. Product List 9

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

    相关词：轮播、轮播图、徽章、状态标签、卡片、列表

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

  4. Product List 10

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

    相关词：轮播、轮播图、切换、开关、徽章、状态标签、卡片、列表、渐变

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

  5. Shopping Cart 1

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

    相关词：复选框、多选框

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

  6. Shopping Cart 2

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

    相关词：气泡、弹出框、抽屉、面板、侧边栏

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

  7. Shopping Cart 3

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

    相关词：输入框、单选框、卡片、表单、定价、价格

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

  8. Shopping Cart 4

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

    相关词：弹窗、对话框、模态框、徽章、状态标签

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

  9. Offer Modal 1

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

    相关词：弹窗、对话框、模态框、复选框、多选框、注册、图片

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

  10. Offer Modal 2

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

    相关词：弹窗、对话框、模态框、首屏、主视觉、图片

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

  11. Offer Modal 3

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

    相关词：弹窗、对话框、模态框、注册、背景、文字、文本、图片

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

  12. Offer Modal 4

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

    相关词：弹窗、对话框、模态框

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

  13. Offer Modal 5

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

    相关词：弹窗、对话框、模态框

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

  14. Checkout Page 1

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

    相关词：表单

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

  15. Checkout Page 2

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

    相关词：输入框、单选框、卡片、表单、定价、价格

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

  16. Checkout Page 3

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

    相关词：手风琴、折叠面板、表单

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

  17. Checkout Page 4

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

    相关词：导航、表单、进度条

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

  18. Checkout Page 5

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

    相关词：表单、彩纸、庆祝

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

  19. Product Reviews 1

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

    相关词：头像、徽章、状态标签、日历、进度条

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

  20. Product Reviews 2

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

    相关词：按钮、侧边栏、头像、卡片、网格、进度条

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

  21. Product Reviews 3

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

    相关词：轮播、轮播图、导航、头像、定价、价格

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

  22. Product Reviews 4

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

    相关词：进度条、画廊、图片展示

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

  23. Product Reviews 5

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

    相关词：分页、上传、文件

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

  24. Order Summary 01

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

    相关词：弹窗、对话框、模态框、定价、价格、滚动

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

  25. Order Summary 02

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

    相关词：弹窗、对话框、模态框、侧边栏、网格

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

  26. Order Summary 03

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

    相关词：按钮、卡片、网格

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

  27. Order Summary 04

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

    相关词：图标

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

  28. Order Summary 05

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

    相关词：进度条

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

  29. Category Filter 1

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

    相关词：抽屉、面板、滑块、滑杆、输入框、侧边栏

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

  30. Category Filter 2

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

    相关词：输入框、选择器、下拉选择、下拉菜单、添加、加号、减号

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

  31. Category Filter 3

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

    相关词：弹窗、对话框、模态框、选择器、下拉选择、滚动

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

  32. Category Filter 4

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

    相关词：滑块、滑杆、选择器、下拉选择、菜单、下拉菜单、卡片、网格

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

  33. Category Filter 5

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

    相关词：滑块、滑杆、复选框、侧边栏

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

  34. Category Filter 6

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

    相关词：气泡、弹出框、输入框、搜索、命令、命令面板

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

  35. Category Filter 7

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

    相关词：抽屉、面板、滑块、滑杆、组合选择框、下拉选择、侧边栏、分页、网格、动画、动效

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

  36. Mega Footer 1

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

    相关词：导航、页脚

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

  37. Mega Footer 2

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

    相关词：网格、页脚、图标

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

  38. Mega Footer 3

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

    相关词：卡片、网格、页脚

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

  39. Mega Footer 4

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

    相关词：头像、页脚、功能区、图标

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

  40. Mega Footer 5

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

    相关词：导航、徽章、状态标签、标签、页脚

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

  41. Gift Card 01

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

    相关词：多行输入框、单选框、下拉菜单、消息提示、卡片、日历、表单

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

  42. Gift Card 02

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

    相关词：卡片、进度条、上传、拖拽、拖动、图片、画廊、图片展示、文件

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

  43. Gift Card 03

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

    相关词：按钮、卡片、图片、画廊、图片展示

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

  44. Gift Card 04

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

    相关词：卡片、网格

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

  45. Announcement Banner 01

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

    相关词：按钮、渐变、背景、关闭

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

  46. Announcement Banner 02

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

    相关词：按钮、渐变、文字、文本、关闭

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

  47. Announcement Banner 03

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

    相关词：按钮、输入框、注册、渐变、文字、文本

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

  48. Announcement Banner 04

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

    相关词：彩纸、庆祝、动画、动效

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

  49. Announcement Banner 05

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

    相关词：跑马灯、轮播、滚动列表、悬停、鼠标悬停、滚动、动画、动效、暂停、图标

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

  50. Announcement Banner 06

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

    相关词：按钮、徽章、状态标签、消息提示、渐变、背景、关闭

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

  51. Announcement Banner 07

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

    相关词：徽章、状态标签

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

  52. Announcement Banner 08

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

    相关词：按钮、输入框、徽章、状态标签、注册

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

  53. Announcement Banner 09

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

    相关词：按钮、设置、图标

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

  54. Announcement Banner 10

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

    相关词：按钮、头像、背景、图标

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

  55. Announcement Banner 11

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

    相关词：消息提示、背景、用户

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

  56. Announcement Banner 12

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

    相关词：按钮、背景

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

  57. DataTable Example 1

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

    相关词：表格、数据表格、头像

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

  58. DataTable Example 2

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

    相关词：表格、数据表格、进度条

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

  59. DataTable Example 3

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

    相关词：表格、数据表格

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

  60. DataTable Example 4

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

    相关词：表格、数据表格、图表

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

  61. DataTable Example 5

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

    相关词：表格、数据表格

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

  62. DataTable Example 6

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

    相关词：表格、数据表格

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

  63. DataTable Columns 01

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

    相关词：表格、数据表格

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

  64. DataTable Columns 02

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

    相关词：表格、数据表格、仪表盘、后台

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

  65. DataTable Columns 03

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

    相关词：表格、数据表格、拖拽、拖动

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

  66. DataTable Drag and Drop 01

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

    相关词：表格、数据表格、拖拽、拖动

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

  67. DataTable Drag and Drop 02

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

    相关词：表格、数据表格、选择器、下拉选择、复选框、多选框、拖拽、拖动

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

  68. DataTable Drag and Drop 03

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

    相关词：表格、数据表格、导航、树形列表、拖拽、拖动

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

  69. DataTable Drag and Drop 04

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

    相关词：表格、数据表格、拖拽、拖动

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

  70. DataTable Editing 01

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

    相关词：表格、数据表格、选择器、下拉选择、分页、用户

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

  71. DataTable Editing 02

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

    相关词：表格、数据表格、选择器、下拉选择

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

  72. DataTable Editing 03

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

    相关词：表格、数据表格、审批、确认

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

  73. DataTable Editing 04

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

    相关词：抽屉、面板、表格、数据表格、分页、头像

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

  74. DataTable Editing 05

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

    相关词：表格、数据表格、开关、切换

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

  75. DataTable Filtering 1

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

    相关词：表格、数据表格、用户

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

  76. DataTable Filtering 2

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

    相关词：表格、数据表格

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

  77. DataTable Filtering 3

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

    相关词：表格、数据表格

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

  78. DataTable Filtering 4

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

    相关词：表格、数据表格、悬停、鼠标悬停、动画、动效

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

  79. DataTable Filtering 5

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

    相关词：抽屉、面板、表格、数据表格

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

  80. DataTable Grouping 01

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

    相关词：表格、数据表格、分页

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