Skip to content

DescriptionList

Key and value rows for the details of one thing: a server’s endpoint, auth, transport, when it was added.

DataServer-rendered

Examples

Server details

Use mono for values people copy into another program: URLs, ids, hashes.

Light
Endpoint
https://mcp.sentry.dev/mcp
Status
Connected
Transport
SSE
Added
12 October 2026
Dark
Endpoint
https://mcp.sentry.dev/mcp
Status
Connected
Transport
SSE
Added
12 October 2026
Example
<DescriptionList>
  <DescriptionItem term="Endpoint" mono>https://mcp.sentry.dev/mcp</DescriptionItem>
  <DescriptionItem term="Status"><Lamp state="live" label="Connected" showLabel /></DescriptionItem>
  <DescriptionItem term="Transport"><Badge mono>SSE</Badge></DescriptionItem>
  <DescriptionItem term="Added">12 October 2026</DescriptionItem>
</DescriptionList>

Compact

Tighter rows for side panels and cards.

Skill
pdf-forms
Files
3
Loaded
41 times this week
Example
<DescriptionList density="compact">
  <DescriptionItem term="Skill" mono>pdf-forms</DescriptionItem>
  <DescriptionItem term="Files">3</DescriptionItem>
  <DescriptionItem term="Loaded">41 times this week</DescriptionItem>
</DescriptionList>

Usage

Usage
import { DescriptionList, DescriptionItem } from '@switchboard/ui'

<DescriptionList>
  <DescriptionItem term="Endpoint" mono>{server.url}</DescriptionItem>
  <DescriptionItem term="Added">{formatDate(server.createdAt)}</DescriptionItem>
</DescriptionList>

Props

Every component also takes mix, for css() and mixins applied after its own style.

DescriptionList

DescriptionList props
PropTypeDefaultDescription
density'default' | 'compact''default'Row padding: 10px or 6px.

Also accepts every <dl> attribute.

DescriptionItem

DescriptionItem props
PropTypeDefaultDescription
term*RemixNode–The key, rendered in a <dt>.
monoboolean–Plex Mono value, for URLs, ids and hashes.
childrenRemixNode–The value, rendered in a <dd>.

Accessibility

  • A native <dl> with each <dt>/<dd> pair wrapped in a <div>, which HTML allows; screen readers announce it as a list of terms.
  • Long values wrap anywhere instead of overflowing, and on phones the term sits above its value.

Guidance

Do

  • Keep terms to one or two words.
  • Put badges and lamps in the value, not the term.

Don’t

  • Use a description list for editable settings; use Fields.
  • Nest a DescriptionList inside a value.