> For the complete documentation index, see [llms.txt](https://docs.elsaworkflows.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.elsaworkflows.io/studio/design/activity-pickers-3.7-preview.md).

# Activity Pickers

## Overview

This section explains how to change the activity picker used in the workflow editor. Currently, two activity picker types are supported: Accordion (default) and Treeview.

## Accordion

To use the Accordion activity picker, use the following line.

```csharp
builder.Services.AddScoped<IActivityPickerComponentProvider, AccordionActivityPickerComponentProvider>();
```

<figure><img src="https://1361005767-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDBFT7XyrxozqD8PbI3Lk%2Fuploads%2Fgit-blob-18d8175e385d05e307be7a22bd15e3f7e3e56125%2FScreenshot%202025-07-06%20170218.png?alt=media" alt="" width="141"><figcaption><p>Accordion Example</p></figcaption></figure>

When using [nested activity categories](/extensibility/custom-activities.md#activity-metadata), the accordion picker defaults to returning the first category within the string. You are able to change this behaviour by specifying your own `CategoryDisplayResolver`.

```csharp
builder.Services.AddScoped<IActivityPickerComponentProvider>(sp => new AccordionActivityPickerComponentProvider
{
    // Example - Replace the default category resolver with a custom one.
    CategoryDisplayResolver = category => category.Split('/').Last().Trim()
});
```

## Treeview

To use the TreeView activity picker, add the following line.

```csharp

builder.Services.AddScoped<IActivityPickerComponentProvider, TreeviewActivityPickerComponentProvider>();
```

<figure><img src="https://1361005767-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDBFT7XyrxozqD8PbI3Lk%2Fuploads%2Fgit-blob-7a5f4e1bf68426c249d1898a865c871968edf0b9%2FScreenshot%202025-07-06%20165657.png?alt=media" alt="" width="142"><figcaption><p>Treeview Example</p></figcaption></figure>