New
Storybook 8 BetaVisual test with Chromatic
Star81,796
Back to overview
Add your project

React components

React is the most popular frontend library for developing component-driven user interfaces. It’s used for developing single page, mobile, and server-rendered applications.

4183components16839storiesLast updated 9 months ago
Tweet
Add your component

Accordion

View all (29)
Accordion
Microsoft
13
bpk-component-accordion
Skyscanner
9
Accordion
Phork
6
Accordion
Supabase
6

Alert

View all (36)
bpk-component-banner-alert
Skyscanner
17
Alert
Trendyol
14
va-alert
US Department of Veteran's Affairs13
Alert
kiwicom
11

Autocomplete

View all (18)
Autocomplete
GSoft
19
Autocomplete
GitHub
10
compact presets
GSoft
8
compact presets
GSoft
8

Avatar

View all (52)
AvatarStatusBubble
Phork
21
ColoredAvatar
Phork
16
Avatar
Microsoft
14
Avatar
Natura Cosmeticos
12

Badge

View all (47)
Badge
Twilio
17
ColoredBadge
Phork
16
Badge
kiwicom
16
Badge
Natura Cosmeticos
14
Badge
PetSmart
14

Banner

View all (26)
Banner
Shopify
15
Banner
Phork
10
PromoBanner
PetSmart
9
Banner
AnyVision
5
PromoBanner
D2iQ
5

Breadcrumb

View all (27)
Breadcrumbs
Natura Cosmeticos
6
Breadcrumbs
Talend
5
Breadcrumb
Twilio
5
Breadcrumbs
Scaleway
5

Button

View all (227)
ButtonGroup
Phork
35
Button
PetSmart
31
IconButton
Phork
29
IconTextButton
Phork
27
Button
Phork
24

Calendar

View all (18)
DRP - Calendar Props
AirBnb
33
SDP - Calendar Props
AirBnb
28
bpk-component-calendar
Skyscanner
20
bpk-component-scrollable-calendar
Skyscanner
19

Card

View all (66)
Product Card
PetSmart
23
Card
Shopify
22
Token Card
Twilio
22
LegacyCard
Shopify
18
StatisticsItemCard
Spaziodati
15

Carousel

View all (17)
useFocusZone
GitHub
8
SLDSCarousel
Salesforce
7
useFocusFinders
Microsoft
6
HorizontalOverflowCarousel
PetSmart
4
useFocusableGroup
Microsoft
3

Chart

View all (18)
PieChart
Spaziodati
15
bpk-component-barchart
Skyscanner
11
GeoChart
Talend
9
Charts
Wix
8

Chat

View all (10)
ChatLog
Twilio
15
ChatIcon
AppNexus
1
ChatMessage
Agora
1
ChatMessageList
Agora
1
ChatMessages
Agora
1

Checkbox

View all (72)
Checkbox
Twilio
29
Checkbox
Phork
16
SLDSCheckbox
Salesforce
15
CheckboxGroup
GSoft
14
Checkbox Field
Culture Amp
13

Chip

View all (16)
Chip
Natura Cosmeticos
16
Chip
LaunchDarkly
11
ChipsInput
AnyVision
9
bpk-component-graphic-promotion
Skyscanner
8
bpk-component-phone-input
Skyscanner
8

Code

View all (44)
bpk-component-fieldset
Skyscanner
13
Code Block
Twilio
12
bpk-component-datepicker
Skyscanner
12
Placeholder
Scaleway
8
VerificationCode
Scaleway
8

Collapse

View all (22)
Grid col
GOV.UK
9
Collapse
kiwicom
7
Collapsible List
SpaceONE
7
CollapsiblePanel
Talend
6
Collapsible
AppNexus
5

Color picker

View all (9)
Colors
Phork
14
Color
Narmi
5
ColorPicker
Shopify
4
Colors
LaunchDarkly
2

Combobox

View all (19)
SLDSCombobox
Salesforce
55
Combobox
Twilio
30
MultiselectCombobox
Twilio
16
Combobox
Microsoft
15
ComboBox
Bentley Systems
10

Context menu

View all (6)
Context Menu
SpaceONE
14
EllipsableContent
Spaziodati
8
Context Menu Item
SpaceONE
6
count
GSoft
4
Count
Reaviz
2

Data grid

DataGrid
Microsoft
14
Data Grid
Twilio
11

Date picker

View all (18)
Date Picker
Twilio
17
Date Picker
Xola
13
DatePicker
Microsoft
12
Date Picker
JetBrains
12
Datetime Picker
SpaceONE
11

Details

View all (6)
Expansion Panel Details
Natura Cosmeticos
4
Details
GOV.UK
3
DetailPageMenuUI
Spaziodati
3
Item Detail
JSTOR
1
Email
Talend
1

