New
Automatic visual tests in Storybook, plus 2.2x faster build times for React+TSVisual test with Chromatic
Star80,420
Back to overview
Add your project

Sass components

Sass is a styling format that is compiled into CSS. It extends CSS with advanced features like scripting, mixins, and nesting.

1307components5106storiesLast updated last month
Tweet
Add your component

Accordion

View all (10)
bpk-component-accordion
Skyscanner
9
Accordion
Monday.com
4
Accordion
Carbon Design System
4
accordion
GitLab
2

Alert

View all (11)
bpk-component-banner-alert
Skyscanner
17
alert
GitLab
8
AlertBanner
Monday.com
7
Alert
PetSmart
7
Alert
JSTOR
5

Autocomplete

Avatar

View all (11)
SbAvatar
Storyblok
11
Avatar
Shopify
9
Avatar
Monday.com
8
bpk-component-navigation-bar
Skyscanner
7
avatar
GitLab
5

Badge

View all (10)
Badge
PetSmart
14
Badge
Shopify
12
bpk-component-badge
Skyscanner
12
SbBadge
Storyblok
7
badge
GitLab
5

Banner

View all (9)
Banner
Shopify
15
PromoBanner
PetSmart
9
Banner
AnyVision
5
banner
GitLab
5
BrandBanner
Massachusetts Digital Services
2

Breadcrumb

View all (11)
SbBreadcrumbs
Storyblok
5
Breadcrumbs
SpaceONE
5
BreadcrumbsBar
Monday.com
4
Breadcrumb
Carbon Design System
4
BreadcrumbItem
Monday.com
3

Button

View all (58)
Button
PetSmart
31
Button
Shopify
22
button
GitLab
21
bpk-component-button
Skyscanner
21
bpk-component-loading-button
Skyscanner
14

Calendar

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

Card

View all (20)
Product Card
PetSmart
23
LegacyCard
Shopify
18
Image Card
JSTOR
14
MediaCard
Shopify
9
Select Card
SpaceONE
9

Carousel

HorizontalOverflowCarousel
PetSmart
3
carousel
GitLab
1
Carousel
PetSmart
1

Chart

bpk-component-barchart
Skyscanner
11
Dynamic Chart
SpaceONE
4

Chat

View all (8)
ChatMessage
Agora
1
ChatMessageList
Agora
1
ChatMessages
Agora
1
ChatPanel
Agora
1
ChatTabTitle
Agora
1

Checkbox

View all (19)
bpk-component-checkbox
Skyscanner
9
Checkbox
WFP
7
Checkbox
SpaceONE
6
CheckboxField
PetSmart
6
Checkbox
JSTOR
5

Chip

View all (10)
ChipsInput
AnyVision
9
bpk-component-graphic-promotion
Skyscanner
8
bpk-component-phone-input
Skyscanner
8
bpk-component-chip
Skyscanner
7
Chips
Monday.com
5

Code

View all (24)
bpk-component-fieldset
Skyscanner
13
bpk-component-datepicker
Skyscanner
12
CloudStorageUploadItem
Agora
7
bpk-component-nudger
Skyscanner
7
bpk-component-slider
Skyscanner
7

Collapse

View all (8)
Collapsible List
SpaceONE
7
Collapsible Panel
SpaceONE
3
Collapse
Grafana
2
Collapsible Toggle
SpaceONE
2
Collapsible
Shopify
1

Color picker

Color
Narmi
5
ColorPicker
Shopify
4
Colors
Storyblok
1

Combobox

View all (6)
Combo box
Monday.com
10
Combobox
JSTOR
6
Combobox
Shopify
6
Combobox
Narmi
5
ComboBox
Carbon Design System
4

Context menu

Context Menu
SpaceONE
14
Context Menu Item
SpaceONE
6

Date picker

Datetime Picker
SpaceONE
11
SbDatepicker
Storyblok
7
DatePicker
Shopify
6

Details

Item Detail
JSTOR
1

Dialog

View all (7)
DialogWizard
AnyVision
5
Dialog
Narmi
4
bpk-component-dialog
Skyscanner
4
DialogContentContainer
Monday.com
3
SbUploadDialog
Storyblok
1

Divider

