Skip to content

Primer React Philosophy

Presentational Components

We are focusing primarily on presentational components that help standardize common design patterns. Primer React components don't handle fetching and submitting data to/from APIs. If you would like to handle data in a Primer Component, feel free to create a wrapper around the Primer Component to do so.

Assume that people will break the rules, provide safe ways for them to do so

While we aim to standardize design in Primer React, we also provide some flexibility with constraint-based props. We offer system props via styled-system to allow users of the components to make small customizations, such as color and spacing, using values from the theme. Users also have the option to override the theme with a theme of their own.

Pattern Components vs Helper Components

Our components can roughly be categorized into two different component types:

  • Pattern Components

Pattern components help us repeat commonly used UI patterns and interactions in order to maintain our brand and provide a great user experience. Some examples of pattern components are Button, Avatar, or Label.

  • Helper Components

Helper components are components that help the user achieve common CSS patterns while maintaining some control over values used. Some examples of helper components are Flex, Text, Grid, and the Position components.

Edit this page on GitHub
1 contributoremplums
Last edited by emplums on June 17, 2020