返回概览
添加你的项目

React 组件

React 是最流行的用于开发组件驱动用户界面的前端库。它用于开发单页、移动和服务器端渲染应用程序。

...3812个组件...14778个故事7个月前更新
分享到 Twitter
添加你的组件

折叠面板

查看所有 (28)
折叠面板
@gilbarbara13
折叠面板
D2iQ...9
bpk-component-accordion
......
折叠面板
......
折叠面板
......

警告

查看所有 (34)
bpk-component-banner-alert
......
警告
Trendyol14
va-alert（va 警报）
美国退伍军人事务部13
警告
kiwicom11
警告
Supabase9

自动完成

查看所有 (19)
自动完成
GSoft19
自动完成
GitHub10
自动完成
Shopify9
紧凑预设
GSoft8
紧凑预设
GSoft8

头像

查看所有 (49)
头像状态气泡
Phork21
彩色头像 (Cǎisè tóuxiàng)
...16
头像
...12
头像
...8
头像
...8

徽章 (Huīzhāng)

查看所有 (44)
彩色徽章 (Cǎisè huīzhāng)
...16
徽章 (Huīzhāng)
...16
徽章图标 (Huīzhāng túbiāo)
...15
徽章 (Huīzhāng)
Natura Cosmeticos14
徽章 (Huīzhāng)
Shopify13

横幅广告

查看所有 (23)
横幅广告
Shopify15
横幅广告
Phork10
横幅广告
AnyVision5
推广横幅
D2iQ5
横幅广告
GitLab5

面包屑导航

查看所有 (25)
通过面包屑导航过滤资源
Passbolt9
面包屑
Natura Cosmeticos6
面包屑
Talend5
面包屑
Scaleway5
面包屑
SpaceONE5

按钮

查看所有 (206)
按钮组
Phork35
图标按钮
Phork31
图标文本按钮
Phork29
按钮
...26
按钮
...24

日历

查看所有 (16)
DRP - 日历属性
...33
SDP - 日历属性
...28
bpk-component-calendar（日历组件）
...20
bpk-component-scrollable-calendar（可滚动日历组件）
...19
线性图
...8

卡片

查看所有 (57)
卡片
...22
LegacyCard（旧版卡片）
Shopify18
图片卡片
JSTOR15
统计项目卡片
Spaziodati15
环形进度指示器
Natura Cosmeticos13

轮播图

查看所有 (12)
useFocusZone (焦点区域钩子)
GitHub8
SLDS 轮播图
Salesforce7
useResponsiveScreenSize (响应式屏幕尺寸钩子)
华盛顿邮报6
轮播图
Bentley Systems3
轮播图
SumUp2

图表

查看所有 (22)
饼图
Spaziodati15
bpk-component-条形图
Skyscanner11
地理图表
Talend9
图表
Wix8
气泡图
Reaviz7

聊天

查看所有 (9)
聊天图标
AppNexus1
聊天消息
Agora1
聊天消息列表
Agora1
聊天消息
声网 (Agora)1
聊天面板
...声网 (Agora)...

复选框

查看所有 (67)
复选框
...Phork...
SLDS 复选框
...Salesforce...
复选框组
...GSoft...
复选框字段
...Culture Amp...
复选框
...Trendyol...

标签

查看所有 (15)
标签
Natura Cosmeticos16
标签输入框（ChipsInput）
AnyVision9
bpk-component-graphic-promotion（图形推广组件）
Skyscanner8
bpk-component-phone-input（电话号码输入组件）
...8
标签
...7

代码

查看所有 (41)
bpk-component-fieldset（字段集组件）
...13
bpk-component-datepicker（日期选择器组件）
...12
占位符
...8
验证码
Scaleway8
云存储上传项目
声网 (Agora)7

折叠面板

查看所有 (20)
网格列
英国政府 (GOV.UK)9
折叠面板
@gilbarbara8
折叠面板
Kiwi.com7
可折叠列表
SpaceONE7
可折叠面板
Talend6

