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

# Svelte

> Install and configure Svelte

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

**1. Install the design system**\`\`\`bash theme=
npm install "@root-axis/design-system"

````

\**2. Setting up your files**

import the design system in your **main.ts** file

\```ts main.ts theme={null}
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

\```css app.css theme={null}
@import '@root-axis/design-tokens';
\```

**3. Done!**Now you can do whatever you want with the component```jsx App.svelte theme={null}
<script>
  let count: number = $state(0);
  const increment = () => {
    count += 1;
  };
</script>

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


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