styled-system
Design system utilities for styled-components, glamorous, and other css-in-js libraries
$ npm install styled-system
SYNC missed versions from
official npm registry.
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
Related
Current Tags
- 5.0.0-alpha.0 ... alpha (5 years ago)
- 5.1.5 ... latest (5 years ago)
- 5.0.0-12 ... next (5 years ago)
149 Versions
- 5.1.5 ... 5 years ago
- 5.1.4 ... 5 years ago
- 5.1.2 ... 5 years ago
- 5.1.1 ... 5 years ago
- 5.1.0 ... 5 years ago
- 5.0.23 ... 5 years ago
- 5.0.21 ... 5 years ago
- 5.0.20 ... 5 years ago
- 5.0.18 ... 5 years ago
- 5.0.16 ... 5 years ago
- 5.0.15 ... 5 years ago
- 5.0.14 ... 5 years ago
- 5.0.12 ... 5 years ago
- 5.0.10 ... 5 years ago
- 5.0.6 ... 5 years ago
- 5.0.5 ... 5 years ago
- 5.0.4 ... 5 years ago
- 5.0.3 ... 5 years ago
- 5.0.2 ... 5 years ago
- 5.0.1 ... 5 years ago
- 5.0.0 ... 5 years ago
- 5.0.0-12 ... 5 years ago
- 5.0.0-11 ... 5 years ago
- 5.0.0-8 ... 5 years ago
- 4.2.4 ... 5 years ago
- 5.0.0-7 ... 5 years ago
- 5.0.0-alpha.0 ... 5 years ago
- 5.0.0-5 ... 5 years ago
- 5.0.0-4 ... 5 years ago
- 5.0.0-3 ... 5 years ago
- 5.0.0-2 ... 5 years ago
- 5.0.0-1 ... 5 years ago
- 4.2.3 ... 5 years ago
- 4.2.2 ... 6 years ago
- 4.2.1 ... 6 years ago
- 4.2.0 ... 6 years ago
- 4.2.0-0 ... 6 years ago
- 4.1.0 ... 6 years ago
- 4.1.0-0 ... 6 years ago
- 4.0.8 ... 6 years ago
- 4.0.7 ... 6 years ago
- 4.0.6 ... 6 years ago
- 4.0.5 ... 6 years ago
- 4.0.4 ... 6 years ago
- 4.0.3 ... 6 years ago
- 4.0.2 ... 6 years ago
- 4.0.1 ... 6 years ago
- 4.0.0 ... 6 years ago
- 4.0.0-0 ... 6 years ago
- 3.2.1 ... 6 years ago
- 3.2.0 ... 6 years ago
- 3.1.12 ... 6 years ago
- 3.1.11 ... 6 years ago
- 3.1.10 ... 6 years ago
- 3.1.9 ... 6 years ago
- 3.1.8 ... 6 years ago
- 3.1.7 ... 6 years ago
- 3.1.6 ... 6 years ago
- 3.1.5 ... 6 years ago
- 3.1.4 ... 6 years ago
- 3.1.3 ... 6 years ago
- 3.1.3-0 ... 6 years ago
- 3.1.2 ... 6 years ago
- 3.1.2-6 ... 6 years ago
- 3.1.2-5 ... 6 years ago
- 3.0.4 ... 6 years ago
- 3.1.2-4 ... 6 years ago
- 3.1.2-3 ... 6 years ago
- 3.1.2-2 ... 6 years ago
- 3.1.2-1 ... 6 years ago
- 3.1.2-0 ... 6 years ago
- 3.1.1 ... 6 years ago
- 3.1.0 ... 6 years ago
- 3.0.3 ... 6 years ago
- 3.1.0-3 ... 6 years ago
- 3.1.0-2 ... 6 years ago
- 3.1.0-1 ... 6 years ago
- 3.1.0-0 ... 6 years ago
- 3.0.2 ... 6 years ago
- 3.0.1 ... 6 years ago
- 3.0.0 ... 6 years ago
- 3.0.0-5 ... 6 years ago
- 3.0.0-4 ... 6 years ago
- 3.0.0-3 ... 6 years ago
- 2.3.6 ... 6 years ago
- 3.0.0-2 ... 6 years ago
- 2.3.5 ... 6 years ago
- 2.3.4 ... 6 years ago
- 3.0.0-1 ... 6 years ago
- 3.0.0-0 ... 6 years ago
- 2.3.3 ... 6 years ago
- 2.3.2 ... 6 years ago
- 2.3.1 ... 6 years ago
- 2.3.0 ... 6 years ago
- 2.2.9 ... 6 years ago
- 2.2.8 ... 6 years ago
- 2.2.7 ... 6 years ago
- 2.2.6 ... 6 years ago
- 2.2.5 ... 7 years ago
- 2.2.5-0 ... 7 years ago
- 2.2.4 ... 7 years ago
- 2.2.3 ... 7 years ago
- 2.2.2 ... 7 years ago
- 2.2.1 ... 7 years ago
- 2.2.0 ... 7 years ago
- 2.1.2 ... 7 years ago
- 2.1.1 ... 7 years ago
- 2.1.0 ... 7 years ago
- 2.0.2 ... 7 years ago
- 2.0.1 ... 7 years ago
- 2.0.0 ... 7 years ago
- 2.0.0-3 ... 7 years ago
- 2.0.0-2 ... 7 years ago
- 2.0.0-1 ... 7 years ago
- 2.0.0-0 ... 7 years ago
- 1.1.7 ... 7 years ago
- 1.1.6 ... 7 years ago
- 1.1.5 ... 7 years ago
- 1.1.4 ... 7 years ago
- 1.1.3 ... 7 years ago
- 1.1.2 ... 7 years ago
- 1.1.1 ... 7 years ago
- 1.1.0 ... 7 years ago
- 1.0.8 ... 7 years ago
- 1.0.8-0 ... 7 years ago
- 1.0.7 ... 7 years ago
- 1.0.6 ... 7 years ago
- 1.0.5 ... 7 years ago
- 1.0.4 ... 7 years ago
- 1.0.3 ... 7 years ago
- 1.0.2 ... 7 years ago
- 1.0.1 ... 7 years ago
- 1.0.0 ... 7 years ago
- 1.0.0-15 ... 7 years ago
- 1.0.0-14 ... 7 years ago
- 1.0.0-13 ... 7 years ago
- 1.0.0-12 ... 7 years ago
- 1.0.0-11 ... 7 years ago
- 1.0.0-10 ... 7 years ago
- 1.0.0-9 ... 7 years ago
- 1.0.0-8 ... 7 years ago
- 1.0.0-7 ... 7 years ago
- 1.0.0-6 ... 7 years ago
- 1.0.0-5 ... 7 years ago
- 1.0.0-4 ... 7 years ago
- 1.0.0-3 ... 7 years ago
- 1.0.0-2 ... 7 years ago
- 1.0.0-1 ... 7 years ago
- 1.0.0-0 ... 7 years ago
Maintainers (1)
jxnblk
Downloads
Total
11
Today
0
This Week
0
This Month
0
Last Day
0
Last Week
0
Last Month
0
Dependencies (0)
None
Dev Dependencies (17)
- ava ^0.19.1
- babel-cli ^6.24.1
- babel-core ^6.25.0
- babel-loader ^7.0.0
- babel-preset-env ^1.5.2
- babel-preset-react ^6.24.1
- babel-register ^6.24.1
- funcup ^1.0.0-0
- grid-styled ^2.0.0-2
- react ^15.6.0
- react-dom ^15.6.0
- react-live ^1.6.1
- react-test-renderer ^15.5.4
- react-x-ray ^1.0.0-2
- styled-components ^2.1.0
- webpack ^2.6.1
- webpack-dev-server ^2.4.5