颜色选择器

查看所有 (9)
颜色
Phork14
颜色
Narmi5
颜色选择器
Shopify4
颜色选择器
Bentley Systems3
颜色
LaunchDarkly2

组合框

查看所有 (13)
SLDS 组合框
Salesforce55
组合框
Bentley Systems10
组合框
Shopify7
组合框
JSTOR6
组合框
Narmi5

上下文菜单

查看所有 (6)
上下文菜单
SpaceONE14
可省略内容
Spaziodati8
上下文菜单项
SpaceONE6
计数
GSoft4
计数
Reaviz2

数据网格

数据网格
Microsoft4

日期选择器

查看所有 (18)
日期选择器
Xola13
日期选择器
JetBrains12
日期时间选择器
SpaceONE11
日期选择器
Spaziodati7
日期选择器
Shopify6

详情

查看所有 (6)
扩展面板详情
Natura Cosmeticos4
详情
GOV.UK3
详情页面菜单UI
Spaziodati3
项目详情
JSTOR1
电子邮件
Talend1

对话框

查看所有 (35)
对话框
GSoft31
对话框
SmartHR14
对话框
Actyx10
对话框
Trendyol10
对话框
AppNexus9

披露

披露
GSoft5
披露箭头
GSoft4
披露
LaunchDarkly2
许多
Shopify1

分割线

查看所有 (20)
时间线分割项
Phork14
分割线
GSoft8
分割线
Natura Cosmeticos7
分割线
Supabase6
视频缩略图
Shopify4

抽屉

查看所有 (18)
抽屉
Talend13
拖拽
Reaviz8
抽屉
kiwicom8
模态抽屉
Actyx6
抽屉
Trendyol

可展开

查看所有 (9)
已展开的预设
...GSoft8
已展开的预设
...GSoft8
可添加项目
...Spaziodati6
可展开块
...Bentley Systems6
SLDS 可展开部分
...Salesforce3

Flex 布局

查看所有 (13)
Flex 布局
...GSoft6
Flex 布局
D2iQ6
Flex项目
...6
行内弹性布局
...4
弹性盒子
...3

页脚

查看所有 (28)
页脚
...10
页脚
...6
点
...5
字体
...5
字体
Narmi5

表单

查看所有 (37)
表单
Spaziodati12
表单
GSoft7
表单
Talend7
表单结构
D2iQ7
ErrorForms Kitchensink（错误表单示例）
kiwicom6

网格

查看所有 (17)
网格
Carbon Design System（Carbon 设计系统）10
线性进度指示器
Natura Cosmeticos9
SLDS进度指示器
Salesforce（赛富时）9
进度向导
SpaceONE6
网格
Melishev5

页眉

查看所有 (37)
标题栏
Talend16
子页眉
Talend15
SLDS 页面页眉
Salesforce（赛富时）9
SLDS 构造器页眉
Salesforce（赛富时）8
页眉
Storybook6

标题

查看所有 (24)
标题
Culture Amp14
标题
kiwicom12
标题
GSoft8
标题们
@gilbarbara7
标题
GOV.UK4

英雄

查看所有 (13)
英雄
WFP11
开关（选择控件）
Natura Cosmeticos7
英雄
kickstartDS6
主题提供器（ThemeProvider）
kiwicom3
输入状态帮助文本提供器（Input State Help Text Provider）
Natura Cosmeticos1

图标（Icon）

查看所有 (174)
图标（Icons）
GSoft48
日期选择器范围控制器（DayPickerRangeController）
AirBnb37
SLDS 图标（SLDSIcon）
Salesforce22
日期选择器单日期控制器（DayPickerSingleDateController）
AirBnb21
图标状态气泡（IconStatusBubble）
...18

图片（Image）

查看所有 (30)
bpk-component-image
...12
图片（Image）
...10
图片（image）
...8
图片输入（ImageInput）
...7
懒加载图片（Lazy Image）
...5

