# GUI

Before Dashboard v4 we have built our GUI library internally in Dashboard core, and we exposed it with the old plugin API.

The old GUI was built without any form of "UX perspective".

With Dashboard v4 we rebuilt our GUI library from scratch, together with our UX team and came up with new components that fits right in Dashboard, we call it **Style-Guide**

The new GUI is built externally and imported into Dashboard and exposed with the new Plugin-API along with the old GUI as well, to support old plugins.

Unfortunately! all the config GUI still using the old core GUI lib, but will be changed later as well to use the components from the new GUI lib

## How can i use Dashboard GUI

As mentioned before we still have the old GUI lib supported, so you will get both the old one along with the new one, so try to not mix them up 🙃

### Get the old GUI from core

With Plugin-API, you can access the components with the reserved name `GUI`

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

const GUI = Plugin.GUI

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

export default App
```

{% hint style="info" %}
Keep in mind that the old GUI will be deprecated at some point in the future, so we recommend to use the new Style-Guide GUI lib instead
{% endhint %}

### 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 %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.navigaglobal.com/dashboard-plugin/api-and-gui/gui.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.