View all (7)
VideoThumbnail
Shopify
4
MenuDivider
Monday.com
3
Divider
Monday.com
2
Divider
Shopify
2
Divider
SpaceONE
2

Drawer

Drawer
PetSmart
6
drawer
GitLab
4
Drawer
Grafana
4

Flex

Flex
Monday.com
8
FilterBox
Massachusetts Digital Services
1

Footer

View all (13)
Tier 1: Definitions
PetSmart
8
Font
Narmi
5
Font
Narmi
5
Tier 2: Usage
PetSmart
5
Footer
WFP
4

Form

View all (11)
form-select
GitLab
5
FormLayout
Shopify
4
Form Controls
Palmetto
4
Form
Shopify
2
SbFormGroup
Storyblok
2

Grid

View all (8)
Grid
Carbon Design System
10
Progress Wizard
SpaceONE
6
Grid Layout
SpaceONE
5
bpk-component-grid
Skyscanner
4
ProgressWithIndicator
AnyVision
3

Header

View all (15)
Header
Massachusetts Digital Services
6
PageHeader
PetSmart
5
HeaderSearch
Massachusetts Digital Services
2
HeaderHamburger
Massachusetts Digital Services
2
HeaderSlim
Massachusetts Digital Services
2

Heading

View all (9)
Heading
PetSmart
14
Heading
Monday.com
5
Heading
JSTOR
3
EditableHeading
Monday.com
3
ResultsHeading
Massachusetts Digital Services
2

Hero

Hero
WFP
11
Hero
kickstartDS
6
hover-load-directive
GitLab
1
Hero
PetSmart
1
TypeAheadDropdown
Massachusetts Digital Services
1

Icon

View all (37)
DayPickerRangeController
AirBnb
37
DayPickerSingleDateController
AirBnb
21
Icon
PetSmart
11
bpk-component-icon
Skyscanner
10
Icon
Monday.com
6

Image

View all (11)
bpk-component-image
Skyscanner
12
Lazy Image
SpaceONE
5
ImagePromo
Massachusetts Digital Services
3
TimeRangeInput
Grafana
2
TimeRangePicker
Grafana
2

Input

View all (33)
DRP - Input Props
AirBnb
18
SDP - Input Props
AirBnb
14
bpk-component-input
Skyscanner
14
Input
SpaceONE
11
Text Input
JSTOR
6

Label

View all (14)
chart-series-label
GitLab
7
bpk-component-label
Skyscanner
6
Label
Monday.com
4
Label
PetSmart
4
labeled
GitLab
3

Layout

View all (12)
Layout
Shopify
7
Layout
JSTOR
5
Layout
PetSmart
4
AuthLayout
WFP
3
VizLayout
Grafana
2

Link

View all (19)
LinkList
PetSmart
7
bpk-component-link
Skyscanner
7
Link
Monday.com
6
Link
JSTOR
5
Link
Shopify
4

List

View all (45)
ResourceList
Shopify
16
ActionList
Shopify
9
OptionList
Shopify
7
MultiSelect
Carbon Design System
6
paginated-list
GitLab
6

Listbox

Listbox
Shopify
7

Loading

View all (12)
SbLoading
Storyblok
7
Floating
Capgemini
5
InlineLoading
WFP
3
Loading
WFP
3
InlineLoading
Carbon Design System
2

Menu

View all (11)
bpk-component-autosuggest
Skyscanner
8
Menu
AnyVision
7
Menu
Monday.com
5
MenuItem
Monday.com
5
OverflowMenu
Carbon Design System
3

Modal

View all (22)
Modal
Shopify
15
bpk-component-modal
Skyscanner
12
SbModal
Storyblok
9
ModalWrapper
WFP
5
Modal
JSTOR
4

Nav

View all (21)
bpk-component-horizontal-nav
Skyscanner
11
StepNavigation
WFP
4
unstable_TreeView
Carbon Design System
3
UtilityNav
Massachusetts Digital Services
3
bpk-component-navigation-stack
Skyscanner
3

Notification

SbNotification
Storyblok
4
Notification
PetSmart
1

Page

View all (13)
Page
Shopify
17
Pages
kickstartDS
8
Page Title
SpaceONE
6
SkeletonPage
Shopify
5
PageActions
Shopify
4

