Become a member
to unlock all features

Create egghead account to access 5000+ tutorials and resources from expert developers.

Create account

    Creating a Generic Heading Component Using Styled System Variants

    In this lesson we’ll create a generic heading primitive component, that we could use to render headings of different levels in our app. We’ll use Styled System to create this component.

    We’re going to use Styled System variants to define styles for each heading level. The number of levels depends on your app’s complexity, and it’s something you’ll need to discuss with your designer. In this lesson we’ll create three levels of headings. We'll make it possible to change the HTML element (h1, h2, h3) independently from the visual heading level.

    We’ll use following libraries:

    You can either use this lesson’s Git repository or install them manually in your project:

    npm install styled-components styled-system

    Useful links and documentation: