> ## Documentation Index
> Fetch the complete documentation index at: https://design-system.rodrigoantunes.dev/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)

<Steps>
  <Step title="Install the design system">
    ```bash theme={null}
    npm install "@root-axis/design-system"
    ```
  </Step>

  <Step title="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';
    ```
  </Step>

  <Step title="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>
    ```
  </Step>
</Steps>