styled-system
Responsive, theme-based style props for building design systems with React
- Static
- Latest Patch
- Latest Minor
- Latest Major
- 5.1.5
- 5.1.4
- 5.1.2
- 5.1.1
- 5.1.0
- 5.0.23
- 5.0.21
- 5.0.20
- 5.0.18
- 5.0.16
- 5.0.15
- 5.0.14
- 5.0.12
- 5.0.10
- 5.0.6
- 5.0.5
- 5.0.4
- 5.0.3
- 5.0.2
- 5.0.1
- 5.0.0
- 4.2.4
- 4.2.3
- 4.2.2
- 4.2.1
- 4.2.0
- 4.1.0
- 4.0.8
- 4.0.7
- 4.0.6
- 4.0.5
- 4.0.4
- 4.0.3
- 4.0.2
- 4.0.1
- 4.0.0
- 3.2.1
- 3.2.0
- 3.1.12
- 3.1.11
- 3.1.10
- 3.1.9
- 3.1.8
- 3.1.7
- 3.1.6
- 3.1.5
- 3.1.4
- 3.1.3
- 3.1.2
- 3.1.1
- 3.1.0
- 3.0.4
- 3.0.3
- 3.0.2
- 3.0.1
- 3.0.0
- 2.3.6
- 2.3.5
- 2.3.4
- 2.3.3
- 2.3.2
- 2.3.1
- 2.3.0
- 2.2.9
- 2.2.8
- 2.2.7
- 2.2.6
- 2.2.5
- 2.2.4
- 2.2.3
- 2.2.2
- 2.2.1
- 2.2.0
- 2.1.2
- 2.1.1
- 2.1.0
- 2.0.2
- 2.0.1
- 2.0.0
- 1.1.7
- 1.1.6
- 1.1.5
- 1.1.4
- 1.1.3
- 1.1.2
- 1.1.1
- 1.1.0
- 1.0.8
- 1.0.7
- 1.0.6
- 1.0.5
- 1.0.4
- 1.0.3
- 1.0.2
- 1.0.1
- 1.0.0
- 5.0.0-alpha.0
- 5.0.0-12
- 5.0.0-11
- 5.0.0-8
- 5.0.0-7
- 5.0.0-5
- 5.0.0-4
- 5.0.0-3
- 5.0.0-2
- 5.0.0-1
- 4.2.0-0
- 4.1.0-0
- 4.0.0-0
- 3.1.3-0
- 3.1.2-6
- 3.1.2-5
- 3.1.2-4
- 3.1.2-3
- 3.1.2-2
- 3.1.2-1
- 3.1.2-0
- 3.1.0-3
- 3.1.0-2
- 3.1.0-1
- 3.1.0-0
- 3.0.0-5
- 3.0.0-4
- 3.0.0-3
- 3.0.0-2
- 3.0.0-1
- 3.0.0-0
- 2.2.5-0
- 2.0.0-3
- 2.0.0-2
- 2.0.0-1
- 2.0.0-0
- 1.0.8-0
- 1.0.0-15
- 1.0.0-14
- 1.0.0-13
- 1.0.0-12
- 1.0.0-11
- 1.0.0-10
- 1.0.0-9
- 1.0.0-8
- 1.0.0-7
- 1.0.0-6
- 1.0.0-5
- 1.0.0-4
- 1.0.0-3
- 1.0.0-2
- 1.0.0-1
- 1.0.0-0
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
"
"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."
"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."
"If you like Tachyons you will love styled-system. If you don't like Tachyons, you will love styled-system."
"Styled System is one of the best libraries I have ever used."
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, 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