Tuesday, 1 September, 2020 UTC


In this lesson we’ll create a generic text input primitive component, that we could use to render headings of different levels in our app. We’ll use [Styled System](https://styled-system.com/) to create this component. We’re going to use [Styled System’s CSS](https://styled-system.com/css) package to define styles using our design tokens — values from our theme file. **We’ll use following libraries:** * [styled-components](https://styled-components.com/) * [Styled System](https://styled-system.com/) * [@styled-system/css](https://github.com/styled-system/styled-system/tree/master/packages/css) You can either use this lesson’s [Git repository](https://github.com/sapegin/cddcourse) or install them manually in your project: ``` npm install styled-components styled-system @styled-system/css ``` **Useful links and documentation:** * [Styled System docs](https://styled-system.com/getting-started/) * [Styled System CSS docs](https://styled-system.com/css)