Content

Detail List

Readable label and value pairs for detail views.

Detail List

Readable label and value pairs for detail views.

Content

Environment: Production
Last deployment: Today at 09:42

Install

npx shadcn@latest add http://localhost:3000/r/detail-list.json

Usage

"use client"

import { DetailList, DetailListItem, DetailListLabel, DetailListValue } from "@/components/ui/detail-list"

export function Example() {
  return <DetailList className="max-w-md"><DetailListItem><DetailListLabel>Environment</DetailListLabel><DetailListValue>Production</DetailListValue></DetailListItem><DetailListItem><DetailListLabel>Updated</DetailListLabel><DetailListValue>Today at 09:42</DetailListValue></DetailListItem></DetailList>
}

API

DetailListDetailListItemDetailListLabelDetailListValue

function DetailList(props: React.ComponentProps<"dl">)

function DetailListItem(props: React.ComponentProps<"div">)

function DetailListLabel(props: React.ComponentProps<"dt">)

function DetailListValue(props: React.ComponentProps<"dd">)

Source code +

import * as React from "react"
import { cn } from "cn"

function DetailList({ className, ...props }: React.ComponentProps<"dl">) {
  return <dl data-slot="detail-list" className={cn("divide-y", className)} {...props} />
}

function DetailListItem({ className, ...props }: React.ComponentProps<"div">) {
  return (
    <div data-slot="detail-list-item" className={cn("grid gap-1 py-3 sm:grid-cols-[minmax(0,12rem)_1fr] sm:gap-6", className)} {...props} />
  )
}

function DetailListLabel({ className, ...props }: React.ComponentProps<"dt">) {
  return <dt data-slot="detail-list-label" className={cn("text-sm text-muted-foreground", className)} {...props} />
}

function DetailListValue({ className, ...props }: React.ComponentProps<"dd">) {
  return (
    <dd
      data-slot="detail-list-value"
      className={cn("text-sm font-medium sm:justify-self-end sm:text-right", className)}
      {...props}
    />
  )
}

export { DetailList, DetailListItem, DetailListLabel, DetailListValue }

Registry JSON ↗