# Definition List
URL: /design/components/definition-list

A spec sheet of terms and details, one hairline per row.

> For AI agents: a documentation index is available at [llms.txt](/llms.txt). Use `.md` for canonical markdown pages; `.mdx` is kept as a backwards-compatible alias on supported URL paths.

\[interactive preview component DefinitionListSpecimen omitted]

Code for DefinitionListSpecimen preview:

```tsx
"use client";

import { useState, type ReactNode } from "react";
import {
  Definition,
  DefinitionAnnotation,
  DefinitionDetails,
  DefinitionList,
  DefinitionName,
  DefinitionTerm,
} from "@/components/ui/definition-list";

function DefinitionListSpecimen(): ReactNode {
  return (
    <DefinitionList>
      <Definition>
        <DefinitionTerm>
          <DefinitionName>commands</DefinitionName>
          <DefinitionAnnotation>
            {"Record<string, string>"}
          </DefinitionAnnotation>
        </DefinitionTerm>
        <DefinitionDetails>
          Tab label to command line, in display order.
        </DefinitionDetails>
      </Definition>
      <Definition>
        <DefinitionTerm>
          <DefinitionName>storageKey?</DefinitionName>
          <DefinitionAnnotation>string</DefinitionAnnotation>
        </DefinitionTerm>
        <DefinitionDetails>
          Persists the selected tab and keeps every instance with the same key
          in sync.
        </DefinitionDetails>
      </Definition>
      <Definition>
        <DefinitionTerm>
          <DefinitionName>onValueChange?</DefinitionName>
          <DefinitionAnnotation>
            {"(value: string) => void"}
          </DefinitionAnnotation>
        </DefinitionTerm>
        <DefinitionDetails>
          Called when the user picks a tab.
        </DefinitionDetails>
      </Definition>
    </DefinitionList>
  );
}
```

## Installation

Copy the source into `components/ui/definition-list.tsx`. Registry items that depend on it install it automatically.

- code

  import type { ComponentProps } from "react"; import { cn } from "@/lib/utils"; /\*\* \* A print-register spec sheet: one hairline opens the list, one closes every \* row, and a row pairs a mono term with quiet annotations above its details. \*/ export function DefinitionList({ className, ...props }: ComponentProps<"dl">) { return ( \<dl className={cn("border-foreground/10 w-full border-t", className)} {...props} /> ); } export function Definition({ className, ...props }: ComponentProps<"div">) { return ( \<div className={cn("border-foreground/10 border-b py-3", className)} {...props} /> ); } export function DefinitionTerm({ className, ...props }: ComponentProps<"dt">) { return ( \<dt className={cn( "flex flex-wrap items-baseline gap-x-2.5 gap-y-1", className, )} {...props} /> ); } export function DefinitionName({ className, ...props }: ComponentProps<"span">) { return ( \<span className={cn( "text-foreground font-mono text-\[13px] font-medium \[font-variant-ligatures:none]", className, )} {...props} /> ); } export function DefinitionAnnotation({ className, ...props }: ComponentProps<"span">) { return ( \<span className={cn( "text-muted-foreground font-mono text-\[11px] \[font-variant-ligatures:none]", className, )} {...props} /> ); } export function DefinitionDetails({ className, ...props }: ComponentProps<"dd">) { return ( \<dd className={cn( "text-muted-foreground pt-1.5 text-sm leading-relaxed", className, )} {...props} /> ); }

* title

  components/ui/definition-list.tsx

