Skip to content
⬢ Style props for rapid UI development
Branch: master
Clone or download
jxnblk Merge pull request #460 from kevinSuttle/patch-2
Fix typo in Removing props from HTML guide
Latest commit 7c95fe4 Apr 19, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
docs Merge pull request #460 from kevinSuttle/patch-2 Apr 19, 2019
examples Fix createGlobalStyle in Basic Example Mar 27, 2019
src rearrange borderWidth and borderStyle Mar 21, 2019
test rearrange borderWidth and borderStyle Mar 21, 2019
.gitignore
.npmignore Edit npmignore Mar 23, 2019
.prettierrc feat(space): allow nested objects in space Dec 24, 2018
.travis.yml Adjust travis config Feb 24, 2019
CHANGELOG.md Edit changelog Mar 22, 2019
CODE_OF_CONDUCT.md
CONTRIBUTING.md Edit contributing doc Feb 26, 2019
LICENSE.md
README.md Update Rebass Grid's link in README.md Apr 17, 2019
babel.config.js Add babel runtime Sep 14, 2018
package-lock.json 4.1.1 Mar 30, 2019
package.json 4.1.1 Mar 30, 2019
props.js Add array of prop names Mar 27, 2019

README.md

Styled System

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

stars Build Status Downloads Version spectrum-badge size MIT License system-ui/theme

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, Rebass Grid, and the Priceline Design System

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

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

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='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


Further Reading

Built with Styled System

Related

MIT License

You can’t perform that action at this time.