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

# SortGroup

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

> Active-sort chips strip. A sunken tint a tier below the card so it reads as a distinct band from the primary-tinted filter strip above it. Shares the page-chrome rhythm and carries a bottom hairline.

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

| Slot | Default classes | Description |
| --- | --- | --- |
| [strip](/v3/reference/theming/keys/SortGroup.md#theme-key-SortGroup-strip) | 2 classes | Active-sort chips strip. A sunken tint a tier below the card so it reads as a distinct band from the primary-tinted filter strip above it. Shares the page-chrome rhythm and carries a bottom hairline. |
| [subgroup](/v3/reference/theming/keys/SortGroup.md#theme-key-SortGroup-subgroup) | `flex flex-wrap items-center gap-2` | Bare chips group used when hosted inside a shared ConstraintsBar: the band chrome (border, tint, padding) belongs to the host, so this carries only the flex layout for the eyebrow and chips. |
| [draggable](/v3/reference/theming/keys/SortGroup.md#theme-key-SortGroup-draggable) | `flex flex-wrap items-center gap-2` | Drag-reorder container holding the sort chips; lays them out in the same flowing row as the strip so the wrapper adds no visual seam. |
| [dragging](/v3/reference/theming/keys/SortGroup.md#theme-key-SortGroup-dragging) | 2 classes | Applied to the chips row only while a drag is in progress. Forces the grab-in-progress cursor on every handle and suppresses the per-handle hover background, so the chip that slides under the pointer (taking the dragged chip's old slot) does not read as the active handle. |
| [eyebrow](/v3/reference/theming/keys/SortGroup.md#theme-key-SortGroup-eyebrow) | 2 classes | "Sort" eyebrow at the left of the chips strip. 11 px / 600 / 0.06em uppercase against `--muted-foreground`. |
| [clear](/v3/reference/theming/keys/SortGroup.md#theme-key-SortGroup-clear) | `ml-auto text-xs` | Reset-sort control, pushed to the right edge of the chips strip. |

<a id="theme-key-SortGroup-strip"></a>

## strip

> Active-sort chips strip. A sunken tint a tier below the card so it reads as a distinct band from the primary-tinted filter strip above it. Shares the page-chrome rhythm and carries a bottom hairline.

Default classes:

```text
w-full flex flex-wrap items-center gap-2 px-5 py-[10px]
border-b-hairline bg-[color-mix(in_oklab,var(--sunken)_50%,var(--card))] text-foreground
```

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

<a id="theme-key-SortGroup-subgroup"></a>

## subgroup

> Bare chips group used when hosted inside a shared ConstraintsBar: the band chrome (border, tint, padding) belongs to the host, so this carries only the flex layout for the eyebrow and chips.

Default classes:

`flex flex-wrap items-center gap-2`

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

<a id="theme-key-SortGroup-draggable"></a>

## draggable

> Drag-reorder container holding the sort chips; lays them out in the same flowing row as the strip so the wrapper adds no visual seam.

Default classes:

`flex flex-wrap items-center gap-2`

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

<a id="theme-key-SortGroup-dragging"></a>

## dragging

> Applied to the chips row only while a drag is in progress. Forces the grab-in-progress cursor on every handle and suppresses the per-handle hover background, so the chip that slides under the pointer (taking the dragged chip's old slot) does not read as the active handle.

Default classes:

```text
[&_.drag-handle]:cursor-grabbing
[&_.drag-handle:hover]:bg-transparent
```

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

<a id="theme-key-SortGroup-eyebrow"></a>

## eyebrow

> "Sort" eyebrow at the left of the chips strip. 11 px / 600 / 0.06em uppercase against `--muted-foreground`.

Default classes:

```text
text-[length:var(--vueda-text-micro)] font-semibold uppercase tracking-[0.06em]
text-muted-foreground leading-none
```

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

<a id="theme-key-SortGroup-clear"></a>

## clear

> Reset-sort control, pushed to the right edge of the chips strip.

Default classes:

`ml-auto text-xs`

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