styled-system
Design system utilities for styled-components and other css-in-js libraries
npm i styled-systemFeatures
- Add style props that hook into your own theme
- Responsive prop values for quickly setting responsive font-size, margin, padding, width, and more
- Influenced by constraint-based design system principles
- Typographic scale
- Spacing scale for margin and padding
- Default 8px grid
- Works with any color palette
- Works with most css-in-js libraries, including styled-components, glamorous, emotion, fela, and cxs
- Used in Rebass, Grid Styled, and the Priceline Design System
"This is honestly my favourite way to build UI components right now
"
"The future of css-in-js is going to look something like styled-system with its responsive values."
"Coming from @tachyons_css, the styled-system utilities from @jxnblk is the missing link I’ve been looking for."
"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."
Try It Out
Try the examples on CodeSandbox
Table of Contents
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, width, fontSize, color } from 'styled-system'
// Add styled-system functions to your component
const Box = styled.div`
${space}
${width}
${fontSize}
${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='grays.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
- API
- Table of Style Functions
- Custom Props
- Troubleshooting