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."
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