Repository files navigation

Responsive, theme-based style props for building design systems with Reacthttps://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, includingstyled-components &emotion
• Used inRebass,Reflexbox, and thePriceline Design System

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

–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

"Styled System is one of the best libraries I have ever used."

–Miha Sedej

Try theexamples on CodeSandbox

• Basic Example
• Emotion

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

// Example uses styled-components, but styled-system works with most other css-in-js libraries as wellimportstyledfrom'styled-components'import{space,layout,typography,color}from'styled-system'// Add styled-system functions to your componentconstBox=styled.div`${space}${layout}${typography}${color}`

Each style function exposes its own set of component propsthat handle styles based on values defined in a theme.

// width: 50%<Boxwidth={1/2}/>// font-size: 20px (theme.fontSizes[4])<BoxfontSize={4}/>// margin: 16px (theme.space[2])<Boxm={2}/>// padding: 32px (theme.space[3])<Boxp={3}/>// color<Boxcolor='tomato'/>// color: #333 (theme.colors.gray[0])<Boxcolor='gray.0'/>// background color<Boxbg='tomato'/>

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

// responsive width<Boxwidth={[1,1/2,1/4]}/>// responsive font-size<BoxfontSize={[2,3,4]}/>// responsive margin<Boxm={[1,2,3]}/>// responsive padding<Boxp={[1,2,3]}/>

To learn more, see theGetting Started guide or read the docs.

• Getting Started
• Responsive Styles
• How it Works
• Custom Props
• Variants
• API
• Reference Table
• Packages
• Guides
• @styled-system/css

• 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

• Primer Components
• Priceline Design System
• Cloudflare Design Color
• Styled System HTML
• Rebass
• Reflexbox
• @datepicker-react/styled

• System UI
• Spectrum.Chat Community
• styled-components
• emotion

MIT License