Definition List

commandsRecord<string, string>: Tab label to command line, in display order.
storageKey?string: Persists the selected tab and keeps every instance with the same key in sync.
onValueChange?(value: string) => void: Called when the user picks a tab.

Installation

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

components/ui/definition-list.tsx

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.