DescriptionList

DescriptionList shows metadata as term and value pairs.

Wrap each term and its value in a DescriptionListItem.
Format values and missing-value text yourself.
Put actions inside DescriptionListDescription.
Rows stack in narrow containers and form two columns when the list has room.

Name: Priya Shah
Email: priya@example.com

'use client';

import {
  DescriptionList,
  DescriptionListDescription,
  DescriptionListItem,
  DescriptionListTerm,
} from '@/components/nxds/components/description-list/description-list';

function ProfileDetails() {
  return (
    <DescriptionList>
      <DescriptionListItem>
        <DescriptionListTerm>Name</DescriptionListTerm>
        <DescriptionListDescription>Priya Shah</DescriptionListDescription>
      </DescriptionListItem>
      <DescriptionListItem>
        <DescriptionListTerm>Email</DescriptionListTerm>
        <DescriptionListDescription>
          priya@example.com
        </DescriptionListDescription>
      </DescriptionListItem>
    </DescriptionList>
  );
}

export default function DescriptionListDefault() {
  return <ProfileDetails />;
}

Installation

npx nxds-cli@latest add description-list

Run npx nxds-cli@latest init first if nxds isn’t set up in your app yet. See Install.

Usage

import {
  DescriptionList,
  DescriptionListDescription,
  DescriptionListItem,
  DescriptionListTerm,
} from '@/components/nxds/components/description-list/description-list';

Composition

DescriptionList
└── DescriptionListItem
    ├── DescriptionListTerm
    └── DescriptionListDescription

Examples

File metadata

List file details, with a time element for the modified date.

Filename: Research findings.pdf
Size: 2.4 MB
Modified: 24 September 2026

'use client';

import {
  DescriptionList,
  DescriptionListDescription,
  DescriptionListItem,
  DescriptionListTerm,
} from '@/components/nxds/components/description-list/description-list';

export default function DescriptionListFileMetadata() {
  return (
    <DescriptionList>
      <DescriptionListItem>
        <DescriptionListTerm>Filename</DescriptionListTerm>
        <DescriptionListDescription>
          Research findings.pdf
        </DescriptionListDescription>
      </DescriptionListItem>
      <DescriptionListItem>
        <DescriptionListTerm>Size</DescriptionListTerm>
        <DescriptionListDescription>2.4 MB</DescriptionListDescription>
      </DescriptionListItem>
      <DescriptionListItem>
        <DescriptionListTerm>Modified</DescriptionListTerm>
        <DescriptionListDescription>
          <time dateTime="2026-09-24">24 September 2026</time>
        </DescriptionListDescription>
      </DescriptionListItem>
    </DescriptionList>
  );
}

Configuration

Mix plain text and a Badge to show settings and their status.

Region: Mumbai
Backups: Enabled
Retention override: Not configured

'use client';

import { Badge } from '@/components/nxds/components/badge/badge';
import {
  DescriptionList,
  DescriptionListDescription,
  DescriptionListItem,
  DescriptionListTerm,
} from '@/components/nxds/components/description-list/description-list';

export default function DescriptionListConfiguration() {
  return (
    <DescriptionList>
      <DescriptionListItem>
        <DescriptionListTerm>Region</DescriptionListTerm>
        <DescriptionListDescription>Mumbai</DescriptionListDescription>
      </DescriptionListItem>
      <DescriptionListItem>
        <DescriptionListTerm>Backups</DescriptionListTerm>
        <DescriptionListDescription>
          <Badge variant="secondary">Enabled</Badge>
        </DescriptionListDescription>
      </DescriptionListItem>
      <DescriptionListItem>
        <DescriptionListTerm>Retention override</DescriptionListTerm>
        <DescriptionListDescription>Not configured</DescriptionListDescription>
      </DescriptionListItem>
    </DescriptionList>
  );
}

This example also needs: Badge.

Props

DescriptionList

DescriptionList adds no props of its own; it accepts the props of the element or primitive it wraps.

DescriptionListDescription

DescriptionListDescription adds no props of its own; it accepts the props of the element or primitive it wraps.

DescriptionListItem

DescriptionListItem adds no props of its own; it accepts the props of the element or primitive it wraps.

DescriptionListTerm

DescriptionListTerm adds no props of its own; it accepts the props of the element or primitive it wraps.

DescriptionList shows metadata as term and value pairs.

Wrap each term and its value in a DescriptionListItem.
Format values and missing-value text yourself.
Put actions inside DescriptionListDescription.
Rows stack in narrow containers and form two columns when the list has room.

<script setup lang="ts">
import {
  DescriptionList,
  DescriptionListDescription,
  DescriptionListItem,
  DescriptionListTerm,
} from '@/components/description-list';
</script>

<template>
  <DescriptionList>
    <DescriptionListItem>
      <DescriptionListTerm>Name</DescriptionListTerm>
      <DescriptionListDescription>Priya Shah</DescriptionListDescription>
    </DescriptionListItem>
    <DescriptionListItem>
      <DescriptionListTerm>Email</DescriptionListTerm>
      <DescriptionListDescription>priya@example.com</DescriptionListDescription>
    </DescriptionListItem>
  </DescriptionList>
</template>

Installation

Copy and paste the following code into your project.

components/description-list/DescriptionList.vue

<script setup lang="ts">
import type { HTMLAttributes } from 'vue';

import { cn } from '../../lib/utils';

export interface DescriptionListProps {
  class?: HTMLAttributes['class'];
}

