View showcase

Styled components 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.

354components956storiesLast updated today
Tweet
Add your component

Accordion

Accordion
kiwicom
5
Accordion

Alert

Alert
Alert
Alert

Autocomplete

Avatar

NavigationBar
Avatar
AvatarToken
Avatar
AvatarStack
Badge
NotificationBadge
BadgeList
Badge
UserBadge

Banner

CallOutBanner
EnvironmentBanner

Breadcrumb

Breadcrumbs
Breadcrumbs
Button
Button
Button
ButtonLink
SocialButton

Card

Card
PictureCard

Carousel

useFocusZone

Chat

BarChart
LineChart
AnalyticsChart
CategoriesChart

Checkbox

CheckBox
Checkbox
Checkbox
Checkbox

Chip

ChoiceGroup

Code

ApplicationUpdateNotification

Collapse

Collapse
Collapsable

Color picker

Color

Date picker

Date time drop

Dialog

ConfirmationDialog
Dialog
Dialog
MobileDialogPrimtive

Drawer

Drawer
Drawer
FormControl
ErrorForms Kitchensink
How to layout forms
Formatters
Form

Grid

Grid
Grid

Header

Header
On Header

Heading

Heading

Hero

ThemeProvider
TypographyOverflow
Icon
Design component API
Icons
Notification
Introduction

Image

Image
InputField
Deprecated InputField
InputGroup
Text Input
Deprecated InputGroup

Label

IssueLabelToken
Label
No label
Value Label

Layout

Layout
PageLayout
How to layout a page

Link

TextLink
SkipLink
Link
ActionList
List
ListChoice
NavList
List

Loading

Loading

Menu

Menu

Modal

Modal
Modal
Modal
PromptModal

Nav

SkipNavigation

Page

PageHead
Page
PageSidebar
Number middle pages

Pagination

Pagination
Pagination

Pill

AirportIllustration
SmartPassIllustration
Fill

Popover

Popover

Progress

ProgressBar
ProgressBar

Radio

Radio
Radio
Radio

Rating

RatingStars
Creating examples
Rating
Thin
Select
Deprecated Select
SelectPanel
Select
MonthSelect

Separator

Separator

Slider

Slider
Slider

Spinner

Inline

Stack

Stack

Switch

Switch
Switch

Table

PricingTable
Table
Table

Tabs

Tabs
Tabs, Tab
Tabs with icons

Tag

CountryFlag
How to use spacings
Tag
Text
Textarea
Deprecated Textarea
RichText
RichTextEditor

Text field

Dynamic fields
Field states

Textarea

Textarea

Title

TitleBar

Toast

Toast

Tooltip

Tooltip
TooltipPrimitive
Tooltip
Tooltip

Typography

Typography
Docs
Documentation
Add Storybook to your project in less than a minute to build components faster and easier.
reactvueangularweb-components
Tutorial
Tutorials
Learn Storybook with in-depth tutorials that teaches Storybook best practices. Follow along with code samples.
Learn Storybook now
Storybook
The MIT License (MIT). Website design by @domyen and the awesome Storybook community.
StorybookShowcaseDocsTutorialsAddonsBlogReleasesGet involvedUse casesSupportTeam
Subscribe
Get news, free tutorials, and Storybook tips emailed to you.

Maintained by
Chromatic
Continuous integration by
CircleCI
Hosting by
Netlify