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.

1247components4957storiesLast updated 8 months ago
Tweet
Add your component

Accordion

View all (9)
bpk-component-accordion
Skyscanner9
Accordion
Carbon Design System4
Accordion
PetSmart4
accordion
GitLab2
accordion-item
GitLab2

Alert

View all (10)
bpk-component-banner-alert
Skyscanner17
alert
GitLab8
Alert
PetSmart7
Alert
JSTOR5
CalloutAlert
Massachusetts Digital Services2

Autocomplete

Autocomplete
Shopify9
Auto Complete Search
SpaceONE6

Avatar

View all (10)
SbAvatar
Storyblok11
Avatar
Shopify7
bpk-component-navigation-bar
Skyscanner7
avatar
GitLab5
SbAvatarGroup
Storyblok3

Badge

View all (9)
Badge
PetSmart14
Badge
Shopify13
bpk-component-badge
Skyscanner12
SbBadge
Storyblok7
badge
GitLab5

Banner

View all (9)
Banner
Shopify15
PromoBanner
PetSmart9
Banner
AnyVision5
banner
GitLab5
BrandBanner
Massachusetts Digital Services2

Breadcrumb

View all (9)
SbBreadcrumbs
Storyblok5
Breadcrumbs
SpaceONE5
Breadcrumb
Carbon Design System4
bpk-component-breadcrumb
Skyscanner3
breadcrumb
GitLab2

Button

View all (51)
Button
PetSmart31
Button
Shopify24
button
GitLab21
bpk-component-button
Skyscanner21
bpk-component-loading-button
Skyscanner14

Calendar

View all (8)
DRP - Calendar Props
AirBnb33
SDP - Calendar Props
AirBnb28
bpk-component-calendar
Skyscanner20
bpk-component-scrollable-calendar
Skyscanner19
Dark
Capgemini16

Card

View all (20)
Product Card
PetSmart23
Card
Shopify22
LegacyCard
Shopify18
Image Card
JSTOR14
MediaCard
Shopify9

Carousel

HorizontalOverflowCarousel
PetSmart4
carousel
GitLab1
Carousel
PetSmart1

Chart

bpk-component-barchart
Skyscanner11
Dynamic Chart
SpaceONE4

Chat

View all (8)
ChatMessage
Agora1
ChatMessageList
Agora1
ChatMessages
Agora1
ChatPanel
Agora1
ChatTabTitle
Agora1

Checkbox

View all (18)
bpk-component-checkbox
Skyscanner9
Checkbox
WFP7
Checkbox
Shopify6
Checkbox
SpaceONE6
CheckboxField
PetSmart6

Chip

View all (9)
ChipsInput
AnyVision9
bpk-component-graphic-promotion
Skyscanner8
bpk-component-phone-input
Skyscanner8
bpk-component-chip
Skyscanner7
Chips
PetSmart5

Code

View all (23)
bpk-component-fieldset
Skyscanner13
bpk-component-datepicker
Skyscanner12
CloudStorageUploadItem
Agora7
bpk-component-nudger
Skyscanner7
bpk-component-slider
Skyscanner7

Collapse

View all (8)
Collapsible List
SpaceONE7
Collapsible Panel
SpaceONE3
Collapse
Grafana2
Collapsible Toggle
SpaceONE2
Collapsible
Shopify1

Color picker

Color
Narmi5
ColorPicker
Shopify4
Colors
Storyblok1

Combobox

Combobox
Shopify7
Combobox
JSTOR6
Combobox
Narmi5
ComboBox
Carbon Design System4
form-combobox
GitLab1

Context menu

Context Menu
SpaceONE14
Context Menu Item
SpaceONE6

Date picker

Datetime Picker
SpaceONE11
SbDatepicker
Storyblok7
DatePicker
Shopify6

Details

Item Detail
JSTOR1

Dialog

View all (6)
DialogWizard
AnyVision5
Dialog
Narmi4
bpk-component-dialog
Skyscanner4
Logo
PetSmart3
SbUploadDialog
Storyblok1