输入（Input）

查看所有 (123)
输入（Input）
...28
下拉菜单属性（DRP - Input Props）
AirBnb18
输入框
kiwicom18
已弃用的输入框
...
输入框组
...

标签

查看所有 (30)
标签
...
标签包装器
...
图表系列标签
...
bpk 组件标签
...
标签
GSoft4

布局

查看所有 (29)
应用布局 (AppLayout)
Talend14
富布局 (RichLayout)
Talend9
页面布局 (PageLayout)
GitHub7
布局
Shopify7
布局
Wix6

链接

查看所有 (56)
链接
Natura Cosmeticos10
链接
Talend8
文本链接 (TextLink)
Kiwi.com8
链接
Storybook7
bpk-component-link
Skyscanner 7

列表

查看所有 (100)
列表
Talend 31
资源列表
Shopify 19
虚拟列表
Talend 17
列表
Phork 15
列表
Scaleway 15

列表框

列表框
GSoft 27
列表框
Shopify7

加载中

查看所有 (24)
加载中
kiwicom6
加载框
GOV.UK5
行内加载
WFP3
加载中
WFP3
va-加载指示器
美国退伍军人事务部3

菜单

查看所有 (21)
SLDS菜单下拉列表
Salesforce21
下拉菜单
AppNexus9
bpk-component-自动建议
天巡8
菜单
AnyVision7
菜单
Scaleway6

模态框

查看所有 (52)
模态框
Scaleway17
模态框
Shopify16
SLDS 模态框
Salesforce13
模态框
D2iQ13
模态框
Supabase12

导航

查看所有 (29)
bpk-component-horizontal-nav
天巡11
顶部导航
英国政府9
导航步骤
Scaleway5
导航
Wix4
步骤导航
世界粮食计划署4

通知

查看所有 (10)
通知
Trendyol8
通知
Phork7
嵌入式通知
SumUp4
吐司通知
SumUp4
全屏通知
SumUp2

页面

查看所有 (30)
页面
Shopify19
错误页面
Bentley Systems12
多页
kickstartDS8
分页器
JetBrains8
页面标题
SpaceONE6

分页

查看所有 (37)
分页
Phork20
分页
GOV.UK10
分页
D2iQ10
分页
Scaleway7
bpk-component-pagination（分页组件）
Skyscanner 6

Pill（胶囊）

查看所有 (7)
bpk-component-infinite-scroll（无限滚动组件）
Skyscanner 10
Pill（胶囊）
Workday 5
SLDSPill (SLDS 胶囊)
Salesforce 3
FilterPill（过滤器胶囊）
Grafana 2
AirportIllustration（机场插图）
kiwicom 2

Popover（弹出框）

查看所有 (25)
Popover（弹出框）
Trendyol 24
SLDSPopover (SLDS 弹出框)
Salesforce（赛富时）22
Popover（弹出框）
Natura Cosmeticos（自然化妆品）15
Popover（弹出框）
kiwicom14
bpk-component-popover（bpk-组件-弹出框）
Skyscanner（天巡）11

Progress（进度）

查看所有 (50)
LinearProgress（线性进度条）
Actyx31
Progress（进度）
Phork18
GaugeProgress（仪表进度条）
Actyx10
ProgressBar（进度条）
@gilbarbara8
ProgressCircle（环形进度条）
@gilbarbara8

Radio（单选按钮）

查看所有 (44)
Radio（单选按钮）
Phork15
单选框字段
Culture Amp10
Radio（单选按钮）
GOV.UK9
Radio（单选按钮）
kiwicom8
bpk-component-radio（单选框组件）
Skyscanner7

评分

查看所有 (8)
bpk-component-star-rating（星级评分组件）
Skyscanner11
可编辑字符串
Spaziodati11
bpk-component-rating（评分组件）
Skyscanner6
SLDSPortalSettings
Salesforce（赛富时）2
星级评分（RatingStars）
kiwicom2

