Skip to main content
Next.js v14 or less
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
The component must be in a client component
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>
}