Styled System

Responsive, theme-based style props for building design systems with React https://styled-system.com

npm i styled-system

Features

• Add style props that hook into your own theme
• Quickly set responsive font-size, margin, padding, width, and more with props
• Influenced by constraint-based design system principles
• Typographic scale
• Spacing scale for margin and padding
• Works with any color palette
• Works with most css-in-js libraries, including styled-components & emotion
• Used in Rebass, Reflexbox, and the Priceline Design System

"This is honestly my favourite way to build UI components right now "

– Varun Vachhar

"If you haven't seen Styled System before, do yourself a favour and check it out. It's been a huge influence in my thinking on component-oriented styles."

– Mark Dalgleish

"The future of css-in-js is going to look something like styled-system with its responsive values."

– Kye Hohenberger

"Coming from @tachyons_css, the styled-system utilities from @jxnblk is the missing link I’ve been looking for."

– Nathan Young

"If you make websites/apps with React check out Styled System if you haven't already. You will be amazed at how much faster you can build."

– David Yeiser

"If you like Tachyons you will love styled-system. If you don't like Tachyons, you will love styled-system."

– Adam Morse

"Styled System is one of the best libraries I have ever used."

– Miha Sedej

Try It Out

Try the examples on CodeSandbox

• Basic Example
• Emotion

Table of Contents

• Usage
• Docs
• Further Reading
• Built with Styled System
• Related

Usage

// Example uses styled-components, but styled-system works with most other css-in-js libraries as well
import styled from 'styled-components'
import { space, layout, typography, color } from 'styled-system'
 
// Add styled-system functions to your component
const Box = styled.div`
  ${space}
  ${layout}
  ${typography}
  ${color}
`

Each style function exposes its own set of component props that handle styles based on values defined in a theme.

// width: 50%
<Box width={1/2} />
 
// font-size: 20px (theme.fontSizes[4])
<Box fontSize={4} />
 
// margin: 16px (theme.space[2])
<Box m={2} />
 
// padding: 32px (theme.space[3])
<Box p={3} />
 
// color
<Box color='tomato' />
 
// color: #333 (theme.colors.gray[0])
<Box color='gray.0' />
 
// background color
<Box bg='tomato' />

Responsive Style Props

Set responsive width, margin, padding, font-size, and other properties with a shorthand array syntax. Read more

// responsive width
<Box width={[ 1, 1/2, 1/4 ]} />
 
// responsive font-size
<Box fontSize={[ 2, 3, 4 ]} />
 
// responsive margin
<Box m={[ 1, 2, 3 ]} />
 
// responsive padding
<Box p={[ 1, 2, 3 ]} />

To learn more, see the Getting Started guide or read the docs.

Docs

• Getting Started
• Responsive Styles
• How it Works
• Custom Props
• Variants
• API
• Reference Table
• Packages
• Guides
• @styled-system/css

Further Reading

• Component Based Design System With Styled-System
• Build Better Component Libraries with Styled System
• Building a beautiful, reusable button with Styled System
• Defining Component APIs in React
• The Three Tenets of Styled System

Built with Styled System

• Primer Components
• Priceline Design System
• Cloudflare Design Color
• Styled System HTML
• Rebass
• Reflexbox
• @datepicker-react/styled

Related

• System UI
• Spectrum.Chat Community
• styled-components
• emotion

MIT License