HomeDocsComponentsBlocksChartsThemes
Introduction
  • Introduction
  • Installation
  • Themes
  • llms.txt
Components
  • Accordion
  • Alert
  • Alert Dialog
  • Amount
  • Aspect Ratio
  • Audio Player
  • Avatar
  • Avatar Upload
  • Badge
  • Banner
  • Breadcrumb
  • Button
  • Button Group
  • Calendar
  • Card
  • Carousel
  • Chart
  • Checkbox
  • Code Block
  • Collapsible
  • Color Picker
  • Combobox
  • Command
  • Context Menu
  • Copy Button
  • Countdown
  • Data Grid
  • Data Table
  • Date Picker
  • Date Range Picker
  • Description List
  • Device Mockup
  • Dialog
  • Direction
  • Dot Loader
  • Drawer
  • Dropdown Menu
  • Empty
  • Field
  • File Upload
  • Hover Card
  • Input
  • Input Group
  • Input OTP
  • Item
  • Kanban
  • Kbd
  • Label
  • Meter
  • Multi Select
  • Native Select
  • Number Field
  • Pagination
  • Password Strength
  • Phone Input
  • Popover
  • Progress
  • Progress Circle
  • Radio Group
  • Rating
  • Resizable
  • Responsive Dialog
  • Rich Text Editor
  • Scroll Area
  • Segmented Control
  • Select
  • Separator
  • Sheet
  • Sidebar
  • Signature
  • Skeleton
  • Slider
  • Sonner
  • Sortable
  • Spinner
  • Stat
  • Stepper
  • Switch
  • Table
  • Tabs
  • Tag Input
  • Terminal
  • Textarea
  • Time Field
  • Timeline
  • Toast
  • Toggle
  • Toggle Group
  • Tooltip
  • Tree
  • Typography
  • Video Player
  • Window Mockup
AI
  • Message Scroller
  • Message
  • Bubble
  • Marker
  • Attachment
  • Questionnaire
  • Composer
  • Reasoning
  • Tool Call
  • Approval Card
  • Citations
Blocks
  • Airtable
  • Airtable Kanban
  • ClickUp List
  • ClickUp Kanban
  • Repeatable Group
  • Command Palette
  • Sign In and Sign Up
  • Availability Scheduler
  • AI Chat
  • Action Bar
  • Notion
  • Banking
  • Lineup Builder
  • Sports Score
  • Strava
  • Sheets
  • Notices
  • Settings
  • Billing
Utilities
  • motion
  • sounds
  • scroll-fade
  • shimmer
Another UI. Built on shadcn/ui with Phosphor icons.

Description List

PreviousNext

Label and value pairs for records and summaries, with copyable values, editing in place and a muted "Not set" for empty values.

Base UIReact AriaRadix UI
Harbour Coffee Co.
Client since March 2024
Contact
Maya Okafor
Email
accounts@harbourcoffee.ca
Phone
(604) 555-0142
GST number
81234 5678 RT0001
Payment terms
PO number
Status
Active
Address
2210 Waterfront Road, Unit 4
Vancouver, BC V6B 1A1
Invoice INV-1042
Website retainer, October
Issued
Oct 1, 2026
Due
Oct 31, 2026
Status
Sent
Subtotal
$4,800.00
GST (5%)
$240.00
Total
$5,040.00

Installation#

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

Usage#

import {
  DescriptionDetails,
  DescriptionItem,
  DescriptionList,
  DescriptionTerm,
} from "@/components/ui/description-list"
<DescriptionList divided>
  <DescriptionItem>
    <DescriptionTerm icon={EnvelopeSimpleIcon}>Email</DescriptionTerm>
    <DescriptionDetails copyable>accounts@harbourcoffee.ca</DescriptionDetails>
  </DescriptionItem>
  <DescriptionItem>
    <DescriptionTerm hint="Shown on every invoice.">GST number</DescriptionTerm>
    <DescriptionDetails copyable>81234 5678 RT0001</DescriptionDetails>
  </DescriptionItem>
  <DescriptionItem>
    <DescriptionTerm>Payment terms</DescriptionTerm>
    <DescriptionDetails editable value={terms} onValueChange={setTerms} />
  </DescriptionItem>
</DescriptionList>

Parts#

  • DescriptionList. The dl. orientation puts terms beside their values (horizontal, the default) or above them (vertical). columns takes 1, 2 or 3 and folds down to one column when the list itself is narrow, not the screen. divided adds a line between items and density takes comfortable or compact.
  • DescriptionItem. Groups one term with its value.
  • DescriptionTerm. The dt. Takes an optional icon and a hint, shown in a tooltip beside the label.
  • DescriptionDetails. The dd. Long values wrap instead of scrolling. Empty values show placeholder, "Not set" by default.
  • Copying. Add copyable to show a copy button on hover or focus. It is always visible on touch screens. Pass a string to copy something other than the text shown, such as a phone number without formatting.
  • Editing. Add editable with value and onValueChange. Click the value to edit it, Enter or leaving the field saves, and Escape cancels.
Date Range PickerDevice Mockup

On This Page

InstallationUsageParts