Creating a Generic Heading Component Using Styled System Variants

InstructorArtem Sapegin

Share this video with your friends

Send Tweet

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: