UIPackage
Vue React

Labeled Value

Vue 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 React ->

Installation

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

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

Examples

Props

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

Files (2)

  • app/components/ui/labeled-value/LabeledValue.vue 0.4 kB 
    <script setup lang="ts">
import { cn } from '@/lib/utils'

const props = defineProps<{
  label: string
  value?: string
  class?: string
}>()
</script>

<template>
  <div :class="cn('flex items-center justify-between text-sm', props.class)">
    <span class="text-muted-foreground">{{ label }}</span>
    <slot>
      <span class="font-medium">{{ value }}</span>
    </slot>
  </div>
</template>
  • app/components/ui/labeled-value/index.ts 0.1 kB 
    export { default as LabeledValue } from './LabeledValue.vue'

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