Dialog

View all (39)
Dialog
GSoft
31
Dialog
SmartHR
14
Dialog
Microsoft
13
Dialog
AppNexus
9

Disclosure

Disclosure
Twilio
20
Disclosure
GSoft
5
DisclosureArrow
GSoft
4
Disclosure
Twilio
3
lots
Shopify
1

Divider

View all (21)
TimelineDividerItem
Phork
14
Divider
GSoft
8
Divider
Natura Cosmeticos
7
Divider
Supabase
6
Divider
Microsoft
6

Drawer

View all (20)
Drawer
Microsoft
17
Drawer
Talend
13
Drag
Reaviz
8
Drawer
kiwicom
8
Drawer
PetSmart
6

Expandable

View all (9)
expanded presets
GSoft
8
expanded presets
GSoft
8
AddableItems
Spaziodati
6
ExpandableBlock
Bentley Systems
6
SLDSExpandableSection
Salesforce
3

File picker

File Picker
Twilio
7

Flex

View all (14)
Flex
Twilio
20
Flex
GSoft
6
Flex
D2iQ
6
FlexItem
D2iQ
6
flex inline
GSoft
4

Footer

View all (34)
Footer
GOV.UK
10
Tier 1: Definitions
PetSmart
8
Filter
LaunchDarkly
7
Dot
GSoft
5
Footer
Phork
5

Form

View all (42)
Form
Spaziodati
12
Form
GSoft
7
Form
Talend
7
Form Pill Group
Twilio
7
Form structure
D2iQ
7

Grid

View all (17)
Grid
Carbon Design System
10
Linear Progress Indicator
Natura Cosmeticos
9
SLDSProgressIndicator
Salesforce
9
Progress Wizard
SpaceONE
6
Grid
Melishev
5

Header

View all (41)
HeaderBar
Talend
16
SubHeader
Talend
15
SLDSPageHeader
Salesforce
9
SLDSBuilderHeader
Salesforce
8
Header
Storybook
6

Heading

View all (26)
Heading
PetSmart
14
Heading
Culture Amp
14
Heading
Twilio
13
Heading
kiwicom
12
Heading
GSoft
8

Hero

View all (14)
Hero
WFP
11
Switch (selection control)
Natura Cosmeticos
7
Hero
kickstartDS
6
ThemeProvider
kiwicom
3
Input State Help Text Provider
Natura Cosmeticos
1

Icon

View all (180)
Icons
GSoft
48
DayPickerRangeController
AirBnb
37
SLDSIcon
Salesforce
22
DayPickerSingleDateController
AirBnb
21
IconStatusBubble
Phork
18

Image

View all (32)
bpk-component-image
Skyscanner
12
Image
GSoft
10
image
GSoft
8
Image
Microsoft
7
ImageInput
SumUp
7

Input

View all (121)
Input
Twilio
31
Input
Trendyol
28
DRP - Input Props
AirBnb
18
InputField
kiwicom
18
Deprecated InputField
kiwicom
18

Label

View all (35)
Label
Phork
9
LabelWrapper
Phork
7
chart-series-label
GitLab
7
bpk-component-label
Skyscanner
6
Label
Twilio
5

Layout

View all (32)
AppLayout
Talend
14
RichLayout
Talend
9
PageLayout
GitHub
7
Layout
Shopify
7
Layout
Wix
6

Link

View all (58)
Link
Natura Cosmeticos
10
Link
Talend
8
TextLink
kiwicom
8
Link
Storybook
7
Link
Microsoft
7

List

View all (109)
List
Talend
31
ResourceList
Shopify
19
VirtualizedList
Talend
17
List
Phork
15
List
Scaleway
15

Listbox

Listbox
GSoft
27
Listbox
Shopify
7

Loading

View all (26)
Loading
kiwicom
6
Loading box
GOV.UK
5
Floating
Capgemini
5
InlineLoading
WFP
3
Loading
WFP
3

Menu

View all (21)
SLDSMenuDropdown
Salesforce
21
DropMenu
AppNexus
9
bpk-component-autosuggest
Skyscanner
8
Menu
AnyVision
7
Menu
Scaleway
6

Modal

View all (57)
Modal
Twilio
22
Modal
Scaleway
17
Modal
Shopify
16
SLDSModal
Salesforce
13
Modal
D2iQ
13

Nav

View all (31)
bpk-component-horizontal-nav
Skyscanner
11
Top nav
GOV.UK
9
NavigationStepper
Scaleway
5
Navigation
Wix
4
StepNavigation
WFP
4

Notification

View all (11)
Notification
Trendyol
8
Notification
Phork
7
NotificationInline
SumUp
4
NotificationToast
SumUp
3
NotificationFullscreen
SumUp
2

Page

