> For the complete documentation index, see [llms.txt](https://csimmonswork.gitbook.io/rendition/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://csimmonswork.gitbook.io/rendition/master.md).

# Getting Started

### Installation

```bash
yarn add rendition
```

### Usage

[**Demo**](https://codesandbox.io/s/rendition-11-getting-started-g9jue)

{% tabs %}
{% tab title="React JSX" %}

```jsx
import React from 'react'
import ReactDOM from 'react-dom'
import { Button, Box, Provider } from 'rendition';

ReactDOM.render(
  <Provider>
    <Box my={3} mx={['auto', 15]}>
      <Button primary emphasized>Click me</Button>
    </Box>
  </Provider>,
  document.getElementById('root')
);
```

{% endtab %}
{% endtabs %}

{% hint style="info" %}
If `<Box />` and its props look familiar, it should. It, as well as `<Flex />` and some other techniques, are inspired by [styled-system](https://styled-system.com/).
{% endhint %}