styled-system

What is styled-system?

Styled System is a utility for creating consistent, responsive, and theme-based design systems in React. It provides a set of functions and utilities to style components using a system of design tokens, such as spacing, colors, and typography, making it easier to build UI components that adhere to a design system.

What are styled-system's main functionalities?

Responsive Styles

Styled System allows you to define responsive styles using arrays. The `p` prop sets padding, `bg` sets background color, and `width` sets the width of the component. The values in the arrays correspond to different breakpoints.

const Box = styled.div`
  ${space}
  ${color}
  ${layout}
`;

<Box p={[1, 2, 3]} bg={['red', 'green', 'blue']} width={[1, 1/2, 1/4]} />

Theme-based Design

Styled System integrates with a theme object to provide consistent styling across your application. The `color` and `space` utilities use the theme to apply styles.

const theme = {
  colors: {
    primary: 'blue',
    secondary: 'green',
  },
  space: [0, 4, 8, 16, 32],
};

const Box = styled.div`
  ${color}
  ${space}
`;

<Box color='primary' p={2} />

Utility Functions

Styled System provides utility functions like `space`, `color`, and `layout` that can be used to style components. These functions map props to CSS properties based on the theme.

import { space, color, layout } from 'styled-system';

const Box = styled.div`
  ${space}
  ${color}
  ${layout}
`;

<Box m={2} p={3} bg='primary' width={1/2} />

Other packages similar to styled-system

emotion

Emotion is a library designed for writing CSS styles with JavaScript. It provides powerful and flexible styling capabilities, including support for theming and responsive styles. Compared to Styled System, Emotion offers more granular control over CSS but requires more manual setup for design systems.

styled-components

Styled-components is a library for styling React components using tagged template literals. It allows for writing actual CSS to style components and supports theming and dynamic styling. While it doesn't provide the same utility functions as Styled System, it can be used in conjunction with Styled System for a more comprehensive solution.

tailwindcss

Tailwind CSS is a utility-first CSS framework that provides low-level utility classes for building custom designs. It offers a different approach compared to Styled System by using predefined classes instead of JavaScript functions. Tailwind CSS is highly customizable and can be used to create responsive and theme-based designs.

README

Styled System

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

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, Rebass Grid, and the Priceline 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 It Out

Try the examples on CodeSandbox

• Basic Example
• Emotion

Table of Contents

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

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

• 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
• 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
• Rebass
• Rebass Grid
• @datepicker-react/styled

Related

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

MIT License