New
Styling Addon: configure styles and themes in StorybookAutomate with Chromatic
Storybook Day 2023
Star77,677
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.

1198components4494storiesLast updated 3 months ago
Tweet
Add your component

Accordion

View all (9)
Accordion
Monday.com
4
Accordion
Carbon Design System
4
accordion
GitLab
2
accordion-item
GitLab
2

Alert

View all (10)
alert
GitLab
8
AlertBanner
Monday.com
7
Alert
PetSmart
7
Alert
JSTOR
5
CalloutAlert
Massachusetts Digital Services
2

Autocomplete

Avatar

View all (10)
SbAvatar
Storyblok
11
Avatar
Monday.com
8
Avatar
Shopify
7
avatar
GitLab
5
SbAvatarGroup
Storyblok
3

Badge

View all (9)
Badge
PetSmart
14
Badge
Shopify
12
SbBadge
Storyblok
7
badge
GitLab
5
Badges
SpaceONE
4

Banner

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

Breadcrumb

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

Button

View all (56)
Button
PetSmart
29
button
GitLab
21
Button
Shopify
19
Button
Monday.com
11
SbButton
Storyblok
11

Calendar

DRP - Calendar Props
AirBnb
33
SDP - Calendar Props
AirBnb
28

Card

View all (20)
Product Card
PetSmart
23
Card
Shopify
17
LegacyCard
Shopify
17
Image Card
JSTOR
13
Select Card
SpaceONE
9

Carousel

HorizontalOverflowCarousel
PetSmart
3
carousel
GitLab
1
Carousel
PetSmart
1

Chart

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 (20)
Checkbox
WFP
7
Checkbox
Capgemini
7
CheckboxGroup
Capgemini
7
Checkbox
SpaceONE
6
CheckboxField
PetSmart
6

Chip

View all (7)
ChipsInput
AnyVision
9
Chips
Monday.com
5
Chips
PetSmart
5
chart-tooltip
GitLab
4
Chip
AnyVision
3

Code

View all (15)
CloudStorageUploadItem
Agora
7
CodeSnippet
Carbon Design System
6
CloudStorageFileTitle
Agora
5
CloudStorageFileList
Agora
4
CloudStorageUploadTitle
Agora
4

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
5

Details

Details
Capgemini
3
Item Detail
JSTOR
1

Dialog

View all (6)
DialogWizard
AnyVision
5
Dialog
Narmi
4
DialogContentContainer
Monday.com
3
SbUploadDialog
Storyblok
1
Dialog
AnyVision
1

Divider

View all (7)
MenuDivider
Monday.com
3
Divider
Monday.com
2
VideoThumbnail
Shopify
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
Form Controls
Palmetto
4
FormLayout
Shopify
3
Form
Shopify
2
SbFormGroup
Storyblok
2

Grid

View all (7)
Grid
Carbon Design System
10
Progress Wizard
SpaceONE
6
Grid Layout
SpaceONE
5
ProgressWithIndicator
AnyVision
3
ProgressIndicator
Carbon Design System
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 (11)
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 (34)
DayPickerRangeController
AirBnb
37
DayPickerSingleDateController
AirBnb
21
Icon
PetSmart
11
Icon
Monday.com
6
Icon Toggle
PetSmart
6

Image

View all (10)
Lazy Image
SpaceONE
5
ImagePromo
Massachusetts Digital Services
3
TimeRangeInput
Grafana
2
TimeRangePicker
Grafana
2
Image
Massachusetts Digital Services
2

Input

View all (34)
DRP - Input Props
AirBnb
18
SDP - Input Props
AirBnb
14
Input
SpaceONE
11
Text Input
JSTOR
6
TextInput
Narmi
6

Label

View all (13)
chart-series-label
GitLab
7
Label
Monday.com
4
Label
PetSmart
4
labeled
GitLab
3
label
GitLab
3

Layout

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

Link

