## Create a new compound

In this example, let's create a simple gui which lists all existing materials. Also, we want to send a chat message with the name of the material when the user clicks on the icon.

You can create a compound inside a page builder scope. The recommended way of doing so is to use the `createRectCompound` function.

```kotlin
page(1) {
    val compound = createRectCompound<Material>(
        Slots.RowOneSlotOne, Slots.RowSixSlotEight,
        iconGenerator = {
            ItemStack(it)
        },
        onClick = { clickEvent, element ->
            clickEvent.player.sendMessage("You clicked on: ${element.name}")
        }
    )
}
```

Notice that the generic type of the compound is `Material`. The compound type defines the type of the elements which can be added to the compound.

The `iconGenerator` defines how each compound element should be displayed. You will get the element passed as `it` and you have to return an `ItemStack`, which will be used for the icon.

???+ info
    In our example, it is very easy to create the icon, as we can easily create an `ItemStack` from a `Material`. In your scenarios, don't be scared of putting more complex logic inside the `iconGenerator`.

## Modify the content of a compound

The compound from above will be empty at first, you have to add content to it. This can be done using the `compound.addContent` function.

The content you add has to be of the type you defined earlier (in our case this is `Material`).

```kotlin
compound.addContent(Material.values().toList())
```

In order to remove content, call the `compound.removeContent` function. Let's remove air from our example compound.

```kotlin
compound.removeContent(Material.AIR)
```

## Sort the compound

You can use the `compound.sortContentBy` function to define in which order the elements of a compound should be displayed.

In our example, we could sort by the name of the material like this:

```kotlin
compound.sortContentBy { it.name }
```

## Add scroll buttons

If the content of the compound won't fit on one page of the GUI, **do not** create multiple pages, even if this is what you might think of at first.

Instead, add scroll buttons to the same page!

### Smooth scrolling

To implement smooth scrolling, create scroll buttons like this:

```kotlin
compoundScroll(
    Slots.RowOneSlotNine,
    ItemStack(Material.PAPER), compound, scrollTimes = 6
)
compoundScroll(
    Slots.RowSixSlotNine,
    ItemStack(Material.PAPER), compound, scrollTimes = 6, reverse = true
)
```

Notice that you have to pass the `compound` as a parameter. Also, be careful to set `scrollTimes` to the height of your compound (in our example this is 6, because the inventory is 6 slots high, and we use the full height).

You can use the `reverse` parameter and set it to true to create a button that scrolls backwards.

### Instant (hard) scrolling

Instant (or hard) scrolling means that no scrolling animation will be displayed.

To implement instant scrolling, leave `scrollTimes` at its default value (1) and instead modify the `scrollDistance` value.

Set the `scrollDistance` value to **`compound.compoundWidth * amountOfLines`**, where `amountOfLines` represents how many lines you want to instantly scroll when pressing the scroll button.

In our example, we could create the following button to scroll "page by page" instantly (without any scrolling animation):

```kotlin
compoundScroll(
    Slots.RowOneSlotNine,
    ItemStack(Material.PAPER), compound,
    scrollDistance = compound.compoundWidth * 6
)
```
