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

# display keys

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

## Media

| Component | Kind | Slots | Description |
| --- | --- | --- | --- |
| [AspectRatio](/v3/reference/theming/keys/AspectRatio.md) | key | 1 | Empty pass-through wrapper for ratio-bound media; sizing comes from the primitive and caller. |

## Date and time

| Component | Kind | Slots | Description |
| --- | --- | --- | --- |
| [DateRangeDisplay](/v3/reference/theming/keys/DateRangeDisplay.md) | key | 4 | Inline date-range wrapper that prevents the paired dates and separator from wrapping apart. |
| [DateTimeDisplay](/v3/reference/theming/keys/DateTimeDisplay.md) | key | 7 | Inline time wrapper with baseline spacing for absolute and relative text. |
| [DurationDisplay](/v3/reference/theming/keys/DurationDisplay.md) | key | 3 | Wrapper around the units; unstyled so it inherits the row's text rhythm. |

## Text utilities

| Component | Kind | Slots | Description |
| --- | --- | --- | --- |
| [BooleanDisplay](/v3/reference/theming/keys/BooleanDisplay.md) | key | 3 | Wrapper around the word; unstyled so it inherits the row's text rhythm. |
| [ErrorDisplay](/v3/reference/theming/keys/ErrorDisplay.md) | key | 5 | Full-width error block wrapper for message, code, and links. |
| [FileDisplay](/v3/reference/theming/keys/FileDisplay.md) | key | 4 | Wrapper around the link; unstyled so it inherits the row's text rhythm. |
| [JsonDisplay](/v3/reference/theming/keys/JsonDisplay.md) | key | 3 | Mono, per the data-font rule: a payload is machine-generated and its nesting |
| [ClickToCopyText](/v3/reference/theming/keys/ClickToCopyText.md) | key | 1 | Baseline row for a compact read-only value and its copy affordance. |

## Badges and keyboard hints

| Component | Kind | Slots | Description |
| --- | --- | --- | --- |
| [Badge](/v3/reference/theming/keys/Badge.md) | key | 1 | Compact slab badge with variant and numeric recipes. |
| [Kbd](/v3/reference/theming/keys/Kbd.md) | key | 1 | Single keycap chip for shortcut hints; tooltip nesting adjusts contrast. |
| [KbdGroup](/v3/reference/theming/keys/KbdGroup.md) | key | 1 | Inline shortcut sequence wrapper that clusters adjacent [Kbd.root](/v3/reference/theming/keys/Kbd.md#theme-key-Kbd-root) chips into one chord. |

## Avatars

| Component | Kind | Slots | Description |
| --- | --- | --- | --- |
| [Avatar](/v3/reference/theming/keys/Avatar.md) | key | 1 | Circular clipping frame shared by avatar image and fallback content. |
| [AvatarImage](/v3/reference/theming/keys/AvatarImage.md) | key | 1 | Square image fill that inherits clipping from [Avatar.root](/v3/reference/theming/keys/Avatar.md#theme-key-Avatar-root). |
| [AvatarFallback](/v3/reference/theming/keys/AvatarFallback.md) | key | 1 | Centered muted fallback surface for initials or placeholder content. |
| [UserAvatar](/v3/reference/theming/keys/UserAvatar.md) | key | 2 | Initials chip frame. The component supplies size inline from its size prop, while tone selects the primary or sidebar color recipe. |

## System messages

| Component | Kind | Slots | Description |
| --- | --- | --- | --- |
| [ConsequencesBullets](/v3/reference/theming/keys/ConsequencesBullets.md) | key | 8 | List wrapper for consequence rows with no browser list chrome. |
| [SystemMessageCard](/v3/reference/theming/keys/SystemMessageCard.md) | key | 9 | Centered card chassis with the named tone group used by crest descendants. |
| [LoadingHeartbeatStrip](/v3/reference/theming/keys/LoadingHeartbeatStrip.md) | key | 5 | Mono status row that separates request identity from live loading state. |
| [LoadingSkeletonGhost](/v3/reference/theming/keys/LoadingSkeletonGhost.md) | key | 2 | Bordered placeholder card with the shimmer overlay owned by this loading preview. |
| [DiagnosticStrip](/v3/reference/theming/keys/DiagnosticStrip.md) | key | 3 | Compact diagnostic definition-list grid for request, route, or session values. |
| [SuggestionList](/v3/reference/theming/keys/SuggestionList.md) | key | 13 | Outer suggestion stack; border treatment lives on [SuggestionList.list](/v3/reference/theming/keys/SuggestionList.md#theme-key-SuggestionList-list). |
| [TriedUrlCallout](/v3/reference/theming/keys/TriedUrlCallout.md) | key | 4 | Two-column callout wrapper for the attempted URL. |

## Menus

| Component | Kind | Slots | Description |
| --- | --- | --- | --- |
| [ResponsiveMenu](/v3/reference/theming/keys/ResponsiveMenu.md) | key | 3 | Full-screen mobile dialog surface with a fixed header row and a bounded body row. |
| [FieldPickerMenuList](/v3/reference/theming/keys/FieldPickerMenuList.md) | key | 4 | Eyebrow at the top of the field-picker list. The in-popover micro-eyebrow recipe (11 px / 600 / 0.04em). |

## Constraints band

| Component | Kind | Slots | Description |
| --- | --- | --- | --- |
| [ConstraintsBar](/v3/reference/theming/keys/ConstraintsBar.md) | key | 4 | Collapse wrapper. A `grid-template-rows` animation (0fr to 1fr) reveals or hides the band at the canonical interaction duration; the SFC sets the row value inline. Disabled under reduced-motion. |

## Scopes

| Component | Kind | Slots | Description |
| --- | --- | --- | --- |
| [ScopeChip](/v3/reference/theming/keys/ScopeChip.md) | key | 4 | Pill container. Info tint with a matching hairline. |
| [ScopeGroup](/v3/reference/theming/keys/ScopeGroup.md) | key | 4 | Active-scope chips strip. Muted tint a tier below the card; shares the page-chrome rhythm and carries a bottom hairline. |

## Sorting

| Component | Kind | Slots | Description |
| --- | --- | --- | --- |
| [SortChip](/v3/reference/theming/keys/SortChip.md) | key | 9 | Pill container. Neutral surface with a strong hairline so it reads against both the card and the constraints-strip tint. |
| [SortGroup](/v3/reference/theming/keys/SortGroup.md) | key | 6 | 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. |