Labeled Value

labeled-valueui

Read-only label/value pair for surface details — "Email: jane@…" or "Status: Active". Compose them in a Data List, a Stat Card, or a Section Card detail row.

Also available for Vue ->

Installation

$pnpm dlx shadcn@latest add https://uipkge.dev/r/react/labeled-value.json

$npx shadcn@latest add https://uipkge.dev/r/react/labeled-value.json

$yarn dlx shadcn@latest add https://uipkge.dev/r/react/labeled-value.json

$bunx shadcn@latest add https://uipkge.dev/r/react/labeled-value.json

Named registry:npx shadcn@latest add @uipkge-react/labeled-valueInstalls to:components/ui/labeled-value/

Examples

Loading interactive previews…

Props

Name	Type / Values	Default	Required
`label`	`string`	—	required
`value`	`string`	—	optional

Files installed (2)

components/ui/labeled-value/labeled-value.tsx0.8 kB

import * as React from 'react'
import { cn } from '@/lib/utils'

export interface LabeledValueProps extends React.HTMLAttributes<HTMLDivElement> {
  label: string
  value?: string
}

const LabeledValue = React.forwardRef<HTMLDivElement, LabeledValueProps>(
  ({ label, value, className, children, ...props }, ref) => (
    <div
      ref={ref}
      data-uipkge=""
      data-slot="labeled-value"
      className={cn('flex items-center justify-between gap-3 text-sm', className)}
      {...props}
    >
      <span data-slot="labeled-value-label" className="text-muted-foreground shrink-0">
        {label}
      </span>
      {children ?? (
        <span data-slot="labeled-value-value" className="min-w-0 text-right font-medium">
          {value}
        </span>
      )}
    </div>
  ),
)
LabeledValue.displayName = 'LabeledValue'

export { LabeledValue }