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