Responsive, theme-based style props for building design systems with React https://styled-system.com
npm i styled-system
- 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
// Example uses styled-components, but styled-system works with most other css-in-js libraries as wellimport styled from 'styled-components'import space layout typography color from 'styled-system'// Add styled-system functions to your componentconst Box = styleddiv``
Each style function exposes its own set of component props that handle styles based on values defined in a theme.
// width: 50%<Box = />// font-size: 20px (theme.fontSizes)<Box = />// margin: 16px (theme.space)<Box = />// padding: 32px (theme.space)<Box = />// color<Box ='tomato' />// color: #333 (theme.colors.gray)<Box ='gray.0' />// background color<Box ='tomato' />
Responsive Style Props
Set responsive width, margin, padding, font-size, and other properties with a shorthand array syntax. Read more
// responsive width<Box = />// responsive font-size<Box = />// responsive margin<Box = />// responsive padding<Box = />
To learn more, see the Getting Started guide or read the docs.
- Getting Started
- Responsive Styles
- How it Works
- Custom Props
- Reference Table
- 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