Styled System
  • Getting Started
  • Guides

Styled System Packages

The main styled-system package is composed of several other packages that can be installed and used on their own for special use-cases.

Package NameExports
@styled-system/coresystem, createParser, createStyleFunction, get
@styled-system/spacespace, margin, padding
@styled-system/colorcolor
@styled-system/layoutlayout
@styled-system/typographytypography
@styled-system/flexboxflexbox
@styled-system/borderborder
@styled-system/backgroundbackground
@styled-system/positionposition
@styled-system/gridgrid
@styled-system/shadowshadow
@styled-system/variantvariant, textStyle buttonStyle, colorStyle

The Styled System ecosystem also includes these optional packages

Package NameDescription
@styled-system/cssStyled System for the css prop
@styled-system/jsxCustom JSX pragma for using Styled System with the css prop
@styled-system/should-forward-propUtility for filtering Styled System props with Emotion's shouldForwardProp option
@styled-system/prop-typesProp type definitions for components built with Styled System
@styled-system/theme-getUtility to safely access values from a theme
@styled-system/editDebugging components for live editing Styled System theme objects
@styled-system/propsUtilities for working with Styled System Props
Edit this page on GitHub
Previous:
Reference Table
Next:
Ecosystem