A <dl> compound — one <dt> (fixed SemiBold) + one <dd> per pair. layout picks stacked (dt above dd, dd indented) or inline (dt : dd side by side in a two-column grid), matching the two layouts in the Figma component set. Consumers compose multiple Term/Details pairs to form a full description list. row-gap/column-gap/details-indent are density-scaled Context tokens; inline's pair-to-pair gap reuses List's item-gap directly, matching the Figma binding.
primitiv add description-list installs it whichever mode you are reading.Preview
import { DescriptionList } from "@/components/ui/description-list";
<DescriptionList layout="stacked" size="md"> <DescriptionList.Term>Version</DescriptionList.Term> <DescriptionList.Details>0.1.32</DescriptionList.Details> <DescriptionList.Term>License</DescriptionList.Term> <DescriptionList.Details>MIT</DescriptionList.Details></DescriptionList>Density is set by a data-density ancestor — the Context system, not a DescriptionList prop.
npx primitiv add description-listpnpm dlx primitiv add description-listyarn dlx primitiv add description-listbunx primitiv add description-listImport
import { DescriptionList } from "@/components/ui/description-list";No headless primitive — this one ships only as a copied styled surface, so primitiv add is the only way in, whichever mode you are reading.
<DescriptionList> <DescriptionList.Term /> <DescriptionList.Details /></DescriptionList>Extends HTMLDListElement — every native attribute of that element is accepted and forwarded.
| Prop | Type | Default | Description |
|---|---|---|---|
| size | "xs" | "sm" | "md" | "lg" | "xl" | md | Term + details text size; data-density scales each size further. |
| layout | "stacked" | "inline" | stacked | Pair arrangement, matching Figma's Layout axis. |
Headless only — the copied file renders this part for you and exports no separate component, so there is nothing to import under Styled.
Extends HTMLElement — every native attribute of that element is accepted and forwarded.
No props of its own.
Headless only — the copied file renders this part for you and exports no separate component, so there is nothing to import under Styled.
Extends HTMLElement — every native attribute of that element is accepted and forwarded.
No props of its own.
--primitiv-description-list-row-gap--primitiv-description-list-column-gap--primitiv-description-list-pair-gap--primitiv-description-list-details-indent--primitiv-description-list-color--primitiv-description-list-font-family--primitiv-description-list-font-size--primitiv-description-list-font-weight--primitiv-description-list-line-height<dl>/<dt>/<dd>, so assistive tech announces the term/description association — the styling never replaces that structure.Term and one Details per pair in source order; the association is positional in a <dl>, so keeping them adjacent is what makes the pairing correct for a screen reader.layout picks how each pair reads: stacked puts the <dd> under its <dt> (indented) for longer values, inline sets them dt : dd side by side for a compact key/value table — the metadata block on a settings page or a package summary.
import { DescriptionList } from "@/components/ui/description-list";
<DescriptionList layout="inline"> <DescriptionList.Term>Version</DescriptionList.Term> <DescriptionList.Details>0.1.32</DescriptionList.Details></DescriptionList>