Styled System

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

[![stars][]][github]
[![Build Status][circleci-badge]][circleci]
[![Downloads][]][npm]
[![Version][]][npm]
[![spectrum-badge][]][spectrum]
![size][]
![MIT License][license]
[![system-ui/theme][system-ui-badge]](https://system-ui.com/theme)

[version]: https://flat.badgen.net/npm/v/styled-system
[downloads]: https://flat.badgen.net/npm/dm/styled-system
[license]: https://flat.badgen.net/badge/license/MIT/blue
[stars]: https://flat.badgen.net/github/stars/styled-system/styled-system
[size]: https://flat.badgen.net/bundlephobia/minzip/styled-system
[spectrum-badge]: https://flat.badgen.net/badge/spectrum/community/purple
[system-ui-badge]: https://flat.badgen.net/badge/system-ui/theme/black
[npm]: https://npmjs.com/package/styled-system
[github]: https://github.com/styled-system/styled-system
[spectrum]: https://spectrum.chat/styled-system
[circleci]: https://circleci.com/gh/styled-system/styled-system
[circleci-badge]: https://flat.badgen.net/circleci/github/styled-system/styled-system/master

``sh
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][emotion]
- Used in Rebass, Reflexbox, and the Priceline Design System

> "This is honestly my favourite way to build UI components right now ![party parrot][party-parrot]"
>
> – [Varun Vachhar][varun-post]

[party-parrot]: https://github.com/jmhobbs/cultofthepartyparrot.com/raw/master/parrots/parrot.gif

> "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][markdalgleish]

> "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][david-tweet]

> "If you like Tachyons you will love styled-system. If you don't like Tachyons, you will love styled-system."
>
> – [Adam Morse][mrmrs]

> "Styled System is one of the best libraries I have ever used."
>
> – Miha Sedej

[mrmrs]: https://mobile.twitter.com/mrmrs_/status/913189805055401984

Try It Out

Try the examples on CodeSandbox

- Basic Example
- Emotion

$3

- Usage
- Docs
- Further Reading
- Built with Styled System
- Related

Usage

`jsx
// 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.

`jsx
// width: 50%


// font-size: 20px (theme.fontSizes[4])


// margin: 16px (theme.space[2])


// padding: 32px (theme.space[3])


// color


// color: #333 (theme.colors.gray[0])


// background color

`

Responsive Style Props

Set responsive width, margin, padding, font-size, and other properties with a shorthand array syntax.
Read more

`jsx
// responsive width


// responsive font-size


// responsive margin


// responsive padding

``

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][varun-post]
- [Build Better Component Libraries with Styled System][alan-b-smith-post]
- 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

- System UI
- Spectrum.Chat Community
- [styled-components][]
- [emotion][]

[styled-components]: https://github.com/styled-components/styled-components
[emotion]: https://github.com/emotion-js/emotion
[varun-post]: https://varun.ca/styled-system/
[alan-b-smith-post]: https://medium.com/styled-components/build-better-component-libraries-with-styled-system-4951653d54ee
[david-tweet]: https://mobile.twitter.com/davidyeiser/status/965920740582285312

[cole-tweet]: https://mobile.twitter.com/colebemis/status/996565848138526721
[mrmrs-elements]: https://github.com/mrmrs/elements
[broccs-react-starter]: https://github.com/broccolini/react-website-starter
[markdalgleish]: https://mobile.twitter.com/markdalgleish/status/1107732365474848768
[varun vachhar]: https://mobile.twitter.com/winkerVSbecks/status/955619873463431168

MIT License