View all (30)
Page
Shopify
19
ErrorPage
Bentley Systems
12
Pages
kickstartDS
8
Pager
JetBrains
8
Page Title
SpaceONE
6

Pagination

View all (38)
Pagination
Phork
20
Pagination
Twilio
12
Pagination
GOV.UK
10
Pagination
D2iQ
10
Pagination
Scaleway
7

Pill

View all (8)
bpk-component-infinite-scroll
Skyscanner
10
Pill
Workday
5
SLDSPill
Salesforce
3
Display Pill Group
Twilio
2
FilterPill
Grafana
2

Popover

View all (30)
Popover
Trendyol
24
SLDSPopover
Salesforce
22
Popover
Natura Cosmeticos
15
Popover
kiwicom
14
Popover
Twilio
13

Progress

View all (52)
LinearProgress
Actyx
31
Progress
Phork
18
GaugeProgress
Actyx
10
LinearProgressSimple
Actyx
8
SLDSProgressRing
Salesforce
7

Radio

View all (48)
Radio
Phork
15
Radio
Twilio
15
RadioField
PetSmart
12
Radio Field
Culture Amp
10
Radio
GOV.UK
9

Rating

View all (11)
bpk-component-star-rating
Skyscanner
11
EditableString
Spaziodati
11
RatingDisplay
Microsoft
8
Rating
Microsoft
7
bpk-component-rating
Skyscanner
6

Search

View all (26)
Search Dropdown
SpaceONE
12
NavbarOverlaySearch
Spaziodati
10
SearchBox
Microsoft
7
Query Search
SpaceONE
7
Search
Carbon Design System
5

Select

View all (66)
Select
Trendyol
33
Select
JetBrains
32
Single Select
Reaviz
23
Select
Twilio
19
RichSelect
Scaleway
18

Separator

View all (22)
MessageBar
Microsoft
8
Topbar & Sidebar
Microsoft
7
bar
Shopify
6
bar
Shopify
6
bar
Shopify
6

Slider

View all (25)
Slider
Phork
12
Slider
kiwicom
12
IndexFilters
Shopify
11
RangeSlider
AnyVision
9
SLDSSlider
Salesforce
9

Spinner

View all (26)
SLDSSpinner
Salesforce
19
Inline
GSoft
12
Inline contol group
Twilio
12
Spinner
Storybook
8
InlineEdit
LaunchDarkly
7

Stack

View all (16)
InlineStack
Shopify
18
BlockStack
Shopify
12
Stack
kiwicom
11
stacked-column-chart
GitLab
8
LegacyStack
Shopify
7

Switch

View all (21)
Switch
Twilio
21
Switch
Trendyol
7
Switch
Microsoft
6
ToggleSwitch
Bentley Systems
6
Switch
kiwicom
4

Table

View all (70)
IndexTable
Shopify
47
Table
Bentley Systems
28
Table
Microsoft
22
Table
Twilio
17
SLDSDataTable
Salesforce
17

Tabs

View all (37)
Tabs
Twilio
13
SLDSTabs
Salesforce
11
Tabs
Supabase
9
Tabs
GOV.UK
8
tabs
GitLab
8

Tag

View all (46)
ColoredTag
Phork
16
Tag
Phork
14
TagGroup
LaunchDarkly
14
InteractionTag
Microsoft
10
Tags
iq
10

Text

View all (41)
Typography (text)
Natura Cosmeticos
20
TextField
AnyVision
17
TextBox
Scaleway
17
Text Field
Natura Cosmeticos
15
Text
WFP
8

Text field

View all (10)
Field
GSoft
19
FieldMessage
GSoft
12
Field
Microsoft
10
GroupField
GSoft
5

Textarea

View all (55)
TextField
Shopify
29
Textarea
Trendyol
24
TextField
PetSmart
19
Textarea
Twilio
18
Textarea
Phork
15

Title

View all (12)
Title Block
Culture Amp
13
Title
Spaziodati
9
Tile
Bentley Systems
6
TwitterTimeline
MDX Embed4
TitleBar
React95
3

Toast

View all (27)
Toast
Microsoft
20
Toast
Shopify
9
TitledToast
Phork
9
Toast
Phork
9
SLDSToast
Salesforce
9

Toggle

View all (21)
Toggle
Phork
7
Toggle
@gilbarbara
6
Toggle
Supabase
5
Toggle
LaunchDarkly
4
SettingToggle
Shopify
3

Tooltip

View all (51)
Tooltip
Shopify
15
Tooltip
Trendyol
14
Tooltip
Microsoft
11
Tooltip
Twilio
9
Tooltip
iq
9

Typography

View all (17)
Typography
Actyx
14
Typography
JSTOR
12
Typography
Scaleway
6
Paragraph
GOV.UK
4
Paragraph
GSoft
4