Divider

VideoThumbnail
Shopify4
Divider
Shopify2
Divider
SpaceONE2
Video
PetSmart1
Divider
Massachusetts Digital Services1

Drawer

Drawer
PetSmart6
drawer
GitLab4
Drawer
Grafana4

Flex

FilterBox
Massachusetts Digital Services1

Footer

View all (13)
Tier 1: Definitions
PetSmart8
Font
Narmi5
Font
Narmi5
Tier 2: Usage
PetSmart5
Footer
WFP4

Form

View all (11)
form-select
GitLab5
FormLayout
Shopify4
Form Controls
Palmetto4
Form
Shopify2
SbFormGroup
Storyblok2

Grid

View all (6)
Grid
Carbon Design System10
Progress Wizard
SpaceONE6
Grid Layout
SpaceONE5
bpk-component-grid
Skyscanner4
ProgressWithIndicator
AnyVision3

Header

View all (15)
Header
Massachusetts Digital Services6
PageHeader
PetSmart5
HeaderSearch
Massachusetts Digital Services2
HeaderHamburger
Massachusetts Digital Services2
HeaderSlim
Massachusetts Digital Services2

Heading

View all (7)
Heading
PetSmart14
Heading
JSTOR3
ResultsHeading
Massachusetts Digital Services2
unstable_Heading
Carbon Design System1
CompHeading
Massachusetts Digital Services1

Hero

Hero
WFP11
Hero
kickstartDS6
hover-load-directive
GitLab1
Hero
PetSmart1
TypeAheadDropdown
Massachusetts Digital Services1

Icon

View all (35)
DayPickerRangeController
AirBnb37
DayPickerSingleDateController
AirBnb21
Icon
PetSmart11
bpk-component-icon
Skyscanner10
Icon
Shopify8

Image

View all (10)
bpk-component-image
Skyscanner12
Lazy Image
SpaceONE5
ImagePromo
Massachusetts Digital Services3
TimeRangeInput
Grafana2
TimeRangePicker
Grafana2

Input

View all (33)
DRP - Input Props
AirBnb18
SDP - Input Props
AirBnb14
bpk-component-input
Skyscanner14
Input
SpaceONE11
Text Input
JSTOR6

Label

View all (13)
chart-series-label
GitLab7
bpk-component-label
Skyscanner6
Label
PetSmart4
labeled
GitLab3
label
GitLab3

Layout

View all (12)
Layout
Shopify7
Layout
JSTOR5
Layout
PetSmart4
AuthLayout
WFP3
VizLayout
Grafana2

Link

View all (18)
LinkList
PetSmart7
bpk-component-link
Skyscanner7
Link
JSTOR5
Link
Shopify4
TextLink
PetSmart4

List

View all (39)
ResourceList
Shopify19
ActionList
Shopify10
ChoiceList
Shopify7
OptionList
Shopify7
MultiSelect
Carbon Design System6

Listbox

Listbox
Shopify7

Loading

View all (12)
SbLoading
Storyblok7
Floating
Capgemini5
InlineLoading
WFP3
Loading
WFP3
InlineLoading
Carbon Design System2

Menu

View all (8)
bpk-component-autosuggest
Skyscanner8
Menu
AnyVision7
OverflowMenu
Carbon Design System3
bpk-component-blockquote
Skyscanner3
ContextMenu
Carbon Design System2

Modal

View all (22)
Modal
Shopify16
bpk-component-modal
Skyscanner12
SbModal
Storyblok9
ModalWrapper
WFP5
Modal
JSTOR4

Nav

View all (21)
bpk-component-horizontal-nav
Skyscanner11
StepNavigation
WFP4
unstable_TreeView
Carbon Design System3
UtilityNav
Massachusetts Digital Services3
bpk-component-navigation-stack
Skyscanner3

Notification

SbNotification
Storyblok4
Notification
PetSmart1

Page

