View showcase

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.

3163components13051storiesLast updated 2 days ago
Tweet
Add your component

Accordion

View all (22)
Accordion
Microsoft
12
Accordion
bpk-component-accordion
Accordion

Autocomplete

View all (10)
AvatarStatusBubble
ColoredAvatar
Avatar
Avatar
ColoredBadge
Badge
Badge
NotificationBadge
Banner
Banner
PromoBanner
Banner
PromoBanner

Breadcrumb

View all (25)
Breadcrumbs
Breadcrumb
Breadcrumbs
Breadcrumbs
BreadcrumbsBar
ButtonGroup
IconButton
IconTextButton
Button
Button
Token Card
Card
Product Card
Circular Progress Indicator
Card

Carousel

View all (9)
useFocusZone
SLDSCarousel
HorizontalOverflowCarousel
Carousel
Carousel
bpk-component-barchart
Charts
GeoChart
Charts
Bubble Chart
Bar Chart
Area Chart
Line Chart
BarChart
ChatLog
Checkbox
Checkbox
SLDSCheckbox
CheckboxGroup
Checkbox Field
ChipsInput
bpk-component-graphic-promotion
bpk-component-phone-input
Chip
ColoredLineLoader
bpk-component-fieldset
bpk-component-datepicker
Placeholder
VerificationCode
Collapse
Collapsible List
Collapsible
Collapsible

Color picker

Color
Color
Color picker
Color
SLDSCombobox
Combobox
Combo box
Combobox
Combobox

Context menu

View all (7)
Context Menu
Context Menu Item
count
Count
Context Menu

Data grid

Date picker

View all (9)
Date Picker
Datetime Picker
Date picker
Date time drop
Datepicker
Email
Expansion Panel Details
Details
Details
Item Detail
Dialog
Dialog
Non-Modal Dialog
DialogWizard
DialogTrigger

Disclosure

Disclosure
Disclosure
DisclosureArrow
Disclosure
TimelineDividerItem
Divider
Divider
Divider
Drag
Drawer
Drawer
Drawer

Expandable

expanded presets
expanded presets
SLDSExpandableSection
Expandable
Expandable
Flex
Flex
Flex
FlexItem
Footer
Tier 1: Definitions
Dot
Footer
Font
FormControl
Form Field Group
Form
Form
Form Pill Group
Grid col
Linear Progress Indicator
SLDSProgressIndicator
Progress Wizard
SLDSPageHeader
SLDSBuilderHeader
Header
Header
Heading
Heading
Heading
Heading
Heading
Hero
WFP
11
Switch (selection control)
ThemeProvider
Icons
DayPickerRangeController
SLDSIcon
DayPickerSingleDateController
Interactions
bpk-component-image
Image
image
Image
Big message
Input
DRP - Input Props
InputField
Deprecated InputField
InputGroup
Label
LabelWrapper
bpk-component-label
Label
Label
Layouts
Layout
Layout
Layout
TimelineMarkerItem
Link
TextLink
List
List
Resource list
ListItem
ActionList

Listbox

Listbox
Listbox
Loading
Loading box
InlineLoading
Loading
InlineLoading
SLDSMenuDropdown
DropdownMenu
DropMenu
User Menu
Toolbar Menu
Modal
Modal
Modal
SLDSModal
Modal
Navigation
bpk-component-horizontal-nav
Top nav
NavigationStepper
Navigation

Notification

Notification
Page
Page Title
Page
Page

Pagination

View all (25)
Pagination
Pagination
Pagination
Pagination
Pagination
bpk-component-infinite-scroll
Pill
Display Pill Group
SLDSPill
FilterPill
SLDSPopover
Popover
Popover
bpk-component-popover
Progress
SLDSProgressRing
ProgressDots
LinearProgressBar
SLDSProgressBar
Radio
Radio
RadioField
RadioGroup
Radio Field
bpk-component-star-rating
bpk-component-rating
StarRating
SLDSPortalSettings
RatingStars
Search Dropdown
Query Search
Search
Search
Select
RichSelect
Select
Select
bpk-component-select

Separator

View all (10)
Step
Separator
Contextual save bar
Separator
SkeletonBar
Slider
Slider
Slider
RangeSlider
SLDSSlider
Inline Message
SLDSSpinner
Inline
Inline contol group
Inline Editing
Stack
Stack
Stack
Stack
Stack
Switch
Switch
Switch
Switch
ContentSwitcher
Compact Table
StatusBubble
SLDSDataTable
Index table
DataTable
SLDSTabs
Tabs
Tabs
ColoredTag
Tag
Tag
Tags
iq
10
TagGroup
Typography (text)
TextField
TextBox
Textbox
Text Field

Text field

View all (6)
Field
Fields
FieldMessage
GroupField
Dynamic fields
Text field
TextField
Textarea
Text Area
Text Field
Title Block
TitledToast
TitleBar
Title
Toast
SLDSToast
Toaster
Toast
Toggle
Toggle
Toggle
Toggle
Toggle
Tooltip
Tooltip
Tooltip
WithTooltip
Tooltip

Typography

View all (8)
Typography
Typography
Typography
Paragraph
Typography
Docs
Documentation
Add Storybook to your project in less than a minute to build components faster and easier.
reactvueangularweb-components
Tutorial
Tutorials
Learn Storybook with in-depth tutorials that teaches Storybook best practices. Follow along with code samples.
Learn Storybook now
Storybook
The MIT License (MIT). Website design by @domyen and the awesome Storybook community.
StorybookShowcaseDocsTutorialsAddonsBlogReleasesGet involvedUse casesSupportTeam
Subscribe
Get news, free tutorials, and Storybook tips emailed to you.

Maintained by
Chromatic
Continuous integration by
CircleCI
Hosting by
Netlify