> ## 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.

# Next.js

> Install and configure Next.js

> [!WARNING]
>
> Next.js v14 or less

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

**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
\[!NOTE] The component must be in a **client component**

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

export default function App() {
  // This ensures you are in a browser environment
  if (typeof window !== "undefined") {
    import("@root-axis/design-system");
  }

  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.