styled-system
    DefinitelyTyped icon, indicating that this package has TypeScript declarations provided by the separate @types/styled-system package

    5.1.5 • Public • Published

    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, Reflexbox, 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

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

    Miha Sedej

    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, 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.

    // 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

    Install

    npm i styled-system

    DownloadsWeekly Downloads

    425,175

    Version

    5.1.5

    License

    MIT

    Unpacked Size

    24.7 kB

    Total Files

    5

    Last publish

    Collaborators

    • johno
    • jxnblk