* copyText

  import type { ComponentProps } from "react"; import { cn } from "@/lib/utils"; /\*\* \* A print-register spec sheet: one hairline opens the list, one closes every \* row, and a row pairs a mono term with quiet annotations above its details. \*/ export function DefinitionList({ className, ...props }: ComponentProps<"dl">) { return ( \<dl className={cn("border-foreground/10 w-full border-t", className)} {...props} /> ); } export function Definition({ className, ...props }: ComponentProps<"div">) { return ( \<div className={cn("border-foreground/10 border-b py-3", className)} {...props} /> ); } export function DefinitionTerm({ className, ...props }: ComponentProps<"dt">) { return ( \<dt className={cn( "flex flex-wrap items-baseline gap-x-2.5 gap-y-1", className, )} {...props} /> ); } export function DefinitionName({ className, ...props }: ComponentProps<"span">) { return ( \<span className={cn( "text-foreground font-mono text-\[13px] font-medium \[font-variant-ligatures:none]", className, )} {...props} /> ); } export function DefinitionAnnotation({ className, ...props }: ComponentProps<"span">) { return ( \<span className={cn( "text-muted-foreground font-mono text-\[11px] \[font-variant-ligatures:none]", className, )} {...props} /> ); } export function DefinitionDetails({ className, ...props }: ComponentProps<"dd">) { return ( \<dd className={cn( "text-muted-foreground pt-1.5 text-sm leading-relaxed", className, )} {...props} /> ); }

* viewportClassName

  max-h-\[450px]

- language

  tsx

- code

  import type { ComponentProps } from "react"; import { cn } from "@/lib/utils"; /\*\* \* A print-register spec sheet: one hairline opens the list, one closes every \* row, and a row pairs a mono term with quiet annotations above its details. \*/ export function DefinitionList({ className, ...props }: ComponentProps<"dl">) { return ( \<dl className={cn("border-foreground/10 w-full border-t", className)} {...props} /> ); } export function Definition({ className, ...props }: ComponentProps<"div">) { return ( \<div className={cn("border-foreground/10 border-b py-3", className)} {...props} /> ); } export function DefinitionTerm({ className, ...props }: ComponentProps<"dt">) { return ( \<dt className={cn( "flex flex-wrap items-baseline gap-x-2.5 gap-y-1", className, )} {...props} /> ); } export function DefinitionName({ className, ...props }: ComponentProps<"span">) { return ( \<span className={cn( "text-foreground font-mono text-\[13px] font-medium \[font-variant-ligatures:none]", className, )} {...props} /> ); } export function DefinitionAnnotation({ className, ...props }: ComponentProps<"span">) { return ( \<span className={cn( "text-muted-foreground font-mono text-\[11px] \[font-variant-ligatures:none]", className, )} {...props} /> ); } export function DefinitionDetails({ className, ...props }: ComponentProps<"dd">) { return ( \<dd className={cn( "text-muted-foreground pt-1.5 text-sm leading-relaxed", className, )} {...props} /> ); }

## Usage

```
import {
  Definition,
  DefinitionAnnotation,
  DefinitionDetails,
  DefinitionList,
  DefinitionName,
  DefinitionTerm,
} from "@/components/ui/definition-list";

export function Example() {
  return (
    <DefinitionList>
      <Definition>
        <DefinitionTerm>
          <DefinitionName>storageKey?</DefinitionName>
          <DefinitionAnnotation>string</DefinitionAnnotation>
        </DefinitionTerm>
        <DefinitionDetails>
          Persists the selected tab across reloads.
        </DefinitionDetails>
      </Definition>
    </DefinitionList>
  );
}
```

The list opens with a hairline and every row closes with one; a term pairs a mono name with quiet mono annotations, and the details sit below in text. Every API reference on this site renders through these parts.

## API Reference

Every part renders its native element and accepts that element's props.

| Part                   | Element | Role                                       |
| ---------------------- | ------- | ------------------------------------------ |
| `DefinitionList`       | `dl`    | The sheet, opened by a hairline.           |
| `Definition`           | `div`   | One row, closed by a hairline.             |
| `DefinitionTerm`       | `dt`    | The term line; wraps name and annotations. |
| `DefinitionName`       | `code`  | The term itself, in mono ink.              |
| `DefinitionAnnotation` | `code`  | A quiet mono note: a type, a default.      |
| `DefinitionDetails`    | `dd`    | The description below the term.            |