New
Storybook for full-stack developersAutomate with Chromatic
Star75,281
Back to overview
Add your project

Styled components

Styled-components is a styling library that allows you to write styles in JavaScript at the component-level. This technique is known as CSS-in-JS.

545components1450storiesLast updated 13 days ago
Tweet
Add your component

Accordion

Accordion
kiwicom
5
AccordionPanel
SmartHR
4
Accordion
Toptal
1
Anchor
react95.io
1

Alert

Alert
kiwicom
11
Alert
Toptal
1
Alert
React95
1

Autocomplete

InlineAutocomplete
GitHub
3
CompactInformationPanel
SmartHR
2
Autocomplete
Toptal
1

Avatar

View all (7)
NavigationBar
kiwicom
3
Avatar
React95
3
AvatarToken
GitHub
3
Avatar
Kay Pacha2
Avatar
Toptal
1

Badge

View all (6)
Badge
kiwicom
16
NotificationBadge
kiwicom
13
BadgeList
kiwicom
4
Badge
Toptal
1
UserBadge
Toptal
1

Banner

CallOutBanner
kiwicom
3
Phase banner
GOV.UK
2
EnvironmentBanner
Toptal
1

Breadcrumb

Breadcrumbs
kiwicom
4
Breadcrumbs
Toptal
1
Section break
GOV.UK
1
Breadcrumbs
GOV.UK
1

Button

View all (23)
Button
GitHub
13
Button
kiwicom
10
Button
GitHub
8
Button
GOV.UK
8
ButtonLink
kiwicom
7

Calendar

Calendar
SmartHR
1

Card

Card
kiwicom
13
PictureCard
kiwicom
7
Card Subcomponents
Kay Pacha3
Card
Kay Pacha2

Carousel

useFocusZone
GitHub
8

Checkbox

View all (7)
CheckBox
kiwicom
7
Checkbox
React95
6
Checkbox
GOV.UK
5
Checkbox
GitHub
4
Checkbox
react95.io
2

Chip

ChoiceGroup
kiwicom
6

Code

ApplicationUpdateNotification
Toptal
1

Collapse

Grid col
GOV.UK
9
Collapse
kiwicom
7
All
Grommet
1
Collapsable
Grommet
1
ScrollView
react95.io
1

Color picker

Color
Grommet
1

Combobox

ComboBox
SmartHR
2

Date picker

Date time drop
Grommet
1
DatePicker
SmartHR
1
DatePicker__UNSTABLE
react95.io
1

Details

Details
GOV.UK
3

Dialog

View all (6)
Dialog
SmartHR
14
ConfirmationDialog
GitHub
3
Dialog
GitHub
3
Dialog
kiwicom
2
MobileDialogPrimtive
kiwicom
1

Divider

MarkdownViewer
GitHub
3
Divider
Kay Pacha2

Drawer

Drawer
kiwicom
8
Drawer
Toptal
1

Footer

Footer
GOV.UK
10
Document Footer Metadata
GOV.UK
3
Footer
kickstartDS
1

Form

View all (13)
ErrorForms Kitchensink
kiwicom
6
Form group
GOV.UK
5
How to layout forms
Toptal
1
Formatters
Toptal
1
Form
Grommet
1

Grid

Grid
Toptal
1
Grid
kiwicom
1

Header

Header
Grommet
1
On Header
Grommet
1
Header
SmartHR
1
Header
kickstartDS
1

Heading

Heading
kiwicom
12
Heading
GOV.UK
4
Heading
SmartHR
1

Hero

Hero
kickstartDS
6
ThemeProvider
kiwicom
3
TypographyOverflow
Toptal
1

Icon

View all (15)
Icon
SmartHR
5
Icon
kiwicom
4
Icon
Kay Pacha2
Design component API
Toptal
1
Icons
Toptal
1

Image

Image
Kay Pacha2
Image
Toptal
1
Image
SmartHR
1

Input

View all (22)
InputField
kiwicom
18
Deprecated InputField
kiwicom
18
InputGroup
kiwicom
8
Deprecated InputGroup
kiwicom
7
InputFile
kiwicom
6

Label

