# Patterns and principles

Blockstack UI is built with a few things in mind: consistency, composability, easy of use, and extensibility. These components aren't meant to be highly complex instances of specific UI elements; rather they are meant to be primitive components that you can use to build anything you want.

## System props

All component styles can be extended or overwritten via system props to
reduce the use of `css` or creating new `styled()` wrapper components.
Compose new components from one of the base primitives: `Box`, `PseudoBox`,
`Flex`, `Grid`, or `Text`. [Read more here](/system-props).

## Base primitives

All components are built from one or many of the base primitive components:
[`Box`](/box), [`PseudoBox`](/pseudoBox), [`Flex`](/flex), [`Grid`](/grid),
or [`Text`](/text). If you have worked within something like React Native,
concepts of primitive components should be a bit familiar. `Box` is not
unlike `View`. Rather than thinking in divs, try to think in primitives.
Do I need my parent wrapper to have `display: flex`?, then I should use
`Flex` as the base component to extend from.

## Composition

Break down components into smaller parts with minimal props to keep 
complexity low, and compose them together. This will ensure that the
styles and functionality are flexible and extensible.

## Accessibility

When creating a component, keep accessibility top of mind.
This includes keyboard navigation, focus management, color contrast, voice
over, and the correct `aria-*` attributes.

## Naming

Generally, ensure a prop name is indicative of what it does. Boolean props
should be named using auxilliary verbs such as `does`, `has`, `is` and
`should`. For example, `Button` uses `isDisabled`, `isLoading`, etc.
