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.

1147components4650storiesLast updated 9 months ago
Tweet
Add your component

Accordion

View all (9)
bpk-component-accordion
Skyscanner
9
Accordion
Carbon Design System
4
accordion
GitLab
2
accordion-item
GitLab
2

Alert

View all (10)
bpk-component-banner-alert
Skyscanner
17
alert
GitLab
8
Alert
PetSmart
7
Alert
JSTOR
5
CalloutAlert
Massachusetts Digital Services
2

Autocomplete

Avatar

View all (10)
SbAvatar
Storyblok
11
Avatar
Shopify
7
bpk-component-navigation-bar
Skyscanner
7
avatar
GitLab
5
SbAvatarGroup
Storyblok
3

Badge

View all (9)
Badge
PetSmart
14
Badge
Shopify
13
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 (9)
SbBreadcrumbs
Storyblok
5
Breadcrumbs
SpaceONE
5
Breadcrumb
Carbon Design System
4
bpk-component-breadcrumb
Skyscanner
3
breadcrumb
GitLab
2

Button

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

Calendar

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
Card
Shopify
22
LegacyCard
Shopify
18
Image Card
JSTOR
14
MediaCard
Shopify
9

Carousel

HorizontalOverflowCarousel
PetSmart
4
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 (18)
bpk-component-checkbox
Skyscanner
9
Checkbox
WFP
7
Checkbox
Shopify
6
Checkbox
SpaceONE
6
CheckboxField
PetSmart
6

Chip

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

Code

View all (23)
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
Shopify
3
Collapsible Panel
SpaceONE
3
Collapse
Grafana
2
Collapsible Toggle
SpaceONE
2

Color picker

Color
Narmi
5
ColorPicker
Shopify
4
Colors
Storyblok
1

Combobox

Combobox
Shopify
7
Combobox
JSTOR
6
Combobox
Narmi
5
ComboBox
Carbon Design System
4
form-combobox
GitLab
1

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 (6)
DialogWizard
AnyVision
5
Dialog
Narmi
4
bpk-component-dialog
Skyscanner
4
Logo
PetSmart
3
SbUploadDialog
Storyblok
1

Divider

VideoThumbnail
Shopify
4
Divider
Shopify
2
Divider
SpaceONE
2
Video
PetSmart
1
Divider
Massachusetts Digital Services
1

Drawer

Drawer
PetSmart
6
drawer
GitLab
4
Drawer
Grafana
4

Flex

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
Shopify
2
SbFormGroup
Storyblok
2
SbFormItem
Storyblok
2

Grid

View all (6)
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 (7)
Heading
PetSmart
14
Heading
JSTOR
3
ResultsHeading
Massachusetts Digital Services
2
unstable_Heading
Carbon Design System
1
CompHeading
Massachusetts Digital Services
1

Hero

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

Icon

View all (35)
DayPickerRangeController
AirBnb
37
DayPickerSingleDateController
AirBnb
21
Icon
PetSmart
11
bpk-component-icon
Skyscanner
10
Icon
Shopify
8

Image

View all (10)
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 (13)
chart-series-label
GitLab
7
bpk-component-label
Skyscanner
6
Label
PetSmart
4
labeled
GitLab
3
label
GitLab
3

Layout

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

Link

View all (18)
LinkList
PetSmart
7
bpk-component-link
Skyscanner
7
Link
JSTOR
5
Link
Shopify
4
TextLink
PetSmart
4

List

View all (39)
ResourceList
Shopify
19
ActionList
Shopify
10
ChoiceList
Shopify
7
OptionList
Shopify
7
MultiSelect
Carbon Design System
6

Listbox

Listbox
Shopify
7

Loading

View all (11)
SbLoading
Storyblok
7
InlineLoading
WFP
3
Loading
WFP
3
InlineLoading
Carbon Design System
2
Loading
Shopify
1

Menu

View all (8)
bpk-component-autosuggest
Skyscanner
8
Menu
AnyVision
7
OverflowMenu
Carbon Design System
3
bpk-component-blockquote
Skyscanner
3
ContextMenu
Carbon Design System
2

Modal

View all (22)
Modal
Shopify
16
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
19
Pages
kickstartDS
8
Page Title
SpaceONE
6
SkeletonPage
Shopify
5
PageActions
Shopify
4

Pagination

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

Pill

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

Popover

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

Progress

View all (8)
Progress Bar
SpaceONE
5
ProgressBar
Shopify
4
unstable_ProgressBar
Carbon Design System
4
bpk-component-progress
Skyscanner
4
Progress
AnyVision
3

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 (12)
Search Dropdown
SpaceONE
12
Query Search
SpaceONE
7
Search
Carbon Design System
5
Search
SpaceONE
5
filtered-search
GitLab
4

Select

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

Separator

ContextualSaveBar
Shopify
4
SkeletonBar
PetSmart
4
FullscreenBar
Shopify
3

Slider

View all (8)
IndexFilters
Shopify
13
RangeSlider
AnyVision
9
RangeSlider
Shopify
5
SbSlideover
Storyblok
4
Slider
Carbon Design System
4

Spinner

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

Stack

View all (6)
InlineStack
Shopify
18
BlockStack
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 (26)
IndexTable
Shopify
49
DataTable
Shopify
12
Data Table
SpaceONE
12
SbDataTable
Storyblok
11
Definition Table
SpaceONE
9

Tabs

View all (13)
tabs
GitLab
8
Tabs
Shopify
7
LegacyTabs
Shopify
6
Tabs
Narmi
6
Tabs
JSTOR
5

Tag

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

Text

View all (17)
TextField
AnyVision
17
Text
WFP
8
Textarea
SpaceONE
6
bpk-component-text
Skyscanner
6
bpk-component-textarea
Skyscanner
6

Text field

SbNumberField
Storyblok
1

Textarea

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

Title

LoginTitle
Agora
1
Tile
PetSmart
1

Toast

Toast
Shopify
9
Toast
JSTOR
5
toast
GitLab
3
Toast
SpaceONE
1

Toggle

View all (8)
SettingToggle
Shopify
3
SbToggle
Storyblok
3
Toggle
Narmi
3
Toggle
Carbon Design System
3
toggle
GitLab
2

Tooltip

View all (15)
Tooltip
Shopify
15
Tooltip
JSTOR
7
bpk-component-tooltip
Skyscanner
7
Tooltip
Carbon Design System
6
Tooltip
AnyVision
4

Typography

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