View all (7)
IssueLabelToken
GitHub
3
Label
GOV.UK
2
Label
GitHub
1
No label
Grommet
1
Value Label
Grommet
1

Layout

PageLayout
GitHub
6
Layout
kiwicom
5
Layout
SmartHR
5
SplitPageLayout
GitHub
2
How to layout a page
Toptal
1

Link

View all (8)
TextLink
kiwicom
8
SkipLink
kiwicom
2
Back link
GOV.UK
2
Link
GOV.UK
2
Skip link
GOV.UK
2

List

View all (14)
ActionList
GitHub
11
List
kiwicom
6
ListChoice
kiwicom
5
ActionList
GitHub
5
Ordered list
GOV.UK
5

Loading

Loading
kiwicom
6
Loading box
GOV.UK
5
Loading
Kay Pacha1

Menu

Menu
Toptal
1

Modal

Modal
kiwicom
8
Modal
React95
2
Modal
Toptal
1
PromptModal
Toptal
1

Nav

View all (7)
Top nav
GOV.UK
9
SkipNavigation
kiwicom
2
Content Navigation
kickstartDS
2
UnderlineNav
GitHub
1
UnderlineNav.Item
GitHub
1

Notification

NotificationBar
SmartHR
1

Page

View all (6)
Pages
kickstartDS
8
Page
GOV.UK
4
PageHead
Toptal
1
Page
Toptal
1
PageSidebar
Toptal
1

Pagination

Pagination
GOV.UK
10
Pagination
kiwicom
4
Pagination
SmartHR
2
Pagination
Toptal
1

Pill

AirportIllustration
kiwicom
2
SmartPassIllustration
kiwicom
2
Fill
Grommet
1

Popover

Popover
kiwicom
14

Progress

ProgressBar
react95.io
3
ProgressBar
Toptal
1
ProgressBar
React95
1
[TBD] ProgressBar
SmartHR
1

Radio

Radio
kiwicom
8
Radio
GOV.UK
8
Radio
react95.io
2
Radio
Toptal
1
Radio
GitHub
1

Rating

RatingStars
kiwicom
2
Creating examples
Toptal
1
Rating
Toptal
1
Thin
Grommet
1

Search

Search box
GOV.UK
1
Search
GOV.UK
1

Select

View all (12)
Select
kiwicom
9
Deprecated Select
kiwicom
9
SelectPanel
GitHub
8
Select
GOV.UK
4
Select
react95.io
3

Separator

Separator
kiwicom
3
AppBar
react95.io
1
Separator
react95.io
1

Slider

Slider
kiwicom
12
Slider
react95.io
2
Slider
Toptal
1

Spinner

Inline
Grommet
1
Spinner
GOV.UK
1

Stack

Stack
kiwicom
11

Switch

Switch
kiwicom
4
Switch
Toptal
1

Table

View all (6)
PricingTable
kiwicom
6
Table
kiwicom
6
Table
GOV.UK
5
Table
Toptal
1
Table
SmartHR
1

Tabs

Tabs
GOV.UK
8
Tabs
react95.io
2
Tabs
Toptal
1
Tabs, Tab
React95
1
Tabs with icons
Grommet
1

Tag

Tag
GOV.UK
5
Tag
kiwicom
3
CountryFlag
kiwicom
2
How to use spacings
Toptal
1
Tag
Toptal
1

Text

View all (7)
Text
kiwicom
7
Textarea
kiwicom
7
Deprecated Textarea
kiwicom
7
Text Media
kickstartDS
4
RichText
Toptal
1

Text field

Dynamic fields
Grommet
1
Field states
Grommet
1
FieldSet
SmartHR
1

Textarea

View all (8)
Textarea
GOV.UK
3
Textarea
SmartHR
2
Inset text
GOV.UK
2
Warning text
GOV.UK
2
Textarea
GitHub
1

Title

TitleBar
React95
3

Toast

Toast
kiwicom
3

Tooltip

View all (6)
Tooltip
kiwicom
8
TooltipPrimitive
kiwicom
8
Tooltip
SmartHR
2
Tooltip
Toptal
1
Tooltip
React95
1

Typography

Paragraph
GOV.UK
4
Typography
Kay Pacha2
Typography
Toptal
1