UIPackage
Vue React

Labeled Value

React data-display
Edit on GitHub

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

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

Or with the named registry: npx shadcn@latest add @uipkge-react/labeled-value

Examples

Props

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

Files (2)

  • components/ui/labeled-value/labeled-value.tsx 0.6 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} className={cn('flex items-center justify-between text-sm', className)} {...props}>
      <span className="text-muted-foreground">{label}</span>
      {children ?? <span className="font-medium">{value}</span>}
    </div>
  ),
)
LabeledValue.displayName = 'LabeledValue'

export { LabeledValue }
  • components/ui/labeled-value/index.ts 0.1 kB 
    export { LabeledValue, type LabeledValueProps } from './labeled-value'

Raw manifest: https://react.uipkge.dev/r/react/labeled-value.json