---
url: "https://vueda.dev/v3/reference/theming/keys/SuggestionList.md"
title: "SuggestionList"
---

# SuggestionList

Source: `client/lib/theme/vueda-tailwind/display/index.js`

> Outer suggestion stack; border treatment lives on [SuggestionList.list](/v3/reference/theming/keys/SuggestionList.md#theme-key-SuggestionList-list).

Vue component: [SuggestionList](/v3/reference/api/vue/SuggestionList.md)

| Slot | Default classes | Description |
| --- | --- | --- |
| [root](/v3/reference/theming/keys/SuggestionList.md#theme-key-SuggestionList-root) | `flex flex-col gap-2` | Outer suggestion stack; border treatment lives on [SuggestionList.list](/v3/reference/theming/keys/SuggestionList.md#theme-key-SuggestionList-list). |
| [headRow](/v3/reference/theming/keys/SuggestionList.md#theme-key-SuggestionList-headRow) | `flex items-baseline justify-between gap-3` | Header row aligning the human label with the optional machine source. |
| [head](/v3/reference/theming/keys/SuggestionList.md#theme-key-SuggestionList-head) | 2 classes | Uppercase suggestion heading. |
| [source](/v3/reference/theming/keys/SuggestionList.md#theme-key-SuggestionList-source) | `font-mono text-[10px] text-muted-foreground leading-none` | Mono source label for the matching system that produced the suggestions. |
| [list](/v3/reference/theming/keys/SuggestionList.md#theme-key-SuggestionList-list) | 3 classes | Bordered list container with divided suggestion rows. |
| [item](/v3/reference/theming/keys/SuggestionList.md#theme-key-SuggestionList-item) | 4 classes | Full-width router-link row laid out as icon, text stack, chip, and chevron. |
| [icon](/v3/reference/theming/keys/SuggestionList.md#theme-key-SuggestionList-icon) | 2 classes | Leading icon cell for the suggestion type. |
| [labelStack](/v3/reference/theming/keys/SuggestionList.md#theme-key-SuggestionList-labelStack) | `flex flex-col gap-0.5 min-w-0` | Text column stacking label above the route path or action description. |
| [label](/v3/reference/theming/keys/SuggestionList.md#theme-key-SuggestionList-label) | `text-[13px] font-medium text-foreground leading-[1.3] truncate` | Primary suggestion label in foreground text. |
| [sub](/v3/reference/theming/keys/SuggestionList.md#theme-key-SuggestionList-sub) | `font-mono text-[12px] font-normal text-muted-foreground leading-[1.3] truncate` | Secondary suggestion text, usually a mono route path or action description. |
| [score](/v3/reference/theming/keys/SuggestionList.md#theme-key-SuggestionList-score) | 3 classes | Route-match score chip with mono numeric text. |
| [verb](/v3/reference/theming/keys/SuggestionList.md#theme-key-SuggestionList-verb) | 3 classes | HTTP verb chip for action suggestions, matching [SuggestionList.score](/v3/reference/theming/keys/SuggestionList.md#theme-key-SuggestionList-score). |
| [chevron](/v3/reference/theming/keys/SuggestionList.md#theme-key-SuggestionList-chevron) | 2 classes | Trailing chevron affordance for rows that navigate. |

<a id="theme-key-SuggestionList-root"></a>

## root

> Outer suggestion stack; border treatment lives on [SuggestionList.list](/v3/reference/theming/keys/SuggestionList.md#theme-key-SuggestionList-list).

Default classes:

`flex flex-col gap-2`

Source: `client/lib/theme/vueda-tailwind/display/SuggestionList.theme.js:16`

<a id="theme-key-SuggestionList-headRow"></a>

## headRow

> Header row aligning the human label with the optional machine source.

Default classes:

`flex items-baseline justify-between gap-3`

Source: `client/lib/theme/vueda-tailwind/display/SuggestionList.theme.js:20`

<a id="theme-key-SuggestionList-head"></a>

## head

> Uppercase suggestion heading.

Default classes:

```text
text-[10px] font-semibold uppercase tracking-[0.06em]
text-muted-foreground leading-none
```

Source: `client/lib/theme/vueda-tailwind/display/SuggestionList.theme.js:24`

<a id="theme-key-SuggestionList-source"></a>

## source

> Mono source label for the matching system that produced the suggestions.

Default classes:

`font-mono text-[10px] text-muted-foreground leading-none`

Source: `client/lib/theme/vueda-tailwind/display/SuggestionList.theme.js:28`

<a id="theme-key-SuggestionList-list"></a>

## list

> Bordered list container with divided suggestion rows.

Default classes:

```text
rounded-vueda-card hairline hairline-border overflow-hidden
divide-y-[length:var(--vueda-hairline-width)] divide-border
list-none m-0 p-0
```

Source: `client/lib/theme/vueda-tailwind/display/SuggestionList.theme.js:32`

<a id="theme-key-SuggestionList-item"></a>

## item

> Full-width router-link row laid out as icon, text stack, chip, and chevron.

Default classes:

```text
grid grid-cols-[24px_1fr_auto_auto] items-center gap-x-3 px-2.5 py-2.5
w-full no-underline text-inherit
hover:bg-accent/50 active:bg-accent transition-colors
focus-visible:focus-ring-shadow
```

Source: `client/lib/theme/vueda-tailwind/display/SuggestionList.theme.js:40`

<a id="theme-key-SuggestionList-icon"></a>

## icon

> Leading icon cell for the suggestion type.

Default classes:

```text
flex items-center justify-center w-6 h-6 shrink-0
text-muted-foreground text-[16px] leading-none
```

Source: `client/lib/theme/vueda-tailwind/display/SuggestionList.theme.js:49`

<a id="theme-key-SuggestionList-labelStack"></a>

## labelStack

> Text column stacking label above the route path or action description.

Default classes:

`flex flex-col gap-0.5 min-w-0`

Source: `client/lib/theme/vueda-tailwind/display/SuggestionList.theme.js:56`

<a id="theme-key-SuggestionList-label"></a>

## label

> Primary suggestion label in foreground text.

Default classes:

`text-[13px] font-medium text-foreground leading-[1.3] truncate`

Source: `client/lib/theme/vueda-tailwind/display/SuggestionList.theme.js:60`

<a id="theme-key-SuggestionList-sub"></a>

## sub

> Secondary suggestion text, usually a mono route path or action description.

Default classes:

`font-mono text-[12px] font-normal text-muted-foreground leading-[1.3] truncate`

Source: `client/lib/theme/vueda-tailwind/display/SuggestionList.theme.js:64`

<a id="theme-key-SuggestionList-score"></a>

## score

> Route-match score chip with mono numeric text.

Default classes:

```text
font-mono text-[10px] uppercase leading-none
hairline hairline-border rounded-sm bg-muted text-muted-foreground
px-1.5 py-0.5 shrink-0
```

Source: `client/lib/theme/vueda-tailwind/display/SuggestionList.theme.js:68`

<a id="theme-key-SuggestionList-verb"></a>

## verb

> HTTP verb chip for action suggestions, matching [SuggestionList.score](/v3/reference/theming/keys/SuggestionList.md#theme-key-SuggestionList-score).

Default classes:

```text
font-mono text-[10px] uppercase leading-none
hairline hairline-border rounded-sm bg-muted text-muted-foreground
px-1.5 py-0.5 shrink-0
```

Source: `client/lib/theme/vueda-tailwind/display/SuggestionList.theme.js:76`

<a id="theme-key-SuggestionList-chevron"></a>

## chevron

> Trailing chevron affordance for rows that navigate.

Default classes:

```text
flex items-center justify-center shrink-0
text-muted-foreground/60 text-[14px] leading-none
```

Source: `client/lib/theme/vueda-tailwind/display/SuggestionList.theme.js:84`