# Contributing on the UI

## UI Technologies

CushyStudio UI is done with [React](https://react.dev/), [Mobx](https://mobx.js.org/README.html), [DaisyUI](https://daisyui.com/), [Tailwind](https://tailwindcss.com/) and a lot of custom-made components.

Code is pretty clean and fairly standard, but understanding Mobx is required, since the whole application is relying on mobx a lot.

## Hot reloading components

During dev, you must start CushyStudio with the `_windows-start-dev.bat` or the `_mac-linux-start-dev.sh` so Cushy Studio can hot reload your changes.

Components you change in the codebase will be instancly updated in your UI.

## Tailwind autocompletion

If you're unfamiliar with tailwind, make sure you have the`"bradlc.vscode-tailwindcss` vscode extension installed so you have autocompletion for both tailwind classes, and daisyui classes.

<figure><img src="https://cushy.fra1.cdn.digitaloceanspaces.com/rvion-screenshots/2024-02-18_19-27-14%20(1).jpg" alt=""><figcaption></figcaption></figure>

## The specila \`tw\` property

most styling can be done though the magical `tw` property that is injected in all components and helps writing conditional classes, or tailwind classes more easilly. (check the `src/csuite/custom-jsx/jsx-runtime.js` module to look at the implementation)

more generally, please take a look at [Setting up VSCode](/going-further/contribution/setting-up-vscode.md)to ensure you have everything properly hooked up


---

# 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.cushystudio.com/going-further/contribution/contributing-on-the-ui.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.