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.

478components1035storiesLast updated yesterday
Tweet
Add your component

Accordion

AccordionPanel
SmartHR4
Accordion
Toptal1
Anchor
react95.io1

Alert

Alert
Toptal1
Alert
React951

Autocomplete

Autocomplete
GitHub10
InlineAutocomplete
GitHub3
CompactInformationPanel
SmartHR2
Autocomplete
Toptal1

Avatar

View all (6)
Avatar
React953
AvatarToken
GitHub3
Avatar
Kay Pacha2
Avatar
Toptal1
AvatarStack
GitHub1

Badge

Badge
Toptal1
UserBadge
Toptal1
Badge
Grommet1

Banner

Phase banner
GOV.UK2
EnvironmentBanner
Toptal1
BranchName
GitHub1

Breadcrumb

Breadcrumbs
Toptal1
Section break
GOV.UK1
Breadcrumbs
GOV.UK1

Button

View all (20)
Button
GitHub8
Button
GOV.UK8
Button
kickstartDS7
Button
SmartHR4
Button
react95.io4

Calendar

Calendar
SmartHR1

Card

Card Subcomponents
Kay Pacha3
Card
Kay Pacha2

Carousel

useFocusZone
GitHub8

Checkbox

View all (6)
Checkbox
React956
Checkbox
GOV.UK6
Checkbox
GitHub4
Checkbox
react95.io2
Checkbox
Toptal1

Code

ApplicationUpdateNotification
Toptal1

Collapse

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

Dialog
SmartHR14
ConfirmationDialog
GitHub3
Dialog
GitHub3
SmartHRLogo
SmartHR1

Divider

MarkdownViewer
GitHub3
Divider
Kay Pacha2

Drawer

Drawer
Toptal1

Footer

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

Form

View all (12)
Form group
GOV.UK5
How to layout forms
Toptal1
Formatters
Toptal1
Form
Grommet1
Format
Grommet1

Grid

Grid
Toptal1

Header

PageHeader
GitHub1
Header
Grommet1
On Header
Grommet1
Header
SmartHR1
Header
kickstartDS1

Heading

Heading
GOV.UK4
Heading
SmartHR1

Hero

Hero
kickstartDS6
TypographyOverflow
Toptal1

Icon

View all (13)
Icon
SmartHR5
Icon
Kay Pacha2
Design component API
Toptal1
Icons
Toptal1
Notification
Toptal1

Image

Image
Kay Pacha2
Image
Toptal1
Image
SmartHR1

Input

View all (15)
TextInputWithTokens
GitHub6
TextInput
GitHub5
Input field
GOV.UK4
Input
SmartHR2
ColorInput
react95.io2

Label

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

Layout

PageLayout
GitHub7
Layout
SmartHR5
SplitPageLayout
GitHub2
How to layout a page
Toptal1

Link

View all (7)
Link
GitHub2
Back link
GOV.UK2
Link
GOV.UK2
Skip link
GOV.UK2
Link
Kay Pacha2

List

View all (12)
ActionList
GitHub11
ActionList
GitHub5
Ordered list
GOV.UK5
NavList
GitHub4
Unordered list
GOV.UK4

Loading

Loading box
GOV.UK5
Loading
Kay Pacha1

Menu

Menu
Toptal1

Modal

Modal
React952
Modal
Toptal1
PromptModal
Toptal1

Nav

View all (7)
Top nav
GOV.UK9
TabNav
GitHub2
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
SmartHR2
Pagination
Toptal1

Pill

Fill
Grommet1

Progress

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

Radio

Radio
GOV.UK9
Radio
react95.io2
Radio
Toptal1
Radio
GitHub1

Rating

Creating examples
Toptal1
Rating
Toptal1
Thin
Grommet1

Search

Search box
GOV.UK1
Search
GOV.UK1

Select

View all (10)
SelectPanel
GitHub8
Select
GOV.UK4
Select
react95.io3
Select
GitHub2
MonthSelect
Toptal1

Separator

AppBar
react95.io1
Separator
react95.io1

Slider

Slider
react95.io2
Slider
Toptal1

Spinner

Inline
Grommet1
Spinner
GOV.UK1

Switch

Switch
Toptal1

Table

Table
GOV.UK5
Table
Toptal1
DataTable
GitHub1
Table
SmartHR1
Table
react95.io1

Tabs

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

Tag

Tag
GOV.UK5
How to use spacings
Toptal1
Tag
Toptal1

Text

Text Media
kickstartDS4
RichText
Toptal1
RichTextEditor
Toptal1
TextArea
React951

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

Tooltip

Tooltip
SmartHR2
Tooltip
Toptal1
Tooltip
React951
Tooltip
react95.io1

Typography

Paragraph
GOV.UK4
Typography
Kay Pacha2
Typography
Toptal1