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

# DiagnosticStrip

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

> Compact diagnostic definition-list grid for request, route, or session values.

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

| Slot | Default classes | Description |
| --- | --- | --- |
| [root](/v3/reference/theming/keys/DiagnosticStrip.md#theme-key-DiagnosticStrip-root) | 3 classes | Compact diagnostic definition-list grid for request, route, or session values. |
| [dt](/v3/reference/theming/keys/DiagnosticStrip.md#theme-key-DiagnosticStrip-dt) | 2 classes | Uppercase diagnostic label cell. |
| [dd](/v3/reference/theming/keys/DiagnosticStrip.md#theme-key-DiagnosticStrip-dd) | `text-[11px] font-normal text-foreground leading-none m-0` | Diagnostic value cell; the component adds mono treatment when requested. |

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

## root

> Compact diagnostic definition-list grid for request, route, or session values.

Default classes:

```text
grid grid-cols-[auto_1fr] items-center gap-x-3 gap-y-1
rounded-vueda-card hairline hairline-border bg-muted/35
px-3 py-2
```

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

<a id="theme-key-DiagnosticStrip-dt"></a>

## dt

> Uppercase diagnostic label cell.

Default classes:

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

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

<a id="theme-key-DiagnosticStrip-dd"></a>

## dd

> Diagnostic value cell; the component adds mono treatment when requested.

Default classes:

`text-[11px] font-normal text-foreground leading-none m-0`

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