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.

455components997storiesLast updated 6 months ago
Tweet
Add your component

Accordion

AccordionPanel
SmartHR
4
Accordion
Toptal
1
Anchor
react95.io
1

Alert

Alert
Toptal
1

Autocomplete

InlineAutocomplete
GitHub
3
CompactInformationPanel
SmartHR
2
Autocomplete
Toptal
1

Avatar

AvatarToken
GitHub
3
Avatar
Kay Pacha2
Avatar
Toptal
1
AvatarStack
GitHub
1
Avatar
react95.io
1

Badge

Badge
Toptal
1
UserBadge
Toptal
1
Badge
Grommet
1

Banner

Phase banner
GOV.UK
2
EnvironmentBanner
Toptal
1
BranchName
GitHub
1

Breadcrumb

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

Button

View all (18)
Button
GitHub
8
Button
GOV.UK
8
Button
kickstartDS
7
Button
SmartHR
4
Button
react95.io
4

Calendar

Calendar
SmartHR
1

Card

Card Subcomponents
Kay Pacha3
Card
Kay Pacha2

Carousel

useFocusZone
GitHub
8

Checkbox

Checkbox
GOV.UK
6
Checkbox
GitHub
4
Checkbox
react95.io
2
Checkbox
Toptal
1
CheckBox
SmartHR
1

Code

ApplicationUpdateNotification
Toptal
1

Collapse

Grid col
GOV.UK
9
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

Dialog
SmartHR
14
ConfirmationDialog
GitHub
3
Dialog
GitHub
3
SmartHRLogo
SmartHR
1

Divider

MarkdownViewer
GitHub
3
Divider
Kay Pacha2

Drawer

Drawer
Toptal
1

Footer

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

Form

View all (12)
Form group
GOV.UK
5
How to layout forms
Toptal
1
Formatters
Toptal
1
Form
Grommet
1
Format
Grommet
1

Grid

Grid
Toptal
1

Header

PageHeader
GitHub
1
Header
Grommet
1
On Header
Grommet
1
Header
SmartHR
1
Header
kickstartDS
1

Heading

Heading
GOV.UK
4
Heading
SmartHR
1

Hero

Hero
kickstartDS
6
TypographyOverflow
Toptal
1

Icon

View all (12)
Icon
SmartHR
5
Icon
Kay Pacha2
Design component API
Toptal
1
Icons
Toptal
1
Notification
Toptal
1

Image

Image
Kay Pacha2
Image
Toptal
1
Image
SmartHR
1

Input

View all (14)
TextInputWithTokens
GitHub
6
TextInput
GitHub
5
Input field
GOV.UK
4
Input
SmartHR
2
ColorInput
react95.io
2

Label

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

Layout

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

Link

View all (7)
Link
GitHub
2
Back link
GOV.UK
2
Link
GOV.UK
2
Skip link
GOV.UK
2
Link
Kay Pacha2

List

View all (11)
ActionList
GitHub
11
ActionList
GitHub
5
Ordered list
GOV.UK
5
NavList
GitHub
4
Unordered list
GOV.UK
4

Loading

Loading box
GOV.UK
5
Loading
Kay Pacha1

Menu

Menu
Toptal
1

Modal

Modal
Toptal
1
PromptModal
Toptal
1

Nav

View all (7)
Top nav
GOV.UK
9
TabNav
GitHub
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
SmartHR
2
Pagination
Toptal
1

Pill

Fill
Grommet
1

Progress

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

Radio

Radio
GOV.UK
9
Radio
react95.io
2
Radio
Toptal
1
Radio
GitHub
1

Rating

Creating examples
Toptal
1
Rating
Toptal
1
Thin
Grommet
1

Search

Search box
GOV.UK
1
Search
GOV.UK
1

Select

View all (10)
SelectPanel
GitHub
8
Select
GOV.UK
4
Select
react95.io
3
Select
GitHub
2
MonthSelect
Toptal
1

Separator

AppBar
react95.io
1
Separator
react95.io
1

Slider

Slider
react95.io
2
Slider
Toptal
1

Spinner

Inline
Grommet
1
Spinner
GOV.UK
1

Switch

Switch
Toptal
1

Table

Table
GOV.UK
5
Table
Toptal
1
DataTable
GitHub
1
Table
SmartHR
1
Table
react95.io
1

Tabs

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

Tag

Tag
GOV.UK
5
How to use spacings
Toptal
1
Tag
Toptal
1

Text

Text Media
kickstartDS
4
RichText
Toptal
1
RichTextEditor
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

Tooltip

Tooltip
SmartHR
2
Tooltip
Toptal
1
Tooltip
react95.io
1

Typography

Paragraph
GOV.UK
4
Typography
Kay Pacha2
Typography
Toptal
1