# Elements

## Creating a Tab

To start adding your own elements, you must create a tab using ( group being the group variable you created on the last page) **group:create\_tab group** ; shown below.

```lua
group:create_tab(name: String)
```

| Argument | Type   | Description    |
| -------- | ------ | -------------- |
| name     | String | The tab's name |

## Creating Sections

To create a section, you must create a section using **group:create\_section**; this will error if a tab is not created beforehand.

<pre class="language-lua"><code class="lang-lua"><strong>group:create_section(tab_name: String, name: String, side: Number, size: Number, offset: Number)
</strong></code></pre>

| Argument  | Type   | Description                                                            |
| --------- | ------ | ---------------------------------------------------------------------- |
| tab\_name | String | The tab's name                                                         |
| name      | String | The section's name                                                     |
| side      | Number | The side the section will be placed on in the tab, 1 = left, 2 = light |
| size      | Number | The vertical size of the section (0.1-1)                               |
| offset    | Number | The vertical offset of the section (0-0.9)                             |

## Creating Elements

To create a section, you must create a section using **section:create\_element**.

When using **section:create\_element** there is an argument labeled **types.** Below is a fully working addon example of how to properly set up this argument.

```lua
local lib = loadstring(game:HttpGet("https://raw.githubusercontent.com/panduh16/juju/main/ui.lua"))()
local group = lib["menu"].create_group("example_group")
group:create_tab("example_tab")
local example_section = group:create_section("example_tab", "example_section", 1, 1, 0)

example_section:create_element({
    ["name"] = "example colorpicker"
}, {
    ["colorpicker"] = {
        ["color_flag"] = "example_color",
        ["default_color"] = Color3.fromRGB(0,255,0),
        ["transparency_flag"] = "example_transparency",
        ["default_transparency"] = 0
    }
})
```


---

# 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://panduh.gitbook.io/panduh-docs/getting-started/elements.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.