Next.js

Install and configure Next.js

Next.js v14 or less

• Example
• Repo

1. Install the design system

   npm install "@root-axis/design-system"
   
2. Setting up your files

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

   App.css

   @import "@root-axis/design-tokens"
   

   In the jsx file you want to import the components

   App.tsx

   '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>
   }