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
kiwicom5
AccordionPanel
SmartHR4
Accordion
Toptal1
Anchor
react95.io1

Alert

Alert
kiwicom11
Alert
Toptal1
Alert
React951

Autocomplete

Autocomplete
GitHub10
InlineAutocomplete
GitHub3
CompactInformationPanel
SmartHR2
Autocomplete
Toptal1

Avatar

View all (7)
NavigationBar
kiwicom3
Avatar
React953
AvatarToken
GitHub3
Avatar
Kay Pacha2
Avatar
Toptal1

Badge

View all (6)
Badge
kiwicom16
NotificationBadge
kiwicom13
BadgeList
kiwicom4
Badge
Toptal1
UserBadge
Toptal1

Banner

CallOutBanner
kiwicom3
Phase banner
GOV.UK2
EnvironmentBanner
Toptal1

Breadcrumb

Breadcrumbs
kiwicom4
Breadcrumbs
Toptal1
Section break
GOV.UK1
Breadcrumbs
GOV.UK1

Button

View all (23)
Button
GitHub13
Button
kiwicom10
Button
GitHub8
Button
GOV.UK8
ButtonLink
kiwicom7

Calendar

Calendar
SmartHR1

Card

Card
kiwicom13
PictureCard
kiwicom7
Card Subcomponents
Kay Pacha3
Card
Kay Pacha2

Carousel

useFocusZone
GitHub8

Checkbox

View all (7)
CheckBox
kiwicom7
Checkbox
React956
Checkbox
GOV.UK5
Checkbox
GitHub4
Checkbox
react95.io2

Chip

ChoiceGroup
kiwicom6

Code

ApplicationUpdateNotification
Toptal1

Collapse

Grid col
GOV.UK9
Collapse
kiwicom7
All
Grommet1
Collapsable
Grommet1
ScrollView
react95.io1

Color picker

Color
Grommet1

Combobox

ComboBox
SmartHR2

Date picker

Date time drop
Grommet1
DatePicker
SmartHR1
DatePicker__UNSTABLE
react95.io1

Details

Details
GOV.UK3

Dialog

View all (6)
Dialog
SmartHR14
ConfirmationDialog
GitHub3
Dialog
GitHub3
Dialog
kiwicom2
MobileDialogPrimtive
kiwicom1

Divider

MarkdownViewer
GitHub3
Divider
Kay Pacha2

Drawer

Drawer
kiwicom8
Drawer
Toptal1

Footer

Footer
GOV.UK10
Document Footer Metadata
GOV.UK3
Footer
kickstartDS1

Form

View all (13)
ErrorForms Kitchensink
kiwicom6
Form group
GOV.UK5
How to layout forms
Toptal1
Formatters
Toptal1
Form
Grommet1

Grid

Grid
Toptal1
Grid
kiwicom1

Header

Header
Grommet1
On Header
Grommet1
Header
SmartHR1
Header
kickstartDS1

Heading

Heading
kiwicom12
Heading
GOV.UK4
Heading
SmartHR1

Hero

Hero
kickstartDS6
ThemeProvider
kiwicom3
TypographyOverflow
Toptal1

Icon

View all (15)
Icon
SmartHR5
Icon
kiwicom4
Icon
Kay Pacha2
Design component API
Toptal1
Icons
Toptal1

Image

Image
Kay Pacha2
Image
Toptal1
Image
SmartHR1

Input

View all (22)
InputField
kiwicom18
Deprecated InputField
kiwicom18
InputGroup
kiwicom8
Deprecated InputGroup
kiwicom7
InputFile
kiwicom6

Label

View all (7)
IssueLabelToken
GitHub3
Label
GOV.UK2
Label
GitHub1
No label
Grommet1
Value Label
Grommet1

Layout

PageLayout
GitHub6
Layout
kiwicom5
Layout
SmartHR5
SplitPageLayout
GitHub2
How to layout a page
Toptal1

Link

View all (8)
TextLink
kiwicom8
SkipLink
kiwicom2
Back link
GOV.UK2
Link
GOV.UK2
Skip link
GOV.UK2

List

View all (14)
ActionList
GitHub11
List
kiwicom6
ListChoice
kiwicom5
ActionList
GitHub5
Ordered list
GOV.UK5

Loading

Loading
kiwicom6
Loading box
GOV.UK5
Loading
Kay Pacha1

Menu

Menu
Toptal1

Modal

Modal
kiwicom8
Modal
React952
Modal
Toptal1
PromptModal
Toptal1

Nav

View all (7)
Top nav
GOV.UK9
SkipNavigation
kiwicom2
Content Navigation
kickstartDS2
UnderlineNav
GitHub1
UnderlineNav.Item
GitHub1

Notification

NotificationBar
SmartHR1

Page

View all (6)
Pages
kickstartDS8
Page
GOV.UK4
PageHead
Toptal1
Page
Toptal1
PageSidebar
Toptal1

Pagination

Pagination
GOV.UK10
Pagination
kiwicom4
Pagination
SmartHR2
Pagination
Toptal1

Pill

AirportIllustration
kiwicom2
SmartPassIllustration
kiwicom2
Fill
Grommet1

Popover

Popover
kiwicom14

Progress

ProgressBar
react95.io3
ProgressBar
Toptal1
ProgressBar
React951
[TBD] ProgressBar
SmartHR1

Radio

Radio
kiwicom8
Radio
GOV.UK8
Radio
react95.io2
Radio
Toptal1
Radio
GitHub1

Rating

RatingStars
kiwicom2
Creating examples
Toptal1
Rating
Toptal1
Thin
Grommet1

Search

Search box
GOV.UK1
Search
GOV.UK1

Select

View all (12)
Select
kiwicom9
Deprecated Select
kiwicom9
SelectPanel
GitHub8
Select
GOV.UK4
Select
react95.io3

Separator

Separator
kiwicom3
AppBar
react95.io1
Separator
react95.io1

Slider

Slider
kiwicom12
Slider
react95.io2
Slider
Toptal1

Spinner

Inline
Grommet1
Spinner
GOV.UK1

Stack

Stack
kiwicom11

Switch

Switch
kiwicom4
Switch
Toptal1

Table

View all (6)
PricingTable
kiwicom6
Table
kiwicom6
Table
GOV.UK5
Table
Toptal1
Table
SmartHR1

Tabs

Tabs
GOV.UK8
Tabs
react95.io2
Tabs
Toptal1
Tabs, Tab
React951
Tabs with icons
Grommet1

Tag

Tag
GOV.UK5
Tag
kiwicom3
CountryFlag
kiwicom2
How to use spacings
Toptal1
Tag
Toptal1

Text

View all (7)
Text
kiwicom7
Textarea
kiwicom7
Deprecated Textarea
kiwicom7
Text Media
kickstartDS4
RichText
Toptal1

Text field

Dynamic fields
Grommet1
Field states
Grommet1
FieldSet
SmartHR1

Textarea

View all (8)
Textarea
GOV.UK3
Textarea
SmartHR2
Inset text
GOV.UK2
Warning text
GOV.UK2
Textarea
GitHub1

Title

TitleBar
React953

Toast

Toast
kiwicom3

Tooltip

View all (6)
Tooltip
kiwicom8
TooltipPrimitive
kiwicom8
Tooltip
SmartHR2
Tooltip
Toptal1
Tooltip
React951

Typography

Paragraph
GOV.UK4
Typography
Kay Pacha2
Typography
Toptal1