# Collection

### 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](https://swift-packages.gitbook.io/materialuikit/components/collection/collectionstyle "mention").

### 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="https://2931569195-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHpwjDgYAa64eKF8AGmeE%2Fuploads%2FcxYt470GM8upGshTi2k2%2FIG%20DArk.png?alt=media&#x26;token=2cd6021f-f535-4a65-9d1e-b0b594b869ea" 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&#x26;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="https://2931569195-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHpwjDgYAa64eKF8AGmeE%2Fuploads%2Fakx9rbDRzwJ5IdIFx8Hu%2FCollection%20Inset%20Dark.png?alt=media&#x26;token=38000313-65de-4616-8d13-0b882a537e0c" 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&#x26;token=be9d91c5-24d5-4432-a8b0-32f439b4d20e" alt=""></picture><figcaption></figcaption></figure>
