> For the complete documentation index, see [llms.txt](https://swift-packages.gitbook.io/materialuikit/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://swift-packages.gitbook.io/materialuikit/components/collection.md).

# Collection

Represents a Material UI styled collection of items arranged in a grid or list.

### Overview

The `Collection`  provides a stylized list view in Material Design styles, including plain, inset, and inset grouped.&#x20;

To use the `Collection`, initialize it with your desired style and a closure that returns the content view for each element in the list.

### Initializers

Creates a stylized collection with a default `CollectionStyle.insetGrouped` style.

```swift
Collection(@ViewBuilder content: () -> Content)
```

Creates a stylized collection with a custom collection style.

```swift
Collection(style: CollectionStyle, @ViewBuilder _ content: () -> Content)
```

> For detailed descriptions of the available collection styles, refer to the [CollectionStyle](/materialuikit/components/collection/collectionstyle.md).

### Parameters

<table data-header-hidden><thead><tr><th width="175"></th><th></th></tr></thead><tbody><tr><td><strong>Parameter</strong></td><td><strong>Description</strong></td></tr><tr><td><code>style</code></td><td>The style of the collection, such as <code>.plain</code>, <code>.inset</code>, or <code>.insetGrouped</code>.</td></tr><tr><td><code>content</code></td><td>A closure that returns the content view for each element in the list. This parameter is used in both initializers.</td></tr></tbody></table>

### Example

Displays a vertical stack of a item with a default `CollectionStyle.insetGrouped` style.

```swift
Container {
    Collection {
        Text("Item 1")
        Text("Item 2")
        Text("Item 3")
    }
}
```

<figure><picture><source srcset="/files/CPhDfiKaZNEkGFMfP5UV" media="(prefers-color-scheme: dark)"><img src="https://2931569195-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHpwjDgYAa64eKF8AGmeE%2Fuploads%2FdRJsxTgKSsGN0s3ktICC%2FIG%20LIght.png?alt=media&amp;token=761f78b3-7fc3-49e5-acd8-7dfa2bdcbb54" alt=""></picture><figcaption></figcaption></figure>

Displays a vertical stack of items with a custom collection style.

```swift
Container {
    Collection(style: .inset) {
        Text("Item 1")
        Text("Item 2")
        Text("Item 3")
    }
}
```

<figure><picture><source srcset="/files/Dc8dENzEnQXGR5wM2hmQ" media="(prefers-color-scheme: dark)"><img src="https://2931569195-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHpwjDgYAa64eKF8AGmeE%2Fuploads%2FKXIn1hmM8FB80rny7k8H%2FCollection%20Inset%20Light.png?alt=media&amp;token=be9d91c5-24d5-4432-a8b0-32f439b4d20e" alt=""></picture><figcaption></figcaption></figure>
