Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/styled-system/styled-system

⬢ Style props for rapid UI development
https://github.com/styled-system/styled-system

colors css css-in-js design-systems emotion layout react responsive style-props styled-components styling theming tokens typography

Last synced: 3 days ago
JSON representation

⬢ Style props for rapid UI development

Awesome Lists containing this project

README 

        



# 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](https://rebassjs.org), [Reflexbox](https://rebassjs.org/reflexbox/), and the [Priceline Design System](https://github.com/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](https://mobile.twitter.com/kyehohenberger/status/905474043729416192)



> "Coming from @tachyons_css, the styled-system utilities from @jxnblk is the missing link I’ve been looking for."


>

> – [Nathan Young](https://mobile.twitter.com/nathanyoung/status/891353221880360960)



> "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](https://tresko.dev/theming-react-datepicker-datepicker-react-styled)



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



## Try It Out



Try the [examples](examples) on CodeSandbox



- [Basic Example](https://codesandbox.io/s/github/styled-system/styled-system/tree/master/examples/basic)

- [Emotion](https://codesandbox.io/s/github/styled-system/styled-system/tree/master/examples/emotion)



### Table of Contents



- [Usage](#usage)

- [Docs](#docs)

- [Further Reading](#further-reading)

- [Built with Styled System](#built-with-styled-system)

- [Related](#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](https://styled-system.com/responsive-styles)



```jsx

// responsive width



// responsive font-size



// responsive margin



// responsive padding



```



To learn more, see the [Getting Started](https://styled-system.com/getting-started) guide or read the docs.



## Docs



- [Getting Started](https://styled-system.com/getting-started)

- [Responsive Styles](https://styled-system.com/responsive-styles)

- [How it Works](https://styled-system.com/how-it-works)

- [Custom Props](https://styled-system.com/custom-props)

- [Variants](https://styled-system.com/variants)

- [API](https://styled-system.com/api)

- [Reference Table](https://styled-system.com/table)

- [Packages](https://styled-system.com/packages)

- [Guides](https://styled-system.com/guides)

- [@styled-system/css](https://styled-system.com/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](https://johno.com/styled-system-button)

- [Defining Component APIs in React](http://jxnblk.com/blog/defining-component-apis-in-react/)

- [The Three Tenets of Styled System](https://jxnblk.com/blog/the-three-tenets-of-styled-system/)



## Built with Styled System



- [Primer Components](https://primer.style/components)

- [Priceline Design System](https://pricelinelabs.github.io/design-system/)

- [Cloudflare Design Color](https://cloudflare.design/color/)

- [Styled System HTML](https://johnpolacek.github.io/styled-system-html/)

- [Rebass](https://rebassjs.org)

- [Reflexbox](https://rebassjs.org/reflexbox/)

- [@datepicker-react/styled](https://github.com/tresko/react-datepicker)



## Related



- [System UI](https://system-ui.com)

- [Spectrum.Chat Community](https://spectrum.chat/styled-system)

- [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](LICENSE.md)