Find Similar Packages for styled-system
Search packages..
1 Year
styled-systemSimilar Packages:
NPM Package Downloads Trend
Stat Detail
Package
Downloads
Stars
Size
Issues
Publish
License
styled-system575,441---5 years agoMIT
Similar Npm Packages to styled-system

styled-system is a utility-first CSS-in-JS library designed for building responsive and themeable user interfaces in React applications. It allows developers to create consistent and scalable design systems by providing a set of style functions that can be easily composed to create custom components. With styled-system, you can leverage a design token approach, making it easier to maintain and update styles across your application.

While styled-system is a powerful tool for styling React components, there are several alternatives that also provide unique features and capabilities. Here are a few notable ones:

  • emotion is a popular CSS-in-JS library that offers a flexible and performant way to style applications. It provides both a styled component API and a CSS prop, allowing developers to choose the approach that best fits their needs. Emotion is known for its excellent performance and small bundle size, making it a great choice for projects that require dynamic styling and theming capabilities. It also supports server-side rendering, which can enhance the performance of your application.

  • styled-components is another widely used CSS-in-JS library that allows developers to write actual CSS code to style their components. It utilizes tagged template literals to create styled components, promoting a clean and intuitive syntax. Styled-components also support theming and global styles, making it easy to manage styles across large applications. Its popularity and strong community support make it a reliable choice for many React developers.

  • theme-ui is a library specifically designed for building themeable user interfaces with React. It provides a set of design primitives and a theme provider that allows developers to easily manage and apply consistent styles across their applications. Theme-ui is built on top of styled-system, making it a great option for those who want to leverage the power of styled-system while focusing on theming and responsive design. It is particularly well-suited for projects that require a strong emphasis on design consistency and accessibility.

To see how styled-system compares with emotion, styled-components, and theme-ui, check out the comparison: Comparing emotion vs styled-components vs styled-system vs theme-ui.

README for styled-system

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

Terms & PrivacyProduct HuntJSON to TypeScriptCopilotChat for Web Dev