> ## Documentation Index
> Fetch the complete documentation index at: https://rodrigo.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# React

> Install and configure React

> [!WARNING]
>
> React v18.0 or less

* [Example](https://root-axis-react.vercel.app/)
* [Repo](https://github.com/rodrigoant/root-axis-examples/tree/main/packages/react)

**1. Install the design system**

```bash theme={null}
npm install "@root-axis/design-system"
```

**2. Setting up your files**

In the style of your component, or a global style file

```css App.css theme={null}
@import "@root-axis/design-tokens"
```

In the jsx file you want to import the components

```jsx App.tsx theme={null}
import "@root-axis/design-system"
```

**3. Done!**

Now you can do whatever you want with the component

```jsx App.tsx theme={null}
import { useState } from 'react'

function App() {
  const [count, setCount] = useState(0);

  <ra-button onClick={() => setCount((count) => count + 1)}>
    count is {count}
  </ra-button>
}
```


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.