Description list

Shows pairs of terms and details.

Workspace: Studio North
Owner: Amina Shah
Created: June 12, 2025

description-list-demo.tsx

import {  DescriptionDetail,  DescriptionList,  DescriptionTerm,} from "@/components/vip-ui/description-list";export function DescriptionListDemo() {  return (    <DescriptionList className="w-full max-w-md">      <DescriptionTerm>Workspace</DescriptionTerm>      <DescriptionDetail>Studio North</DescriptionDetail>      <DescriptionTerm>Owner</DescriptionTerm>      <DescriptionDetail>Amina Shah</DescriptionDetail>      <DescriptionTerm>Created</DescriptionTerm>      <DescriptionDetail>June 12, 2025</DescriptionDetail>    </DescriptionList>  );}

Installation

CLI

Manual

The CLI adds the files, packages, theme variables, and Tailwind plugin that this component uses. Before you run it, set up your project.

npm

yarn

pnpm

bun

pnpm dlx shadcn@latest add https://vip-ui.dev/r/vip-description-list.json

Composition

DescriptionList
Puts terms and details in two columns on wider screens.
- DescriptionTerm
- DescriptionDetailRepeats

Inline components

Long values wrap inside the detail column. Also install Badge and Link.

Status: Deployed
Domain: studio-north.example.com
Deployment ID: dpl_9f2c4e1a7b3d5f60c8e2a4b6d9f1e3c5

description-list-components-demo.tsx

import { Badge } from "@/components/vip-ui/badge";import {  DescriptionDetail,  DescriptionList,  DescriptionTerm,} from "@/components/vip-ui/description-list";import { Link } from "@/components/vip-ui/link";export function DescriptionListComponentsDemo() {  return (    <DescriptionList className="w-full max-w-md">      <DescriptionTerm>Status</DescriptionTerm>      <DescriptionDetail>        <Badge variant="success" dot>          Deployed        </Badge>      </DescriptionDetail>      <DescriptionTerm>Domain</DescriptionTerm>      <DescriptionDetail>        <Link href="https://studio-north.example.com">          studio-north.example.com        </Link>      </DescriptionDetail>      <DescriptionTerm>Deployment ID</DescriptionTerm>      <DescriptionDetail className="font-mono text-xs font-normal">        dpl_9f2c4e1a7b3d5f60c8e2a4b6d9f1e3c5      </DescriptionDetail>    </DescriptionList>  );}