Awesome Open Source
Awesome Open Source

System Props

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

Version size MIT License

yarn add system-props

Features

Functions almost identically to styled-system, but adds the following features:

  • Written in TypeScript
  • Chakra's PseudoBox inspired pseudo selector props
  • Access the theme object at any time by using the function syntax
  • Supports common themed shorthand properties, like border, margin, padding, and box-shadow
  • Strict mode: allow only values that are present in the theme
  • Visually distinguish theme values by prefixing system prop values with $

Quick Start

See the example project in this repo for a more complete example.

import { createSystem, color, space } from 'system-props';
import styled, { ThemeProvider } from 'styled-components';

const theme = {
  space: ['0px', '4px', '8px', '16px', '32px'],
  colors: {
    blue100: 'lightblue',
    blue200: 'blue',
    //...etc
  },
};

const system = createSystem({
  strict, // default: false
  pseudoSelectors, // default: { _hover: '&:hover', ...etc }
});

const Box = styled.div(system({ ...color, ...space }));

const App = () => {
  return (
    <ThemeProvider theme={theme}>
      <Box
        bg="$blue500"
        margin="$1 $2 $3 $4"
        border="1px solid $blue200"
        borderBottom={(theme) => `3px dotted ${theme.colors.blue200}`}
        _hover={{
          bg: '$blue700',
        }}
      />
    </ThemeProvider>
  );
};

Credits

Many of the concepts here come from so many great, existing open-source projects, and they deserve a shout-out!


Get A Weekly Email With Trending Projects For These Topics
No Spam. Unsubscribe easily at any time.
Typescript (252,294
Css (210,042
Reactjs (72,763
Styled Components (3,570
Design System (1,006
Token (959
Css In Js (573
Emotion (553
Theming (151
Related Projects