搜索 (Search)

查看所有 (26)
搜索下拉菜单 (Search Dropdown)
SpaceONE12
导航栏浮层搜索 (NavbarOverlaySearch)
Spaziodati10
查询搜索 (Query Search)
SpaceONE7
搜索 (Search)
Carbon Design System（Carbon设计系统）5
搜索 (Search)
SpaceONE5

选择 (Select)

查看所有 (60)
选择 (Select)
Trendyol35
选择 (Select)
JetBrains32
富选择框 (RichSelect)
Scaleway(略)18
选择 (Select)
(略)Phork(略)16
下拉选择框 (SelectDropdown)
(略)Spaziodati(略)13

分隔符 (Separator)

查看所有 (18)
条 (bar)
(略)Shopify(略)6
条 (bar)
(略)Shopify(略)6
条 (bar)
(略)Shopify(略)6
条 (bar)
(略)Shopify(略)6
分隔符 (Separator)
(略)Scaleway(略)5

滑块 (Slider)

查看所有 (21)
索引过滤器 (IndexFilters)
Shopify13
滑块 (Slider)
Phork{/* 与i=0相同，省略 */}
滑块 (Slider)
kiwicom{/* 与i=0相同，省略 */}
范围滑块
AnyVision{/* 与i=0相同，省略 */}
SLDS 滑块
Salesforce{/* 与i=0相同，省略 */}

加载动画

查看所有 (22)
SLDS 加载动画
Salesforce{/* 与i=0相同，省略 */}
行内元素
GSoft{/* 与i=0相同，省略 */}
加载动画
Storybook{/* 与i=0相同，省略 */}
行内元素
LaunchDarkly6
加载动画
Trendyol6

堆栈

查看所有 (14)
行内堆栈
Shopify18
块堆栈
Shopify12
堆栈
kiwicom11
堆叠柱状图
GitLab8
旧版堆栈
Shopify7

开关

查看所有 (21)
开关
Trendyol7
开关
华盛顿邮报7
开关
Bentley Systems6
开关
kiwicom4
Twitch
MDX 嵌入4

表格

查看所有 (65)
索引表格
Shopify49
表格
Bentley Systems28
SLDS 数据表格
Salesforce17
数据表格
AppNexus15
表格
D2iQ14

选项卡

查看所有 (35)
SLDS 选项卡
Salesforce
选项卡
Supabase
选项卡
GOV.UK8
标签
彩色标签
选项卡
GitLab8

Shopify7

查看所有 (42)
标签
彩色标签
Shopify7
Phork
Phork
iq10
Shopify7
Shopify8
标签组
Phork8

文本

查看所有 (41)
排版（文本）
Natura Cosmeticos20
文本字段
AnyVision17
文本框
Scaleway17
文本字段
Natura Cosmeticos15
文本
WFP8

文本字段

查看所有 (11)
字段
GSoft19
字段消息
......12
字段
......11
字段组
......5
字段组
......2

文本区

查看所有 (44)
文本字段
......29
文本区
......24
文本区
......15
文本区
Actyx13
文本区
微软12

标题

查看所有 (10)
标题块
Culture Amp13
标题
Spaziodati9
磁贴
Bentley Systems6
Twitter时间线
MDX Embed4
标题栏
React953

吐司

查看所有 (24)
吐司
Shopify9
带标题的吐司
Phork9
吐司
Phork9
SLDS Toast
Salesforce9
吐司
Spaziodati9

切换开关

查看所有 (19)
切换开关
@gilbarbara11
切换开关
Phork7
切换开关
Supabase5
设置切换
Shopify3
切换开关
Narmi3

工具提示

查看所有 (47)
工具提示
...
工具提示
...
工具提示
...
带工具提示
...
工具提示
...

排版

查看所有 (15)
排版
...
排版
JSTOR12
排版
Scaleway6
段落
...GOV.UK ... 4
段落
...GSoft ... 4