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

# DurationDisplay

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

> Wrapper around the units; unstyled so it inherits the row's text rhythm.

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

| Slot | Default classes | Description |
| --- | --- | --- |
| [root](/v3/reference/theming/keys/DurationDisplay.md#theme-key-DurationDisplay-root) |  | Wrapper around the units; unstyled so it inherits the row's text rhythm. |
| [value](/v3/reference/theming/keys/DurationDisplay.md#theme-key-DurationDisplay-value) |  | The unit text itself, for a skin that wants to tint or weight a duration. |
| [dash](/v3/reference/theming/keys/DurationDisplay.md#theme-key-DurationDisplay-dash) |  | Empty-value dash slot, matching DateTimeDisplay so the two read the same. |

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

## root

> Wrapper around the units; unstyled so it inherits the row's text rhythm.

Default classes:

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

<a id="theme-key-DurationDisplay-value"></a>

## value

> The unit text itself, for a skin that wants to tint or weight a duration.

Default classes:

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

<a id="theme-key-DurationDisplay-dash"></a>

## dash

> Empty-value dash slot, matching DateTimeDisplay so the two read the same.

Default classes:

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