Provides convenient props shortcut helper for Styled Components 💅
Switch branches/tags
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.

Styled Shortcuts 💅

Build Status npm version Coverage Status


  • Now with Theme Support!
  • Provides convenient props shortcut helper for Styled Components 💅
  • Small footprint with No Dependencies!
  • With Styled Shortcuts you can now do this:
    font-size: ${'fontSize:px'};
    instead of this:
    font-size: ${({ fontSize }) => `${fontSize}px`};
  • Use any unit (e.g. px, %, cm, you name it) or no unit at all.


$ npm i --save styled-shortcuts


Here's the beauty... There's only one function! Styled Shortcut provides a higher order function that you use to wrap Styled Components, like this:

import rawStyled from 'styled-components';
import shortcuts from 'styled-shortcuts';

const styled = shortcuts(rawStyled);

And to make everyone's life easier, there's now a package that does this for you. In fact, it is a direct replacement for styled-components. It imports both styled-components and styled-shortcuts and exports the wrapped styled.

All you have to do is make a one-line change your components to import from styled-shortcut-components instead of styled-components.

// import styled from 'styled-components';
import styled from 'styled-shortcut-components';


Any template string value is assumed to be a props key. For example, ${'color'} will return the prop named color. Your can also assign a "unit" suffix. It can be anything, such as px, %, em, etc. Simply separate the unit from the prop key with a colon. For example ${'width:px'} will return the width prop with the "px" suffix.

See this example below:

import styled from 'styled-shortcut-components';

const Button = styled.button`
  padding: ${'padding:em'};
  border-radius: ${'borderRadius:px'};
  width: ${'width:%'};
  color: ${'color'};

Button.defaultProps = {
  padding: 1,
  borderRadius: 4,
  width: 100,
  color: 'red',

Using with Themes

You can specify a props key that contains a dotted object notation.

For example:

const Button = styled.button`
  padding: 0.25em 1em;
  border-radius: ${'theme.button.borderRadius:px'};
  color: ${'theme.color'};
  border: 2px solid ${'theme.color'};

See the Styled Components documentation for complete details on how to enable theming.

Do It Live!

Check out this live example on CodeSandbox.

Do It Live!