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

# ScopeGroup

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

> Active-scope chips strip. Muted tint a tier below the card; shares the page-chrome rhythm and carries a bottom hairline.

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

| Slot | Default classes | Description |
| --- | --- | --- |
| [strip](/v3/reference/theming/keys/ScopeGroup.md#theme-key-ScopeGroup-strip) | 2 classes | Active-scope chips strip. Muted tint a tier below the card; shares the page-chrome rhythm and carries a bottom hairline. |
| [subgroup](/v3/reference/theming/keys/ScopeGroup.md#theme-key-ScopeGroup-subgroup) | `flex min-w-0 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. |
| [eyebrow](/v3/reference/theming/keys/ScopeGroup.md#theme-key-ScopeGroup-eyebrow) | 2 classes | "Scope" eyebrow at the left of the chips strip. 11 px / 600 / 0.06em uppercase against `--muted-foreground`. |
| [clear](/v3/reference/theming/keys/ScopeGroup.md#theme-key-ScopeGroup-clear) | `ml-auto text-xs` | Clear-all control, pushed to the right edge of the chips strip. |

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

## strip

> Active-scope chips strip. Muted tint a tier below the card; 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(--muted)_25%,var(--card))] text-foreground
```

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

<a id="theme-key-ScopeGroup-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 min-w-0 flex-wrap items-center gap-2`

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

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

## eyebrow

> "Scope" 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/ScopeGroup.theme.js:28`

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

## clear

> Clear-all control, pushed to the right edge of the chips strip.

Default classes:

`ml-auto text-xs`

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