Pagination

View all (16)
bpk-component-pagination
Skyscanner
6
pagination
GitLab
5
Pagination
PetSmart
5
SbPagination
Storyblok
4
Pagination
Shopify
3

Pill

bpk-component-infinite-scroll
Skyscanner
10
FilterPill
Grafana
2

Popover

View all (9)
bpk-component-popover
Skyscanner
11
Popover
Shopify
9
bpk-component-overlay
Skyscanner
8
Popover
JSTOR
5
popover
GitLab
3

Progress

View all (9)
LinearProgressBar
Monday.com
6
Progress Bar
SpaceONE
5
ProgressBar
Shopify
4
unstable_ProgressBar
Carbon Design System
4
bpk-component-progress
Skyscanner
4

Radio

View all (11)
RadioField
PetSmart
12
bpk-component-radio
Skyscanner
7
Radio
SpaceONE
6
Radio Group
JSTOR
4
RadioButtons
Narmi
4

Rating

bpk-component-star-rating
Skyscanner
11
bpk-component-rating
Skyscanner
6
StarRating
PetSmart
4

Search

View all (13)
Search Dropdown
SpaceONE
12
Query Search
SpaceONE
7
Search
Carbon Design System
5
Search
SpaceONE
5
filtered-search
GitLab
4

Select

View all (20)
SbSelect
Storyblok
18
SelectField
PetSmart
17
bpk-component-select
Skyscanner
12
Select
Grafana
11
Select Dropdown
SpaceONE
9

Separator

SkeletonBar
PetSmart
4
ContextualSaveBar
Shopify
3
FullscreenBar
Shopify
3

Slider

View all (9)
Slider
Monday.com
9
RangeSlider
AnyVision
9
RangeSlider
Shopify
5
IndexFilters
Shopify
5
SbSlideover
Storyblok
4

Spinner

Spinner
Shopify
4
Spinner
AnyVision
3
bpk-component-spinner
Skyscanner
3
InlineError
Shopify
1
Spinner
Grafana
1

Stack

View all (6)
HorizontalStack
Shopify
16
VerticalStack
Shopify
12
stacked-column-chart
GitLab
8
LegacyStack
Shopify
7
StatsPicker
Grafana
1

Switch

Switch
AnyVision
3
ContentSwitcher
WFP
3
bpk-component-switch
Skyscanner
3
ContentSwitcher
Carbon Design System
2
Switch
Grafana
2

Table

View all (25)
IndexTable
Shopify
29
Data Table
SpaceONE
12
DataTable
Shopify
11
SbDataTable
Storyblok
11
Definition Table
SpaceONE
9

Tabs

View all (15)
tabs
GitLab
8
Tabs
Shopify
7
Tabs
Monday.com
6
LegacyTabs
Shopify
6
Tabs
Narmi
6

Tag

View all (16)
DateRangePicker (DRP)
AirBnb
8
Tag
Shopify
6
Tag
Carbon Design System
5
Tag
SpaceONE
4
Tag
Narmi
3

Text

View all (20)
TextField
AnyVision
17
Text
WFP
8
TextField
Monday.com
7
Textarea
SpaceONE
6
bpk-component-text
Skyscanner
6

Text field

SbNumberField
Storyblok
1

Textarea

View all (12)
TextField
Shopify
22
TextField
PetSmart
19
Text
Shopify
9
Textarea
JSTOR
6
SbTextField
Storyblok
6

Title

LoginTitle
Agora
1
Tile
PetSmart
1

Toast

Toast
Monday.com
6
Toast
JSTOR
5
Toast
Shopify
5
toast
GitLab
3
Toast
SpaceONE
1

Toggle

View all (9)
Toggle
Monday.com
5
SettingToggle
Shopify
3
SbToggle
Storyblok
3
Toggle
Narmi
3
Toggle
Carbon Design System
3

Tooltip

View all (16)
Tooltip
Shopify
14
Tooltip
JSTOR
7
bpk-component-tooltip
Skyscanner
7
Tooltip
Carbon Design System
6
Tooltip
Monday.com
5

Typography

Typography
JSTOR
12
Typography
Storyblok
1
Typography
Grafana
1
typography
Massachusetts Digital Services
1