StyledKit

StyledKit is an innovative library designed specifically to make working with styled-components easier.

It provides convenient tools and features that allow developers to add modifiers to components quickly and efficiently, greatly speeding up the styling process.

Packages:

@styled-kit/mods - allows you to write modifiers for Styled Components and with autocomplete. As well as automatically generate for them typing.

export const StyledComponent = styled.div<Mod<'size'>>`
    ${mods.size.small`
        font-size: 14px;
    `};
    
    ${mods('size', 'small')`
        font-size: 14px;
    `};
`;

And many other options.