const props = defineProps<DescriptionListProps>();
</script>

<template>
  <dl
    data-slot="description-list"
    :class="
      cn(
        'nx:@container/description-list nx:m-0 nx:grid nx:w-full nx:gap-2',
        props.class
      )
    "
  >
    <slot />
  </dl>
</template>

components/description-list/DescriptionListDescription.vue

<script setup lang="ts">
import type { HTMLAttributes } from 'vue';

import { cn } from '../../lib/utils';

export interface DescriptionListDescriptionProps {
  class?: HTMLAttributes['class'];
}

const props = defineProps<DescriptionListDescriptionProps>();
</script>

<template>
  <dd
    data-slot="description-list-description"
    :class="
      cn(
        'nx:m-0 nx:min-w-0 nx:flex-1 nx:wrap-anywhere nx:typography-body-default nx:text-foreground',
        props.class
      )
    "
  >
    <slot />
  </dd>
</template>

components/description-list/DescriptionListItem.vue

<script setup lang="ts">
import type { HTMLAttributes } from 'vue';

import { cn } from '../../lib/utils';

export interface DescriptionListItemProps {
  class?: HTMLAttributes['class'];
}

const props = defineProps<DescriptionListItemProps>();
</script>

<template>
  <div
    data-slot="description-list-item"
    :class="
      cn(
        'nx:flex nx:min-w-0 nx:flex-col nx:gap-x-4 nx:gap-y-1 nx:@md/description-list:flex-row nx:@md/description-list:items-baseline',
        props.class
      )
    "
  >
    <slot />
  </div>
</template>

components/description-list/DescriptionListTerm.vue

<script setup lang="ts">
import type { HTMLAttributes } from 'vue';

import { cn } from '../../lib/utils';

export interface DescriptionListTermProps {
  class?: HTMLAttributes['class'];
}

const props = defineProps<DescriptionListTermProps>();
</script>

<template>
  <dt
    data-slot="description-list-term"
    :class="
      cn(
        'nx:min-w-0 nx:@md/description-list:w-40 nx:@md/description-list:shrink-0 nx:wrap-anywhere nx:typography-label-default nx:text-muted-foreground',
        props.class
      )
    "
  >
    <slot />
  </dt>
</template>

components/description-list/index.ts

export {
  default as DescriptionList,
  type DescriptionListProps,
} from './DescriptionList.vue';
export {
  default as DescriptionListDescription,
  type DescriptionListDescriptionProps,
} from './DescriptionListDescription.vue';
export {
  default as DescriptionListItem,
  type DescriptionListItemProps,
} from './DescriptionListItem.vue';
export {
  default as DescriptionListTerm,
  type DescriptionListTermProps,
} from './DescriptionListTerm.vue';

Keep each file at the path shown above it.
Paths are relative to packages/vue/src/. Keep the same folders under your @/ root, and the imports between files work without edits.

Usage

import { DescriptionList, DescriptionListDescription, DescriptionListItem, DescriptionListTerm } from '@/components/description-list';

Examples

File metadata

List file details, with a time element for the modified date.

<script setup lang="ts">
import {
  DescriptionList,
  DescriptionListDescription,
  DescriptionListItem,
  DescriptionListTerm,
} from '@/components/description-list';
</script>

<template>
  <DescriptionList>
    <DescriptionListItem>
      <DescriptionListTerm>Filename</DescriptionListTerm>
      <DescriptionListDescription
        >Research findings.pdf</DescriptionListDescription
      >
    </DescriptionListItem>
    <DescriptionListItem>
      <DescriptionListTerm>Size</DescriptionListTerm>
      <DescriptionListDescription>2.4 MB</DescriptionListDescription>
    </DescriptionListItem>
    <DescriptionListItem>
      <DescriptionListTerm>Modified</DescriptionListTerm>
      <DescriptionListDescription>
        <time datetime="2026-09-24">24 September 2026</time>
      </DescriptionListDescription>
    </DescriptionListItem>
  </DescriptionList>
</template>

Configuration

Mix plain text and a Badge to show settings and their status.

<script setup lang="ts">
import { Badge } from '@/components/badge';
import {
  DescriptionList,
  DescriptionListDescription,
  DescriptionListItem,
  DescriptionListTerm,
} from '@/components/description-list';
</script>

<template>
  <DescriptionList>
    <DescriptionListItem>
      <DescriptionListTerm>Region</DescriptionListTerm>
      <DescriptionListDescription>Mumbai</DescriptionListDescription>
    </DescriptionListItem>
    <DescriptionListItem>
      <DescriptionListTerm>Backups</DescriptionListTerm>
      <DescriptionListDescription>
        <Badge variant="secondary">Enabled</Badge>
      </DescriptionListDescription>
    </DescriptionListItem>
    <DescriptionListItem>
      <DescriptionListTerm>Retention override</DescriptionListTerm>
      <DescriptionListDescription>Not configured</DescriptionListDescription>
    </DescriptionListItem>
  </DescriptionList>
</template>

This example also needs: Badge.

Props

DescriptionList

DescriptionList adds no props of its own; it accepts the props of the element or primitive it wraps.

DescriptionListDescription

DescriptionListDescription adds no props of its own; it accepts the props of the element or primitive it wraps.

DescriptionListItem

DescriptionListItem adds no props of its own; it accepts the props of the element or primitive it wraps.

DescriptionListTerm

DescriptionListTerm adds no props of its own; it accepts the props of the element or primitive it wraps.