> For the complete documentation index, see [llms.txt](https://bluebase.gitbook.io/core/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://bluebase.gitbook.io/core/key-concepts/components/components-api.md).

# Components API

Each component in BlueBase has the following properties:

| Key       | Type                         | Description                                                                                                                                                               |
| --------- | ---------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `key`     | *string*                     | The key is used as an ID.                                                                                                                                                 |
| `value`   | *React.ComponentType*        | The raw React component. This may also be a promise (for code splitting) that resolves a React component.                                                                 |
| `preload` | *boolean*                    | *(optional) (Default = false)* Should this component be preloaded at app initialization. This is useful for components that are wrapped in promises (for code splitting). |
| `hocs`    | *Array*                      | An array of React Higher Order Components. At runtime, each component is resolved with wrapping raw component in all HOCs in this array.                                  |
| `styles`  | *{ \[string: key]: Styles }* | An object containing key value pairs of style rules. Each rule maybe a `ViewStyle`, `TextStyle` or an `ImageStyle`.                                                       |
| `source`  | *ComponentSource*            | This property represents the source that registered this component.                                                                                                       |

## Structure

```typescript
const Logo = props => {
  return (
    <View>/* component code */</View>
  )
}
​
await BB.Components.register({
  key: 'Logo',
  value: Logo,
  preload: true,
  hocs: [withRouter],
  styles: {},
  source: {},
});
```