View all (13)
Page
Shopify19
Pages
kickstartDS8
Page Title
SpaceONE6
SkeletonPage
Shopify5
PageActions
Shopify4

Pagination

View all (16)
bpk-component-pagination
Skyscanner6
Pagination
Shopify5
pagination
GitLab5
Pagination
PetSmart5
SbPagination
Storyblok4

Pill

bpk-component-infinite-scroll
Skyscanner10
FilterPill
Grafana2

Popover

View all (9)
bpk-component-popover
Skyscanner11
Popover
Shopify10
bpk-component-overlay
Skyscanner8
Popover
JSTOR5
popover
GitLab3

Progress

View all (8)
Progress Bar
SpaceONE5
ProgressBar
Shopify4
unstable_ProgressBar
Carbon Design System4
bpk-component-progress
Skyscanner4
Progress
AnyVision3

Radio

View all (11)
RadioField
PetSmart12
bpk-component-radio
Skyscanner7
Radio
SpaceONE6
Radio Group
JSTOR4
RadioButtons
Narmi4

Rating

bpk-component-star-rating
Skyscanner11
bpk-component-rating
Skyscanner6
StarRating
PetSmart4

Search

View all (12)
Search Dropdown
SpaceONE12
Query Search
SpaceONE7
Search
Carbon Design System5
Search
SpaceONE5
filtered-search
GitLab4

Select

View all (21)
SbSelect
Storyblok18
SelectField
PetSmart17
bpk-component-select
Skyscanner12
Select
Grafana11
Select
Shopify9

Separator

ContextualSaveBar
Shopify4
SkeletonBar
PetSmart4
FullscreenBar
Shopify3

Slider

View all (8)
IndexFilters
Shopify13
RangeSlider
AnyVision9
RangeSlider
Shopify5
SbSlideover
Storyblok4
Slider
Carbon Design System4

Spinner

Spinner
Shopify4
Spinner
AnyVision3
bpk-component-spinner
Skyscanner3
InlineError
Shopify1
Spinner
Grafana1

Stack

View all (6)
InlineStack
Shopify18
BlockStack
Shopify12
stacked-column-chart
GitLab8
LegacyStack
Shopify7
StatsPicker
Grafana1

Switch

Switch
AnyVision3
ContentSwitcher
WFP3
bpk-component-switch
Skyscanner3
ContentSwitcher
Carbon Design System2
Switch
Grafana2

Table

View all (26)
IndexTable
Shopify48
DataTable
Shopify12
Data Table
SpaceONE12
SbDataTable
Storyblok11
Definition Table
SpaceONE9

Tabs

View all (13)
tabs
GitLab8
Tabs
Shopify7
LegacyTabs
Shopify6
Tabs
Narmi6
Tabs
JSTOR5

Tag

View all (16)
Tag
Shopify8
DateRangePicker (DRP)
AirBnb8
Tag
Carbon Design System5
Tag
SpaceONE4
Tag
Narmi3

Text

View all (17)
TextField
AnyVision17
Text
WFP8
Textarea
SpaceONE6
bpk-component-text
Skyscanner6
bpk-component-textarea
Skyscanner6

Text field

SbNumberField
Storyblok1

Textarea

View all (12)
TextField
Shopify29
TextField
PetSmart19
Text
Shopify9
Textarea
JSTOR6
SbTextField
Storyblok6

Title

LoginTitle
Agora1
Tile
PetSmart1

Toast

Toast
Shopify9
Toast
JSTOR5
toast
GitLab3
Toast
SpaceONE1

Toggle

View all (8)
SettingToggle
Shopify3
SbToggle
Storyblok3
Toggle
Narmi3
Toggle
Carbon Design System3
toggle
GitLab2

Tooltip

View all (15)
Tooltip
Shopify15
Tooltip
JSTOR7
bpk-component-tooltip
Skyscanner7
Tooltip
Carbon Design System6
Tooltip
AnyVision4

Typography

Typography
JSTOR12
Typography
Storyblok1
Typography
Grafana1
typography
Massachusetts Digital Services1