> For the complete documentation index, see [llms.txt](https://docs.navigaglobal.com/dashboard-plugin/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.navigaglobal.com/dashboard-plugin/api-and-gui/modules/gui.md).

# GUI

### Get the new Style-Guide

If you are using the Dashboard-Plugin base from version 2.0.0, you will get the the StyleGuide under the import name `Dashboard/modules`

```jsx
import { GUI } from '@root'

/*
    OR you can import from the modules import name
    import { GUI } from 'Dashboard/modules'
*/

const App = () => {
    const handleOnClick = () => {
        console.log('Clicked!')
    }
    
    return (
        <div>
            <GUI.Button onClick={handleOnClick}>
                {'Click me'}
            </GUI.Button>
        </div>
    )
}

export default App
```

{% hint style="info" %}
With Dashboard-Plugin base from version 2.0.0, we export the new Style-Guide GUI from '@root' so you can import API methods and GUI from the same import name
{% endhint %}