View all (17)
LinkList
PetSmart
7
Link
Monday.com
6
Link
JSTOR
5
Link
Shopify
4
TextLink
PetSmart
4

List

View all (43)
ResourceList
Shopify
16
ActionList
Shopify
8
MultiSelect
Carbon Design System
6
paginated-list
GitLab
6
List
WFP
6

Listbox

Listbox
Shopify
5

Loading

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

Menu

View all (9)
Menu
AnyVision
7
Menu
Monday.com
5
MenuItem
Monday.com
5
OverflowMenu
Carbon Design System
3
MenuTitle
Monday.com
2

Modal

View all (21)
Modal
Shopify
11
SbModal
Storyblok
9
ModalWrapper
WFP
5
Modal
JSTOR
4
ComposedModal
Carbon Design System
4

Nav

View all (18)
StepNavigation
WFP
4
unstable_TreeView
Carbon Design System
3
UtilityNav
Massachusetts Digital Services
3
Content Navigation
kickstartDS
2
MainNavigation
WFP
2

Notification

SbNotification
Storyblok
4
Notification
PetSmart
1

Page

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

Pagination

View all (15)
pagination
GitLab
5
Pagination
PetSmart
5
SbPagination
Storyblok
4
Pagination
Shopify
3
Pagination
Carbon Design System
3

Pill

FilterPill
Grafana
2

Popover

View all (6)
Popover
Shopify
6
popover
GitLab
3
Popover
Narmi
2
Popovers
Grafana
2
Popover
SpaceONE
2

Progress

View all (9)
LinearProgressBar
Monday.com
6
Progress Bar
SpaceONE
5
ProgressBar
Shopify
4
unstable_ProgressBar
Carbon Design System
4
Progress
AnyVision
3

Radio

View all (10)
RadioField
PetSmart
12
Radio
SpaceONE
6
RadioGroup
Capgemini
6
Radio Group
JSTOR
4
RadioButtons
Narmi
4

Rating

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 (21)
SbSelect
Storyblok
18
SelectField
PetSmart
17
Select
Grafana
11
Select Dropdown
SpaceONE
9
Select
Capgemini
9

Separator

SkeletonBar
PetSmart
4
ContextualSaveBar
Shopify
3
FullscreenBar
Shopify
2

Slider

View all (8)
Slider
Monday.com
9
RangeSlider
AnyVision
9
RangeSlider
Shopify
5
SbSlideover
Storyblok
4
Slider
Carbon Design System
4

Spinner

Inline
Shopify
16
Spinner
Shopify
3
Spinner
AnyVision
3
InlineError
Shopify
1
Spinner
Grafana
1

Stack

View all (6)
AlphaStack
Shopify
12
stacked-column-chart
GitLab
8
Stack
Shopify
7
LegacyStack
Shopify
7
StatsPicker
Grafana
1

Switch

Switch
AnyVision
3
ContentSwitcher
WFP
3
ContentSwitcher
Carbon Design System
2
Switch
Grafana
2

Table

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

Tabs

View all (16)
tabs
GitLab
8
Tabs
Monday.com
6
Tabs
Narmi
6
Tabs
JSTOR
5
SbTabs
Storyblok
5

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 (18)
TextField
AnyVision
17
Text
WFP
8
TextField
Monday.com
7
Textarea
SpaceONE
6
Text Media
kickstartDS
4

Text field

SbNumberField
Storyblok
1

Textarea

View all (14)
TextField
Shopify
20
TextField
PetSmart
19
Text
Shopify
7
Textarea
JSTOR
6
TextStyle
Shopify
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
Toggle
Capgemini
5
SettingToggle
Shopify
3
SbToggle
Storyblok
3
Toggle
Narmi
3

Tooltip

View all (16)
Tooltip
Shopify
11
Tooltip
JSTOR
7
Tooltip
Carbon Design System
6
Tooltip
Monday.com
5
Tooltip
AnyVision
4

Typography

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