1

Install the design system

npm install "@root-axis/design-system"
2

Setting up your files

import the design system in your main.ts file

main.ts
import { mount } from 'svelte'
import './app.css'
import App from './App.svelte'

import '@root-axis/design-system'

const app = mount(App, {
  target: document.getElementById('app')!,
})

export default app

Import the tokens

app.css
@import '@root-axis/design-tokens';
3

Done!

Now you can do whatever you want with the component

App.svelte
<script>
  let count: number = $state(0);
  const increment = () => {
    count += 1;
  };
</script>

<ra-button onclick={increment}>
  count is {count}
</ra-button>
SolidAccordion