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 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 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.