# @britannica/ui

> Consumer style system and React component library

**Storybook:** https://britannica.github.io/consumer-ui

## Installation and Basic Usage

```
npm install @britannica/ui
```

### Include the CSS

Via JavaScript:

```js
// Your app's main application file. e.g. index.js or App.js
import '@britannica/ui/dist/britannica-ui.css';
```

Via CSS:

```css
@import '~@britannica/ui/dist/britannica-ui.css';
```

Via HTML:

```html
<!-- You can specify a specific version -->
<link href="https://unpkg.com/@britannica/ui@0.2.5/dist/britannica-ui.css" rel="stylesheet" />

<!-- Or if you always want the latest -->
<link href="https://unpkg.com/@britannica/ui@latest/dist/britannica-ui.css" rel="stylesheet" />
```

_Note:_ More documentation is on the way, but for now we recommend looking at a couple different places for relevant style information:

- [CSS Variables](https://github.com/britannica/consumer-ui/blob/master/src/scss/_variables.scss)
- [Utility Classes](https://github.com/britannica/consumer-ui/blob/master/src/scss/_utilities.scss)

### Import a component

```js
import { Button } from '@britannica/ui';

const MyComponent = () => <Button label="Enable Bat-Signal">Enable Bat-Signal</Button>;
```

_Note:_ More documentation is on the way, but for now we recommend looking at the `propTypes` within each of [the components](https://github.com/britannica/consumer-ui/tree/master/src/components) to see which components exist as well as which props they accept.

testing