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

Installation

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

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

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

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

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

Examples

Loading interactive previews…

Props

Name	Type / Values	Default	Required
`label`	`string`	—	required
`value`	`string`	—	optional
`class`	`HTMLAttributes['class']`	—	optional

Files installed (2)

app/components/ui/labeled-value/LabeledValue.vue0.6 kB

<script setup lang="ts">
import type { HTMLAttributes } from 'vue'
import { cn } from '@/lib/utils'

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

<template>
  <div
    data-uipkge
    data-slot="labeled-value"
    :class="cn('flex items-center justify-between gap-3 text-sm', props.class)"
  >
    <span data-slot="labeled-value-label" class="text-muted-foreground shrink-0">{{ label }}</span>
    <slot>
      <span data-slot="labeled-value-value" class="min-w-0 text-right font-medium">{{ value }}</span>
    </slot>
  </div>
</template>